// v2-sections.jsx — commercial-layer rebuild of the founding HOTMESS site
// Repositions HOTMESS as the live queer signal layer. Partner-conversion oriented.
// Preserves: emotional masculinity, nightlife realism, atmosphere, poetry, care-first doctrine.

// ─────────────────────────────────────────────────────────────────────────────
// HeroV2 — Animated HOTMESS wordmark + "The live queer signal layer."
function HeroV2({ variant = "signal" }) {
  return (
    <section id="top" className="hero wrap" style={{ position: "relative", paddingTop: 96 }}>
      {/* Ambient city breathing */}
      <div className="breathe" aria-hidden="true"></div>
      <div className="scanline" aria-hidden="true" style={{ top: "20%" }}></div>
      <div className="scanline" aria-hidden="true" style={{ top: "60%", animationDelay: "-4.5s" }}></div>

      <div style={{ position: "relative", zIndex: 2, display: "flex", flexDirection: "column", flex: 1 }}>
      <div className="hero-top">
        <div className="ch-no">§00<br/>OPEN</div>
        <div className="hero-meta">
          <div>HOTMESS · LONDON · LIVE NOW</div>
          <div>NIGHTLIFE · MOVEMENT · RADIO · RECOVERY · COMMERCE · CARE</div>
          <div>FOUNDING PARTNERS — <b>OPEN THIS WEEK</b></div>
        </div>
      </div>

      {/* GIANT animated HOTMESS wordmark — the centerpiece */}
      <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", padding: "32px 0 24px" }}>
        <Wordmark animated />
      </div>

      {/* Supporting headline + CTAs */}
      <div className="mobile-stack" style={{
        display: "grid",
        gridTemplateColumns: "96px 1fr",
        gap: 24, alignItems: "start",
        paddingTop: 24, borderTop: "1px solid var(--line)",
      }}>
        <div className="mono" style={{ color: "var(--gold)" }}>§00<br/>CLAIM</div>
        <div>
          <Reveal>
            <p className="serif" style={{
              fontSize: "clamp(28px, 4vw, 56px)", lineHeight: 1.1, letterSpacing: "-0.01em",
              maxWidth: "26ch", margin: 0, color: "var(--ink)",
            }}>
              The&nbsp;<span style={{ color: "var(--gold)" }}>live queer signal layer</span>.<br/>
              Nightlife. Movement. Recovery. Radio. Commerce. Care.<br/>
              <span style={{ color: "var(--ink-2)" }}>One living&nbsp;world.</span>
            </p>
          </Reveal>

          <Reveal delay={2}>
            <div style={{ display: "flex", gap: 14, flexWrap: "wrap", alignItems: "center", marginTop: 32 }}>
              <a href="#partners" className="btn btn-solid">Become a Founding Partner →</a>
              <a href="#members" className="btn btn-ghost">Join the Globe →</a>
              <a href="#what" className="mono" style={{ color: "var(--ink-3)", borderBottom: "1px solid var(--line-2)", paddingBottom: 4 }}>
                What HOTMESS is ↓
              </a>
            </div>
          </Reveal>
        </div>
      </div>

      <div className="hero-foot" style={{ marginTop: 48 }}>
        <div className="mono" style={{ color: "var(--ink-3)" }}>SCROLL ↓</div>
        <div className="hero-tag">
          <span style={{ color: "var(--gold)" }}>The city doesn't disappear when the conversation&nbsp;ends.</span><br/>
          Queer life continues between the moments. HOTMESS keeps the atmosphere&nbsp;alive.
        </div>
        <div className="hero-status">
          <div><span className="dot"></span>LIVE FROM LONDON · SHIPPING SLOWLY · IN PUBLIC</div>
          <div style={{ color: "var(--ink-3)", marginTop: 4 }}>FOUNDING COHORT · FORMING · LIVE MVP</div>
        </div>
      </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// EcosystemSection — "What HOTMESS is." Live queer infrastructure, not an app.
function EcosystemSection() {
  const ecosystem = [
    { k: "NIGHTLIFE",  v: "The rooms. The doors. The hours people don't text home from.", side: "L" },
    { k: "MOVEMENT",   v: "Where the city is actually going right now. Read on the Pulse.", side: "L" },
    { k: "PULSE",      v: "The globe. The signal. Atmosphere, not individuals.", side: "L" },
    { k: "RADIO",      v: "HOTMESS Radio scores the world. Calm into chaos into landing.", side: "L" },
    { k: "RECOVERY",   v: "Hand in Hand. Free forever. The only place to land.", side: "R" },
    { k: "COMMERCE",   v: "Vendor drops, seller signals, queer retail on the globe.", side: "R" },
    { k: "VENUES",     v: "Founding partners on the pin. Real-time visibility.", side: "R" },
    { k: "CREATORS",   v: "DJs, promoters, hosts. Cultural amplification, not algorithm.", side: "R" },
    { k: "SAFETY",     v: "Silent SOS, Fake Call, Check-In. Care-first by doctrine.", side: "R" },
    { k: "ATMOSPHERE", v: "What the city feels like at 11pm vs 4am vs Sunday. We carry that.", side: "R" },
  ];

  return (
    <section id="what" className="wrap" style={{ marginTop: 80 }}>
      <div className="ch">
        <div className="ch-no">§02<br/>WHAT&nbsp;IT&nbsp;IS</div>
        <div className="ch-head">
          <div className="ch-title">HOTMESS is infrastructure,<br/>not just an app.</div>
          <div className="ch-meta">TEN VERTICALS · ONE WORLD · LIVE TODAY</div>
        </div>
      </div>

      <Reveal>
        <p className="lede" style={{ maxWidth: "26ch", marginTop: 24 }}>
          A live signal layer for queer London — and the cities&nbsp;<span style={{ color: "var(--gold)" }}>after it</span>.
        </p>
      </Reveal>

      <Reveal delay={2}>
        <div className="row-96" style={{ marginTop: 56 }}>
          <div className="mono" style={{ color: "var(--gold)" }}>WHAT RUNS<br/>THROUGH IT</div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 0 }}>
            {ecosystem.map((row, i) => (
              <li key={row.k} style={{
                display: "grid",
                gridTemplateColumns: "minmax(180px, 18ch) 1fr",
                gap: 32, alignItems: "baseline",
                padding: "22px 0",
                borderTop: "1px solid var(--line)",
              }}>
                <div className="display" style={{
                  fontSize: "clamp(28px, 3.4vw, 44px)",
                  lineHeight: 0.95, letterSpacing: "-0.01em",
                  color: i < 4 ? "var(--ink)" : "var(--ink-2)",
                }}>
                  {row.k}
                </div>
                <div className="serif" style={{
                  fontSize: "clamp(18px, 1.8vw, 24px)",
                  lineHeight: 1.3, color: "var(--ink-2)",
                }}>
                  {row.v}
                </div>
              </li>
            ))}
          </ul>
        </div>
      </Reveal>

      <Reveal>
        <div className="row-96-2" style={{
          marginTop: 64, paddingTop: 28, borderTop: "1px solid var(--gold)",
          alignItems: "baseline",
        }}>
          <div className="mono" style={{ color: "var(--gold)" }}>DOCTRINE</div>
          <p className="serif" style={{ fontSize: "clamp(24px, 3vw, 36px)", lineHeight: 1.15, color: "var(--ink)", margin: 0 }}>
            Care is&nbsp;<span style={{ color: "var(--gold)" }}>infrastructure</span>.
          </p>
          <p className="serif" style={{ fontSize: "clamp(24px, 3vw, 36px)", lineHeight: 1.15, color: "var(--ink)", margin: 0 }}>
            Everything is a&nbsp;<span style={{ color: "var(--gold)" }}>signal</span>.
          </p>
        </div>
      </Reveal>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// DifferenceSection — "What makes HOTMESS different." Doctrine via contrast.
function DifferenceSection() {
  const pairs = [
    {
      otherLabel: "OTHER PLATFORMS",
      other: "Split queer life into separate apps.",
      otherSub: "One for dating. One for nightlife. One for recovery. One for radio. One for commerce. One for safety.",
      themLabel: "HOTMESS",
      themHead: "One living world.",
      themBody: "Globe, Ghosted, Radio, Market, Recovery, Safety, Venues, Vendors — all the same continuous queer city.",
    },
    {
      otherLabel: "OTHER MAPS",
      other: "Show users.",
      otherSub: "Pins. Profiles. Proximity creep.",
      themLabel: "HOTMESS",
      themHead: "Shows movement.",
      themBody: "Pulse is not a map — it's a signal layer. Where the city is moving, where energy is building, where the night is shifting.",
    },
    {
      otherLabel: "OTHER APPS",
      other: "Prioritise attention.",
      otherSub: "Endless feeds. Push notifications. Time on glass.",
      themLabel: "HOTMESS",
      themHead: "Prioritises atmosphere.",
      themBody: "Continuity, presence, emotional rhythm. Radio, Recovery, Ghosted, Pulse and Market all score the same world.",
    },
    {
      otherLabel: "OTHER PLATFORMS",
      other: "Treat care as a sidebar.",
      otherSub: "Hotlines buried in settings. Aftercare as an FAQ link.",
      themLabel: "HOTMESS",
      themHead: "Treats care as infrastructure.",
      themBody: "Ride-safe, trusted contacts, quieter overlays, Hand in Hand — woven directly into the night, because queer nightlife doesn't end when the lights come on.",
      tone: "recovery",
    },
    {
      otherLabel: "OTHER APPS",
      other: "Push cold interaction.",
      otherSub: "Mass messaging. Read receipts as currency.",
      themLabel: "HOTMESS",
      themHead: "Builds mutuality first.",
      themBody: "Ghosted requires mutual energy before conversation. Less cold open. Less drain. More chemistry. More consent.",
    },
    {
      otherLabel: "OTHER PLATFORMS",
      other: "Sell ads.",
      otherSub: "Banner inventory. Sponsored slots. Promoted pins.",
      themLabel: "HOTMESS",
      themHead: "Sell participation.",
      themBody: "Venues, retailers, creators and community orgs don't buy ad inventory. They become live signals inside the world.",
      tone: "gold",
    },
    {
      otherLabel: "OTHER MAPS",
      other: "Track people.",
      otherSub: "Exact coords. Always-on telemetry. Surveillance shaped like discovery.",
      themLabel: "HOTMESS",
      themHead: "Visualises energy.",
      themBody: "Opt-in visibility, obfuscated coordinates, mutuality, emotional states. The goal isn't surveillance — it's queer signal infrastructure.",
    },
    {
      otherLabel: "OTHER PLATFORMS",
      other: "Are static.",
      otherSub: "Same homepage at 11pm and 11am.",
      themLabel: "HOTMESS",
      themHead: "Changes with the night.",
      themBody: "Friday 11pm reads differently from Sunday afternoon. Pulse density, Radio energy, Recovery overlays. The city breathes.",
    },
    {
      otherLabel: "OTHER PRODUCTS",
      other: "Are features.",
      otherSub: "A login. A profile. A feed. A messenger.",
      themLabel: "HOTMESS",
      themHead: "Is an ecosystem.",
      themBody: "Globe. Ghosted. Radio. Market. Recovery. Safety. Venues. Vendors. Movement. Care. One continuous queer world.",
    },
  ];

  return (
    <section id="difference" className="wrap" style={{ marginTop: 120 }}>
      <div className="ch">
        <div className="ch-no">§04<br/>DIFFERENCE</div>
        <div className="ch-head">
          <div className="ch-title">What makes HOTMESS<br/>different.</div>
          <div className="ch-meta">DOCTRINE · NINE INVERSIONS · ONE WORLD</div>
        </div>
      </div>

      <Reveal>
        <p className="serif" style={{
          fontSize: "clamp(28px, 4vw, 56px)", lineHeight: 1.05, letterSpacing: "-0.01em",
          maxWidth: "22ch", marginTop: 40, color: "var(--ink)",
        }}>
          The city already runs on signals.<br/>
          <span style={{ color: "var(--gold)" }}>HOTMESS makes them visible.</span>
        </p>
      </Reveal>

      <div style={{ marginTop: 64 }}>
        {pairs.map((p, i) => {
          const accent = p.tone === "recovery" ? "var(--recovery-blue)" : p.tone === "gold" ? "var(--gold)" : "var(--ink)";
          return (
            <Reveal key={i} delay={(i % 3) + 1}>
              <div style={{
                padding: "48px 0",
                borderTop: "1px solid var(--line)",
                borderBottom: i === pairs.length - 1 ? "1px solid var(--line)" : "none",
              }}>
                <div className="mobile-stack" style={{
                  display: "grid", gridTemplateColumns: "minmax(280px, 1fr) minmax(60px, 80px) 2fr",
                  gap: 24, alignItems: "start",
                }}>
                  {/* OTHER side — muted */}
                  <div style={{ opacity: 0.55 }}>
                    <div className="mono" style={{ color: "var(--ink-3)" }}>{p.otherLabel}</div>
                    <div className="display" style={{
                      fontSize: "clamp(22px, 2.4vw, 32px)",
                      lineHeight: 1, letterSpacing: "-0.005em",
                      color: "var(--ink-3)", marginTop: 12,
                      textDecoration: "line-through",
                      textDecorationColor: "rgba(246,244,239,0.25)",
                      textDecorationThickness: "1.5px",
                    }}>{p.other}</div>
                    <p style={{ fontSize: 13, color: "var(--ink-4)", lineHeight: 1.5, marginTop: 12, maxWidth: "32ch" }}>
                      {p.otherSub}
                    </p>
                  </div>

                  {/* Arrow / divider */}
                  <div className="diff-arrow" style={{
                    display: "flex", flexDirection: "column", alignItems: "center", gap: 8,
                    paddingTop: 22,
                  }}>
                    <span className="mono" style={{ color: "var(--gold)", fontSize: 9 }}>BUT</span>
                    <span style={{
                      width: 1, flex: 1, minHeight: 60,
                      background: "linear-gradient(180deg, var(--gold), transparent)",
                    }}></span>
                    <span style={{
                      width: 0, height: 0,
                      borderLeft: "5px solid transparent", borderRight: "5px solid transparent",
                      borderTop: "7px solid var(--gold)",
                    }}></span>
                  </div>

                  {/* HOTMESS side — loud */}
                  <div>
                    <div className="mono" style={{ color: "var(--gold)" }}>{p.themLabel}</div>
                    <div className="display" style={{
                      fontSize: "clamp(36px, 5.2vw, 76px)",
                      lineHeight: 0.95, letterSpacing: "-0.015em",
                      color: accent, marginTop: 12,
                    }}>{p.themHead}</div>
                    <p className="serif" style={{
                      fontSize: "clamp(18px, 2vw, 24px)", lineHeight: 1.3,
                      color: "var(--ink-2)", marginTop: 14, maxWidth: "44ch",
                    }}>
                      {p.themBody}
                    </p>
                  </div>
                </div>
              </div>
            </Reveal>
          );
        })}
      </div>

      {/* Closing thesis */}
      <Reveal>
        <div style={{
          marginTop: 80, padding: "80px clamp(20px, 4vw, 56px)",
          textAlign: "center",
          background: "radial-gradient(ellipse at center, rgba(200,150,44,0.06) 0%, rgba(0,0,0,0) 60%)",
          border: "1px solid var(--gold)",
        }}>
          <div className="mono" style={{ color: "var(--gold)" }}>THE RESULT</div>
          <p className="display" style={{
            fontSize: "clamp(40px, 6vw, 88px)", lineHeight: 0.95, letterSpacing: "-0.015em",
            marginTop: 24, maxWidth: "18ch", marginLeft: "auto", marginRight: "auto",
          }}>
            Not a dating app.<br/>
            Not a nightlife guide.<br/>
            Not a marketplace.<br/>
            <span style={{ color: "var(--gold)" }}>A live queer signal layer.</span>
          </p>
          <p className="serif" style={{
            fontSize: "clamp(20px, 2.2vw, 28px)", lineHeight: 1.3,
            color: "var(--ink-2)", marginTop: 28,
          }}>
            And the world is already&nbsp;<span style={{ color: "var(--ink)" }}>online</span>.
          </p>
        </div>
      </Reveal>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// SignalTypesSection — the taxonomy. Matches the real Globe Layers in the app.
function SignalTypesSection() {
  const signals = [
    { type: "EVENTS",   reads: "the night is being built",  ex: "A room is opening, a beacon is dropping, an event is finding its people. Four hours, one signal.",              live: true, color: "#ff4f9a" /* pink */ },
    { type: "VENUES",   reads: "nightlife gravity",         ex: "Persistent and movable pins. The room appears the moment it's alive. Members route toward it without thinking.", live: true, color: "#4dc0ff" /* blue */ },
    { type: "PEOPLE",   reads: "ambient presence",          ex: "Ghosted by default. People show up at the granularity they choose — vibe, movement, or invisible.",                live: true, color: "#3ee07a" /* green */ },
    { type: "SAFETY",   reads: "care nearby",               ex: "SOS primed, Help Beacons visible to staff, Walk Home + Ride Safe routes live across the room.",                   live: true, color: "var(--signal-red)" },
    { type: "MARKET",   reads: "queer commerce",            ex: "Vendor drops, seller pulses, Preloved circulation. The signal expires when stock does.",                          live: true, color: "var(--gold)" },
    { type: "RADIO",    reads: "atmosphere",                ex: "A resident on air. The whole globe hears the same room. Calm in the morning, building toward midnight.",          live: true, color: "#b07bff" /* purple */ },
  ];

  return (
    <section id="signals" className="wrap" style={{ marginTop: 120 }}>
      <div className="ch">
        <div className="ch-no">§05<br/>SIGNAL&nbsp;TYPES</div>
        <div className="ch-head">
          <div className="ch-title">Everything on HOTMESS<br/>is a signal.</div>
          <div className="ch-meta">SIX GLOBE LAYERS · COLOR-CODED · ALL TOGGLEABLE · OPT-IN</div>
        </div>
      </div>

      <Reveal>
        <p className="serif" style={{
          fontSize: "clamp(26px, 3.4vw, 44px)", lineHeight: 1.1, maxWidth: "24ch",
          marginTop: 40, color: "var(--ink)",
        }}>
          The signal starts&nbsp;<span style={{ color: "var(--gold)" }}>here</span>.
        </p>
      </Reveal>

      {/* The table */}
      <Reveal delay={2}>
        <div style={{ marginTop: 48, border: "1px solid var(--line)" }}>
          {/* header row */}
          <div className="mobile-stack" style={{
            display: "grid", gridTemplateColumns: "minmax(200px,1.1fr) minmax(160px,1fr) 2.2fr 100px",
            gap: 20, padding: "14px 24px", background: "rgba(200,150,44,0.04)",
            borderBottom: "1px solid var(--gold)",
          }}>
            <div className="mono" style={{ color: "var(--gold)" }}>GLOBE LAYER</div>
            <div className="mono" style={{ color: "var(--gold)" }}>READS AS</div>
            <div className="mono" style={{ color: "var(--gold)" }}>WHAT IT MEANS IN THE ROOM</div>
            <div className="mono" style={{ color: "var(--gold)", textAlign: "right" }}>STATUS</div>
          </div>

          {signals.map((s, i) => (
            <div key={s.type} style={{
              display: "grid", gridTemplateColumns: "minmax(200px,1.1fr) minmax(160px,1fr) 2.2fr 100px",
              gap: 20, padding: "22px 24px", alignItems: "baseline",
              borderTop: i > 0 ? "1px solid var(--line)" : "none",
            }}>
              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <span style={{ width: 10, height: 10, borderRadius: "50%", background: s.color, flexShrink: 0, boxShadow: `0 0 10px ${s.color}` }}></span>
                <div className="display" style={{
                  fontSize: "clamp(22px, 2vw, 28px)",
                  lineHeight: 1, letterSpacing: "-0.01em",
                  color: s.color,
                }}>{s.type}</div>
              </div>
              <div className="serif" style={{
                fontSize: "clamp(17px, 1.7vw, 21px)", lineHeight: 1.3, color: "var(--ink)",
                fontStyle: "italic",
              }}>{s.reads}</div>
              <div style={{ fontSize: 15, lineHeight: 1.55, color: "var(--ink-2)" }}>{s.ex}</div>
              <div className="mono" style={{ textAlign: "right", color: s.live ? "#3ee07a" : "var(--ink-4)" }}>
                {s.live ? <><span style={{ display: "inline-block", width: 6, height: 6, borderRadius: "50%", background: "#3ee07a", marginRight: 6, verticalAlign: "1px" }}></span>LIVE</> : "Q3"}
              </div>
            </div>
          ))}
        </div>
      </Reveal>

      <Reveal>
        <div className="row-96" style={{ marginTop: 48 }}>
          <div className="mono" style={{ color: "var(--gold)" }}>NOT THIS</div>
          <div style={{ display: "grid", gap: 8, maxWidth: "60ch" }}>
            {[
              "Not a map. Not a feed. Not a check-in app.",
              "Not \"users near you.\" Not gamified discovery.",
              "Not an ad network with queer skin on it.",
            ].map((l, i) => (
              <p key={i} className="serif" style={{
                fontSize: "clamp(18px, 2vw, 24px)", lineHeight: 1.25,
                color: "var(--ink-2)", margin: 0,
              }}>{l}</p>
            ))}
          </div>
        </div>
      </Reveal>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// PulseSectionV2 — expanded. Annotated diagram + product shot.
function PulseSectionV2() {
  const layers = [
    { k: "MOVEMENT",        v: "Where the city is actually going. Composite of beacons, doors, density." },
    { k: "BEACONS",         v: "Venues, promoters, members surfacing a live pulse from a room." },
    { k: "ATMOSPHERE",      v: "Loud · open · locked in · soft · afters · grounded · floating · ghosted." },
    { k: "VENUE GRAVITY",   v: "Persistent and movable pins. Bigger room, bigger pull on the globe." },
    { k: "NIGHTLIFE DENSITY",v:"What's open, what's coming, what's emptying out by 3am." },
    { k: "AMBIENT SIGNALS", v: "Vendor drops, retailer pulses, queer commerce nearby." },
    { k: "RADIO ENERGY",    v: "What the room is listening to. Globe-wide scoring." },
    { k: "RECOVERY OVERLAYS",v:"Calm rooms, Sunday programming, Hand in Hand visibility." },
    { k: "OPT-IN VISIBILITY",v:"Ghosted is the default. You choose the granularity." },
  ];

  return (
    <section id="pulse" className="wrap" style={{ marginTop: 120 }}>
      <div className="ch">
        <div className="ch-no">§06<br/>THE&nbsp;GLOBE</div>
        <div className="ch-head">
          <div className="ch-title">The globe shows where the&nbsp;night&nbsp;is&nbsp;moving.</div>
          <div className="ch-meta">PULSE · ATMOSPHERE · NOT INDIVIDUALS · OBFUSCATED COORDS</div>
        </div>
      </div>

      {/* Top: lede + product shot */}
      <div className="grid-2" style={{ alignItems: "center", marginTop: 32, gap: 56 }}>
        <Reveal>
          <p className="serif" style={{ fontSize: "clamp(28px, 4vw, 52px)", lineHeight: 1.05, letterSpacing: "-0.01em", maxWidth: "20ch", color: "var(--ink)", margin: 0 }}>
            The whole city, breathing<br/>
            <span style={{ color: "var(--gold)" }}>in one place</span>.
          </p>
          <p style={{ fontSize: 17, color: "var(--ink-2)", lineHeight: 1.6, marginTop: 24, maxWidth: "44ch" }}>
            Pulse is the layer underneath the rest of HOTMESS. Venues, vendors, creators and members surface in real time. Calm signal for recovery mode. Pulsing signal for the room that's actually open. No "users near you" creep — presence is fuzzed by default and visible only at the granularity you've chosen.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 24, flexWrap: "wrap" }}>
            <span className="mono" style={{ padding: "8px 12px", border: "1px solid var(--gold)", color: "var(--gold)" }}>SHIPPED · IN-APP TODAY</span>
            <span className="mono" style={{ padding: "8px 12px", border: "1px solid var(--line-2)", color: "var(--ink-2)" }}>LONDON FIRST</span>
            <span className="mono" style={{ padding: "8px 12px", border: "1px solid var(--line-2)", color: "var(--ink-2)" }}>GLOBE READY</span>
          </div>
        </Reveal>

        <Reveal delay={2}>
          <div style={{ position: "relative", display: "flex", justifyContent: "center" }}>
            <div aria-hidden="true" style={{
              position: "absolute", inset: "-8% -12%",
              background: "radial-gradient(ellipse at 50% 55%, rgba(200,150,44,0.22) 0%, rgba(200,150,44,0) 60%)",
              pointerEvents: "none", filter: "blur(8px)",
            }}></div>
            <img
              loading="lazy"
              src="assets/app-pulse-safety-menu.png"
              alt="HOTMESS Pulse — live globe view with safety menu primed"
              style={{
                position: "relative", width: "100%", maxWidth: 340, height: "auto",
                borderRadius: 32, border: "1px solid var(--line-2)",
                boxShadow: "0 30px 80px rgba(0,0,0,0.55)",
              }}
            />
          </div>
        </Reveal>
      </div>

      {/* Layer index */}
      <Reveal>
        <div className="row-96" style={{ marginTop: 80, paddingTop: 32, borderTop: "1px solid var(--line)" }}>
          <div className="mono" style={{ color: "var(--gold)" }}>WHAT THE GLOBE<br/>IS READING</div>
          <div className="mobile-stack" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(240px, 1fr))", gap: 0 }}>
            {layers.map((l, i) => (
              <div key={l.k} style={{
                padding: "18px 18px 18px 0",
                borderTop: "1px solid var(--line)",
                marginTop: i < 3 ? 0 : 0,
              }}>
                <div className="mono" style={{ color: "var(--gold)" }}>{String(i + 1).padStart(2, "0")} · {l.k}</div>
                <p style={{ marginTop: 8, fontSize: 14, lineHeight: 1.55, color: "var(--ink-2)" }}>{l.v}</p>
              </div>
            ))}
          </div>
        </div>
      </Reveal>
    </section>
  );
}

// Small overlaid annotation labels for the Pulse phone shot
function PulseAnnotations() {
  const labels = [
    { top: "10%",  left: "-12%", t: "VENUE BEACON", sub: "soho · live" },
    { top: "42%",  left: "-18%", t: "RADIO LIVE",   sub: "resident mix · 02:47" },
    { top: "72%",  left: "-10%", t: "RECOVERY",     sub: "calm overlay" },
    { top: "20%",  right:"-14%", t: "VENDOR DROP",  sub: "RAW001 nearby" },
    { top: "55%",  right:"-18%", t: "DENSITY",      sub: "e1 · climbing" },
    { top: "82%",  right:"-12%", t: "GHOSTED",      sub: "you · invisible" },
  ];
  return (
    <>
      {labels.map((a, i) => {
        const horizontalKey = a.left !== undefined ? "left" : "right";
        const horizontalVal = a.left ?? a.right;
        return (
          <div key={i} className="hide-sm" style={{
            position: "absolute",
            top: a.top, [horizontalKey]: horizontalVal,
            display: "flex", alignItems: "center",
            gap: 6, pointerEvents: "none",
          }}>
            {horizontalKey === "right" && (
              <span style={{ width: 36, height: 1, background: "var(--gold)", opacity: 0.5 }}></span>
            )}
            <div style={{
              padding: "4px 8px",
              border: "1px solid rgba(200,150,44,0.45)",
              background: "rgba(5,5,7,0.7)",
              backdropFilter: "blur(6px)",
              textAlign: horizontalKey === "right" ? "right" : "left",
            }}>
              <div className="mono" style={{ color: "var(--gold)", fontSize: 9, letterSpacing: "0.14em" }}>{a.t}</div>
              <div className="mono" style={{ color: "var(--ink-3)", fontSize: 9, textTransform: "none", letterSpacing: 0, marginTop: 2 }}>{a.sub}</div>
            </div>
            {horizontalKey === "left" && (
              <span style={{ width: 36, height: 1, background: "var(--gold)", opacity: 0.5 }}></span>
            )}
          </div>
        );
      })}
    </>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// WhyPartnersSection — partner-specific commercial logic. 4 columns.
function WhyPartnersSection() {
  const partners = [
    {
      who: "VENUES",
      sub: "Bars · clubs · saunas · sex-positive spaces",
      lede: "Real-time gravity for the door.",
      pts: [
        ["Nightlife gravity",        "Persistent pin on the globe. The room appears the moment it's alive."],
        ["Real-time visibility",     "Beacons drop while the night is happening — not the next morning."],
        ["Atmosphere participation", "Your room's energy state lives on the Pulse. People route toward you."],
        ["Safer nightlife tooling",  "Tap-Pack primes safety primitives at the door. Help Beacon for staff."],
      ],
    },
    {
      who: "RETAILERS",
      sub: "Brands · sellers · vendors · pop-ups",
      lede: "Queer commerce on the signal layer.",
      pts: [
        ["Local queer discovery",    "Drops surface to opted-in members within walking distance."],
        ["Seller drops",             "One-night releases. Limited batches. The signal expires when stock does."],
        ["Scene participation",      "You're on the globe alongside the venues your customers actually visit."],
        ["Vendor analytics",         "Pulse reads, beacon proximity, conversion to the room. Not creepy. Honest."],
      ],
    },
    {
      who: "DJs · CREATORS",
      sub: "Residents · promoters · hosts",
      lede: "Cultural amplification, not algorithm.",
      pts: [
        ["Radio amplification",      "Resident slots on HOTMESS Radio. Your set heard globe-wide while you play."],
        ["Cultural visibility",      "Pulse picks up your room. Beacons pulse louder when you're behind them."],
        ["Pulse integration",        "Promoters carry portable pins. Wherever you're playing, the signal moves with you."],
        ["Direct release path",      "RAW CONVICT sister label. The platform releases your record on the station."],
      ],
    },
    {
      who: "RECOVERY · COMMUNITY",
      sub: "Sexual health · recovery orgs · charities",
      lede: "Trust infrastructure for the comedown.",
      pts: [
        ["Trust infrastructure",     "Care-first doctrine. Free forever for landing. No paid recovery tier, ever."],
        ["Softer landing visibility","Hand in Hand overlays. Sunday programming. People find you when they need to."],
        ["Community continuity",     "Aftercare links live on the bottle and the globe. Persistent, not one-tap-gone."],
        ["Adjacent, not embedded",   "You stay you. HOTMESS does not absorb your service or rebrand your work."],
      ],
    },
  ];

  return (
    <section id="why-partners" className="wrap" style={{ marginTop: 120 }}>
      <div className="ch">
        <div className="ch-no">§08<br/>WHY&nbsp;PARTNERS<br/>JOIN</div>
        <div className="ch-head">
          <div className="ch-title">Partners buy participation,<br/>not ad inventory.</div>
          <div className="ch-meta">FOUR PARTNER TYPES · ONE COMMERCIAL LOGIC</div>
        </div>
      </div>

      <Reveal>
        <p className="serif" style={{
          fontSize: "clamp(22px, 2.6vw, 32px)", lineHeight: 1.25, maxWidth: "44ch",
          color: "var(--ink-2)", marginTop: 32,
        }}>
          You don't sponsor HOTMESS. You become a signal&nbsp;<span style={{ color: "var(--gold)" }}>inside&nbsp;it</span>.
        </p>
      </Reveal>

      <div className="grid-4" style={{ marginTop: 56, alignItems: "stretch" }}>
        {partners.map((p, i) => (
          <Reveal key={p.who} delay={Math.min(i + 1, 4)}>
            <div className="panel" style={{ height: "100%", display: "flex", flexDirection: "column", gap: 12 }}>
              <div className="mono" style={{ color: "var(--gold)" }}>{String(i + 1).padStart(2, "0")} · {p.who}</div>
              <div className="display" style={{ fontSize: 22, lineHeight: 1, textTransform: "uppercase", color: "var(--ink)" }}>{p.lede}</div>
              <div className="mono" style={{ color: "var(--ink-4)", textTransform: "none", letterSpacing: 0, fontFamily: "var(--sans)", fontSize: 12 }}>{p.sub}</div>
              <ul style={{ listStyle: "none", padding: 0, margin: "12px 0 0", display: "grid", gap: 14, borderTop: "1px solid var(--line)", paddingTop: 14 }}>
                {p.pts.map(([k, v]) => (
                  <li key={k}>
                    <div className="mono" style={{ color: "var(--gold)", fontSize: 10 }}>{k}</div>
                    <p style={{ marginTop: 4, fontSize: 13, lineHeight: 1.5, color: "var(--ink-2)" }}>{v}</p>
                  </li>
                ))}
              </ul>
              <div style={{ marginTop: "auto", paddingTop: 16 }}>
                <a href="#partners" className="mono" style={{ color: "var(--gold)", borderBottom: "1px solid var(--gold)", paddingBottom: 3 }}>
                  See your tier ↓
                </a>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// CareInfraSection — care promoted higher, primitives match the real app Safety panel
function CareInfraSection() {
  const primitives = [
    ["01", "WALK HOME",     "Live session. We tell your person at start and again if you don't dismiss."],
    ["02", "RIDE SAFE",     "Set an arrival window. We ping your person if you don't confirm."],
    ["03", "STAY WITH ME",  "Open a thread to one trusted contact. Low-key. No escalation."],
    ["04", "MORNING PING",  "Recovery confirmation at a set time. Miss it, your person hears a gentle nudge."],
    ["05", "CHECK-IN",      "Simple timer. One notification to one contact if you miss it."],
    ["06", "RECOVERY MODE", "Aftercare. Care only. No escalation. Grounding reset, breathe, stay with us."],
  ];

  return (
    <section id="care" className="wrap" style={{ marginTop: 120 }}>
      <div className="ch">
        <div className="ch-no">§09<br/>CARE</div>
        <div className="ch-head">
          <div className="ch-title">Care is infrastructure.</div>
          <div className="ch-meta">SIX PRIMITIVES · CARE-FIRST DOCTRINE · WRITTEN INTO FOUNDER COMPLIANCE</div>
        </div>
      </div>

      <Reveal>
        <p className="serif" style={{
          fontSize: "clamp(28px, 4vw, 56px)", lineHeight: 1.05, letterSpacing: "-0.01em",
          maxWidth: "20ch", marginTop: 40, color: "var(--ink)",
        }}>
          Built for the moment the&nbsp;<span style={{ color: "var(--gold)" }}>night&nbsp;turns</span>.
        </p>
      </Reveal>

      {/* Phone demo front-and-center */}
      <Reveal delay={2}>
        <div style={{
          marginTop: 56, padding: "56px clamp(20px,4vw,40px)",
          background: "radial-gradient(ellipse at center, rgba(200,150,44,0.08) 0%, rgba(0,0,0,0) 60%), var(--bg-2)",
          border: "1px solid var(--line)",
          display: "flex", flexDirection: "column", alignItems: "center", gap: 28,
        }}>
          <div className="mono" style={{ color: "var(--gold)" }}>
            <span style={{ display: "inline-block", width: 8, height: 8, borderRadius: "50%", background: "#3ee07a", marginRight: 8, verticalAlign: "1px", animation: "blink 1.6s ease-in-out infinite" }}></span>
            INTERACTIVE — HOLD 1.4S TO ARM, OR TAP FAKE CALL
          </div>
          <SafetyDemo />
          <div className="mono" style={{ color: "var(--ink-4)", textAlign: "center", maxWidth: "44ch", lineHeight: 1.6, textTransform: "none", letterSpacing: 0, fontSize: 12 }}>
            This is the actual flow. Designed for real nightlife conditions — minimal friction at the door, in the&nbsp;dark, on a&nbsp;dying battery.
          </div>
        </div>
      </Reveal>

      {/* Six primitives — 3x2 grid */}
      <div className="grid-3" style={{ marginTop: 56 }}>
        {primitives.map(([n, k, v], i) => (
          <Reveal key={k} delay={Math.min(i + 1, 4)}>
            <div className="panel" style={{ height: "100%", display: "flex", flexDirection: "column", gap: 12 }}>
              <div className="mono" style={{ color: "var(--gold)" }}>{n} · {k}</div>
              <p style={{ marginTop: 0, fontSize: 14, lineHeight: 1.55 }}>{v}</p>
            </div>
          </Reveal>
        ))}
      </div>

      {/* Doctrine bar */}
      <Reveal>
        <div className="row-96-2" style={{
          marginTop: 56, padding: "32px 36px",
          borderLeft: "2px solid var(--gold)",
          background: "rgba(200,150,44,0.04)",
        }}>
          <div className="mono" style={{ color: "var(--gold)" }}>COMMITMENT</div>
          <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--ink)", margin: 0, maxWidth: "44ch" }}>
            Landing on HOTMESS will be&nbsp;<b style={{ color: "var(--gold)" }}>free, forever</b>. There is no paid tier. There never will be.
          </p>
          <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--ink-2)", margin: 0, maxWidth: "44ch" }}>
            The platform never charges anyone for staying safe. <span style={{ color: "var(--gold)" }}>That's the principle the rest is built around.</span>
          </p>
        </div>
      </Reveal>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// WorldStatesSection — city breathing over time
function WorldStatesSection() {
  const states = [
    { time: "FRI · 21:00", mood: "PRE-NIGHT",   color: "var(--ink)",   v: "Doors opening. Resident mix climbing. Pulse begins to gather density in Soho and E1." },
    { time: "FRI · 23:00", mood: "MOVEMENT",    color: "var(--gold)",  v: "Rooms are alive. Beacons pulsing across postcodes. The globe is loud." },
    { time: "SAT · 02:00", mood: "CHEMISTRY",   color: "var(--gold)",  v: "Afters open. Ghosted mutuals lighting up. The Pulse holds the room from 1am to 4." },
    { time: "SAT · 05:00", mood: "RECOVERY",    color: "#E8A33C",      v: "The signal softens. Calm rooms surface. Help Beacons stay primed. People route home." },
    { time: "SUN · 11:00", mood: "HAND IN HAND",color: "#E8A33C",      v: "Sunday radio. Comedown show. Landing rooms. The platform doesn't ask you to perform." },
    { time: "MON · 13:00", mood: "MARKET",      color: "var(--ink)",   v: "Vendor drops surface. Radio runs daytime. Founders take calls. The city resets quietly." },
  ];

  return (
    <section id="world" className="wrap" style={{ marginTop: 120 }}>
      <div className="ch">
        <div className="ch-no">§10<br/>WORLD&nbsp;STATES</div>
        <div className="ch-head">
          <div className="ch-title">A city that breathes.</div>
          <div className="ch-meta">TIME-INDEXED · ATMOSPHERIC · NOT A SCHEDULE</div>
        </div>
      </div>

      <Reveal>
        <p className="serif" style={{ fontSize: "clamp(22px, 2.6vw, 32px)", lineHeight: 1.2, maxWidth: "40ch", marginTop: 40, color: "var(--ink-2)" }}>
          HOTMESS isn't a feed that resets at midnight. It's a&nbsp;<span style={{ color: "var(--ink)" }}>living atmosphere</span> — and it changes&nbsp;shape depending on the hour you open&nbsp;it.
        </p>
      </Reveal>

      <Reveal delay={2}>
        <div style={{ marginTop: 48 }}>
          {states.map((s, i) => (
            <div key={i} style={{
              display: "grid",
              gridTemplateColumns: "minmax(120px, 14ch) minmax(140px, 18ch) 1fr",
              gap: 32, alignItems: "baseline",
              padding: "28px 0",
              borderTop: "1px solid var(--line)",
            }}>
              <div className="mono" style={{ color: "var(--ink-3)" }}>{s.time}</div>
              <div className="display" style={{
                fontSize: "clamp(28px, 3.6vw, 48px)",
                lineHeight: 0.95, letterSpacing: "-0.01em",
                color: s.color,
              }}>
                {s.mood}
              </div>
              <div className="serif" style={{ fontSize: "clamp(18px, 2vw, 24px)", lineHeight: 1.3, color: "var(--ink-2)" }}>
                {s.v}
              </div>
            </div>
          ))}
        </div>
      </Reveal>

      <Reveal>
        <p className="mono" style={{ marginTop: 32, color: "var(--ink-3)", textAlign: "right", textTransform: "none", letterSpacing: 0, fontStyle: "italic", fontFamily: "var(--sans)", fontSize: 13 }}>
          The signal changes shape. The doctrine does&nbsp;not.
        </p>
      </Reveal>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// TapPackV2 — repositioned as physical infrastructure for the signal layer
function TapPackV2() {
  return (
    <section id="tap-pack" className="wrap" style={{ marginTop: 120 }}>
      <div className="ch">
        <div className="ch-no">§14<br/>TAP-PACK</div>
        <div className="ch-head">
          <div className="ch-title">Physical infrastructure for the&nbsp;signal&nbsp;layer.</div>
          <div className="ch-meta">QR + NFC · VENUE-INSTALLED · LOW FRICTION · GLOBE POPULATION</div>
        </div>
      </div>

      <div className="grid-2" style={{ alignItems: "stretch", marginTop: 32, gap: 56 }}>
        <Reveal>
          <p className="serif" style={{ fontSize: "clamp(24px, 2.8vw, 36px)", lineHeight: 1.15, maxWidth: "20ch", color: "var(--ink)" }}>
            One tap, one sticker.<br/><span style={{ color: "var(--gold)" }}>The room joins the globe.</span>
          </p>
          <p style={{ fontSize: 15, color: "var(--ink-2)", lineHeight: 1.6, maxWidth: "44ch", marginTop: 18 }}>
            One NFC sticker. One printed QR card. Customers tap their phone the way they pay — verified arrival count for you, safety primitives primed for them. No app store. No kiosk. No staff training. This is how venues populate the Pulse.
          </p>

          <ul style={{ listStyle: "none", padding: 0, margin: "26px 0 0", display: "grid", gap: 16 }}>
            {[
              ["QR / NFC ONBOARDING",      "Members join the room in 2 seconds. No download, no friction."],
              ["VENUE ACTIVATION",         "The pin goes up the night the sticker lands. No tech install."],
              ["GLOBE POPULATION",         "Each tap is a beacon. The Pulse learns the room from real arrivals."],
              ["SAFETY INTEGRATION",       "Help Beacon, Check-In Timer, Silent SOS — all primed at the door."],
            ].map(([k, v]) => (
              <li key={k} style={{ display: "grid", gridTemplateColumns: "180px 1fr", gap: 16, alignItems: "baseline" }}>
                <span className="mono" style={{ color: "var(--gold)" }}>{k}</span>
                <span style={{ fontSize: 14, color: "var(--ink-2)", lineHeight: 1.5 }}>{v}</span>
              </li>
            ))}
          </ul>

          <div style={{ display: "flex", gap: 10, marginTop: 28, flexWrap: "wrap" }}>
            <span className="mono" style={{ padding: "10px 14px", border: "1px solid var(--gold)", color: "var(--gold)" }}>NFC STICKER · 25MM</span>
            <span className="mono" style={{ padding: "10px 14px", border: "1px solid var(--line-2)", color: "var(--ink-2)" }}>QR CARD · A6 MATTE</span>
            <span className="mono" style={{ padding: "10px 14px", border: "1px solid var(--line-2)", color: "var(--ink-2)" }}>BAR-TOP PUCK · OPTIONAL</span>
          </div>
        </Reveal>

        <Reveal delay={2}>
          <div className="panel" style={{ padding: 0, overflow: "hidden", background: "#0a0a0d" }}>
            <img
              loading="lazy"
              src="assets/tap-pack.png"
              alt="HOTMESS Tap-Pack — NFC sticker, QR card, bar puck"
              style={{ width: "100%", height: "auto", display: "block" }}
            />
            <div style={{ padding: "16px 20px", borderTop: "1px solid var(--line)" }}>
              <div className="mono" style={{ color: "var(--gold)" }}>FIG. 02 — TAP-PACK</div>
              <div className="mono" style={{ color: "var(--ink-3)", marginTop: 4 }}>SHIPPED WITH EVERY FOUNDING PARTNER PACK</div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// LiveProofSection — four intentional moments from the live app, not a gallery
function LiveProofSection() {
  const moments = [
    {
      tag: "PULSE",
      img: "assets/app-pulse-safety-menu.png",
      lede: "The globe, primed.",
      body: "SOS, Fake Call and Check-In sit one tap from where the city is moving. The Pulse and the care layer share the same screen, on purpose.",
      badge: "SHIPPED",
      tone: "gold",
    },
    {
      tag: "DROP BEACON",
      img: "assets/app-drop-beacon-event.png",
      lede: "Four hours. One room.",
      body: "A member surfaces an event, a market, a recovery moment, a Radio slot — the room is alive until the beacon expires. Members route toward it.",
      badge: "SHIPPED",
      tone: "gold",
    },
    {
      tag: "SAFETY",
      img: "assets/app-safety-full.png",
      lede: "Care, in the same app.",
      body: "Walk Home, Ride Safe, Stay With Me, Morning Ping, Check-In, Recovery Mode. Not a separate wellness app — woven through the night.",
      badge: "SHIPPED",
      tone: "recovery",
    },
    {
      tag: "MARKET",
      img: "assets/app-market-superhung.png",
      lede: "Queer commerce, on the layer.",
      body: "Drops, Preloved, Shop — sellers become signals inside the same world the night is being read from. Not banner inventory.",
      badge: "SHIPPED",
      tone: "gold",
    },
  ];

  return (
    <section id="proof" className="wrap" style={{ marginTop: 120 }}>
      <div className="ch">
        <div className="ch-no">§15<br/>LIVE&nbsp;PROOF</div>
        <div className="ch-head">
          <div className="ch-title">Four moments from<br/>the live app.</div>
          <div className="ch-meta">CAPTURED FROM PRODUCTION · BETA · IN PUBLIC</div>
        </div>
      </div>

      <Reveal>
        <p className="serif" style={{
          fontSize: "clamp(24px, 2.8vw, 36px)", lineHeight: 1.2, maxWidth: "32ch", color: "var(--ink-2)",
          marginTop: 32,
        }}>
          We're not pitching a roadmap.<br/>
          <span style={{ color: "var(--ink)" }}>We're inviting you into a&nbsp;<span style={{ color: "var(--gold)" }}>running&nbsp;world</span>.</span>
        </p>
      </Reveal>

      <div style={{ marginTop: 64, display: "grid", gap: 80 }}>
        {moments.map((m, i) => {
          const accent = m.tone === "recovery" ? "var(--recovery-blue)" : "var(--gold)";
          const reverse = i % 2 === 1;
          return (
            <Reveal key={m.tag}>
              <div className="mobile-stack" style={{
                display: "grid",
                gridTemplateColumns: reverse ? "1.4fr minmax(280px, 380px)" : "minmax(280px, 380px) 1.4fr",
                gap: 56,
                alignItems: "center",
              }}>
                {/* Phone screen */}
                <div style={{
                  order: reverse ? 2 : 1,
                  position: "relative",
                  display: "flex", justifyContent: "center",
                }}>
                  <div aria-hidden="true" style={{
                    position: "absolute", inset: "-6% -10%",
                    background: `radial-gradient(ellipse at 50% 55%, ${m.tone === "recovery" ? "rgba(106,167,255,0.18)" : "rgba(200,150,44,0.22)"} 0%, transparent 60%)`,
                    pointerEvents: "none", filter: "blur(6px)",
                  }}></div>
                  <img
                    loading="lazy" src={m.img} alt={m.tag}
                    style={{
                      position: "relative", width: "100%", maxWidth: 360, height: "auto",
                      borderRadius: 32, border: "1px solid var(--line-2)",
                      boxShadow: "0 30px 80px rgba(0,0,0,0.55)",
                      display: "block",
                    }}
                  />
                  <span className="mono" style={{
                    position: "absolute", top: 12, [reverse ? "right" : "left"]: 12,
                    padding: "5px 9px",
                    background: "rgba(5,5,7,0.78)", backdropFilter: "blur(6px)",
                    border: `1px solid ${accent}`,
                    color: accent,
                  }}>
                    <span style={{ display: "inline-block", width: 6, height: 6, borderRadius: "50%", background: "#3ee07a", marginRight: 6, verticalAlign: "1px", animation:"blink 1.6s ease-in-out infinite" }}></span>
                    {m.badge}
                  </span>
                </div>

                {/* Caption + body */}
                <div style={{ order: reverse ? 1 : 2 }}>
                  <div className="mono" style={{ color: accent }}>FIG.&nbsp;{String(i + 1).padStart(2, "0")} · {m.tag}</div>
                  <div className="display" style={{
                    fontSize: "clamp(36px, 4.8vw, 64px)",
                    lineHeight: 0.95, letterSpacing: "-0.015em",
                    color: accent, marginTop: 14,
                  }}>{m.lede}</div>
                  <p className="serif" style={{
                    fontSize: "clamp(18px, 2vw, 24px)", lineHeight: 1.3,
                    color: "var(--ink-2)", marginTop: 16, maxWidth: "44ch",
                  }}>{m.body}</p>
                </div>
              </div>
            </Reveal>
          );
        })}
      </div>

      <Reveal>
        <p className="mono" style={{
          marginTop: 48, color: "var(--ink-3)", textAlign: "right",
          textTransform: "none", letterSpacing: 0, fontStyle: "italic", fontFamily: "var(--sans)", fontSize: 13,
        }}>
          More screens live inside the sections above. This is just a&nbsp;sample.
        </p>
      </Reveal>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// FoundingTiersV2 — reframed as participation levels (Signal/Anchor/Atmosphere/Founding)
// SKUs sit underneath. Lead concept, not pricing cards.
function FoundingTiersV2() {
  const levels = [
    {
      name: "SIGNAL",
      sub: "Show up on the globe.",
      desc: "The entry-level pulse. Your room gets a pin. Beacons drop quarterly. Tap-Pack ships.",
      whoFor: "Smaller bars · independent promoters · single-room nights.",
      skus: [
        { name: "FOUNDING VENUE", slug: "founding_venue",    price: "£250",   taken: 14, cap: 50, note: "ANNUAL" },
        { name: "FOUNDING PROMOTER", slug: "founding_promoter", price: "£350",   taken: 6,  cap: 15, note: "FLAT, MOVEABLE" },
      ],
    },
    {
      name: "ATMOSPHERE",
      sub: "Score the room you're already&nbsp;in.",
      desc: "Pulsing pin. Higher beacon allocation. Licensing Letter on HOTMESS letterhead. Your room participates in the city's mood, not just its map.",
      whoFor: "Mid-size clubs · queer wellness · sex-positive spaces.",
      skus: [
        { name: "FOUNDING SIGNAL", slug: "founding_signal",   price: "£500",   taken: 9,  cap: 25, note: "ANNUAL" },
        { name: "FOUNDING WELLNESS", slug: "founding_wellness", price: "£400",   taken: 2,  cap: 10, note: "ANNUAL · RECOVERY-AWARE" },
      ],
    },
    {
      name: "ANCHOR",
      sub: "Hold the postcode.",
      desc: "Persistent named label on the globe. Co-branded Tap-Pack. Monthly call with Phil. Postcode exclusivity. The room people route&nbsp;toward.",
      whoFor: "Flagship venues · chain operators · saunas with a name.",
      featured: true,
      skus: [
        { name: "FOUNDING ANCHOR", slug: "founding_anchor",   price: "£1,000", taken: 3,  cap: 10, note: "ANNUAL · POSTCODE EXCLUSIVITY" },
        { name: "FOUNDING CHAIN", slug: "founding_chain",    price: "£750",   taken: 1,  cap: 5,  note: "MULTI-SITE · +£200/EXTRA LOCATION" },
      ],
    },
    {
      name: "FOUNDING",
      sub: "Inside the doctrine.",
      desc: "All Anchor benefits + named in the platform credits, direct line to Phil for the first month, and a seat in the founder cohort that shapes what ships next.",
      whoFor: "Operators who want to help build the layer, not just live on it.",
      skus: [
        { name: "ASK ABOUT FOUNDING ROUND", price: "by call", taken: null, cap: 6, note: "TALK FIRST · 20 MIN" },
      ],
    },
  ];

  return (
    <section id="partners" className="wrap" style={{ marginTop: 140 }}>
      <div className="ch">
        <div className="ch-no">§16<br/>FOUNDING<br/>TIERS</div>
        <div className="ch-head">
          <div className="ch-title">Four levels inside the world.</div>
          <div className="ch-meta">SIGNAL · ATMOSPHERE · ANCHOR · FOUNDING · CAPPED · FIRST IN, FIRST NAMED</div>
        </div>
      </div>

      <Reveal>
        <p className="serif" style={{
          fontSize: "clamp(26px, 3.2vw, 40px)", lineHeight: 1.1, maxWidth: "28ch", marginTop: 32, color: "var(--ink)",
        }}>
          Pick a participation level.<br/><span style={{ color: "var(--gold)" }}>Not a pricing tier.</span>
        </p>
      </Reveal>

      <div style={{ marginTop: 56, display: "grid", gap: 0 }}>
        {levels.map((lv, i) => (
          <Reveal key={lv.name} delay={Math.min(i + 1, 4)}>
            <div style={{
              padding: "40px 0",
              borderTop: "1px solid var(--line)",
              borderBottom: i === levels.length - 1 ? "1px solid var(--line)" : "none",
              background: lv.featured ? "rgba(200,150,44,0.04)" : "transparent",
              paddingLeft: lv.featured ? 24 : 0, paddingRight: lv.featured ? 24 : 0,
            }}>
              <div className="mobile-stack" style={{
                display: "grid",
                gridTemplateColumns: "minmax(220px, 22ch) 1fr",
                gap: 40, alignItems: "start",
              }}>
                {/* Left: name + sub */}
                <div>
                  <div className="mono" style={{ color: "var(--gold)" }}>
                    LEVEL · {String(i + 1).padStart(2, "0")}
                    {lv.featured && <span style={{ marginLeft: 12, padding: "2px 8px", background: "var(--gold)", color: "var(--bg)", letterSpacing: "0.14em" }}>FLAGSHIP</span>}
                  </div>
                  <div className="display" style={{
                    fontSize: "clamp(48px, 6vw, 88px)",
                    lineHeight: 0.9, letterSpacing: "-0.015em",
                    color: lv.featured ? "var(--gold)" : "var(--ink)",
                    marginTop: 14,
                  }}>{lv.name}</div>
                  <p className="serif" style={{
                    fontSize: "clamp(20px, 2.2vw, 28px)", lineHeight: 1.2,
                    color: "var(--ink-2)", marginTop: 14, maxWidth: "22ch",
                  }} dangerouslySetInnerHTML={{ __html: lv.sub }} />
                </div>

                {/* Right: description + SKUs */}
                <div>
                  <p style={{ fontSize: 16, color: "var(--ink-2)", lineHeight: 1.6, maxWidth: "56ch", margin: 0 }}>{lv.desc}</p>
                  <p className="mono" style={{ color: "var(--ink-3)", marginTop: 14, textTransform: "none", letterSpacing: 0, fontFamily: "var(--sans)", fontSize: 13, fontStyle: "italic" }}>
                    For: {lv.whoFor}
                  </p>

                  {/* SKU strip */}
                  <div className="mobile-stack" style={{ marginTop: 24, display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 14 }}>
                    {lv.skus.map((s) => (
                      <div key={s.name} style={{
                        padding: 16,
                        border: "1px solid var(--line-2)",
                        background: "rgba(0,0,0,0.3)",
                      }}>
                        <div className="mono" style={{ color: "var(--gold)" }}>{s.name}</div>
                        <div style={{ display: "flex", alignItems: "baseline", gap: 10, marginTop: 8 }}>
                          <span className="display" style={{ fontSize: 32, lineHeight: 0.9 }}>{s.price}</span>
                          <span className="mono" style={{ color: "var(--ink-4)" }}>{s.note}</span>
                        </div>
                        {s.taken !== null && (
                          <div style={{ marginTop: 10 }}>
                            <SpotsCounter total={s.cap} taken={s.taken} />
                          </div>
                        )}
                        {s.taken === null && (
                          <div className="mono" style={{ color: "var(--ink-3)", marginTop: 10, fontSize: 10 }}>{s.cap} SEATS · BY CONVERSATION</div>
                        )}
                        {s.slug && (
                          <a href={`/partners/apply?tier=${s.slug}`} className="btn btn-solid" style={{ display: "block", textAlign: "center", marginTop: 12, padding: "10px 12px", fontSize: 10 }}>
                            Pay now · claim your spot ↗
                          </a>
                        )}
                      </div>
                    ))}
                  </div>

                  <div style={{ marginTop: 20, display: "flex", gap: 12, flexWrap: "wrap" }}>
                    <a href="#conversion" className={`btn ${lv.featured ? "btn-solid" : ""}`} style={{ padding: "11px 16px", fontSize: 10 }}>
                      Become {lv.name.toLowerCase()} ↗
                    </a>
                    <a href="https://calendly.com/hotmess" target="_blank" rel="noreferrer" className="btn btn-ghost" style={{ padding: "11px 16px", fontSize: 10 }}>
                      Talk first
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </Reveal>
        ))}
      </div>

      {/* What happens after signup — operational timeline */}
      <Reveal>
        <div className="row-96" style={{ marginTop: 56 }}>
          <div className="mono" style={{ color: "var(--gold)" }}>TYPICAL<br/>ONBOARDING<br/>RHYTHM</div>
          <div>
            <p className="serif" style={{ fontSize: "clamp(22px, 2.8vw, 32px)", lineHeight: 1.2, color: "var(--ink)", margin: 0, maxWidth: "32ch" }}>
              The £ becomes a&nbsp;<span style={{ color: "var(--gold)" }}>process</span>, not a transaction.
            </p>
            <p className="mono" style={{ marginTop: 12, color: "var(--ink-3)", textTransform: "none", letterSpacing: 0, fontFamily: "var(--sans)", fontStyle: "italic", fontSize: 13 }}>
              Cadence below is indicative — exact dates confirmed on the founding&nbsp;call.
            </p>
            <div style={{ marginTop: 32, display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 0, border: "1px solid var(--line)" }}>
              {[
                { day: "DAY 0", title: "FOUNDING CALL", body: "20-minute setup with Phil. Postcode, room type, beacon allocation, Licensing Letter terms. Card or invoice." },
                { day: "DAY 2", title: "TAP-PACK SHIPS", body: "NFC sticker + QR card + bar puck (optional) in the post. Anchor tier gets co-branded artwork." },
                { day: "DAY 5", title: "PIN GOES LIVE", body: "Your room appears on the Pulse globe. First beacon allocation unlocks. Welcome dispatch sent." },
                { day: "WEEK 2", title: "FIRST ACTIVATION", body: "First beacon drops on a real night. Pulse density measured. Founder dispatch reports what you moved." },
                { day: "MONTH 1", title: "RADIO INTEGRATION", body: "Residents from your room offered slots on HOTMESS Radio. Atmosphere amplification. RAW CONVICT introductions." },
              ].map((s, i, arr) => (
                <div key={s.day} style={{
                  padding: "20px",
                  borderLeft: i > 0 ? "1px solid var(--line)" : "none",
                  display: "flex", flexDirection: "column", gap: 8,
                  position: "relative", minHeight: 160,
                }}>
                  <div className="mono" style={{ color: "var(--gold)", fontSize: 10 }}>{s.day}</div>
                  <div className="display" style={{ fontSize: 18, lineHeight: 1, letterSpacing: "-0.005em" }}>{s.title}</div>
                  <p style={{ fontSize: 13, color: "var(--ink-2)", lineHeight: 1.55, margin: 0 }}>{s.body}</p>
                  {i < arr.length - 1 && (
                    <span className="hide-sm" aria-hidden="true" style={{
                      position: "absolute", right: -7, top: 26,
                      width: 14, height: 14, color: "var(--gold)", fontFamily: "var(--mono)", fontSize: 14,
                      background: "var(--bg)", display: "flex", alignItems: "center", justifyContent: "center",
                    }}>→</span>
                  )}
                </div>
              ))}
            </div>
          </div>
        </div>
      </Reveal>

      {/* What every partner gets */}
      <Reveal>
        <div className="row-96" style={{ marginTop: 64, padding: "20px 24px", border: "1px solid var(--line)", background: "rgba(255,255,255,0.015)" }}>
          <div className="mono" style={{ color: "var(--gold)" }}>EVERY PARTNER GETS</div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
            {[
              "PIN ON THE PULSE GLOBE",
              "BEACON ALLOCATION",
              "TAP-PACK HARDWARE",
              "LICENSING LETTER",
              "FOUNDING PARTNER BADGE",
              "DIRECT LINE TO PHIL",
              "ROOM ON THE SIGNAL LAYER",
            ].map((s) => (
              <span key={s} className="mono" style={{ padding: "8px 12px", border: "1px solid var(--line-2)", color: "var(--ink-2)" }}>{s}</span>
            ))}
          </div>
        </div>
      </Reveal>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// CityRolloutSection — where the signal goes after London
function CityRolloutSection() {
  const cities = [
    { city: "LONDON",     country: "UK",     status: "LIVE",       count: "154 members · 35 partner spots", hot: true,  color: "var(--gold)" },
    { city: "BERLIN",     country: "DE",     status: "EARLY INTEREST", count: "queue forming", hot: false, color: "var(--ink)" },
    { city: "MANCHESTER", country: "UK",     status: "EARLY INTEREST", count: "queue forming", hot: false, color: "var(--ink)" },
    { city: "NEW YORK",   country: "US",     status: "EARLY INTEREST", count: "queue forming", hot: false, color: "var(--ink)" },
    { city: "BARCELONA",  country: "ES",     status: "EARLY INTEREST", count: "queue forming", hot: false, color: "var(--ink)" },
    { city: "MELBOURNE",  country: "AU",     status: "EARLY INTEREST", count: "queue forming", hot: false, color: "var(--ink)" },
    { city: "AMSTERDAM",  country: "NL",     status: "WAITLIST OPEN",  count: "say the word",  hot: false, color: "var(--ink-2)" },
    { city: "YOUR CITY",  country: "",       status: "OPEN",           count: "ask Phil",      hot: false, color: "var(--ink-3)" },
  ];

  return (
    <section id="cities" className="wrap" style={{ marginTop: 120 }}>
      <div className="ch">
        <div className="ch-no">§17<br/>CITY&nbsp;ROLLOUT</div>
        <div className="ch-head">
          <div className="ch-title">London first. Then the&nbsp;cities&nbsp;after.</div>
          <div className="ch-meta">FOUNDING CITY LEAD · ONE OPERATOR PER MARKET · NO LICENSING MODEL YET</div>
        </div>
      </div>

      <Reveal>
        <p className="serif" style={{
          fontSize: "clamp(22px, 2.6vw, 34px)", lineHeight: 1.2, maxWidth: "40ch",
          marginTop: 32, color: "var(--ink-2)",
        }}>
          The signal layer is built to travel.<br/>
          <span style={{ color: "var(--ink)" }}>It just needs a&nbsp;<span style={{ color: "var(--gold)" }}>founding operator</span> in each room.</span>
        </p>
      </Reveal>

      <Reveal delay={2}>
        <div style={{ marginTop: 48, border: "1px solid var(--line)" }}>
          <div className="mobile-stack" style={{
            display: "grid", gridTemplateColumns: "minmax(180px, 1.6fr) minmax(120px, 1fr) minmax(200px, 1fr) 100px",
            gap: 20, padding: "14px 24px", background: "rgba(200,150,44,0.04)", borderBottom: "1px solid var(--gold)",
          }}>
            <div className="mono" style={{ color: "var(--gold)" }}>CITY</div>
            <div className="mono" style={{ color: "var(--gold)" }}>STATUS</div>
            <div className="mono" style={{ color: "var(--gold)" }}>SIGNAL</div>
            <div className="mono" style={{ color: "var(--gold)", textAlign: "right" }}>JOIN</div>
          </div>

          {cities.map((c, i) => (
            <div key={c.city} style={{
              display: "grid", gridTemplateColumns: "minmax(180px, 1.6fr) minmax(120px, 1fr) minmax(200px, 1fr) 100px",
              gap: 20, padding: "20px 24px", alignItems: "baseline",
              borderTop: i > 0 ? "1px solid var(--line)" : "none",
              background: c.hot ? "rgba(200,150,44,0.04)" : "transparent",
            }}>
              <div className="display" style={{ fontSize: "clamp(22px, 2vw, 28px)", lineHeight: 1, letterSpacing: "-0.01em", color: c.color }}>
                {c.city} {c.country && <span className="mono" style={{ color: "var(--ink-4)", fontSize: 10, marginLeft: 8 }}>{c.country}</span>}
              </div>
              <div className="mono" style={{ color: c.hot ? "#3ee07a" : "var(--ink-3)" }}>
                {c.hot && <span style={{ display: "inline-block", width: 6, height: 6, borderRadius: "50%", background: "#3ee07a", marginRight: 6, verticalAlign: "1px", animation: "blink 1.6s ease-in-out infinite" }}></span>}
                {c.status}
              </div>
              <div className="mono" style={{ color: "var(--ink-3)", textTransform: "none", letterSpacing: 0, fontFamily: "var(--sans)", fontSize: 13, fontStyle: "italic" }}>{c.count}</div>
              <div style={{ textAlign: "right" }}>
                <a href="#conversion" className="mono" style={{ color: "var(--gold)", borderBottom: "1px solid var(--gold)", paddingBottom: 3 }}>
                  Apply ↗
                </a>
              </div>
            </div>
          ))}
        </div>
      </Reveal>

      <Reveal>
        <div className="row-96" style={{ marginTop: 32, padding: "24px 28px", borderLeft: "2px solid var(--gold)", background: "rgba(200,150,44,0.04)" }}>
          <div className="mono" style={{ color: "var(--gold)" }}>FOUNDING<br/>CITY LEAD</div>
          <p style={{ fontSize: 15, color: "var(--ink-2)", lineHeight: 1.6, margin: 0, maxWidth: "60ch" }}>
            One operator per market. Not a franchise. Not a license. A founding partnership — same doctrine, your city. If you already run rooms, residents, or recovery work where you live, apply via the form below and pick <span style={{ color: "var(--gold)" }}>CITY</span>.
          </p>
        </div>
      </Reveal>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// FAQSection — strategic / cultural / commercial / technical. Accordion.
function FAQSection() {
  const faqs = [
    {
      group: "WHAT IT IS",
      q: "What is HOTMESS?",
      tone: "gold",
      lede: "A live queer signal layer.",
      a: "It combines nightlife, movement, Radio, recovery, chemistry, commerce, care, venues, creators and community into one continuous living world.",
      open: true,
    },
    {
      group: "WHAT IT IS",
      q: "Is HOTMESS a dating app?",
      a: "No. HOTMESS includes chemistry and mutual connection, but it isn't built around endless swiping or cold messaging. It's designed around atmosphere, movement, mutuality, ambient presence, care, and community continuity. Ghosted reduces rejection fatigue by requiring mutual energy before conversation begins.",
      open: true,
    },
    {
      group: "WHAT IT IS",
      q: "What makes HOTMESS different?",
      a: "Most platforms separate queer life into disconnected apps. HOTMESS combines nightlife, care, chemistry, movement, recovery, commerce, Radio and community into one living world. Everything on HOTMESS is a signal.",
    },
    {
      group: "WHAT IT IS",
      q: "What does \"signal layer\" mean?",
      a: "A signal is any live piece of energy inside the ecosystem — a venue Beacon, a Radio broadcast, a seller drop, a recovery signal, nightlife movement, mutual chemistry, community activity. HOTMESS visualises how queer life moves through a city in real time.",
    },
    {
      group: "WHAT IT IS",
      q: "What stage is HOTMESS at?",
      a: "A live evolving MVP. The ecosystem is actively being refined, expanded and populated with venues, creators, vendors, nightlife infrastructure, care systems, signal layers, and Globe participation. The world is already online.",
    },

    {
      group: "PULSE · SIGNALS",
      q: "What is Pulse?",
      tone: "gold",
      lede: "Pulse is not a map. It's a signal.",
      a: "Pulse visualises movement, atmosphere, nightlife density, live energy, Radio activity, venue gravity, community signals and recovery visibility. The goal isn't surveillance — it's queer signal infrastructure.",
      open: true,
    },
    {
      group: "PULSE · SIGNALS",
      q: "What are Beacons?",
      a: "Live signals dropped into the Globe. They can represent venues, nightlife, creators, retailers, sellers, events, recovery spaces, cultural moments. Beacons shape movement and atmosphere across the ecosystem.",
    },
    {
      group: "PULSE · SIGNALS",
      q: "Is location tracking exact?",
      a: "No. HOTMESS uses opt-in visibility, obfuscated coordinates, privacy controls, and mutual visibility logic. The platform is designed around atmosphere and movement, not precise surveillance.",
    },
    {
      group: "PULSE · SIGNALS",
      q: "Is HOTMESS anonymous?",
      a: "HOTMESS balances visibility, privacy, atmosphere, consent and mutuality. Users control how visible they are and what signals they participate in.",
    },
    {
      group: "PULSE · SIGNALS",
      q: "Why does HOTMESS include Radio?",
      a: "Because nightlife has atmosphere. Radio creates continuity, ambient presence, emotional texture, shared cultural rhythm. The world should feel alive even when you aren't directly interacting.",
    },

    {
      group: "PEOPLE LAYERS",
      q: "What is Ghosted?",
      a: "HOTMESS' mutual chemistry system. Conversation only unlocks after mutual interest is shared. Less rejection fatigue, less noise, softer interaction, more consent, better emotional experience.",
    },
    {
      group: "PEOPLE LAYERS",
      q: "What is Hand in Hand?",
      tone: "recovery",
      lede: "Care is infrastructure.",
      a: "Hand in Hand is the care and recovery layer inside HOTMESS. It exists because queer nightlife does not end when the lights come on. Features include aftercare, trusted contacts, recovery overlays, ride-safe tools, softer landing infrastructure and emotional continuity.",
    },
    {
      group: "PEOPLE LAYERS",
      q: "Is HOTMESS only for nightlife?",
      a: "No. People use HOTMESS for nightlife, Radio, mutual connection, recovery, Preloved, community, safer travel, queer discovery, events, commerce and atmosphere. Different users experience different layers of the same world.",
    },
    {
      group: "PEOPLE LAYERS",
      q: "Is HOTMESS focused on safety?",
      tone: "recovery",
      a: "Yes. Safety is integrated directly into the ecosystem through trusted contacts, SOS tooling, ride-safe flows, mutuality systems, visibility controls, recovery infrastructure, quieter overlays and care systems. The goal is safer participation without flattening nightlife culture.",
    },
    {
      group: "PEOPLE LAYERS",
      q: "Is HOTMESS replacing queer nightlife?",
      a: "No. HOTMESS exists to strengthen queer nightlife infrastructure, not replace it. The platform supports venues, movement, creators, care, recovery, safer participation and cultural continuity. The city comes first.",
    },

    {
      group: "COMMERCE · VENUES",
      q: "Can venues join HOTMESS?",
      tone: "gold",
      a: "Yes. Venues become live signal participants — they activate Beacons, appear on Pulse, influence movement, connect to Radio, participate in nightlife atmosphere, integrate Tap-Pack onboarding. Partners participate in the ecosystem rather than buying traditional ads.",
    },
    {
      group: "COMMERCE · VENUES",
      q: "What is the Tap-Pack?",
      a: "HOTMESS' physical onboarding infrastructure. Using QR/NFC, venues onboard guests instantly, activate Pulse participation, trigger safer nightlife flows, and connect physical nightlife to the Globe. It bridges the physical city and the digital world.",
    },
    {
      group: "COMMERCE · VENUES",
      q: "Do vendors or brands buy ads?",
      tone: "gold",
      lede: "Participation, not ad inventory.",
      a: "Not in the traditional sense. Vendors, retailers and creators become live signals, discovery points, cultural participants and ecosystem contributors. The focus is atmosphere, movement, visibility and scene participation — not banner advertising.",
    },
    {
      group: "COMMERCE · VENUES",
      q: "What is Preloved?",
      a: "HOTMESS' queer resale and circulation layer — clothing drops, nightlife resale, scene circulation, local discovery, memory commerce. Not generic resale. Circulation inside queer culture.",
    },
    {
      group: "COMMERCE · VENUES",
      q: "Is HOTMESS live now?",
      a: "Yes. The ecosystem is already active and evolving. Current systems: Globe / Pulse, Ghosted, Safety suite, Hand in Hand, Radio, Market / Preloved, Beacons, live movement, trusted contacts, venue infrastructure. Shipping publicly. Evolving continuously.",
    },
  ];

  // Group rendering
  const groups = [];
  faqs.forEach((f) => {
    const last = groups[groups.length - 1];
    if (last && last.group === f.group) last.items.push(f);
    else groups.push({ group: f.group, items: [f] });
  });

  return (
    <section id="faq" className="wrap" style={{ marginTop: 120 }}>
      <div className="ch">
        <div className="ch-no">§20<br/>FAQ</div>
        <div className="ch-head">
          <div className="ch-title">Questions, before<br/>you become a signal.</div>
          <div className="ch-meta">STRATEGIC · CULTURAL · COMMERCIAL · TECHNICAL</div>
        </div>
      </div>

      <Reveal>
        <p className="serif" style={{
          fontSize: "clamp(22px, 2.6vw, 32px)", lineHeight: 1.25, maxWidth: "40ch",
          marginTop: 32, color: "var(--ink-2)",
        }}>
          We answer the same questions every week. Here they all are,&nbsp;<span style={{ color: "var(--gold)" }}>in&nbsp;public</span>.
        </p>
      </Reveal>

      <div style={{ marginTop: 48 }}>
        {groups.map((g, gi) => (
          <div key={g.group} style={{ marginTop: gi === 0 ? 0 : 40 }}>
            <Reveal>
              <div className="row-96" style={{ paddingTop: 18 }}>
                <div className="mono" style={{ color: "var(--gold)" }}>{g.group}</div>
                <div>
                  {g.items.map((f, i) => {
                    const accent = f.tone === "recovery" ? "var(--recovery-blue)" : f.tone === "gold" ? "var(--gold)" : "var(--ink)";
                    return (
                      <details key={i} open={f.open} className="faq-item" style={{
                        borderTop: "1px solid var(--line)",
                        padding: "22px 0",
                      }}>
                        <summary style={{
                          listStyle: "none", cursor: "pointer",
                          display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 24,
                          outline: "none",
                        }}>
                          <span className="display" style={{
                            fontSize: "clamp(20px, 2.2vw, 28px)",
                            lineHeight: 1.1, letterSpacing: "-0.005em",
                            color: "var(--ink)", textTransform: "none",
                          }}>{f.q}</span>
                          <span className="mono faq-toggle" style={{
                            color: "var(--gold)", flexShrink: 0,
                            transition: "transform .25s",
                          }}>+</span>
                        </summary>
                        <div style={{ marginTop: 16, paddingLeft: 0 }}>
                          {f.lede && (
                            <p className="serif" style={{
                              fontSize: "clamp(20px, 2.2vw, 28px)", lineHeight: 1.2,
                              color: accent, margin: 0, marginBottom: 14, maxWidth: "30ch",
                            }}>
                              {f.lede}
                            </p>
                          )}
                          <p style={{
                            fontSize: 15, color: "var(--ink-2)", lineHeight: 1.65, margin: 0, maxWidth: "60ch",
                          }}>{f.a}</p>
                        </div>
                      </details>
                    );
                  })}
                </div>
              </div>
            </Reveal>
          </div>
        ))}
      </div>

      {/* Closing nudge */}
      <Reveal>
        <div className="row-96-2" style={{
          marginTop: 64, paddingTop: 28, borderTop: "1px solid var(--gold)",
          alignItems: "baseline",
        }}>
          <div className="mono" style={{ color: "var(--gold)" }}>STILL CURIOUS?</div>
          <p className="serif" style={{ fontSize: "clamp(20px, 2.2vw, 28px)", lineHeight: 1.25, color: "var(--ink)", margin: 0, maxWidth: "32ch" }}>
            Ask the next one directly.
          </p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <a href="#conversion" className="btn btn-solid">Send a question →</a>
            <a href="mailto:phil@hotmessldn.com" className="btn btn-ghost">phil@hotmessldn.com</a>
          </div>
        </div>
      </Reveal>
    </section>
  );
}
function ConversionSection() {
  const [type, setType] = useStateS("venue");
  const [name, setName] = useStateS("");
  const [email, setEmail] = useStateS("");
  const [note, setNote] = useStateS("");
  const [cityField, setCityField] = useStateS("");
  const [state, setState] = useStateS("idle"); // idle | sending | err | ok
  const [msg, setMsg] = useStateS("");

  const types = [
    { id: "venue",    label: "VENUE",    sub: "bar · club · sauna" },
    { id: "vendor",   label: "VENDOR",   sub: "brand · seller · pop-up" },
    { id: "creator",  label: "CREATOR",  sub: "DJ · promoter · host" },
    { id: "recovery", label: "RECOVERY", sub: "org · charity · service" },
    { id: "city",     label: "CITY",     sub: "founding rollout interest" },
    { id: "founder",  label: "FOUNDER",  sub: "talk to Phil directly" },
  ];

  const submit = async (e) => {
    e.preventDefault();
    const okEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim());
    if (!okEmail) { setState("err"); setMsg("That email doesn't read right. Try again."); return; }
    if (!name.trim()) { setState("err"); setMsg("Tell us who you are first — name or room."); return; }

    setState("sending");
    setMsg("Sending to vendors@hotmessldn.com…");

    try {
      const res = await fetch("/api/partners/inquiry", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          type,
          name: name.trim(),
          email: email.trim(),
          city: cityField.trim() || null,
          note: note.trim() || null,
          source: "founding-site/v2",
          ts: new Date().toISOString(),
        }),
      });

      if (!res.ok) {
        // Endpoint may not exist yet — fall through to mailto fallback
        throw new Error("non-200");
      }

      setState("ok");
      setMsg("In. Phil reads inquiries personally. Expect a reply within 24 hours from vendors@hotmessldn.com.");
      setName(""); setEmail(""); setNote(""); setCityField("");
    } catch (err) {
      // Graceful fallback: open the user's mail client pre-filled
      const subject = encodeURIComponent(`[${type.toUpperCase()}] HOTMESS partner inquiry — ${name || "(no name)"}`);
      const body = encodeURIComponent(
        `Type: ${type}\nName / room: ${name}\nEmail: ${email}\nCity: ${cityField || "—"}\n\n${note || ""}\n\n— sent from founding-site/v2`
      );
      window.location.href = `mailto:vendors@hotmessldn.com?subject=${subject}&body=${body}`;
      setState("ok");
      setMsg("Opening your mail client — finish the send from there. (Endpoint not wired yet; mail fallback active.)");
    }
  };

  const cityActive = type === "city";

  return (
    <section id="conversion" className="wrap" style={{ marginTop: 120 }}>
      <div className="ch">
        <div className="ch-no">§21<br/>BECOME&nbsp;A<br/>SIGNAL</div>
        <div className="ch-head">
          <div className="ch-title">Conversion infrastructure.</div>
          <div className="ch-meta">ONE FORM · ROUTED CORRECTLY · HUMAN AT THE END</div>
        </div>
      </div>

      <Reveal>
        <p className="serif" style={{
          fontSize: "clamp(26px, 3vw, 38px)", lineHeight: 1.15, maxWidth: "30ch",
          marginTop: 32, color: "var(--ink)",
        }}>
          Tell us who you are.<br/><span style={{ color: "var(--gold)" }}>We route the rest.</span>
        </p>
      </Reveal>

      {/* Type selector */}
      <Reveal delay={2}>
        <div className="mobile-stack" style={{ marginTop: 32, display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", gap: 0, border: "1px solid var(--line)" }}>
          {types.map((t, i) => {
            const active = type === t.id;
            return (
              <button key={t.id} type="button" onClick={() => setType(t.id)} style={{
                padding: "18px 16px",
                background: active ? "var(--gold)" : "transparent",
                color: active ? "var(--bg)" : "var(--ink-2)",
                border: "none",
                borderRight: i < types.length - 1 ? "1px solid var(--line)" : "none",
                cursor: "pointer",
                textAlign: "left",
                transition: "background .2s, color .2s",
              }}>
                <div className="mono" style={{ color: active ? "var(--bg)" : "var(--gold)" }}>{t.label}</div>
                <div className="mono" style={{ color: active ? "rgba(5,5,7,0.7)" : "var(--ink-4)", marginTop: 4, textTransform: "none", letterSpacing: 0, fontFamily: "var(--sans)", fontSize: 11 }}>{t.sub}</div>
              </button>
            );
          })}
        </div>
      </Reveal>

      {/* Form */}
      <Reveal>
        <form onSubmit={submit} noValidate style={{
          marginTop: 0, padding: "32px clamp(20px, 4vw, 40px)",
          border: "1px solid var(--line)", borderTop: "none",
          background: "rgba(255,255,255,0.015)",
        }}>
          <div className="mobile-stack" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 18 }}>
            <label style={{ display: "grid", gap: 8 }}>
              <span className="mono" style={{ color: "var(--gold)" }}>
                {cityActive ? "YOUR NAME" : "YOUR NAME / ROOM"}
              </span>
              <input
                value={name} onChange={(e) => setName(e.target.value)}
                placeholder={type === "venue" ? "e.g. The Glory, E2" : type === "vendor" ? "e.g. RAW001 / brand name" : type === "creator" ? "e.g. SMASH DADDY / promoter name" : type === "recovery" ? "e.g. London Friend" : type === "city" ? "Your name" : "Name + room"}
                style={{
                  background: "transparent", border: "1px solid var(--line-2)", color: "var(--ink)",
                  padding: "14px 16px", fontFamily: "var(--mono)", letterSpacing: "0.04em", fontSize: 12,
                }}
              />
            </label>
            <label style={{ display: "grid", gap: 8 }}>
              <span className="mono" style={{ color: "var(--gold)" }}>EMAIL</span>
              <input
                type="email"
                value={email} onChange={(e) => { setEmail(e.target.value); if (state === "err") setState("idle"); }}
                placeholder="you@somewhere.com"
                className={state === "err" ? "err" : ""}
                style={{
                  background: "transparent", border: state === "err" ? "1px solid #ff5b5b" : "1px solid var(--line-2)", color: "var(--ink)",
                  padding: "14px 16px", fontFamily: "var(--mono)", letterSpacing: "0.04em", fontSize: 12,
                }}
              />
            </label>
            <label style={{ display: "grid", gap: 8 }}>
              <span className="mono" style={{ color: "var(--gold)" }}>
                {cityActive ? "CITY · POSTCODE" : "CITY (OPTIONAL)"}
              </span>
              <input
                value={cityField} onChange={(e) => setCityField(e.target.value)}
                placeholder={cityActive ? "e.g. Berlin · 10999" : "London"}
                style={{
                  background: "transparent", border: "1px solid var(--line-2)", color: "var(--ink)",
                  padding: "14px 16px", fontFamily: "var(--mono)", letterSpacing: "0.04em", fontSize: 12,
                }}
              />
            </label>
          </div>

          <label style={{ display: "grid", gap: 8, marginTop: 18 }}>
            <span className="mono" style={{ color: "var(--gold)" }}>
              {type === "venue" && "WHAT KIND OF ROOM"}
              {type === "vendor" && "WHAT DO YOU SELL"}
              {type === "creator" && "WHAT DO YOU PLAY / RUN"}
              {type === "recovery" && "WHAT DO YOU OFFER"}
              {type === "city" && "WHAT YOU ALREADY RUN THERE"}
              {type === "founder" && "WHAT'S ON YOUR MIND"}
            </span>
            <textarea
              rows={3}
              value={note} onChange={(e) => setNote(e.target.value)}
              placeholder={cityActive
                ? "Rooms, residents, recovery work, scene history — anything that makes you the obvious operator."
                : "Tell us, in a sentence or two. We read everything."}
              style={{
                background: "transparent", border: "1px solid var(--line-2)", color: "var(--ink)",
                padding: "14px 16px", fontFamily: "var(--sans)", letterSpacing: "0.01em", fontSize: 14,
                resize: "vertical",
              }}
            />
          </label>

          <div style={{ marginTop: 24, display: "flex", gap: 14, flexWrap: "wrap", alignItems: "center" }}>
            <button type="submit" className="btn btn-solid" disabled={state === "sending"} style={state === "sending" ? { opacity: 0.6, cursor: "wait" } : {}}>
              {state === "sending" ? "Sending…" : "Send →"}
            </button>
            <a href="https://calendly.com/hotmess" target="_blank" rel="noreferrer" className="btn btn-ghost">Or book 20 min ↗</a>
            <a href="mailto:vendors@hotmessldn.com" className="mono" style={{ color: "var(--ink-3)" }}>vendors@hotmessldn.com</a>
          </div>
          {msg && (
            <div className={`form-msg ${state === "ok" ? "ok" : state === "err" ? "err" : ""}`} style={{ marginTop: 14 }}>{msg}</div>
          )}
        </form>
      </Reveal>

      {/* Direct routes — for people who skip the form */}
      <Reveal>
        <div className="row-96-3" style={{ marginTop: 56, paddingTop: 32, borderTop: "1px solid var(--line)" }}>
          <div className="mono" style={{ color: "var(--gold)" }}>OR&nbsp;ROUTE<br/>DIRECTLY</div>
          <div>
            <div className="mono" style={{ color: "var(--ink-3)" }}>NIGHTLIFE OPERATORS</div>
            <a className="mono" href="mailto:vendors@hotmessldn.com" style={{ color: "var(--ink)", display: "block", marginTop: 10 }}>vendors@hotmessldn.com</a>
            <a className="mono" href="https://calendly.com/hotmess" style={{ color: "var(--gold)", display: "block", marginTop: 6 }}>Book a call ↗</a>
          </div>
          <div>
            <div className="mono" style={{ color: "var(--ink-3)" }}>RECOVERY · COMMUNITY</div>
            <a className="mono" href="mailto:care@hotmessldn.com" style={{ color: "var(--ink)", display: "block", marginTop: 10 }}>care@hotmessldn.com</a>
            <span className="mono" style={{ color: "var(--ink-4)", display: "block", marginTop: 6, textTransform: "none", letterSpacing: 0, fontFamily: "var(--sans)", fontStyle: "italic", fontSize: 12 }}>Free-tier relationship waiting.</span>
          </div>
          <div>
            <div className="mono" style={{ color: "var(--ink-3)" }}>PHIL DIRECT</div>
            <a className="mono" href="mailto:phil@hotmessldn.com" style={{ color: "var(--ink)", display: "block", marginTop: 10 }}>phil@hotmessldn.com</a>
            <a className="mono" href="https://wa.me/447457404159" target="_blank" rel="noreferrer" style={{ color: "#25D366", display: "inline-flex", alignItems: "center", gap: 6, marginTop: 8 }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="#25D366" aria-hidden="true"><path d="M17.6 14.2c-.3-.1-1.7-.8-2-.9s-.5-.1-.7.1-.8.9-1 1.1-.4.2-.7.1c-.3-.1-1.2-.5-2.3-1.4-.9-.7-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6.1-.1.3-.4.4-.5.1-.2.2-.3.3-.5s0-.4 0-.5-.7-1.7-1-2.3c-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.7.4-.3.3-1 1-1 2.4s1 2.8 1.2 3c.2.2 2.1 3.3 5.2 4.6.7.3 1.3.5 1.7.7.7.2 1.4.2 1.9.1.6-.1 1.7-.7 2-1.4.3-.7.3-1.3.2-1.4-.1-.1-.3-.2-.6-.3M12 2C6.5 2 2 6.5 2 12c0 1.7.4 3.3 1.2 4.7L2 22l5.4-1.2c1.4.7 2.9 1.1 4.6 1.1 5.5 0 10-4.5 10-10S17.5 2 12 2"/></svg>
              WHATSAPP · 07457 404159
            </a>
            <span className="mono" style={{ color: "var(--ink-4)", display: "block", marginTop: 8, textTransform: "none", letterSpacing: 0, fontFamily: "var(--sans)", fontStyle: "italic", fontSize: 12 }}>Reads everything. Replies in 24h.</span>
          </div>
        </div>
      </Reveal>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// TrustSection — privacy, safety, partner, HNH clarity. Legal architecture in HOTMESS voice.
function TrustSection() {
  const isList = [
    "Queer infrastructure",
    "Movement visibility",
    "Mutuality-first interaction",
    "Atmosphere + ambient presence",
    "Care continuity tooling",
    "Signal participation for partners",
    "Opt-in, obfuscated, ghosted by default",
  ];
  const isNotList = [
    "Exact location surveillance",
    "A nightlife authority or venue certification",
    "Emergency services or guaranteed intervention",
    "Therapy, addiction treatment, or healthcare",
    "A traditional dating app or hookup guarantee",
    "An ad network or attention-farming feed",
    "A platform that controls human behaviour",
  ];

  const cards = [
    {
      tag: "PRIVACY + LOCATION",
      head: "Energy, not exact movement.",
      body: "Coordinates are obfuscated by default. Visibility is opt-in. Ghosted is the default for anything that matters. You control how visible you are, what signals you participate in, and when you disappear.",
      meta: "OPT-IN · FUZZED COORDS · MUTUALITY-FIRST",
      color: "var(--gold)",
    },
    {
      tag: "SAFETY",
      head: "Care tools, not promises.",
      body: "HOTMESS supports safer participation through trusted-contact tooling, ride-safe flows, check-in timers, and aftercare layers. It is not emergency services and does not provide medical supervision or guaranteed intervention. In a crisis, call your local emergency number.",
      meta: "COMMUNITY TOOLS · NOT 999/911 · NOT MEDICAL",
      color: "var(--recovery-blue)",
    },
    {
      tag: "PARTNERS + VENUES",
      head: "Independent participants.",
      body: "Founding partners participate in Pulse, activate signals and contribute atmosphere. They are not HOTMESS-operated spaces — HOTMESS does not certify venues, supervise conduct, or control nightlife operations.",
      meta: "INDEPENDENT · PARTICIPATING · NOT CERTIFIED",
      color: "#4dc0ff",
    },
    {
      tag: "HAND IN HAND",
      head: "Community care, not therapy.",
      body: "Hand in Hand is community care infrastructure — softer landing rooms, aftercare overlays, peer continuity. It is not therapy, addiction treatment or crisis response. If you need clinical care, please reach a qualified service. We list a few we respect under the Recovery section.",
      meta: "PEER · COMMUNITY · NOT CLINICAL",
      color: "var(--recovery-blue)",
    },
    {
      tag: "MARKET + PRELOVED",
      head: "Adult queer commerce, moderated.",
      body: "Drops, Preloved and seller signals are 18+. Prohibited items removed on report. Sellers carry their own accountability — HOTMESS provides the layer, not the inventory. Disputes routed via vendors@hotmessldn.com.",
      meta: "18+ · MODERATED · TAKEDOWN ON REPORT",
      color: "var(--gold)",
    },
    {
      tag: "DATA",
      head: "Stored quietly, expires often.",
      body: "Beacons expire in hours. Presence is fuzzed. Trusted contacts see only what you've explicitly shared. Ghosted protects visibility before any interaction. Full architecture in our human-language privacy notes — not GDPR sludge.",
      meta: "MINIMAL · TEMPORARY · OPT-IN",
      color: "var(--gold)",
    },
  ];

  return (
    <section id="trust" className="wrap" style={{ marginTop: 120 }}>
      <div className="ch">
        <div className="ch-no">§19<br/>TRUST</div>
        <div className="ch-head">
          <div className="ch-title">What HOTMESS does.<br/>What it&nbsp;doesn't.</div>
          <div className="ch-meta">PRIVACY · SAFETY · PARTNERS · CARE · COMMERCE · DATA</div>
        </div>
      </div>

      <Reveal>
        <p className="serif" style={{
          fontSize: "clamp(26px, 3.2vw, 42px)", lineHeight: 1.1, maxWidth: "28ch",
          marginTop: 40, color: "var(--ink)",
        }}>
          HOTMESS facilitates participation.<br/>
          <span style={{ color: "var(--gold)" }}>It doesn't control human&nbsp;behaviour.</span>
        </p>
      </Reveal>

      {/* IS / IS NOT diptych */}
      <Reveal delay={2}>
        <div className="mobile-stack" style={{ marginTop: 48, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, border: "1px solid var(--line)" }}>
          {/* IS column */}
          <div style={{ padding: "28px 28px", borderRight: "1px solid var(--line)", background: "rgba(200,150,44,0.04)" }}>
            <div className="mono" style={{ color: "var(--gold)" }}>HOTMESS IS</div>
            <ul style={{ listStyle: "none", padding: 0, margin: "18px 0 0", display: "grid", gap: 10 }}>
              {isList.map((l) => (
                <li key={l} className="serif" style={{
                  fontSize: "clamp(16px, 1.8vw, 21px)", lineHeight: 1.3,
                  color: "var(--ink)",
                  display: "grid", gridTemplateColumns: "14px 1fr", gap: 10,
                }}>
                  <span style={{ color: "var(--gold)" }}>+</span><span>{l}</span>
                </li>
              ))}
            </ul>
          </div>

          {/* IS NOT column */}
          <div style={{ padding: "28px 28px", background: "rgba(255,59,48,0.03)" }}>
            <div className="mono" style={{ color: "var(--signal-red)" }}>HOTMESS IS NOT</div>
            <ul style={{ listStyle: "none", padding: 0, margin: "18px 0 0", display: "grid", gap: 10 }}>
              {isNotList.map((l) => (
                <li key={l} className="serif" style={{
                  fontSize: "clamp(16px, 1.8vw, 21px)", lineHeight: 1.3,
                  color: "var(--ink-3)",
                  display: "grid", gridTemplateColumns: "14px 1fr", gap: 10,
                }}>
                  <span style={{ color: "var(--signal-red)" }}>−</span><span>{l}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </Reveal>

      {/* Six clarity cards */}
      <div className="grid-3" style={{ marginTop: 56 }}>
        {cards.map((c, i) => (
          <Reveal key={c.tag} delay={Math.min(i + 1, 3)}>
            <div className="panel" style={{ height: "100%", display: "flex", flexDirection: "column", gap: 10, borderColor: `${c.color}33` }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <span style={{ width: 8, height: 8, borderRadius: "50%", background: c.color, boxShadow: `0 0 10px ${c.color}` }}></span>
                <div className="mono" style={{ color: c.color }}>{c.tag}</div>
              </div>
              <div className="display" style={{ fontSize: 22, lineHeight: 1, letterSpacing: "-0.005em", color: c.color }}>{c.head}</div>
              <p style={{ marginTop: 0, fontSize: 14, lineHeight: 1.6, color: "var(--ink-2)" }}>{c.body}</p>
              <div className="mono" style={{ marginTop: "auto", paddingTop: 10, color: "var(--ink-4)", fontSize: 10 }}>{c.meta}</div>
            </div>
          </Reveal>
        ))}
      </div>

      {/* Closing line + routes */}
      <Reveal>
        <div className="row-96-2" style={{
          marginTop: 64, paddingTop: 28, borderTop: "1px solid var(--gold)",
          alignItems: "baseline",
        }}>
          <div className="mono" style={{ color: "var(--gold)" }}>THE LINE<br/>WE DON'T MOVE</div>
          <p className="serif" style={{ fontSize: "clamp(22px, 2.6vw, 32px)", lineHeight: 1.2, color: "var(--ink)", margin: 0, maxWidth: "32ch" }}>
            Care first. Privacy by default. <span style={{ color: "var(--gold)" }}>Mutuality before&nbsp;message.</span>
          </p>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            <a className="mono" href="mailto:care@hotmessldn.com" style={{ color: "var(--recovery-blue)" }}>care@hotmessldn.com — safety + recovery</a>
            <a className="mono" href="mailto:compliance@hotmessldn.com" style={{ color: "var(--ink)" }}>compliance@hotmessldn.com — moderation + reports</a>
            <a className="mono" href="/privacy" style={{ color: "var(--ink-3)" }}>Privacy notes (human-language) ↗</a>
          </div>
        </div>
      </Reveal>
    </section>
  );
}

Object.assign(window, { TrustSection });

// ─────────────────────────────────────────────────────────────────────────────
// AmbientSection — the world keeps breathing when nobody's interacting.
// Answers: continuity infrastructure, ambient presence, "not surveillance", future vision.
function AmbientSection() {
  const layers = [
    { tag: "RADIO",    body: "Resident mix still scoring the globe.", color: "var(--signal-red)" },
    { tag: "PULSE",    body: "City rhythm still readable. Density still rising and falling.", color: "var(--gold)" },
    { tag: "VENUES",   body: "Persistent pins still glowing. Beacons holding their hours.", color: "#4dc0ff" },
    { tag: "RECOVERY", body: "Hand in Hand still on the bottle. Sunday rooms still open.", color: "var(--recovery-blue)" },
    { tag: "MARKET",   body: "Drops still surfacing. Sellers still circulating.", color: "var(--gold)" },
    { tag: "CARE",     body: "Check-In Timers still running. Help Beacons still primed.", color: "var(--recovery-blue)" },
  ];

  return (
    <section id="ambient" className="wrap" style={{ marginTop: 120 }}>
      <div className="ch">
        <div className="ch-no">§12<br/>AMBIENT</div>
        <div className="ch-head">
          <div className="ch-title">The world keeps&nbsp;breathing<br/>when nobody's talking.</div>
          <div className="ch-meta">CONTINUITY INFRASTRUCTURE · NOT INTERACTION-DEPENDENT</div>
        </div>
      </div>

      <Reveal>
        <p className="serif" style={{
          fontSize: "clamp(28px, 4vw, 56px)", lineHeight: 1.05, letterSpacing: "-0.01em",
          maxWidth: "22ch", marginTop: 40, color: "var(--ink)",
        }}>
          Most apps die when the&nbsp;<span style={{ color: "var(--gold)" }}>interaction&nbsp;stops</span>.
        </p>
      </Reveal>

      <Reveal delay={2}>
        <p style={{
          fontSize: 17, color: "var(--ink-2)", lineHeight: 1.6, marginTop: 24, maxWidth: "60ch",
        }}>
          HOTMESS doesn't. Even with the app closed, you're still inside the world: the Radio plays, the Pulse moves, recovery rooms hold their shape, the city carries on. <span style={{ color: "var(--ink)" }}>Ambient presence is the product</span>, not the side-effect.
        </p>
      </Reveal>

      <div className="grid-3" style={{ marginTop: 56 }}>
        {layers.map((l, i) => (
          <Reveal key={l.tag} delay={Math.min(i + 1, 3)}>
            <div className="panel" style={{ height: "100%", display: "flex", flexDirection: "column", gap: 10, borderColor: `${l.color}33` }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <span style={{ width: 8, height: 8, borderRadius: "50%", background: l.color, boxShadow: `0 0 10px ${l.color}` }}></span>
                <div className="mono" style={{ color: l.color }}>{l.tag}</div>
              </div>
              <p style={{ marginTop: 0, fontSize: 14, lineHeight: 1.55, color: "var(--ink-2)" }}>{l.body}</p>
            </div>
          </Reveal>
        ))}
      </div>

      {/* Not surveillance — the reassurance moment */}
      <Reveal>
        <div className="row-96-2" style={{
          marginTop: 64, paddingTop: 28,
          borderTop: "1px solid var(--gold)",
          alignItems: "baseline",
        }}>
          <div className="mono" style={{ color: "var(--gold)" }}>AND&nbsp;NO,<br/>NOT&nbsp;THIS</div>
          <p className="serif" style={{ fontSize: "clamp(22px, 2.6vw, 32px)", lineHeight: 1.2, color: "var(--ink)", margin: 0, maxWidth: "30ch" }}>
            Ambient is not&nbsp;<span style={{ color: "var(--gold)" }}>surveillance</span>.
          </p>
          <p style={{ fontSize: 15, color: "var(--ink-2)", lineHeight: 1.6, margin: 0, maxWidth: "44ch" }}>
            Coordinates are fuzzed. Visibility is opt-in. Ghosted is the default. The world reads <em style={{ color: "var(--ink)" }}>atmosphere</em>, not people. You're inside the room; the room is not inside you.
          </p>
        </div>
      </Reveal>

      {/* Future vision — the beginning */}
      <Reveal>
        <div style={{
          marginTop: 64, padding: "48px clamp(20px, 4vw, 56px)",
          border: "1px solid var(--line)",
          background: "radial-gradient(ellipse at 20% 0%, rgba(200,150,44,0.06) 0%, rgba(0,0,0,0) 60%)",
        }}>
          <div className="mono" style={{ color: "var(--gold)" }}>THIS IS THE BEGINNING</div>
          <p className="serif" style={{
            fontSize: "clamp(24px, 3.4vw, 44px)", lineHeight: 1.1, letterSpacing: "-0.01em",
            color: "var(--ink)", marginTop: 18, marginBottom: 0, maxWidth: "32ch",
          }}>
            More cities. Deeper Pulse. Richer atmosphere.<br/>
            <span style={{ color: "var(--gold)" }}>Denser care.</span>
          </p>
          <p className="mono" style={{ marginTop: 18, color: "var(--ink-4)", textTransform: "none", letterSpacing: 0, fontFamily: "var(--sans)", fontStyle: "italic", fontSize: 13 }}>
            Shipping slowly. In public. Founder reads every inquiry.
          </p>
        </div>
      </Reveal>
    </section>
  );
}

Object.assign(window, { AmbientSection });

// ─────────────────────────────────────────────────────────────────────────────
// DispatchesSection — operator log. Honest "becoming" signals, not fabricated activity.
function DispatchesSection() {
  const dispatches = [
    { when: "NOW",          where: "LONDON",         what: "Live MVP. Pulse infrastructure shipping in public.",          tone: "gold" },
    { when: "ACTIVE",       where: "FOUNDER BENCH",  what: "Partner onboarding open. One operator reads every inquiry.", tone: "gold" },
    { when: "ALWAYS",       where: "GLOBE",          what: "HOTMESS Radio. 24/7 atmosphere transmission.",                tone: "signal" },
    { when: "FORMING",      where: "FOUNDING COHORT",what: "First venues, retailers, creators registering interest.",     tone: "ink" },
    { when: "SUNDAYS",      where: "AIR",            what: "Hand N Hand broadcast — the only place to land.",             tone: "recovery" },
    { when: "ACTIVE",       where: "RAW CONVICT",    what: "RAW001 out now. Next release cycle in development.",          tone: "signal" },
    { when: "FORMING",      where: "CITY ROLLOUT",   what: "Founding city leads forming beyond London. Talk first.",      tone: "ink" },
    { when: "ONGOING",      where: "SIGNAL LAYER",   what: "New layers shipping every week. Architecture expanding.",      tone: "gold" },
  ];

  return (
    <section id="dispatches" className="wrap" style={{ marginTop: 120 }}>
      <div className="ch">
        <div className="ch-no">§13<br/>OPERATOR&nbsp;LOG</div>
        <div className="ch-head">
          <div className="ch-title">Signs of life.<br/>From the founder's&nbsp;bench.</div>
          <div className="ch-meta">SHIPPING SLOWLY · IN PUBLIC · ONE OPERATOR · READING EVERYTHING</div>
        </div>
      </div>

      <Reveal>
        <div style={{ marginTop: 40, border: "1px solid var(--line)" }}>
          {dispatches.map((d, i) => {
            const accent = d.tone === "recovery" ? "var(--recovery-blue)" : d.tone === "signal" ? "var(--signal-red)" : d.tone === "ink" ? "var(--ink)" : "var(--gold)";
            return (
              <div key={i} className="mobile-stack" style={{
                display: "grid", gridTemplateColumns: "minmax(120px, 14ch) minmax(160px, 18ch) 1fr",
                gap: 20, padding: "16px 24px", alignItems: "baseline",
                borderTop: i > 0 ? "1px solid var(--line)" : "none",
              }}>
                <div className="mono" style={{ color: "var(--ink-3)" }}>
                  <span style={{ display: "inline-block", width: 6, height: 6, borderRadius: "50%", background: accent, marginRight: 8, verticalAlign: "1px", boxShadow: `0 0 8px ${accent}` }}></span>
                  {d.when}
                </div>
                <div className="mono" style={{ color: accent }}>{d.where}</div>
                <div className="serif" style={{ fontSize: "clamp(16px, 1.6vw, 20px)", lineHeight: 1.3, color: "var(--ink)" }}>{d.what}</div>
              </div>
            );
          })}
        </div>
      </Reveal>

      <Reveal>
        <p className="mono" style={{
          marginTop: 24, color: "var(--ink-3)", textAlign: "right",
          textTransform: "none", letterSpacing: 0, fontFamily: "var(--sans)", fontStyle: "italic", fontSize: 13,
        }}>
          Real-time dispatches via{" "}
          <a href="https://instagram.com/hotmessldn" target="_blank" rel="noreferrer" style={{ color: "var(--gold)" }}>@hotmessldn</a>{" "}
          and{" "}
          <a href="https://wa.me/447457404159" target="_blank" rel="noreferrer" style={{ color: "#25D366" }}>WhatsApp</a>.
        </p>
      </Reveal>
    </section>
  );
}

Object.assign(window, { DispatchesSection });

// ─────────────────────────────────────────────────────────────────────────────
// SoundOfCitySection — Radio + RAW CONVICT + Globe as one atmospheric system
function SoundOfCitySection() {
  const pillars = [
    {
      tag: "RADIO",
      head: "Ambient continuity.",
      body: "HOTMESS Radio scores the city 24/7 — calm in the morning, building toward midnight, holding the room from 1am to 4. Resident DJs from partner venues. The globe hears what the room hears.",
      meta: "ALWAYS ON · QUEER-PROGRAMMED",
      color: "var(--signal-red)",
    },
    {
      tag: "RAW CONVICT",
      head: "Cultural transmission.",
      body: "The sister label. Records cut for the rooms the platform is built around. Originals released directly into the station, then out into the world. Not vanity — sonic infrastructure for the signal layer.",
      meta: "SISTER LABEL · ORIGINAL RELEASES",
      color: "var(--gold)",
    },
    {
      tag: "MUSIC",
      head: "Emotional infrastructure.",
      body: "Sound carries continuity that screens can't. The same set heard across postcodes pulls a city into one room. The right song at 4am does more than a notification ever could.",
      meta: "WORLD-STATE · NOT SOUNDTRACK",
      color: "var(--recovery-blue)",
    },
  ];

  const loop = [
    { step: "01", what: "RAW CONVICT release", color: "var(--gold)" },
    { step: "02", what: "Radio transmission",  color: "var(--signal-red)" },
    { step: "03", what: "Globe atmosphere shifts", color: "var(--ink)" },
    { step: "04", what: "Venue energy rises", color: "var(--ink)" },
    { step: "05", what: "Movement responds", color: "var(--ink)" },
    { step: "06", what: "Continuity deepens", color: "var(--recovery-blue)" },
  ];

  return (
    <section id="sound" className="wrap" style={{ marginTop: 120 }}>
      <div className="ch">
        <div className="ch-no">§11<br/>SOUND&nbsp;OF<br/>THE&nbsp;CITY</div>
        <div className="ch-head">
          <div className="ch-title">Cities don't just move.<br/>They&nbsp;<span style={{ color: "var(--gold)" }}>sound different</span>.</div>
          <div className="ch-meta">RADIO · RAW CONVICT · MUSIC AS WORLD-STATE INFRASTRUCTURE</div>
        </div>
      </div>

      {/* Lede + on-air pill */}
      <Reveal>
        <div className="mobile-stack" style={{ marginTop: 40, display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 48, alignItems: "center" }}>
          <p className="serif" style={{
            fontSize: "clamp(28px, 4vw, 56px)", lineHeight: 1.05, letterSpacing: "-0.01em",
            color: "var(--ink)", margin: 0, maxWidth: "26ch",
          }}>
            HOTMESS is&nbsp;<span style={{ color: "var(--gold)" }}>multisensory&nbsp;infrastructure</span>.<br/>
            Not just visual.
          </p>

          <div style={{
            padding: "20px 24px",
            border: "1px solid rgba(255,59,48,0.5)",
            background: "radial-gradient(ellipse at center, rgba(255,59,48,0.06) 0%, rgba(0,0,0,0) 70%)",
            display: "flex", flexDirection: "column", gap: 12,
          }}>
            <div className="mono" style={{ color: "var(--signal-red)" }}>
              <span style={{ display: "inline-block", width: 8, height: 8, borderRadius: "50%", background: "var(--signal-red)", marginRight: 8, verticalAlign: "1px", boxShadow: "0 0 10px var(--signal-red)", animation: "blink 1.6s ease-in-out infinite" }}></span>
              ON AIR · NOW
            </div>
            <div className="display" style={{ fontSize: 32, lineHeight: 0.95, color: "var(--ink)" }}>HOTMESS RADIO</div>
            <div className="mono" style={{ color: "var(--ink-3)", textTransform: "none", letterSpacing: 0, fontFamily: "var(--sans)", fontSize: 13, fontStyle: "italic" }}>
              The atmosphere is broadcasting whether you're watching or&nbsp;not.
            </div>
            <a href="https://listen.radioking.com/radio/hotmess-radio" target="_blank" rel="noreferrer" className="mono" style={{ color: "var(--signal-red)", borderBottom: "1px solid var(--signal-red)", paddingBottom: 4, alignSelf: "flex-start", marginTop: 4 }}>
              LISTEN LIVE ↗
            </a>
          </div>
        </div>
      </Reveal>

      {/* Three pillars */}
      <div className="grid-3" style={{ marginTop: 64 }}>
        {pillars.map((p, i) => (
          <Reveal key={p.tag} delay={Math.min(i + 1, 3)}>
            <div className="panel" style={{
              height: "100%", display: "flex", flexDirection: "column", gap: 14,
              borderColor: `${p.color}33`,
            }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <span style={{ width: 10, height: 10, borderRadius: "50%", background: p.color, boxShadow: `0 0 10px ${p.color}` }}></span>
                <div className="mono" style={{ color: p.color }}>{p.tag}</div>
              </div>
              <div className="display" style={{
                fontSize: "clamp(26px, 3vw, 36px)",
                lineHeight: 0.95, letterSpacing: "-0.01em",
                color: p.color,
              }}>{p.head}</div>
              <p style={{ marginTop: 0, fontSize: 14, lineHeight: 1.6, color: "var(--ink-2)" }}>{p.body}</p>
              <div className="mono" style={{ marginTop: "auto", paddingTop: 12, color: "var(--ink-4)", fontSize: 10 }}>{p.meta}</div>
            </div>
          </Reveal>
        ))}
      </div>

      {/* The loop */}
      <Reveal>
        <div style={{ marginTop: 80, paddingTop: 32, borderTop: "1px solid var(--gold)" }}>
          <div className="row-96-2" style={{ alignItems: "baseline" }}>
            <div className="mono" style={{ color: "var(--gold)" }}>THE LOOP</div>
            <p className="serif" style={{ fontSize: "clamp(22px, 2.6vw, 32px)", lineHeight: 1.2, color: "var(--ink)", margin: 0, maxWidth: "30ch" }}>
              How a record changes a&nbsp;city.
            </p>
            <p style={{ fontSize: 14, color: "var(--ink-3)", lineHeight: 1.55, margin: 0, maxWidth: "44ch" }}>
              Radio, RAW CONVICT and the Globe are one atmospheric system — not three media entities.
            </p>
          </div>

          <div className="mobile-stack" style={{
            marginTop: 32, display: "grid",
            gridTemplateColumns: "repeat(6, 1fr)",
            gap: 0,
            border: "1px solid var(--line)",
          }}>
            {loop.map((l, i) => (
              <div key={l.step} style={{
                padding: "20px 18px",
                borderLeft: i > 0 ? "1px solid var(--line)" : "none",
                display: "flex", flexDirection: "column", gap: 8,
                position: "relative",
                minHeight: 120,
              }}>
                <div className="mono" style={{ color: l.color }}>{l.step}</div>
                <div className="serif" style={{
                  fontSize: "clamp(15px, 1.4vw, 18px)", lineHeight: 1.25,
                  color: l.color === "var(--ink)" ? "var(--ink)" : l.color,
                }}>{l.what}</div>
                {i < loop.length - 1 && (
                  <span className="hide-sm" aria-hidden="true" style={{
                    position: "absolute", right: -7, top: "50%",
                    width: 14, height: 14, transform: "translateY(-50%)",
                    display: "flex", alignItems: "center", justifyContent: "center",
                    color: "var(--gold)", fontFamily: "var(--mono)", fontSize: 14,
                    background: "var(--bg)",
                  }}>→</span>
                )}
              </div>
            ))}
          </div>
        </div>
      </Reveal>

      {/* RAW001 + Radio visuals */}
      <Reveal>
        <div className="mobile-stack" style={{ marginTop: 64, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }}>
          {/* RAW CONVICT — RAW001 */}
          <div style={{
            padding: 0, overflow: "hidden",
            border: "1px solid rgba(255,59,48,0.45)",
            background: "#0a0507",
            position: "relative",
          }}>
            <div style={{ display: "flex", gap: 0 }}>
              <img
                loading="lazy"
                src="assets/raw001-hotmess.jpeg"
                alt="RAW001 — Hot Mess by Paul King ft Stewart Whoo"
                style={{ width: "44%", height: "auto", display: "block", flexShrink: 0 }}
              />
              <div style={{ padding: "24px 24px 24px 28px", display: "flex", flexDirection: "column", justifyContent: "space-between", gap: 18, flex: 1 }}>
                <div>
                  <div className="mono" style={{ color: "var(--signal-red)" }}>RAW001 · DEBUT</div>
                  <div className="display" style={{ fontSize: "clamp(22px, 2.4vw, 28px)", lineHeight: 1, marginTop: 12, color: "var(--ink)" }}>
                    "HOT MESS"
                  </div>
                  <div className="serif" style={{ fontSize: 16, fontStyle: "italic", color: "var(--ink-2)", marginTop: 8 }}>
                    Paul King ft Stewart Whoo
                  </div>
                </div>
                <div>
                  <p style={{ fontSize: 13, color: "var(--ink-3)", lineHeight: 1.5, margin: 0 }}>
                    First transmission. The label as the platform's voice.
                  </p>
                  <div className="mono" style={{ color: "var(--signal-red)", marginTop: 10, fontSize: 10 }}>OUT NOW · RAW CONVICT</div>
                </div>
              </div>
            </div>
          </div>

          {/* HOTMESS Radio panel */}
          <div style={{
            padding: 0, overflow: "hidden",
            border: "1px solid var(--line)",
            background: "#0a0a0d",
            position: "relative",
          }}>
            <img
              loading="lazy"
              src="assets/hotmess-radio.png"
              alt="HOTMESS RADIO — always too much, yet never enough."
              style={{ width: "100%", height: "100%", maxHeight: 240, objectFit: "cover", display: "block" }}
            />
            <div style={{ padding: "16px 20px", borderTop: "1px solid var(--line)" }}>
              <div className="mono" style={{ color: "var(--signal-red)" }}>
                <span style={{ display: "inline-block", width: 6, height: 6, borderRadius: "50%", background: "var(--signal-red)", marginRight: 6, verticalAlign: "1px" }}></span>
                ALWAYS TOO MUCH · NEVER ENOUGH
              </div>
              <div className="mono" style={{ color: "var(--ink-3)", marginTop: 6 }}>HOTMESS RADIO · 24/7</div>
            </div>
          </div>
        </div>
      </Reveal>

      {/* Sunday HNH callout */}
      <Reveal>
        <div className="row-96-2" style={{
          marginTop: 56, paddingTop: 28,
          borderTop: "1px solid var(--line)",
          alignItems: "baseline",
        }}>
          <div className="mono" style={{ color: "var(--recovery-blue)" }}>SUNDAYS</div>
          <div>
            <p className="serif" style={{ fontSize: "clamp(22px, 2.8vw, 36px)", lineHeight: 1.15, color: "var(--ink)", margin: 0, maxWidth: "30ch" }}>
              <span style={{ color: "var(--recovery-blue)" }}>HAND N HAND</span> — <em>the only place to&nbsp;land</em>.
            </p>
            <p className="mono" style={{ marginTop: 12, color: "var(--ink-3)", letterSpacing: "0.14em" }}>
              SPONSORED BY <span style={{ color: "#E8A33C" }}>HNH MESS LUBE</span>
            </p>
          </div>
          <p style={{ fontSize: 14, color: "var(--ink-2)", lineHeight: 1.6, margin: 0, maxWidth: "44ch" }}>
            The comedown show. The aftercare broadcast. Slow music. Soft landings. No performance required. The signal that says you can stop — on every bottle, on every Sunday.
          </p>
        </div>
      </Reveal>

      {/* Residents — names that score the world */}
      <Reveal>
        <div className="row-96" style={{ marginTop: 48, paddingTop: 28, borderTop: "1px solid var(--line)" }}>
          <div className="mono" style={{ color: "var(--gold)" }}>RESIDENTS</div>
          <div>
            <div className="mono" style={{ color: "var(--ink-3)" }}>THE NAMES THAT SCORE THE WORLD</div>
            <div style={{ marginTop: 18, display: "flex", flexWrap: "wrap", gap: 12 }}>
              {[
                { name: "SMASH DADDY", note: "founder · resident · Koh Samui", featured: true },
                { name: "PAUL KING",   note: "F1 · RAW001" },
                { name: "STEWART WHOO",note: "RAW001" },
                { name: "+ MORE",      note: "the rooms we partner with" },
              ].map((r) => (
                <div key={r.name} style={{
                  padding: "12px 16px",
                  border: `1px solid ${r.featured ? "var(--gold)" : "var(--line-2)"}`,
                  background: r.featured ? "rgba(200,150,44,0.06)" : "transparent",
                  display: "flex", flexDirection: "column", gap: 4,
                  minWidth: 200,
                }}>
                  <div className="display" style={{ fontSize: 22, lineHeight: 1, letterSpacing: "-0.005em", color: r.featured ? "var(--gold)" : "var(--ink)" }}>{r.name}</div>
                  <div className="mono" style={{ color: "var(--ink-3)", textTransform: "none", letterSpacing: 0, fontFamily: "var(--sans)", fontSize: 11, fontStyle: "italic" }}>{r.note}</div>
                </div>
              ))}
            </div>
            <p className="mono" style={{ marginTop: 22, color: "var(--ink-4)", lineHeight: 1.7, textTransform: "none", letterSpacing: 0, fontSize: 13, fontFamily: "var(--sans)", fontStyle: "italic" }}>
              Phil owns the station. <span style={{ color: "var(--gold)" }}>SMASH DADDY</span> is on the decks.<br/>
              Different chairs, same world.
            </p>
          </div>
        </div>
      </Reveal>

      {/* Witnesses to the night — DJs as scene observers */}
      <Reveal>
        <div className="row-96" style={{ marginTop: 64, paddingTop: 32, borderTop: "1px solid var(--gold)" }}>
          <div className="mono" style={{ color: "var(--gold)" }}>WITNESSES<br/>TO THE NIGHT</div>
          <div>
            <p className="serif" style={{
              fontSize: "clamp(26px, 3.6vw, 48px)", lineHeight: 1.05, letterSpacing: "-0.01em",
              color: "var(--ink)", margin: 0, maxWidth: "24ch",
            }}>
              DJs see people arrive&nbsp;bright.<br/>
              <span style={{ color: "var(--gold)" }}>Sometimes they also watch them&nbsp;fade.</span>
            </p>
            <div className="mobile-stack" style={{ marginTop: 32, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }}>
              <p style={{ fontSize: 15, color: "var(--ink-2)", lineHeight: 1.65, margin: 0, maxWidth: "44ch" }}>
                The DJs behind HOTMESS aren't entertainers attached to a brand. They're scene witnesses. For years they watched people peak, friendships form, strangers become family, rooms transform.
              </p>
              <p style={{ fontSize: 15, color: "var(--ink-2)", lineHeight: 1.65, margin: 0, maxWidth: "44ch" }}>
                And they also watched the other half — burnout, isolation after intensity, people quietly fading from the scene. <span style={{ color: "var(--ink)" }}>That's where Care became infrastructure</span>, Recovery became visible, Ghosted made interaction softer, Hand N Hand became the landing.
              </p>
            </div>
            <p className="mono" style={{ marginTop: 24, color: "var(--ink-3)", textTransform: "none", letterSpacing: 0, fontFamily: "var(--sans)", fontStyle: "italic", fontSize: 14 }}>
              Queer nightlife is movement, memory, survival and&nbsp;return. The DJs scoring this world saw all four.
            </p>
          </div>
        </div>
      </Reveal>

      {/* The shows — atmosphere infrastructure */}
      <Reveal>
        <div className="row-96" style={{ marginTop: 64, paddingTop: 28, borderTop: "1px solid var(--line)" }}>
          <div className="mono" style={{ color: "var(--gold)" }}>THE SHOWS</div>
          <div>
            <p className="mono" style={{ color: "var(--ink-3)" }}>ATMOSPHERE INFRASTRUCTURE · NOT PODCASTS</p>
            <div className="grid-2" style={{ marginTop: 24 }}>
              {[
                {
                  name: "WAKE THE MESS",
                  when: "MORNINGS",
                  status: null,
                  lede: "Morning signal recovery.",
                  body: "The city after impact. Quieter emotional residue, slow warmth, decompression before the Pulse rises again.",
                  color: "var(--gold)",
                },
                {
                  name: "DIAL-A-DADDY",
                  when: "LATE NIGHTS",
                  status: null,
                  lede: "Chemistry after dark.",
                  body: "Conversation, flirtation, atmosphere. The hours when the city feels closest — intimacy, masculinity, honesty after intensity.",
                  color: "var(--signal-red)",
                },
                {
                  name: "HAND N HAND",
                  when: "SUNDAYS",
                  status: "LIVE",
                  lede: "The only place to land.",
                  body: "The aftercare broadcast. Slow music. Soft landings. No performance. Sponsored by HNH MESS LUBE — on every bottle, on every Sunday.",
                  color: "var(--recovery-blue)",
                  featured: true,
                },
                {
                  name: "RAW CONVICT",
                  when: "RELEASES",
                  status: "LIVE · RAW001 OUT",
                  lede: "Sonic infrastructure.",
                  body: "Not content marketing. Emotional transmission. The sound of late-night cities, friction, recovery and queer circulation.",
                  color: "var(--gold)",
                },
              ].map((s) => (
                <div key={s.name} style={{
                  padding: 20,
                  border: `1px solid ${s.featured ? s.color : "var(--line-2)"}`,
                  background: s.featured ? `${s.color}0a` : "transparent",
                  display: "flex", flexDirection: "column", gap: 10,
                }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 12 }}>
                    <div className="display" style={{ fontSize: 24, lineHeight: 1, letterSpacing: "-0.005em", color: s.color }}>{s.name}</div>
                    <div className="mono" style={{ color: "var(--ink-4)", fontSize: 10 }}>{s.when}</div>
                  </div>
                  {s.status && (
                    <div className="mono" style={{ color: s.status.startsWith("LIVE") ? "#3ee07a" : "var(--ink-4)", fontSize: 9 }}>
                      <span style={{ display: "inline-block", width: 5, height: 5, borderRadius: "50%", background: "#3ee07a", marginRight: 6, verticalAlign: "1px" }}></span>
                      {s.status}
                    </div>
                  )}
                  <div className="serif" style={{ fontSize: 18, fontStyle: "italic", lineHeight: 1.25, color: "var(--ink)" }}>{s.lede}</div>
                  <p style={{ fontSize: 13, color: "var(--ink-2)", lineHeight: 1.55, margin: 0 }}>{s.body}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </Reveal>

      {/* Unifying doctrine line */}
      <Reveal>
        <div style={{
          marginTop: 64, padding: "48px clamp(20px,4vw,56px)",
          textAlign: "center",
          borderTop: "1px solid var(--gold)",
          borderBottom: "1px solid var(--gold)",
          background: "radial-gradient(ellipse at center, rgba(200,150,44,0.05) 0%, rgba(0,0,0,0) 60%)",
        }}>
          <p className="serif" style={{
            fontSize: "clamp(28px, 4.4vw, 64px)", lineHeight: 1.05, letterSpacing: "-0.015em",
            color: "var(--ink)", margin: 0, maxWidth: "26ch", marginLeft: "auto", marginRight: "auto",
          }}>
            Music changes atmosphere.<br/>
            <span style={{ color: "var(--gold)" }}>Atmosphere changes movement.</span>
          </p>
        </div>
      </Reveal>
    </section>
  );
}

// Share to window
Object.assign(window, { SoundOfCitySection });