import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { RouterLink } from '@angular/router';
import { fadeInLeft, fadeInRight } from '../../../../shared/animations';
import { InViewportDirective } from '../../../../shared/directives/in-viewport.directive';

@Component({
  selector: 'app-cta-section',
  standalone: true,
  imports: [CommonModule, RouterLink, InViewportDirective],
  templateUrl: './cta-section.component.html',
  styleUrls: ['./cta-section.component.scss'],
  animations: [fadeInLeft, fadeInRight]
})
export class CtaSectionComponent {
  arrowRightIcon: SafeHtml;
  isInView = false;

  constructor(private sanitizer: DomSanitizer) {
    this.arrowRightIcon = this.sanitizer.bypassSecurityTrustHtml(`
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-2">
        <path d="M5 12h14"/>
        <path d="m12 5 7 7-7 7"/>
      </svg>
    `);
  }

  onInViewport(inViewport: boolean) {
    if (inViewport && !this.isInView) {
      this.isInView = true;
    }
  }
}
