function Footer() {
  return (
    <footer>
      <div className="grain"></div>
      <Reveal>
        <img className="seal-sm" src="./assets/logo-seal.webp" alt="W&B seal" />
        <h2>Come to the island.</h2>
        <div style={{ fontFamily: "var(--font-body)", fontStyle: "italic", fontSize: 20, color: "var(--fg-on-ink-muted)", maxWidth: 540, margin: "0 auto 36px" }}>
          The next boat sails 14 August 2026. Twelve seats. €1300. We will see you on the rocks.
        </div>
        <button className="btn solid on-dark" onClick={() => document.getElementById("petition")?.scrollIntoView({ behavior: "smooth" })}>
          Apply to Neverland
        </button>

        <div className="handles">
          <a href="https://instagram.com/maya" target="_blank" rel="noreferrer">@maya</a>
          <span className="dot">·</span>
          <a href="https://instagram.com/mathias" target="_blank" rel="noreferrer">@mathias</a>
          <span className="dot">·</span>
          <a href="https://instagram.com/johnny" target="_blank" rel="noreferrer">@johnny</a>
        </div>
        <div style={{ fontFamily: "var(--font-smallcaps)", fontSize: 11, letterSpacing: "0.24em", color: "var(--fg-on-ink-muted)" }}>
          <a href="mailto:hello@witchesandbitches.io" style={{ color: "var(--gold-pale)", textDecoration: "none" }}>hello@witchesandbitches.io</a>
        </div>
      </Reveal>
      <div className="credits">
        <span>© MMXXVI · Witches <span className="amp">&amp;</span> Bitches</span>
        <span className="sig">— with love, Maya</span>
        <span>Photographs © Johnny</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Footer });