// MandateWorks — page sections

const PLATFORMS = [
  {n: "01", code: "FCT", name: "Forecast",    span: "span-4",
   line: "What-if and live scenario simulations across voter personas, geographies, and ad-spend.",
   sub: "Run reality first.",  Vis: window.VisForecast},
  {n: "02", code: "CAD", name: "Cadre OS",    span: "span-4",
   line: "Curriculum, drills and assessments for party workers — at the scale of millions.",
   sub: "Train the people.", Vis: window.VisCadre},
  {n: "03", code: "SEN", name: "Sentinel",    span: "span-4",
   line: "Real-time newsroom + monitoring. Wire-room dashboards, briefing drafts, live event coverage.",
   sub: "Run the newsroom.",  Vis: window.VisSentinel},
  {n: "04", code: "CTR", name: "Counter",     span: "span-4",
   line: "Continuous social scraping detects false narratives the moment they break. Auto-drafts rebuttals, dispatches to members for one-tap response.",
   sub: "Strike back at speed.",  Vis: window.VisCounter},
  {n: "05", code: "M01", name: "Mandate One", span: "span-4",
   line: "Constituency cockpit for a single representative. Past performance, opposition playbooks, vote-share strategy.",
   sub: "One rep. One stack.", Vis: window.VisMandateOne},
  {n: "06", code: "RES", name: "Resolve",     span: "span-4",
   line: "Citizen grievance intake with SLA tracking and integrated messaging. Close the loop, every time.",
   sub: "Close the loop.",  Vis: window.VisResolve},
];

// ──────────────────── NAV ────────────────────
const Nav = () => (
  <header className="nav-bar">
    <div className="nav-inner">
      <a className="nav-brand" href="#top">
        <Mark />
        <span>MANDATEWORKS</span>
      </a>
      <nav className="nav-links">
        <a href="#platforms">Platforms</a>
        <a href="#stack">How it works</a>
        <a href="#audience">Who it's for</a>
        <a href="#insights">Field notes</a>
        <a href="#faq">FAQ</a>
      </nav>
      <a href="#waitlist" className="btn volt">Join waitlist <span className="arrow">→</span></a>
    </div>
  </header>
);

// ──────────────────── TICKER ────────────────────
const Ticker = () => {
  const items = [
    "AI-NATIVE POLITICAL INFRASTRUCTURE",
    "GLOBAL · MULTI-REGION",
    "PARTIES · CANDIDATES · INSTITUTIONS",
    "5 PLATFORMS · 1 STACK",
    "INVITE-FIRST · POC ROLLOUT 2026",
    "BUILT BY TECHNOLOGISTS · POLICY DNA",
    "NON-PARTISAN BY DEFAULT",
  ];
  const all = [...items, ...items];
  return (
    <div className="ticker">
      <div className="ticker-track">
        {all.map((t, i) => <span key={i}>{t}</span>)}
      </div>
    </div>
  );
};

// ──────────────────── HERO ────────────────────
const HeroIllustration = () => (
  <div className="hero-illu-wrap reveal">
    <div className="hero-illu-meta">
      <span>Wire room · live</span>
      <span>{new Date().toUTCString().slice(5, 22)} UTC</span>
    </div>
    <div className="hero-illu-caption">
      <b>FIG. 01</b> — Synthetic command surface · indicative
    </div>
    <div className="hero-illu">
      <svg viewBox="0 0 1400 600" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
        <defs>
          <pattern id="hgrid" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
            <path d="M40 0 H0 V40" fill="none" stroke="currentColor" strokeWidth="0.5" opacity="0.18" />
          </pattern>
        </defs>
        {/* base grid */}
        <rect width="1400" height="600" fill="url(#hgrid)" color="var(--mute)" />

        {/* desk silhouette — bottom horizon */}
        <line x1="0" y1="430" x2="1400" y2="430" stroke="currentColor" strokeOpacity="0.35" />
        <line x1="0" y1="432" x2="1400" y2="432" stroke="currentColor" strokeOpacity="0.15" />

        {/* three monitor frames */}
        {[120, 540, 960].map((x, i) => (
          <g key={i}>
            <rect x={x} y={120} width="320" height="200" rx="4"
                  fill="none" stroke="currentColor" strokeOpacity="0.5" />
            <rect x={x + 8} y={128} width="304" height="184" rx="2"
                  fill="currentColor" fillOpacity="0.04" />
            {/* mock content per monitor */}
            {i === 0 && (
              <g stroke="currentColor" strokeOpacity="0.55" fill="none">
                <text x={x + 18} y={148} fontSize="9" fontFamily="JetBrains Mono"
                      fill="currentColor" fillOpacity="0.65" letterSpacing="1">FORECAST · KA-BLR-S</text>
                <polyline points={`${x+18},290 ${x+50},275 ${x+82},268 ${x+114},255 ${x+146},250 ${x+178},230 ${x+210},220 ${x+242},195 ${x+274},178 ${x+302},165`}
                          stroke="var(--volt)" strokeWidth="1.5" />
                <polyline points={`${x+18},290 ${x+50},285 ${x+82},275 ${x+114},272 ${x+146},268 ${x+178},258 ${x+210},255 ${x+242},250 ${x+274},242 ${x+302},238`}
                          strokeOpacity="0.4" strokeDasharray="2 3" />
                <line x1={x+18} y1={300} x2={x+302} y2={300} strokeOpacity="0.2" />
              </g>
            )}
            {i === 1 && (
              <g stroke="currentColor" strokeOpacity="0.55" fill="none">
                <text x={x + 18} y={148} fontSize="9" fontFamily="JetBrains Mono"
                      fill="currentColor" fillOpacity="0.65" letterSpacing="1">SENTINEL · LIVE</text>
                {/* concentric radar */}
                <circle cx={x+160} cy={228} r="20" strokeOpacity="0.35" />
                <circle cx={x+160} cy={228} r="40" strokeOpacity="0.25" />
                <circle cx={x+160} cy={228} r="60" strokeOpacity="0.15" />
                <line x1={x+160} y1={228} x2={x+220} y2={188} stroke="var(--volt)" strokeWidth="1.5" />
                <circle cx={x+220} cy={188} r="3" fill="var(--volt)" />
                <circle cx={x+135} cy={252} r="2" fill="currentColor" fillOpacity="0.5" />
                <circle cx={x+185} cy={205} r="2" fill="currentColor" fillOpacity="0.5" />
                <circle cx={x+108} cy={228} r="2" fill="currentColor" fillOpacity="0.4" />
              </g>
            )}
            {i === 2 && (
              <g stroke="currentColor" strokeOpacity="0.55" fill="none">
                <text x={x + 18} y={148} fontSize="9" fontFamily="JetBrains Mono"
                      fill="currentColor" fillOpacity="0.65" letterSpacing="1">CADRE OS · 1,284 ACTIVE</text>
                {/* node graph */}
                {Array.from({length: 18}).map((_, k) => {
                  const cx = x + 30 + (k % 6) * 50;
                  const cy = 175 + Math.floor(k / 6) * 45;
                  return <circle key={k} cx={cx} cy={cy} r="3" fill="currentColor" fillOpacity={0.3 + (k % 5) * 0.1} />;
                })}
                {[[0,7],[1,8],[2,3],[4,10],[5,11],[6,13],[8,14],[9,15],[12,13],[13,14]].map(([a,b],k)=>{
                  const ca = a, cb = b;
                  const ax = x + 30 + (ca % 6) * 50, ay = 175 + Math.floor(ca / 6) * 45;
                  const bx = x + 30 + (cb % 6) * 50, by = 175 + Math.floor(cb / 6) * 45;
                  return <line key={k} x1={ax} y1={ay} x2={bx} y2={by} strokeOpacity="0.25" />;
                })}
              </g>
            )}
            {/* monitor stand */}
            <rect x={x + 140} y={320} width="40" height="20" fill="currentColor" fillOpacity="0.15" />
            <rect x={x + 110} y={340} width="100" height="3" fill="currentColor" fillOpacity="0.3" />
          </g>
        ))}

        {/* operator silhouettes — abstracted, head + shoulders only */}
        {[280, 700, 1120].map((cx, i) => (
          <g key={i} fill="currentColor" fillOpacity="0.18">
            <ellipse cx={cx} cy={490} rx="14" ry="14" />
            <path d={`M${cx-32},560 Q${cx-32},520 ${cx},520 Q${cx+32},520 ${cx+32},560 L${cx+32},600 L${cx-32},600 Z`} />
          </g>
        ))}

        {/* connecting wire — bottom data trail */}
        <path d="M0,580 L380,580 L420,560 L800,560 L840,580 L1400,580"
              fill="none" stroke="var(--volt)" strokeOpacity="0.5" strokeWidth="1" strokeDasharray="3 4" />

        {/* corner crops — newspaper-style trim marks */}
        {[[20,20],[1380,20],[20,580],[1380,580]].map(([cx,cy], i) => (
          <g key={i} stroke="currentColor" strokeOpacity="0.3" fill="none">
            <line x1={cx-6} y1={cy} x2={cx+6} y2={cy} />
            <line x1={cx} y1={cy-6} x2={cx} y2={cy+6} />
          </g>
        ))}
      </svg>
    </div>
  </div>
);

const Hero = () => (
  <section className="hero" id="top">
    <div className="wrap" style={{position: "relative"}}>
      <HeroCanvas />
      <span className="eyebrow">Manifesto · 2026 · Global</span>
      <h1 className="display">
        Politics deserves<br />better <em><GlyphSwap words={["instruments.", "infrastructure.", "operators.", "instincts."]} /></em>
      </h1>
      <p className="hero-sub">
        MandateWorks is AI-native infrastructure for parties, candidates and institutions —
        six tightly-coupled platforms that move political work from instinct to instrumented decisions.
        Built by technologists with public-policy DNA.
      </p>
      <div className="hero-cta">
        <a href="#waitlist" className="btn volt">Join the waitlist <span className="arrow">→</span></a>
        <a href="#platforms" className="btn ghost">See the stack <span className="arrow">↓</span></a>
      </div>
      <div className="hero-meta">
        <div className="stat"><span className="num">06</span><span className="lbl">Platforms</span></div>
        <div className="stat"><span className="num">∞</span><span className="lbl">Scenarios simulated</span></div>
        <div className="stat"><span className="num">22</span><span className="lbl">Languages</span></div>
      </div>
    </div>
  </section>
);

// ──────────────────── TRUST STRIP ────────────────────
const TrustStrip = () => (
  <section className="trust-strip reveal" aria-label="Used by">
    <div className="wrap">
      <div className="label-row">
        <span className="micro">Trusted by</span>
        <span className="stat-line">
          4 parties &nbsp;·&nbsp; 11 sitting representatives &nbsp;·&nbsp; 2 institutions &nbsp; <em>across 6 countries</em>
        </span>
      </div>
      <div className="logo-row" aria-hidden="true">
        <span className="logo-mark disc">PARTY · A</span>
        <span className="logo-mark square">CAUCUS / 11</span>
        <span className="logo-mark diamond">INST · NDI</span>
        <span className="logo-mark tri">ELECT · LAB</span>
        <span className="logo-mark bar">REGION · IN-SE</span>
        <span className="logo-mark cross">UNI · POLICY</span>
      </div>
    </div>
  </section>
);

// ──────────────────── PLATFORMS ────────────────────
const Platforms = () => (
  <section className="section" id="platforms">
    <div className="wrap">
      <div className="sec-head reveal">
        <div>
          <span className="num">§ 02 — The six</span>
          <h2 className="display" style={{marginTop: 14}}>One opinionated <em>stack.</em></h2>
        </div>
        <p className="lede">
          Each platform is a complete product. Together they form a connected operating system —
          shared identity, shared data fabric, shared playbooks. Pick one to start; grow into the rest.
        </p>
      </div>

      <div className="platforms reveal">
        {PLATFORMS.map((p) => (
          <div key={p.n} className={`platform-card ${p.span}`}>
            <div className="head">
              <span className="pcode">§ {p.n} / {p.code}</span>
              <span className="pill live">Live</span>
            </div>
            <div className="vis">{p.Vis ? <p.Vis /> : null}</div>
            <h3>{p.name}</h3>
            <p>{p.line}</p>
            <div className="foot">
              <span className="pcode">{p.sub}</span>
              <span className="ptag">{p.code}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ──────────────────── PULL QUOTE ────────────────────
const Pull = () => (
  <section className="section" style={{paddingTop: 0}}>
    <div className="wrap">
      <div className="pull reveal">
        <span className="eyebrow">§ 01 — Manifesto</span>
        <p className="display quote" style={{marginTop: 18}}>
          For decades, political work has flown blind. Stale polls, gut-feel consultants,
          one-shot campaigns. <em>That is over.</em>
        </p>
      </div>
    </div>
  </section>
);

// ──────────────────── STACK / HOW IT WORKS ────────────────────
const Stack = () => {
  const layers = [
    {layer: "L05 · Surface",    desc: "Six products with their own UIs — used by leaders, cadres, candidates, citizens.",          badge: "Products"},
    {layer: "L04 · Reasoning",  desc: "Agent loops for simulation, monitoring, drafting, classification — auditable end-to-end.", badge: "AI agents"},
    {layer: "L03 · Models",     desc: "Persona-aware language and scoring models, fine-tuned on regional discourse and policy.",  badge: "Models"},
    {layer: "L02 · Data fabric",desc: "Voter rolls, news streams, social signals, casework, polling — one shared, governed graph.",badge: "Data"},
    {layer: "L01 · Trust",      desc: "Region-pinned, role-based, fully audited. SOC 2 roadmap. Configurable retention.",          badge: "Compliance"},
  ];
  return (
    <section className="section" id="stack">
      <div className="wrap">
        <div className="sec-head reveal">
          <div>
            <span className="num">§ 03 — How it works</span>
            <h2 className="display" style={{marginTop: 14}}>Five layers. <em>One audit trail.</em></h2>
          </div>
          <p className="lede">
            Every output traces back through reasoning, model, data, and trust controls —
            so political teams move fast without giving up provenance.
          </p>
        </div>
        <div className="stack-diagram reveal">
          {layers.map((l, i) => (
            <div key={i} className="stack-row">
              <span className="layer">{l.layer}</span>
              <span className="desc">{l.desc}</span>
              <span className="badge">{l.badge}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ──────────────────── AUDIENCE ────────────────────
const Audience = () => (
  <section className="section" id="audience">
    <div className="wrap">
      <div className="sec-head reveal">
        <div>
          <span className="num">§ 04 — Who it's for</span>
          <h2 className="display" style={{marginTop: 14}}>Built for those who <em>actually run things.</em></h2>
        </div>
        <p className="lede">
          MandateWorks is shipped invitation-first to operators who own outcomes —
          not vendors of advice. Three audiences, one stack.
        </p>
      </div>
      <div className="aud-strip reveal">
        <div className="aud-cell">
          <span className="micro">A.01</span>
          <p className="display">Party leadership.</p>
          <ul>
            <li>National + state command rooms</li>
            <li>Cadre training at scale</li>
            <li>Cross-state narrative ops</li>
          </ul>
        </div>
        <div className="aud-cell">
          <span className="micro">A.02</span>
          <p className="display">Sitting representatives.</p>
          <ul>
            <li>Constituency cockpit</li>
            <li>Citizen grievance + SLA</li>
            <li>Past-performance proof</li>
          </ul>
        </div>
        <div className="aud-cell">
          <span className="micro">A.03</span>
          <p className="display">Aspirants &amp; first-time candidates.</p>
          <ul>
            <li>Vote-share strategy</li>
            <li>Opposition + ruling playbooks</li>
            <li>Social collateral generator</li>
          </ul>
        </div>
      </div>
    </div>
  </section>
);

// ──────────────────── INSIGHTS / BLOG ────────────────────
const Insights = () => {
  const posts = [
    {tag: "Field note", title: "Why persona-aware simulation beats topline polling.", meta: "Coming soon"},
    {tag: "Engineering", title: "Building a counter-narrative loop with sub-2s latency.",   meta: "Coming soon"},
    {tag: "Policy",      title: "Audit trails for political AI: a draft framework.",        meta: "Coming soon"},
  ];
  return (
    <section className="section" id="insights">
      <div className="wrap">
        <div className="sec-head reveal">
          <div>
            <span className="num">§ 05 — Field notes</span>
            <h2 className="display" style={{marginTop: 14}}>Field notes <em>coming soon.</em></h2>
          </div>
          <p className="lede">
            We're writing as we build — simulation methodology, AI safety in political
            contexts, and lessons from POC partners. First posts publish in 2026.
          </p>
        </div>
        <div className="insights-grid reveal">
          {posts.map((p, i) => (
            <div key={i} className="insight insight-soon">
              <span className="tag">{p.tag}</span>
              <h3>{p.title}</h3>
              <span className="meta">{p.meta}</span>
            </div>
          ))}
        </div>
        <div style={{display: "flex", justifyContent: "flex-end", marginTop: 18}}>
          <a className="micro" href="#waitlist">Get notified when we publish →</a>
        </div>
      </div>
    </section>
  );
};

// ──────────────────── FAQ ────────────────────
const FAQ_ITEMS = [
  {q: "Who can use MandateWorks today?", a: "We are in an invitation-first phase, partnering with a small selected group of parties, sitting representatives, and institutions on proof-of-concepts. We are now ready to roll out to interested operators at larger scale through 2026 and 2027 — join the waitlist to be considered."},
  {q: "How is this different from polling firms or political consultancies?", a: "We don't sell advice — we ship infrastructure. Our customers run their own playbooks on our platforms with their own data, with full audit trails and configurable retention. We do the engineering; they keep the strategic edge."},
  {q: "What about data sovereignty and privacy?", a: "Region-pinned data, role-based access, audit-by-default. We support customer-managed encryption keys, configurable retention, and on-prem deployments where regulation requires it. SOC 2 is on our 2026 roadmap."},
  {q: "Is this only for elections?", a: "No. Forecast and Mandate One are most active during campaigns, but Cadre OS, Sentinel, Counter, and Resolve operate continuously between elections — that's where most political work actually happens."},
  {q: "Do you work in [our country / language]?", a: "We are built global-first. Models are tuned per region; the platform supports 22 languages today and we expand based on POC partners. Tell us your geography on the waitlist."},
  {q: "Do you take a stance on parties or ideologies?", a: "No. MandateWorks is non-partisan infrastructure. We work with any legal political organization that meets our use policy. We do not run campaigns, generate disinformation, or advise on strategy."},
];
const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section" id="faq">
      <div className="wrap">
        <div className="sec-head reveal">
          <div>
            <span className="num">§ 06 — Questions</span>
            <h2 className="display" style={{marginTop: 14}}>Frequently <em>asked.</em></h2>
          </div>
          <p className="lede">
            The most common questions from parties, candidates, institutions and press.
            Don't see yours? Ask it on the waitlist form.
          </p>
        </div>
        <div className="faq-grid reveal">
          {FAQ_ITEMS.map((item, i) => (
            <div key={i} className={`faq-item ${open === i ? "open" : ""}`} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="faq-q">
                <span className="n">Q · {String(i + 1).padStart(2, "0")}</span>
                <span className="qt">{item.q}</span>
                <span className="toggle">+</span>
              </div>
              <div className="faq-a">
                <div className="faq-a-inner"><p>{item.a}</p></div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ──────────────────── WAITLIST ────────────────────
const PhoneField = () => {
  const [show, setShow] = React.useState(false);
  return show ? (
    <div>
      <label>
        Phone <span style={{color: "var(--mute)", textTransform: "none", letterSpacing: 0, fontSize: 11, marginLeft: 6}}>optional</span>
      </label>
      <input type="tel" name="phone" placeholder="+1 555 0100" />
    </div>
  ) : (
    <button
      type="button"
      onClick={() => setShow(true)}
      className="micro"
      style={{
        background: "transparent", border: 0, padding: 0, cursor: "pointer",
        color: "var(--volt)", textAlign: "left", justifySelf: "start", marginTop: -4,
      }}
    >
      + Add phone number (optional)
    </button>
  );
};

const Waitlist = () => {
  const [submitted, setSubmitted] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setSubmitting(true);
    const form = e.target;
    const data = new FormData(form);
    try {
      await fetch("/", {
        method: "POST",
        headers: {"Content-Type": "application/x-www-form-urlencoded"},
        body: new URLSearchParams(data).toString(),
      });
      setSubmitted(true);
    } catch (err) {
      // fall through and show success state anyway in offline preview
      setSubmitted(true);
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <section className="section" id="waitlist">
      <div className="wrap">
        <div className="waitlist-card reveal">
          <div>
            <span className="micro" style={{color: "color-mix(in oklab, var(--paper) 60%, transparent)"}}>§ 07 — Access</span>
            <h2 style={{marginTop: 18}}>Run the next election <em>before election day.</em></h2>
            <p className="lede">
              Invite-first rollout through 2026. Tell us who you are and what you're working on —
              we read every submission and prioritize POCs that push the platform.
            </p>
            <div className="meta">
              <span>● Live · Invite-only</span>
              <span>Q3 · Wave 02</span>
              <span>Global queue</span>
            </div>
          </div>
          {submitted ? (
            <div className="form" style={{justifyContent: "center"}}>
              <span className="micro" style={{color: "var(--volt)"}}>● Received</span>
              <h3 style={{fontFamily: "var(--display)", fontStyle: "var(--display-italic)", fontWeight: 400, fontSize: 36, lineHeight: 1.05, margin: "8px 0 12px"}}>You're on the list.</h3>
              <p style={{color: "var(--graphite)", margin: 0}}>
                We'll be in touch within five working days. In the meantime, follow us for field notes.
              </p>
            </div>
          ) : (
            <form
              className="form"
              name="waitlist"
              method="POST"
              data-netlify="true"
              data-netlify-honeypot="bot-field"
              onSubmit={handleSubmit}
            >
              <input type="hidden" name="form-name" value="waitlist" />
              <p style={{display: "none"}}>
                <label>Don't fill this out: <input name="bot-field" /></label>
              </p>
              <div>
                <label>Name</label>
                <input required name="name" placeholder="Your name" />
              </div>
              <div>
                <label>Work email</label>
                <input required type="email" name="email" placeholder="you@org.com" />
              </div>
              <div>
                <label>I am a…</label>
                <select required name="role" defaultValue="">
                  <option value="" disabled>Select one</option>
                  <option>Party leadership</option>
                  <option>Sitting representative</option>
                  <option>Aspirant / candidate</option>
                  <option>Institution / press / other</option>
                </select>
              </div>
              <PhoneField />
              <button className="submit" type="submit" disabled={submitting}>
                {submitting ? "Sending…" : "Request access"} <span>→</span>
              </button>
              <span className="micro" style={{color: "var(--mute)", marginTop: 4}}>● No spam. We read every submission.</span>
            </form>
          )}
        </div>
      </div>
    </section>
  );
};

// ──────────────────── FOOTER ────────────────────
const Footer = () => (
  <footer>
    <div className="wrap">
      <div className="foot-grid">
        <div className="foot-brand">
          <h3 className="display" style={{margin: 0}}>MandateWorks</h3>
          <p style={{color: "var(--graphite)", maxWidth: "44ch", marginTop: 12}}>
            AI-native infrastructure for political work. Six platforms. One stack. Global, invitation-first.
          </p>
        </div>
        <div className="foot-col">
          <h4>Platforms</h4>
          <ul>
            <li><a href="#platforms">Forecast</a></li>
            <li><a href="#platforms">Cadre OS</a></li>
            <li><a href="#platforms">Sentinel</a></li>
            <li><a href="#platforms">Counter</a></li>
            <li><a href="#platforms">Mandate One</a></li>
            <li><a href="#platforms">Resolve</a></li>
          </ul>
        </div>
        <div className="foot-col">
          <h4>Company</h4>
          <ul>
            <li><a href="#audience">Who it's for</a></li>
            <li><a href="#stack">How it works</a></li>
            <li><a href="#insights">Field notes</a></li>
            <li><a href="social-kit.html">Press kit</a></li>
            <li><a href="#faq">FAQ</a></li>
          </ul>
        </div>
        <div className="foot-col">
          <h4>Connect</h4>
          <ul>
            <li><a href="#waitlist">Join waitlist</a></li>
            <li><a href="mailto:hello@mandateworks.com">hello@mandateworks.com</a></li>
          </ul>
          <p className="micro" style={{color: "var(--mute)", marginTop: 14, lineHeight: 1.5}}>
            Email is our only inbound channel during invite-first. Social arrives later in 2026.
          </p>
        </div>
      </div>
      <div className="foot-bottom">
        <span>© 2026 MandateWorks · Non-partisan infrastructure</span>
        <span>Privacy · Terms · Use policy</span>
      </div>
    </div>
  </footer>
);

Object.assign(window, {
  Nav, Ticker, Hero, Platforms, Pull, Stack, Audience, Insights, FAQ, Waitlist, Footer,
});