function Nav() {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);
  const close = () => setOpen(false);
  const items = [
    { href: "#neverland",  label: "Neverland" },
    { href: "#spells",     label: "Spells" },
    { href: "#happenings", label: "Happenings" },
    { href: "#art",        label: "Art" },
    { href: "#witch-is",   label: "Witch Is" },
    { href: "#tithe",      label: "Tickets" },
  ];
  return (
    <React.Fragment>
      <nav className="nav">
        <a className="brand" href="#top" style={{ textDecoration: "none" }}>
          <img src="./assets/logo-seal.webp" alt="W&B seal" />
          <span>W <span className="amp">&amp;</span> B</span>
        </a>
        <span className="links">
          {items.map((i) => <a key={i.href} href={i.href}>{i.label}</a>)}
        </span>
        <button className="cta" onClick={() => document.getElementById("petition")?.scrollIntoView({ behavior: "smooth" })}>
          Apply to Neverland
        </button>
        <button className="hamburger" aria-label="Menu" onClick={() => setOpen(true)}>≡</button>
      </nav>
      <div className={"mobile-menu" + (open ? " open" : "")}>
        <button className="close" onClick={close}>Close ✕</button>
        {items.map((i) => (
          <a key={i.href} href={i.href} onClick={close}>{i.label}</a>
        ))}
        <a href="#petition" onClick={close} style={{ color: "var(--gold)" }}>Apply to Neverland →</a>
      </div>
    </React.Fragment>
  );
}

function Hero() {
  return (
    <section className="dark hero" id="top">
      <div className="starfield"></div>
      <div className="grain"></div>
      <div className="vignette"></div>
      <Reveal className="hero-inner" delay={0}>
        <img className="seal" src="./assets/logo-seal.webp" alt="Witches & Bitches seal" />
      </Reveal>
      <Reveal delay={120}>
        <span className="eyebrow">Art <span className="amp">&amp;</span> Self-Discovery Retreat</span>
      </Reveal>
      <Reveal as="h1" delay={200}>
        <span className="wordmark">
          <span className="wordmark__word">Witches</span>
          <img className="wordmark-tink" src="./characters/tinkerbell.webp" alt="and" />
          <span className="wordmark__word gold">Bitches</span>
        </span>
      </Reveal>
      <Reveal delay={320}>
        <div className="small-meta" style={{ marginTop: 4 }}>
          <span>A 7-Day Neverland</span><span className="dot">·</span>
          <span>Private Island</span><span className="dot">·</span>
          <span>Sweden</span><span className="dot">·</span>
          <span>August 2026</span>
        </div>
      </Reveal>
      <Reveal delay={460}>
        <div className="hero__lede">
          <p>
            There is a part of us living in <em>Neverland</em> every day.
            It exists in our minds.
          </p>
          <p>
            So we are creating an event where we can live it <em>fully</em> — a space where we can
            immerse ourselves in our true emotions and desires, feel the adventure, and express
            our feelings through art.
          </p>
          <p>
            With the psychological and spiritual support we provide, this experience can become a
            step closer to being your true self and expressing it freely.
          </p>
        </div>
      </Reveal>
      <Reveal delay={520}>
        <div className="hero__ledger">
          <span>Seven nights</span><span className="dot">·</span>
          <span>Breathwork with Maya</span><span className="dot">·</span>
          <span>24 photographs by Johnny</span><span className="dot">·</span>
          <span>Sauna + lake + fire</span><span className="dot">·</span>
          <span>Chef-prepared meals</span>
        </div>
      </Reveal>
      <Reveal delay={580}>
        <div style={{ display: "flex", gap: 18, marginTop: 12, flexWrap: "wrap", justifyContent: "center" }}>
          <button className="btn solid on-dark" onClick={() => document.getElementById("petition")?.scrollIntoView({ behavior: "smooth" })}>
            Apply to Neverland
          </button>
          <button className="btn on-dark" onClick={() => {
            const url = (typeof window !== "undefined" && window.MAYA_CALENDLY_URL) || "";
            if (!url || url.includes("REPLACE_ME")) {
              document.getElementById("tithe")?.scrollIntoView({ behavior: "smooth" });
            } else {
              window.open(url, "_blank", "noopener,noreferrer");
            }
          }}>
            Curiosity Call ☞
          </button>
        </div>
      </Reveal>
      <Reveal delay={740}>
        <div className="small-meta" style={{ marginTop: 36 }}>
          <span>Edition 01</span><span className="dot">·</span>
          <span>12 Explorers</span><span className="dot">·</span>
          <span>14 — 21 August 2026</span>
        </div>
      </Reveal>
    </section>
  );
}

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