// Hero section — full viewport, video bg, navbar, headline, CTAs, stats, partners

const { motion: heroMotion } = window.Motion;
const HERO_VIDEO = "https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260418_080021_d598092b-c4c2-4e53-8e46-94cf9064cd50.mp4";

const heroAnim = (delay) => ({
  initial: { filter: 'blur(10px)', opacity: 0, y: 20 },
  animate: { filter: 'blur(0px)', opacity: 1, y: 0 },
  transition: { duration: 0.8, ease: 'easeOut', delay },
});

function HeroNav() {
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const navLinks = [
    { label: 'Inicio',   href: '#inicio' },
    { label: 'La App',   href: 'app.html' },
    { label: 'Wearable', href: 'wuclock-band.html' },
    { label: 'Blog',     href: 'blog/index.html' },
    { label: 'Método',   href: '#metodo' },
  ];

  // Close menu when clicking outside (escape too)
  React.useEffect(() => {
    if (!mobileOpen) return;
    const onEsc = (e) => { if (e.key === 'Escape') setMobileOpen(false); };
    window.addEventListener('keydown', onEsc);
    return () => window.removeEventListener('keydown', onEsc);
  }, [mobileOpen]);

  return (
    <nav className="fixed top-4 left-0 right-0 z-[100] px-8 lg:px-16" style={{ pointerEvents: 'auto' }}>
      <div className="relative flex items-center justify-between">
        {/* Logo */}
        <a href="#inicio" className="flex items-center">
          <img
            src="assets/wuclock-logo.png"
            alt="WuClock"
            className="h-28 w-auto select-none pointer-events-none"
            draggable="false"
          />
        </a>

        {/* Center pill (desktop) — absolutely centered to the viewport, independent of logo width.
            inline position:absolute beats the .liquid-glass `position: relative` rule. */}
        <div
          className="hidden md:flex liquid-glass rounded-full px-1.5 py-1.5 items-center left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
          style={{ position: 'absolute' }}
        >
          {navLinks.map((l) => (
            <a
              key={l.label}
              href={l.href}
              className="px-3 py-2 text-sm font-medium text-white/90 font-body whitespace-nowrap hover:text-white"
            >
              {l.label}
            </a>
          ))}
          <button
            onClick={() => window.openStorePicker && window.openStorePicker()}
            className="ml-1 inline-flex items-center gap-1.5 bg-white text-black rounded-full px-4 py-2 text-sm font-medium whitespace-nowrap hover:bg-white/90"
          >
            Descargar gratis
            <ArrowUpRight className="h-4 w-4" />
          </button>
        </div>

        {/* Mobile burger button (only on small screens) */}
        <button
          onClick={() => setMobileOpen((v) => !v)}
          aria-label="Menú"
          aria-expanded={mobileOpen}
          className="md:hidden liquid-glass rounded-full w-11 h-11 inline-flex items-center justify-center text-white"
        >
          {mobileOpen ? (
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
              <path d="M3 3 L13 13 M13 3 L3 13" />
            </svg>
          ) : (
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
              <path d="M3 5 H15 M3 9 H15 M3 13 H15" />
            </svg>
          )}
        </button>

        {/* Mobile dropdown panel */}
        {mobileOpen && (
          <div
            className="md:hidden absolute top-full left-0 right-0 mt-3 liquid-glass-strong rounded-3xl p-3 flex flex-col gap-1"
            style={{ background: 'rgba(0,0,5,0.92)' }}
          >
            {navLinks.map((l) => (
              <a
                key={l.label}
                href={l.href}
                onClick={() => setMobileOpen(false)}
                className="relative z-10 px-4 py-3 text-base font-medium text-white/90 font-body text-center rounded-2xl hover:bg-white/5"
              >
                {l.label}
              </a>
            ))}
            <button
              onClick={() => { setMobileOpen(false); window.openStorePicker && window.openStorePicker(); }}
              className="relative z-10 mt-1 inline-flex items-center justify-center gap-2 bg-white text-black rounded-full px-5 py-3 text-sm font-semibold whitespace-nowrap"
            >
              Descargar gratis
              <ArrowUpRight className="h-4 w-4" />
            </button>
          </div>
        )}
      </div>
    </nav>
  );
}

function HeroBadge() {
  return (
    <heroMotion.div {...heroAnim(0.4)}>
      <div className="liquid-glass rounded-full inline-flex items-center gap-2 pr-3 py-1 pl-1">
        <span className="bg-white text-black px-3 py-1 text-xs font-semibold rounded-full">
          Nuevo
        </span>
        <span className="text-sm text-white/90 font-body">
          La app de bienestar hecha en Latinoamérica
        </span>
      </div>
    </heroMotion.div>
  );
}

function HeroStat({ icon, value, label, delay }) {
  return (
    <heroMotion.div {...heroAnim(delay)}>
      <div className="liquid-glass p-5 w-[220px]" style={{ borderRadius: '1.25rem' }}>
        <div className="text-white">{icon}</div>
        <div
          className="font-heading italic text-white text-4xl leading-none mt-3"
          style={{ letterSpacing: '-1px' }}
        >
          {value}
        </div>
        <div className="text-xs text-white font-body font-light mt-2 leading-tight">
          {label}
        </div>
      </div>
    </heroMotion.div>
  );
}

function HeroPartners() {
  const names = ['Samsung', 'Fitbit', 'Apple Watch', 'Xiaomi', 'Garmin'];
  return (
    <heroMotion.div
      id="wearable"
      {...heroAnim(1.4)}
      className="flex flex-col items-center gap-4 pb-8 scroll-mt-24"
    >
      <div className="liquid-glass rounded-full px-3.5 py-1 text-xs font-medium text-white">
        Compatible con los principales wearables del mercado
      </div>
      <div className="flex flex-wrap justify-center items-baseline gap-12 md:gap-16">
        {names.map((n) => (
          <span
            key={n}
            className="font-heading italic text-white text-2xl md:text-3xl"
            style={{ letterSpacing: '-0.02em' }}
          >
            {n}
          </span>
        ))}
      </div>
    </heroMotion.div>
  );
}

function Hero() {
  return (
    <section id="inicio" className="relative w-full h-screen overflow-hidden bg-black">
      {/* Background video, 120% scale, top-aligned */}
      <FadingVideo
        src={HERO_VIDEO}
        poster="assets/og-image.png"
        className="absolute left-1/2 top-0 -translate-x-1/2 object-cover object-top z-0"
        style={{ width: '120%', height: '120%' }}
      />

      {/* Foreground */}
      <div className="relative z-10 flex flex-col min-h-screen">
        {/* Centered content */}
        <div className="flex-1 flex flex-col items-center justify-center text-center pt-24 px-4">
          <div className="w-full flex justify-center">
            <BlurText
              text="Resincronizá tu cuerpo para vivir alineado a tu ritmo natural."
              className="text-6xl md:text-7xl lg:text-[5.5rem] font-heading italic text-white max-w-2xl"
              /* leading + tracking applied via style for exact values */
            />
          </div>

          <heroMotion.p
            {...heroAnim(0.8)}
            className="mt-4 text-sm md:text-base text-white max-w-2xl font-body font-light leading-tight"
          >
            Entendé por qué te sentís como te sentís — y qué hacer al respecto.
            En 8 minutos. Cada mañana.
          </heroMotion.p>

          <heroMotion.div
            {...heroAnim(1.1)}
            className="flex items-center gap-6 mt-6"
          >
            <button
              onClick={() => window.openStorePicker && window.openStorePicker()}
              className="liquid-glass-strong rounded-full px-5 py-2.5 text-sm font-medium text-white inline-flex items-center gap-2 whitespace-nowrap cursor-pointer"
            >
              <span className="relative z-10 inline-flex items-center gap-2">
                Descargar gratis
                <ArrowUpRight className="h-5 w-5" />
              </span>
            </button>
            <a
              href="#la-app"
              className="text-white text-sm font-medium font-body inline-flex items-center gap-2 hover:text-white/80"
            >
              Ver cómo funciona
              <Play className="h-4 w-4" />
            </a>
          </heroMotion.div>
        </div>
      </div>

      {/* Override leading + tracking for the BlurText headline */}
      <style>{`
        section .font-heading.italic[class*="text-6xl"] {
          line-height: 0.8;
          letter-spacing: -4px;
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Hero, HeroNav });