---
// "Por qué elegirnos" — Uniform 3-column grid with glass cards
import SectionEyebrow from './SectionEyebrow.astro';
import type { TranslationKey } from '@/i18n/ui';
import MateIcon from './icons/MateIcon.astro';
import SovereigntyIcon from './icons/SovereigntyIcon.astro';
import GlobeIcon from './icons/GlobeIcon.astro';

interface Props {
  t: (key: TranslationKey) => string;
}
const { t } = Astro.props;

const items = [
  { Icon: MateIcon, titleKey: 'diff.support.title' as TranslationKey, bodyKey: 'diff.support.body' as TranslationKey },
  { Icon: SovereigntyIcon, titleKey: 'diff.sovereignty.title' as TranslationKey, bodyKey: 'diff.sovereignty.body' as TranslationKey },
  { Icon: GlobeIcon, titleKey: 'diff.infra.title' as TranslationKey, bodyKey: 'diff.infra.body' as TranslationKey },
];
---
<section class="py-24 md:py-32" style="background: var(--hds-bg);" id="por-que-elegirnos">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="max-w-3xl mb-16 md:mb-20 reveal">
      <SectionEyebrow text={t('diff.eyebrow')} />
      <h2 class="font-display leading-tight mt-5" style="font-size: clamp(2rem, 5vw, 3.5rem); color: var(--hds-fg);">
        {t('diff.title')}
      </h2>
      <p class="text-lg mt-5 max-w-2xl" style="color: var(--hds-fg-soft);">
        {t('diff.subtitle')}
      </p>
    </div>

    <div class="diff-grid">
      {items.map((item, i) => (
        <article class="glass-card diff-card p-8 flex flex-col" data-diff-index={i}>
          <div class="flex flex-col flex-grow">
            <div class="icon-circle mb-6">
              <item.Icon class="w-7 h-7" />
            </div>
            <h3 class="text-xl md:text-2xl font-semibold mb-4" style="color: var(--hds-fg);">
              {t(item.titleKey)}
            </h3>
            <p class="text-[15px] leading-relaxed" style="color: var(--hds-fg-soft);">
              {t(item.bodyKey)}
            </p>
          </div>
        </article>
      ))}
    </div>
  </div>
</section>

<script>
  import gsap from 'gsap';
  import { ScrollTrigger } from 'gsap/ScrollTrigger';

  gsap.registerPlugin(ScrollTrigger);

  document.querySelectorAll('.diff-card').forEach((card) => {
    card.addEventListener('mousemove', (e) => {
      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
      const x = ((e.clientX - rect.left) / rect.width) * 100;
      const y = ((e.clientY - rect.top) / rect.height) * 100;
      (e.currentTarget as HTMLElement).style.setProperty('--mouse-x', `${x}%`);
      (e.currentTarget as HTMLElement).style.setProperty('--mouse-y', `${y}%`);
    });
  });

  const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (!prefersReduced) {
    gsap.from('.diff-card', {
      scrollTrigger: {
        trigger: '.diff-grid',
        start: 'top 80%',
        toggleActions: 'play none none none',
      },
      opacity: 0,
      y: 40,
      duration: 0.7,
      stagger: 0.12,
      ease: 'power3.out',
      clearProps: 'transform,opacity',
    });
  }
</script>

<style>
  .diff-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  @media (min-width: 768px) {
    .diff-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      align-items: stretch;
    }
  }

  .diff-card {
    min-height: 240px;
  }
</style>