// ───────────────────────────────────────────────────────────
// Header + Hero
// ───────────────────────────────────────────────────────────

// ── Lockup del logo (ala + wordmark en vivo, Nunito) — forma fija, solo cambia el color
function Logo({ dark = false }) {
  const word = dark ? "var(--papel)" : "var(--verde)";
  const sub = dark ? "rgba(251,248,244,0.78)" : "#6B6B6B";
  return (
    <a href="#inicio" className="flex items-center gap-3 group" aria-label="Fundación Minnesota — inicio">
      <Wing color="var(--durazno)" style={{ width: 38, height: 38, flexShrink: 0 }} className="transition-transform duration-500 group-hover:-translate-y-0.5 group-hover:-rotate-3" />
      <span className="leading-none">
        <span className="block font-logo lowercase tracking-tight whitespace-nowrap" style={{ color: word, fontSize: 22, fontWeight: 800, transition: "color .4s" }}>
          fundación minnesota
        </span>
        <span className="block lowercase tracking-wide whitespace-nowrap" style={{ color: sub, fontSize: 10.5, fontWeight: 700, letterSpacing: "0.05em", marginTop: 2, transition: "color .4s" }}>
          tratamiento y prevención de adicciones
        </span>
      </span>
    </a>
  );
}

function Header() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  const close = () => setOpen(false);

  return (
    <header
      className="fixed top-0 inset-x-0 z-50 transition-all duration-500"
      style={{
        background: scrolled
          ? "rgba(251,248,244,0.85)"
          : "linear-gradient(180deg, rgba(20,38,50,0.5) 0%, rgba(20,38,50,0.12) 70%, rgba(20,38,50,0) 100%)",
        backdropFilter: scrolled ? "blur(14px) saturate(1.1)" : "blur(2px)",
        WebkitBackdropFilter: scrolled ? "blur(14px) saturate(1.1)" : "blur(2px)",
        borderBottom: scrolled ? "1px solid rgba(28,28,28,0.06)" : "1px solid transparent",
        boxShadow: scrolled ? "0 8px 30px -18px rgba(28,28,28,0.25)" : "none",
      }}
    >
      <div className="mx-auto max-w-[1340px] px-5 md:px-8 flex items-center justify-between gap-4" style={{ height: 78 }}>
        <Logo dark={!scrolled} />

        <nav className="hidden xl:flex items-center gap-0.5" aria-label="Principal">
          {DATA.nav.map((n) => (
            <a
              key={n.href}
              href={n.href}
              className="nav-link px-3 py-2 rounded-full text-[15px] font-semibold whitespace-nowrap transition-colors"
              style={{ color: scrolled ? "var(--grafito)" : "rgba(251,248,244,0.92)" }}
            >
              {n.label}
            </a>
          ))}
        </nav>

        <div className="hidden xl:block shrink-0">
          <CTA href={DATA.wa} external variant="primary" icon="wa" className="!py-2.5 !px-5 text-[15px]">Hablá con nosotros</CTA>
        </div>

        <button
          className="xl:hidden inline-flex items-center justify-center w-11 h-11 rounded-full transition-colors shrink-0"
          style={{ color: scrolled || open ? "var(--tinta)" : "var(--papel)" }}
          onClick={() => setOpen((v) => !v)}
          aria-label={open ? "Cerrar menú" : "Abrir menú"}
          aria-expanded={open}
        >
          <Icon name={open ? "close" : "menu"} size={26} stroke={1.8} />
        </button>
      </div>

      {/* Menú móvil */}
      <div
        className="xl:hidden overflow-hidden transition-all duration-500"
        style={{ maxHeight: open ? "100vh" : 0, opacity: open ? 1 : 0 }}
      >
        <div className="px-6 pt-2 pb-8 flex flex-col gap-1 bg-[var(--papel)] border-t border-[rgba(28,28,28,0.06)]">
          {DATA.nav.map((n) => (
            <a key={n.href} href={n.href} onClick={close} className="py-3 text-lg font-bold text-[var(--tinta)] border-b border-[rgba(28,28,28,0.05)]">
              {n.label}
            </a>
          ))}
          <CTA href={DATA.wa} external variant="primary" icon="wa" onClick={close} className="mt-5 w-full">Hablá con nosotros</CTA>
        </div>
      </div>
    </header>
  );
}

function Hero() {
  return (
    <section id="inicio" className="relative min-h-[100svh] flex items-center overflow-hidden hero-scene">
      {/* Escena animada del amanecer (placeholder de video) */}
      <div className="hero-bg" aria-hidden="true">
        <div className="hero-sky" />
        <div className="hero-sun" />
        <div className="hero-glow" />
        <div className="hero-hill hero-hill--back" />
        <div className="hero-hill hero-hill--front" />
      </div>
      {/* Overlay Azul Noche para legibilidad */}
      <div className="absolute inset-0 hero-overlay" aria-hidden="true" />

      {/* Ala que se eleva sutilmente */}
      <Wing color="rgba(244,166,120,0.16)" className="hero-wing" style={{ width: "46vw", maxWidth: 560, height: "46vw", maxHeight: 560 }} />

      <div className="relative z-10 mx-auto max-w-[1240px] px-5 md:px-8 w-full pt-28 pb-24">
        <div className="max-w-[860px]">
          <Reveal as="h1" className="font-title text-[var(--papel)]" style={{ fontWeight: 900, lineHeight: 0.98, letterSpacing: "-0.02em", fontSize: "clamp(2.9rem, 8vw, 6rem)" }}>
            {DATA.hero.titulo1}<br />
            <span style={{ color: "var(--durazno)" }}>{DATA.hero.titulo2}</span>
          </Reveal>

          <Reveal as="p" delay={140} className="mt-7 text-[var(--papel)]/90 max-w-[620px]" style={{ fontSize: "clamp(1.05rem, 1.6vw, 1.3rem)", lineHeight: 1.55, color: "rgba(251,248,244,0.92)" }}>
            {DATA.hero.subtitulo}
          </Reveal>

          <Reveal delay={280} className="mt-9 flex flex-col sm:flex-row gap-4">
            <CTA href={DATA.wa} external variant="primary" icon="wa">{DATA.hero.ctaPrimario}</CTA>
            <CTA href="#modelo" variant="outlineLight" icon="arrow">{DATA.hero.ctaSecundario}</CTA>
          </Reveal>
        </div>
      </div>

      {/* Indicador de scroll */}
      <a href="#fundacion" className="absolute left-1/2 -translate-x-1/2 bottom-6 z-10 flex flex-col items-center gap-1.5 text-[rgba(251,248,244,0.75)] hover:text-[var(--papel)] transition-colors" aria-label="Bajar">
        <span className="text-[11px] font-semibold tracking-[0.18em] uppercase">Un día a la vez</span>
        <span className="scroll-chev"><Icon name="chevronDown" size={22} /></span>
      </a>
    </section>
  );
}

Object.assign(window, { Header, Hero, Logo });