---
const heroFeatures = [
  {
    icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />',
    title: 'M3U / M3U8 Playlists',
    description: 'Import playlists from files or URLs with full M3U and M3U8 support.',
  },
  {
    icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />',
    title: 'Xtream Codes API',
    description: 'Connect to Xtream Codes providers with live TV, VOD, and series.',
  },
  {
    icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />',
    title: 'Electronic Program Guide',
    description: 'XMLTV-based EPG with current and upcoming program information.',
  },
  {
    icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /><path stroke-linecap="round" stroke-linejoin="round" d="M12 18v3" />',
    title: 'Cross-Platform',
    description: 'Runs on macOS, Windows, Linux as a desktop app or PWA in any browser.',
  },
];

const carouselFeatures = [
  {
    icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.858 15.355-5.858 21.213 0" />',
    title: 'Stalker Portals',
    description: 'Browse and stream content from Stalker/Ministra portal providers.',
  },
  {
    icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />',
    title: 'Favorites & History',
    description: 'Mark channels as favorites and keep track of recently watched.',
  },
  {
    icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />',
    title: 'Search & Filter',
    description: 'Quickly find channels across playlists with full-text search.',
  },
  {
    icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />',
    title: 'Multi-Language',
    description: 'Available in 16 languages with community-contributed translations.',
  },
  {
    icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" /><path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />',
    title: 'External Players',
    description: 'Open streams in MPV, VLC, or other external players from the app.',
  },
  {
    icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />',
    title: 'Light & Dark Themes',
    description: 'Choose between light and dark themes for comfortable viewing.',
  },
  {
    icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />',
    title: 'Remote Control',
    description: 'Control the player from your phone with the built-in remote.',
  },
  {
    icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />',
    title: 'Privacy First',
    description: 'No tracking, no analytics. Your data stays on your device.',
  },
];
---

<section id="features" class="relative py-28">
  <hr class="section-divider mb-28" />

  <div class="relative z-10 mx-auto max-w-6xl px-6">
    <!-- Editorial header: left-aligned -->
    <div class="max-w-xl">
      <span class="font-mono text-xs uppercase tracking-[0.2em] text-accent-500">
        Features
      </span>
      <h2 class="mt-4 font-display text-3xl font-bold tracking-tight text-surface-50 sm:text-4xl lg:text-5xl">
        Everything <em class="font-medium text-accent-400" style="font-style: italic;">you need</em>
      </h2>
      <p class="mt-4 text-lg text-surface-400">
        A full-featured IPTV player packed with the tools for the best viewing experience.
      </p>
    </div>

    <!-- Hero feature cards: 2x2 grid -->
    <div class="stagger-children mt-16 grid grid-cols-1 gap-5 sm:grid-cols-2" data-stagger>
      {
        heroFeatures.map((feature, i) => (
          <div class="feature-card group relative overflow-hidden rounded-lg border border-dashed border-surface-600/60 bg-gradient-to-br from-surface-900/80 via-surface-950/60 to-surface-900/40 p-7 transition-all duration-500 hover:border-accent-500/40 hover:shadow-[0_0_30px_rgba(32,168,168,0.08)]">

            <!-- Background watermark icon — large, rotated, partially clipped -->
            <div class={`feature-watermark pointer-events-none absolute -bottom-6 -right-4 opacity-[0.04] transition-all duration-700 ease-out group-hover:opacity-[0.1] ${i % 2 === 0 ? 'watermark-left' : 'watermark-right'}`}>
              <svg class="h-36 w-36 text-accent-400 sm:h-44 sm:w-44" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="0.7">
                <Fragment set:html={feature.icon} />
              </svg>
            </div>
            <!-- Watermark gradient mask — fades icon into card bg from top-left -->
            <div class="pointer-events-none absolute inset-0 bg-gradient-to-br from-surface-900/95 via-surface-950/40 to-transparent" />

            <!-- CRT scanline overlay on hover -->
            <div class="pointer-events-none absolute inset-0 z-10 opacity-0 transition-opacity duration-500 group-hover:opacity-100" style="background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(32,168,168,0.015) 2px, rgba(32,168,168,0.015) 4px);" />

            <!-- Card content -->
            <div class="relative z-[1]">
              <!-- Mono label + accent line -->
              <div class="mb-5 flex items-center gap-3">
                <span class="font-mono text-[10px] font-medium uppercase tracking-[0.2em] text-accent-500/70 transition-colors duration-300 group-hover:text-accent-400">0{i + 1}</span>
                <span class="h-px flex-1 bg-gradient-to-r from-accent-500/20 to-transparent transition-colors duration-300 group-hover:from-accent-500/40" />
              </div>

              <h3 class="font-display text-xl font-bold tracking-tight text-surface-100 transition-colors duration-300 group-hover:text-surface-50 sm:text-2xl">
                {feature.title}
              </h3>
              <p class="mt-2.5 max-w-[85%] text-sm leading-relaxed text-surface-500 transition-colors duration-300 group-hover:text-surface-400">
                {feature.description}
              </p>
            </div>
          </div>
        ))
      }
    </div>

    <!-- Sub-header between hero and carousel -->
    <div class="mt-16">
      <span class="font-mono text-xs uppercase tracking-[0.15em] text-surface-500">
        And more
      </span>
    </div>
  </div>

  <!-- Carousel: full-width infinite marquee -->
  <div class="relative mt-6 overflow-hidden opacity-0" data-carousel>
    <!-- Gradient masks: left and right fade -->
    <div class="pointer-events-none absolute inset-y-0 left-0 z-10 w-24 bg-gradient-to-r from-surface-950 to-transparent sm:w-32" />
    <div class="pointer-events-none absolute inset-y-0 right-0 z-10 w-24 bg-gradient-to-l from-surface-950 to-transparent sm:w-32" />

    <!-- Marquee track -->
    <div class="carousel-track flex w-max gap-4 py-4" aria-label="Additional features">
      <!-- First set of cards -->
      {
        carouselFeatures.map((feature, i) => (
          <div class="group relative w-64 shrink-0 overflow-hidden rounded-lg border border-dashed border-surface-600/60 bg-gradient-to-b from-surface-900/60 to-surface-950/40 p-5 transition-all duration-500 hover:border-accent-500/40 hover:shadow-[0_0_24px_rgba(32,168,168,0.06)]">
            <div class="relative mb-3.5 inline-block">
              <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-accent-500/[0.08] ring-1 ring-accent-500/20 transition-all duration-500 group-hover:bg-accent-500/[0.14] group-hover:ring-accent-500/35 group-hover:shadow-[0_0_14px_rgba(32,168,168,0.12)]">
                <svg class="h-5 w-5 text-accent-400 transition-all duration-500 group-hover:text-accent-300 group-hover:drop-shadow-[0_0_4px_rgba(32,168,168,0.4)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                  <Fragment set:html={feature.icon} />
                </svg>
              </div>
              <div class="absolute -right-0.5 -top-0.5 h-1 w-1 rounded-full bg-accent-500/50 transition-colors duration-300 group-hover:bg-accent-400" />
            </div>
            <h3 class="font-display text-sm font-semibold tracking-tight text-surface-100 transition-colors duration-300 group-hover:text-surface-50">{feature.title}</h3>
            <p class="mt-1.5 text-xs leading-relaxed text-surface-500 transition-colors duration-300 group-hover:text-surface-400">
              {feature.description}
            </p>
          </div>
        ))
      }
      <!-- Duplicate set for seamless loop -->
      {
        carouselFeatures.map((feature, i) => (
          <div class="group relative w-64 shrink-0 overflow-hidden rounded-lg border border-dashed border-surface-600/60 bg-gradient-to-b from-surface-900/60 to-surface-950/40 p-5 transition-all duration-500 hover:border-accent-500/40 hover:shadow-[0_0_24px_rgba(32,168,168,0.06)]" aria-hidden="true">
            <div class="relative mb-3.5 inline-block">
              <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-accent-500/[0.08] ring-1 ring-accent-500/20 transition-all duration-500 group-hover:bg-accent-500/[0.14] group-hover:ring-accent-500/35 group-hover:shadow-[0_0_14px_rgba(32,168,168,0.12)]">
                <svg class="h-5 w-5 text-accent-400 transition-all duration-500 group-hover:text-accent-300 group-hover:drop-shadow-[0_0_4px_rgba(32,168,168,0.4)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                  <Fragment set:html={feature.icon} />
                </svg>
              </div>
              <div class="absolute -right-0.5 -top-0.5 h-1 w-1 rounded-full bg-accent-500/50 transition-colors duration-300 group-hover:bg-accent-400" />
            </div>
            <h3 class="font-display text-sm font-semibold tracking-tight text-surface-100 transition-colors duration-300 group-hover:text-surface-50">{feature.title}</h3>
            <p class="mt-1.5 text-xs leading-relaxed text-surface-500 transition-colors duration-300 group-hover:text-surface-400">
              {feature.description}
            </p>
          </div>
        ))
      }
    </div>
  </div>
</section>

<script>
  // Stagger animation for hero grid on scroll
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('stagger-visible');
        observer.unobserve(entry.target);
      }
    });
  }, { threshold: 0.1 });
  document.querySelectorAll('[data-stagger]').forEach((el) => observer.observe(el));

  // Carousel fade-in on scroll
  const carouselEl = document.querySelector('[data-carousel]');
  if (carouselEl) {
    const co = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.remove('opacity-0');
          e.target.classList.add('animate-fade-in');
          co.unobserve(e.target);
        }
      });
    }, { threshold: 0.05 });
    co.observe(carouselEl);
  }
</script>

<style>
  .watermark-left {
    transform: rotate(-12deg) scale(1);
  }
  .watermark-right {
    transform: rotate(12deg) scale(1);
  }
  .feature-card:hover .watermark-left {
    transform: rotate(-10deg) scale(1.12);
  }
  .feature-card:hover .watermark-right {
    transform: rotate(10deg) scale(1.12);
  }
</style>