---
import type { TranslationKey } from '@/i18n/ui';

interface Props {
  t: (key: TranslationKey) => string;
  whatsappUrl: string;
}

const { t, whatsappUrl } = Astro.props;
---
<section
  id="hero"
  class="relative overflow-hidden flex items-center"
  style="min-height: 100dvh; background: var(--hds-bg);"
>
  <!-- Atmospheric radial gradient -->
  <div
    class="absolute inset-0 pointer-events-none"
    style="background: var(--hds-gradient-hero);"
    aria-hidden="true"
  ></div>

  <!-- Background photo: Punta del Este coastline -->
  <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
    <picture>
      <source type="image/webp" srcset="/images/photos/punta-del-este-1920x1080.webp 1920w, /images/photos/punta-del-este-750.webp 750w" sizes="100vw" />
      <img
        src="/images/photos/punta-del-este-1920x1080.jpg"
        alt=""
        width="1920" height="1080"
        class="w-full h-full object-cover"
        style="opacity: 0.55;"
        loading="eager"
        fetchpriority="high"
        decoding="async"
      />
    </picture>
    <!-- Gradient overlay for text readability -->
    <div class="absolute inset-0" style="background: linear-gradient(180deg, var(--hds-bg) 0%, transparent 15%, transparent 75%, var(--hds-bg) 100%);"></div>
  </div>

  <!-- Floating decorative shapes (parallax) -->
  <div class="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
    <div id="hero-float-top" class="absolute" style="top: 15%; right: 12%;">
      <svg width="120" height="120" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <rect x="0" y="0" width="12" height="12" fill="#EE7623" rx="1"/>
        <rect x="14" y="0" width="12" height="12" fill="#FA9F5C" rx="1"/>
        <rect x="28" y="0" width="12" height="12" fill="#FFCBA1" rx="1"/>
        <rect x="0" y="14" width="12" height="12" fill="#FA9F5C" rx="1"/>
        <rect x="14" y="14" width="12" height="12" fill="#EE7623" rx="1"/>
        <rect x="28" y="14" width="12" height="12" fill="#FA9F5C" rx="1"/>
        <rect x="0" y="28" width="12" height="12" fill="#FFCBA1" rx="1"/>
        <rect x="14" y="28" width="12" height="12" fill="#FA9F5C" rx="1"/>
        <rect x="28" y="28" width="12" height="12" fill="#EE7623" rx="1"/>
      </svg>
    </div>
    <div id="hero-float-mid" class="absolute" style="top: 55%; left: 8%;">
      <svg width="80" height="80" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
        <rect x="0" y="0" width="10" height="10" fill="#FA9F5C" rx="1"/>
        <rect x="12" y="0" width="10" height="10" fill="#EE7623" rx="1"/>
        <rect x="0" y="12" width="10" height="10" fill="#FFCBA1" rx="1"/>
        <rect x="12" y="12" width="10" height="10" fill="#FA9F5C" rx="1"/>
        <rect x="0" y="24" width="10" height="10" fill="#EE7623" rx="1"/>
        <rect x="12" y="24" width="10" height="10" fill="#FFCBA1" rx="1"/>
      </svg>
    </div>
    <div id="hero-float-bot" class="absolute" style="bottom: 20%; right: 20%;">
      <svg width="64" height="64" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
        <rect x="0" y="0" width="8" height="8" fill="#EE7623" rx="1"/>
        <rect x="10" y="0" width="8" height="8" fill="#FFCBA1" rx="1"/>
        <rect x="0" y="10" width="8" height="8" fill="#FA9F5C" rx="1"/>
        <rect x="10" y="10" width="8" height="8" fill="#EE7623" rx="1"/>
      </svg>
    </div>
  </div>

  <!-- Decorative cloud (subtle) -->
  <div
    id="hero-glass-ring"
    class="absolute pointer-events-none opacity-0"
    style="width: min(520px, 75vw); top: 12%; right: 5%; filter: blur(1px);"
    aria-hidden="true"
  >
    <svg viewBox="0 0 240 140" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: auto;">
      <path
        class="cloud-p1"
        d="M 55,110 C 30,110 18,92 25,72 C 12,60 18,40 38,38 C 44,18 68,16 80,30 C 92,12 118,16 125,34 C 140,22 165,28 170,46 C 190,44 205,62 198,78 C 215,82 210,110 190,110 Z"
        fill="white"
      />
      <path
        class="cloud-p2"
        d="M 70,115 C 50,115 40,100 45,85 C 35,76 40,62 55,60 C 60,45 78,44 87,55 C 97,42 117,45 122,58 C 135,50 152,55 156,68 C 170,67 178,80 173,92 C 185,95 182,115 168,115 Z"
        fill="white"
      />
    </svg>
  </div>

  <!-- Content wrapper -->
  <div class="relative z-10 w-full py-32 md:py-40">

    <!-- Eyebrow -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="max-w-4xl">
        <div id="hero-eyebrow" class="eyebrow mb-7 opacity-0">
          <span>{t('hero.eyebrow')}</span>
        </div>
      </div>
    </div>

    <!-- Carousel: FULL WIDTH -->
    <div
      id="hero-carousel"
      class="relative w-full"
      style="overflow: hidden; min-height: clamp(300px, 40vw, 500px);"
      role="region"
      aria-live="polite"
      aria-roledescription="carousel"
      aria-label={t('hero.eyebrow')}
    >
      <div
        id="hero-slide-1"
        class="hero-slide is-active"
        role="tabpanel"
        aria-roledescription="slide"
        aria-label="1 de 5"
      >
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="max-w-4xl">
            <h1
              class="font-display leading-[0.98] mb-8"
              style="font-size: clamp(2.75rem, 7vw, 5.5rem); color: var(--hds-fg); letter-spacing: -0.025em; font-weight: 400;"
            >
              {t('hero.slide1.title')}
            </h1>
            <p
              class="text-lg md:text-xl leading-relaxed max-w-2xl"
              style="color: var(--hds-fg-soft);"
            >
              {t('hero.slide1.body')}
            </p>
          </div>
        </div>
      </div>

      <div
        id="hero-slide-2"
        class="hero-slide"
        role="tabpanel"
        aria-roledescription="slide"
        aria-label="2 de 5"
        aria-hidden="true"
      >
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="max-w-4xl">
            <div
              class="font-display leading-[0.98] mb-8"
              style="font-size: clamp(2.75rem, 7vw, 5.5rem); color: var(--hds-fg); letter-spacing: -0.025em; font-weight: 400;"
            >
              {t('hero.slide2.title')}
            </div>
            <p
              class="text-lg md:text-xl leading-relaxed max-w-2xl"
              style="color: var(--hds-fg-soft);"
            >
              {t('hero.slide2.body')}
            </p>
          </div>
        </div>
      </div>

      <div
        id="hero-slide-3"
        class="hero-slide"
        role="tabpanel"
        aria-roledescription="slide"
        aria-label="3 de 5"
        aria-hidden="true"
      >
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="max-w-4xl">
            <div
              class="font-display leading-[0.98] mb-8"
              style="font-size: clamp(2.75rem, 7vw, 5.5rem); color: var(--hds-fg); letter-spacing: -0.025em; font-weight: 400;"
            >
              {t('hero.slide3.title')}
            </div>
            <p
              class="text-lg md:text-xl leading-relaxed max-w-2xl"
              style="color: var(--hds-fg-soft);"
            >
              {t('hero.slide3.body')}
            </p>
          </div>
        </div>
      </div>

      <div
        id="hero-slide-4"
        class="hero-slide"
        role="tabpanel"
        aria-roledescription="slide"
        aria-label="4 de 5"
        aria-hidden="true"
      >
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="max-w-4xl">
            <div
              class="font-display leading-[0.98] mb-8"
              style="font-size: clamp(2.75rem, 7vw, 5.5rem); color: var(--hds-fg); letter-spacing: -0.025em; font-weight: 400;"
            >
              {t('hero.slide4.title')}
            </div>
            <p
              class="text-lg md:text-xl leading-relaxed max-w-2xl"
              style="color: var(--hds-fg-soft);"
            >
              {t('hero.slide4.body')}
            </p>
          </div>
        </div>
      </div>

      <div
        id="hero-slide-5"
        class="hero-slide"
        role="tabpanel"
        aria-roledescription="slide"
        aria-label="5 de 5"
        aria-hidden="true"
      >
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="max-w-4xl">
            <div
              class="font-display leading-[0.98] mb-8"
              style="font-size: clamp(2.75rem, 7vw, 5.5rem); color: var(--hds-fg); letter-spacing: -0.025em; font-weight: 400;"
            >
              {t('hero.slide5.title')}
            </div>
            <p
              class="text-lg md:text-xl leading-relaxed max-w-2xl"
              style="color: var(--hds-fg-soft);"
            >
              {t('hero.slide5.body')}
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- Progress bars, CTAs, badges -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="max-w-4xl">
        <div id="hero-progress" class="flex gap-2 mt-6 mb-10" role="tablist" aria-label="Hero slides">
          <button class="hero-bar" role="tab" aria-selected="true" aria-label={t('hero.slide1.title')} data-slide="0">
            <span class="hero-bar-fill"></span>
          </button>
          <button class="hero-bar" role="tab" aria-selected="false" aria-label={t('hero.slide2.title')} data-slide="1">
            <span class="hero-bar-fill"></span>
          </button>
          <button class="hero-bar" role="tab" aria-selected="false" aria-label={t('hero.slide3.title')} data-slide="2">
            <span class="hero-bar-fill"></span>
          </button>
          <button class="hero-bar" role="tab" aria-selected="false" aria-label={t('hero.slide4.title')} data-slide="3">
            <span class="hero-bar-fill"></span>
          </button>
          <button class="hero-bar" role="tab" aria-selected="false" aria-label={t('hero.slide5.title')} data-slide="4">
            <span class="hero-bar-fill"></span>
          </button>
        </div>

        <div id="hero-ctas" class="flex flex-col sm:flex-row gap-4 mb-14 opacity-0">
          <a href="/planes/" class="btn-primary">
            {t('hero.ctaPrimary')}
          </a>
          <a href={whatsappUrl} target="_blank" rel="noopener noreferrer" class="btn-secondary">
            {t('hero.ctaSecondary')}
          </a>
        </div>

        <div id="hero-badges" class="flex flex-wrap items-center gap-x-8 gap-y-3 text-base opacity-0" style="color: var(--hds-fg-muted);">
          <span class="flex items-center gap-2">
            <span style="color: var(--color-hds-naranja);">●</span>
            {t('hero.badge26')}
          </span>
          <span class="flex items-center gap-2">
            <span style="color: var(--color-hds-naranja);">●</span>
            {t('hero.badgeUptime')}
          </span>
          <span class="flex items-center gap-2">
            <span style="color: var(--color-hds-naranja);">●</span>
            {t('hero.badgeSupport')}
          </span>
          <span class="flex items-center gap-2">
            <span style="color: var(--color-hds-naranja);">●</span>
            {t('hero.badgeLocation')}
          </span>
        </div>
      </div>
    </div>
  </div>

  <!-- Scroll indicator -->
  <div id="hero-scroll-indicator" class="absolute bottom-8 left-1/2 -translate-x-1/2 opacity-0 pointer-events-none" aria-hidden="true">
    <div class="flex flex-col items-center gap-2" style="color: var(--hds-fg-muted);">
      <span class="text-[10px] uppercase tracking-[0.3em] font-semibold">{t('hero.scrollDown')}</span>
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M12 5v14M19 12l-7 7-7-7"/>
      </svg>
    </div>
  </div>
</section>

<script>
  import gsap from 'gsap';

  const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  if (!prefersReduced) {
    const slides = document.querySelectorAll('.hero-slide');
    const fills = document.querySelectorAll('.hero-bar-fill');
    const bars = document.querySelectorAll('.hero-bar');
    const SLIDE_COUNT = 5;
    const SLIDE_DURATION = 3.5;
    const TRANSITION_DURATION = 1.3;
    let currentSlide = 0;
    let autoplayTween: gsap.core.Tween | null = null;
    let isPaused = false;
    let isTransitioning = false;

    gsap.set(slides, { x: '100%' });
    gsap.set(slides[0], { x: 0 });

    function goToSlide(next: number) {
      if (isTransitioning || next === currentSlide) return;
      isTransitioning = true;

      const prev = currentSlide;
      const currentEl = slides[prev];
      const nextEl = slides[next];

      gsap.set(fills[prev], { scaleX: 0 });

      currentEl.setAttribute('aria-hidden', 'true');
      bars[prev].setAttribute('aria-selected', 'false');

      nextEl.removeAttribute('aria-hidden');
      bars[next].setAttribute('aria-selected', 'true');

      gsap.set(nextEl, { x: '100%' });

      const tl = gsap.timeline({
        onComplete: () => {
          currentEl.classList.remove('is-active');
          gsap.set(currentEl, { x: '100%' });
          isTransitioning = false;
          startAutoplay();
        },
      });

      tl.to(currentEl, {
        x: '-100%',
        duration: TRANSITION_DURATION,
        ease: 'power3.in',
      })
      .to(nextEl, {
        x: 0,
        duration: TRANSITION_DURATION,
        ease: 'power3.out',
        onStart: () => {
          nextEl.classList.add('is-active');
        },
      }, 0.65);

      currentSlide = next;
    }

    function startAutoplay() {
      if (autoplayTween) autoplayTween.kill();
      gsap.set(fills[currentSlide], { scaleX: 0 });
      autoplayTween = gsap.to(fills[currentSlide], {
        scaleX: 1,
        duration: SLIDE_DURATION,
        ease: 'none',
        onComplete: () => {
          goToSlide((currentSlide + 1) % SLIDE_COUNT);
        },
      });
      if (isPaused) autoplayTween.pause();
    }

    bars.forEach((bar) => {
      bar.addEventListener('click', () => {
        const idx = parseInt(bar.dataset.slide || '0', 10);
        if (idx !== currentSlide) {
          goToSlide(idx);
        }
      });
    });

    const hoverZone = document.getElementById('hero-carousel');
    if (hoverZone) {
      hoverZone.addEventListener('mouseenter', () => {
        isPaused = true;
        if (autoplayTween) autoplayTween.pause();
      });
      hoverZone.addEventListener('mouseleave', () => {
        isPaused = false;
        if (autoplayTween) autoplayTween.resume();
      });
    }

    gsap.to('#hero-float-top', {
      y: -30, x: -15, duration: 3, ease: 'sine.inOut', repeat: -1, yoyo: true,
    });
    gsap.to('#hero-float-mid', {
      y: 25, x: 12, duration: 4, ease: 'sine.inOut', repeat: -1, yoyo: true, delay: 0.5,
    });
    gsap.to('#hero-float-bot', {
      y: -20, x: -10, duration: 3.5, ease: 'sine.inOut', repeat: -1, yoyo: true, delay: 1,
    });

    const heroTimeline = gsap.timeline({ delay: 0.3 });
    heroTimeline
      .to('#hero-glass-ring', {
        opacity: 1,
        scale: 1.05,
        duration: 1.4,
        ease: 'power3.out',
      })
      .to('#hero-eyebrow', {
        opacity: 1,
        y: 0,
        duration: 0.6,
        ease: 'power2.out',
      }, '-=0.8')
      .to('#hero-ctas', {
        opacity: 1,
        y: 0,
        duration: 0.6,
        ease: 'power2.out',
      }, '-=0.3')
      .to('#hero-badges', {
        opacity: 1,
        y: 0,
        duration: 0.5,
      }, '-=0.4')
      .to('#hero-scroll-indicator', {
        opacity: 1,
        duration: 0.6,
      }, '-=0.2');

    startAutoplay();
  } else {
    document.querySelectorAll('#hero-eyebrow, #hero-ctas, #hero-badges, #hero-scroll-indicator, #hero-glass-ring').forEach(el => {
      (el as HTMLElement).style.opacity = '1';
    });
    const firstSlide = document.querySelector('.hero-slide');
    if (firstSlide) (firstSlide as HTMLElement).style.transform = 'translateX(0)';
    const firstFill = document.querySelector('.hero-bar-fill');
    if (firstFill) (firstFill as HTMLElement).style.transform = 'scaleX(1)';
  }
</script>

<style>
  #hero-eyebrow {
    transform: translateY(16px);
  }
  #hero-ctas {
    transform: translateY(16px);
  }
  #hero-badges {
    transform: translateY(12px);
  }
  #hero-glass-ring {
    transform: translate(-50%, -50%) scale(0.85);
  }

  #hero-carousel {
    position: relative;
    overflow: hidden;
    min-height: clamp(300px, 40vw, 500px);
  }
  .hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    transform: translateX(100%);
  }
  .hero-slide.is-active {
    transform: translateX(0);
  }

  .hero-bar {
    flex: 1;
    height: 2px;
    background: var(--hds-fg-muted);
    opacity: 0.25;
    border-radius: 1px;
    overflow: hidden;
    border: none;
    padding: 0;
    cursor: pointer;
  }
  .hero-bar-fill {
    display: block;
    height: 100%;
    background: var(--color-hds-naranja);
    transform: scaleX(0);
    transform-origin: left;
  }

  .cloud-p1 { opacity: 0.18; }
  .cloud-p2 { opacity: 0.12; }

  #hero-float-top { opacity: 0.30; }
  #hero-float-mid { opacity: 0.25; }
  #hero-float-bot { opacity: 0.20; }

  :root:not(.dark) .cloud-p1 { opacity: 0.72; }
  :root:not(.dark) .cloud-p2 { opacity: 0.55; }
  :root:not(.dark) #hero-float-top { opacity: 0.55; }
  :root:not(.dark) #hero-float-mid { opacity: 0.50; }
  :root:not(.dark) #hero-float-bot { opacity: 0.45; }
  :root:not(.dark) #hero-badges { color: var(--hds-fg-soft) !important; }

  @media (prefers-reduced-motion: reduce) {
    .hero-slide {
      transform: none;
      transition: transform 0.3s ease;
    }
    .hero-bar-fill {
      transition: transform 0.3s ease;
    }
  }
</style>
