import {
  AfterViewInit,
  Component,
  ElementRef,
  PLATFORM_ID,
  QueryList,
  ViewChildren,
  inject,
} from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { cssCode, cssLock, cssDatabase, cssBrowser } from '@ng-icons/css.gg';
import { OpenPanelTrackDirective } from '@core/directives/openpanel.directive';

interface Feature {
  id: number;
  claim: string;
  description: string;
  benefit: string;
  icon: string;
}

@Component({
  selector: 'app-features-section',
  imports: [NgIcon, OpenPanelTrackDirective],
  viewProviders: [provideIcons({ cssCode, cssLock, cssDatabase, cssBrowser })],
  templateUrl: './features-section.component.html',
  styleUrl: './features-section.component.scss',
})
export class FeaturesSectionComponent implements AfterViewInit {
  @ViewChildren('cardRef') cardElements!: QueryList<ElementRef<HTMLElement>>;
  private readonly platformId = inject(PLATFORM_ID);

  featuresList: Feature[] = [
    {
      id: 1,
      claim: 'Blitzschnelle Ladezeiten',
      description:
        'Handgefertigter Code statt träger WordPress-Templates. Ihre Seite lädt in unter einer Sekunde – und das merken Google und Ihre Besucher.',
      benefit: 'Besseres Google-Ranking & weniger Absprünge',
      icon: 'cssCode',
    },
    {
      id: 2,
      claim: 'Maximale Sicherheit',
      description:
        'Kein Plugin-Dschungel, keine veralteten CMS-Versionen. Maximale Rechtskonformität durch eRecht24-Integration und eine klar strukturierte Infrastruktur.',
      benefit: 'Kein Risiko durch Sicherheitslücken',
      icon: 'cssLock',
    },
    {
      id: 3,
      claim: 'Europäisches Hosting',
      description:
        'Hosting und alle Services laufen ausschließlich auf europäischen Servern – vollständig DSGVO-konform und ohne US-Cloudabhängigkeit.',
      benefit: '100% DSGVO-konform & datenschutzrechtlich sicher',
      icon: 'cssDatabase',
    },
    {
      id: 4,
      claim: 'Einfaches Dashboard',
      description:
        'Ein Verwaltungsportal für alles: Inhalte pflegen, Anfragen verwalten und Ihren Webauftritt jederzeit selbst aktualisieren – ohne Programmierkenntnisse.',
      benefit: 'Zeitersparnis & Unabhängigkeit',
      icon: 'cssBrowser',
    },
  ];

  ngAfterViewInit(): void {
    if (!isPlatformBrowser(this.platformId)) return;

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add('is-visible');
            observer.unobserve(entry.target);
          }
        });
      },
      { threshold: 0.1 }
    );

    this.cardElements.forEach((el) => observer.observe(el.nativeElement));
  }
}
