// closing.jsx - manifesto, privacy, final waitlist CTA, footer (with Instagram).
(function () {
  const { KissMark } = window.BisouxDesignSystem_144cac;
  const Ic = window.BxIcon;

  // ---- Manifesto (night band) --------------------------------------------
  function Manifesto() {
    return (
      <section className="section band-night bx-paper" data-spotlight style={{ padding: "130px 0", textAlign: "center", overflow: "hidden" }}>
        <div className="wrap-narrow" style={{ position: "relative" }}>
          <div className="reveal" style={{ marginBottom: 34, display: "flex", justifyContent: "center" }}>
            <KissMark tone="accent" size={56} className="bx-bloom" />
          </div>
          <p className="display reveal" data-delay="1" style={{ fontSize: "clamp(28px, 4vw, 50px)", lineHeight: 1.18, color: "#F4EFE5" }}>
            Not another feed to keep up with.
            <br />
            <span className="emotive" style={{ color: "#D98A7E" }}>A private world for two - </span>
            unhurried, tender, yours.
          </p>
          <p className="reveal" data-delay="2" style={{ fontSize: 17, color: "rgba(233,225,211,0.62)", marginTop: 28, maxWidth: 460, marginInline: "auto" }}>
            Closeness as an invitation, never a streak to defend. Open it when you
            think of them. That's the whole idea.
          </p>
        </div>
      </section>
    );
  }

  // ---- Privacy ------------------------------------------------------------
  function Privacy() {
    const points = [
      { I: Ic.lock, t: "Just the two of you", d: "No followers, no discovery, no strangers. A space only the two of you can ever enter." },
      { I: Ic.bell, t: "Quiet by design", d: "Soft haptics, quiet hours, nothing that nags. Bisoux waits for you - it never demands." },
      { I: Ic.heart, t: "Yours to keep", d: "Your bisous and Kept moments are a keepsake between you, held gently and privately." },
    ];
    return (
      <section id="privacy" className="section" style={{ padding: "120px 0" }}>
        <div className="wrap privacy-grid">
          <div>
            <p className="eyebrow reveal" style={{ marginBottom: 20 }}>A private world for two</p>
            <h2 className="display reveal" data-delay="1" style={{ fontSize: "clamp(32px, 4.2vw, 52px)", marginBottom: 18 }}>
              Closed by default. <span className="emotive" style={{ color: "var(--accent)" }}>Open only to you two.</span>
            </h2>
            <p className="lede reveal" data-delay="2">
              Bisoux was never built to grow a crowd. It was built to hold one
              relationship, well - and to keep it private.
            </p>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            {points.map((p, i) => (
              <div key={i} className="reveal r-right" data-delay={Math.min(i + 1, 4)} style={{ display: "flex", gap: 18, padding: "22px 24px", background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 18 }}>
                <span style={{ width: 46, height: 46, borderRadius: 13, background: "var(--accent-soft)", color: "var(--accent)", display: "inline-flex", alignItems: "center", justifyContent: "center", flex: "0 0 auto" }}>
                  <p.I size={22} />
                </span>
                <div>
                  <h3 className="display" style={{ fontSize: 21, marginBottom: 5 }}>{p.t}</h3>
                  <p style={{ fontSize: 15, lineHeight: 1.55, color: "var(--text-secondary)", margin: 0 }}>{p.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  // ---- Final waitlist CTA -------------------------------------------------
  function FinalCTA() {
    const { BxWaitlist } = window;
    return (
      <section id="waitlist" className="section" style={{ padding: "20px 0 130px" }}>
        <div className="wrap">
          <div className="reveal r-scale" style={{ position: "relative", overflow: "hidden", background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 32, padding: "clamp(48px, 6vw, 88px)", textAlign: "center" }}>
            <div className="bx-paper" style={{ position: "absolute", inset: 0 }}></div>
            <div style={{ position: "relative" }}>
              <div style={{ display: "flex", justifyContent: "center", marginBottom: 26 }}>
                <KissMark tone="accent" size={44} />
              </div>
              <h2 className="display" style={{ fontSize: "clamp(34px, 4.8vw, 60px)", marginBottom: 18 }}>
                Be among the first two.
              </h2>
              <p className="lede" style={{ margin: "0 auto 36px", maxWidth: 500 }}>
                We're opening Bisoux slowly, in pairs. Leave your email and we'll write
                the moment there's room for you and yours.
              </p>
              <div style={{ display: "flex", justifyContent: "center" }}>
                <BxWaitlist compact />
              </div>
              <p style={{ fontSize: 13.5, color: "var(--text-secondary)", marginTop: 18 }}>
                No spam, no feed, no noise. One quiet note when it's your turn.
              </p>
            </div>
          </div>
        </div>
      </section>
    );
  }

  // ---- Footer -------------------------------------------------------------
  function Footer() {
    const cols = [
      { h: "The app", links: ["Send a bisou", "Daily gratitude", "Today", "Moments & Kept"] },
      { h: "Bisoux", links: ["Our story", "A private world", "Press kit", "Contact"] },
      { h: "Legal", links: ["Privacy", "Terms", "Your data"] },
    ];
    return (
      <footer className="section band-night bx-paper" data-spotlight style={{ paddingTop: 80, paddingBottom: 40 }}>
        <div className="wrap">
          <div className="foot-grid" style={{ marginBottom: 56 }}>
            <div>
              <div className="brand" style={{ marginBottom: 18 }}>
                <img className="mark" src="site/assets/app-icon-dark.png" alt="Bisoux" style={{ width: 34, height: 34, borderRadius: 9 }} />
                <span className="word" style={{ color: "#F4EFE5", fontSize: 25 }}>Bisoux</span>
              </div>
              <p style={{ fontSize: 15, lineHeight: 1.6, color: "rgba(233,225,211,0.6)", maxWidth: 280, marginBottom: 22 }}>
                A private world for two. Made for long-distance and busy couples - never a feed.
              </p>
              <div style={{ display: "flex", gap: 12 }}>
                <a className="social-btn" href="https://www.instagram.com/bisoux.app/" target="_blank" rel="noopener" aria-label="Bisoux on Instagram" data-magnetic="0.4" style={{ color: "#F4EFE5", borderColor: "#2C2724" }}>
                  <Ic.instagram size={20} />
                </a>
                <a className="social-btn" href="https://www.tiktok.com/@bisoux.app" target="_blank" rel="noopener" aria-label="Bisoux on TikTok" data-magnetic="0.4" style={{ color: "#F4EFE5", borderColor: "#2C2724" }}>
                  <Ic.tiktok size={20} />
                </a>
                <a className="social-btn" href="#waitlist" aria-label="Email Bisoux" data-magnetic="0.4" style={{ color: "#F4EFE5", borderColor: "#2C2724" }}>
                  <Ic.mail size={20} />
                </a>
              </div>
            </div>
            {cols.map((c, i) => (
              <div key={i}>
                <p className="bx-label" style={{ marginBottom: 14, color: "rgba(233,225,211,0.5)" }}>{c.h}</p>
                {c.links.map((l, j) => (
                  <a key={j} className="foot-link" style={{ color: "rgba(233,225,211,0.72)" }}>{l}</a>
                ))}
              </div>
            ))}
          </div>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 16, paddingTop: 26, borderTop: "1px solid #2C2724" }}>
            <span style={{ fontSize: 13.5, color: "rgba(233,225,211,0.5)" }}>© 2026 Bisoux. À ce soir.</span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 9, fontSize: 13.5, color: "rgba(233,225,211,0.5)" }}>
              Made for two <KissMark tone="accent" size={18} />
            </span>
          </div>
        </div>
      </footer>
    );
  }

  Object.assign(window, { BxManifesto: Manifesto, BxPrivacy: Privacy, BxFinalCTA: FinalCTA, BxFooter: Footer });
})();