// Header.jsx — minimal teaser header: lockup + single waitlist button.

function Header() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const goWaitlist = (e) => {
    e.preventDefault();
    const el = document.getElementById("waitlist");
    if (el) {
      window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - (window.innerHeight / 2 - 60), behavior: "smooth" });
      const input = el.querySelector("input");
      if (input) setTimeout(() => input.focus({ preventScroll: true }), 600);
    }
  };

  return (
    <header style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 60,
      background: scrolled ? "rgba(255,255,234,0.92)" : "rgba(255,255,234,0)",
      backdropFilter: scrolled ? "blur(12px)" : "none",
      WebkitBackdropFilter: scrolled ? "blur(12px)" : "none",
      borderBottom: scrolled ? "1px solid var(--border)" : "1px solid transparent",
      transition: "background .3s ease, border-color .3s ease",
    }}>
      <div className="container-wide" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "14px 24px" }}>
        <a href="#top" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: "smooth" }); }}
           style={{ display: "flex", alignItems: "center", gap: 12, textDecoration: "none" }}>
          <img src="assets/logo-black-transparent.png" alt="Art of Hindi Poets" width="42" height="42" />
          <span className="brand-word" style={{ fontFamily: "var(--font-display)", fontSize: 23, color: "var(--aohp-ink)", lineHeight: 1, letterSpacing: "-0.01em" }}>
            Art of Hindi Poets
          </span>
        </a>
        <a href="#waitlist" onClick={goWaitlist} className="btn btn--gold btn--small header-btn">Join Waitlist</a>
      </div>
    </header>
  );
}

Object.assign(window, { Header });