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

interface Benefit {
  icon: SafeHtml;
  title: string;
  description: string;
}

@Component({
  selector: 'app-benefits-section',
  standalone: true,
  imports: [CommonModule, InViewportDirective],
  templateUrl: './benefits-section.component.html',
  styleUrls: ['./benefits-section.component.scss'],
  animations: [staggeredFadeInUp]
})
export class BenefitsSectionComponent {
  shieldIcon: SafeHtml;
  zapIcon: SafeHtml;
  heartHandshakeIcon: SafeHtml;
  trendingUpIcon: SafeHtml;

  benefits: Benefit[];
  isInView = false;

  constructor(private sanitizer: DomSanitizer) {
    this.shieldIcon = 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="lucide lucide-shield">
        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
      </svg>
    `);

    this.zapIcon = 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="lucide lucide-zap">
        <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
      </svg>
    `);

    this.heartHandshakeIcon = 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="lucide lucide-heart-handshake">
        <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />
        <path d="M12 5 9.04 7.96a2.17 2.17 0 0 0 0 3.08V19" />
        <path d="M18 14h-7" />
        <path d="M17 18h-7" />
      </svg>
    `);

    this.trendingUpIcon = 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="lucide lucide-trending-up"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline><polyline points="16 7 22 7 22 13"></polyline></svg>
    `);

    this.benefits = [
      {
        icon: this.shieldIcon,
        title: "Own Your Customers",
        description: "Build direct relationships. No marketplace taking your data or charging commissions.",
      },
      {
        icon: this.zapIcon,
        title: "24/7 AI Support",
        description: "Never miss an order. Our AI handles customer inquiries around the clock.",
      },
      {
        icon: this.heartHandshakeIcon,
        title: "Zero Commissions",
        description: "Keep 100% of your revenue. Pay only a flat monthly fee, nothing more.",
      },
      {
        icon: this.trendingUpIcon,
        title: "Grow Your Business",
        description: "Analytics, insights, and tools to help you make data-driven decisions.",
      },
    ];
  }

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