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

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

  includes = [
    "WhatsApp Business integration",
    "AI chat assistant (24/7)",
    "Store dashboard",
    "Product & order management",
    "Customer database",
    "Delivery app",
  ];

  constructor(private sanitizer: DomSanitizer) {
    this.checkIcon = this.sanitizer.bypassSecurityTrustHtml(`
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 text-primary">
        <path d="M20 6 9 17l-5-5"/>
      </svg>
    `);
    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;
    }
  }
}
