// icon-breaking.jsx — Icon Breaking Agency sections.
// Editorial / brutalist masthead with red signal accents. Music-industry vocabulary.

// ─── Hero live pitch log (right rail of hero) ─────────────────────────────
const IBHeroLog = () => {
  const seed = [
    { t: "PITCH", k: "PHOEBE/4AD",      note: "ed. playlist drafted",    ago: "2s" },
    { t: "SYNC",  k: "FX/PILOT-204",    note: "music sup briefed",       ago: "11s" },
    { t: "BOOK",  k: "PRIMAVERA-26",    note: "buyer routed",            ago: "38s" },
    { t: "DM",    k: "IG/@kai.run",     note: "reply · sentiment +0.84", ago: "1m" },
    { t: "PITCH", k: "PASTE/PREMIERE",  note: "slot offered",            ago: "2m" },
    { t: "ROYAL", k: "SPLIT-44.3K",     note: "settled · 11 collabs",    ago: "3m" },
    { t: "PR",    k: "PITCHFORK/RTBR",  note: "writer pitched",          ago: "5m" },
    { t: "BOOK",  k: "TOUR-NE/12",      note: "12 dates · held",         ago: "7m" },
  ];
  const [items, setItems] = React.useState(seed);

  React.useEffect(() => {
    const types  = ["PITCH","SYNC","BOOK","DM","ROYAL","PR"];
    const ks     = ["PHOEBE/4AD","FX/PILOT-204","PRIMAVERA-26","IG/@kai.run","PASTE/PREMIERE","SPLIT-44.3K","PITCHFORK/RTBR","TOUR-NE/12","SPOTIFY/RAP","HBO/SYNC-12","RADIO.LOWE","COMMENT-TT"];
    const notes  = ["drafted + sent","first contact","routed to partner","premiere offered","demo accepted","sentiment +0.91","12 dates booked","receipts emitted","follow-up scheduled","fit 0.93"];
    const id = setInterval(() => {
      setItems(prev => [
        {
          t: types[Math.floor(Math.random()*types.length)],
          k: ks[Math.floor(Math.random()*ks.length)],
          note: notes[Math.floor(Math.random()*notes.length)],
          ago: "now",
        },
        ...prev.slice(0, 6).map(x => ({ ...x, ago: bump(x.ago) })),
      ]);
    }, 2400);
    return () => clearInterval(id);
  }, []);
  function bump(ago) {
    if (ago === "now") return "3s";
    if (ago.endsWith("s")) { const n = parseInt(ago)+3; return n>59 ? "1m" : `${n}s`; }
    if (ago.endsWith("m")) { return `${parseInt(ago)+1}m`; }
    return ago;
  }
  return (
    <aside className="hero-side">
      <div className="hero-side-head">
        <span className="live">DISPATCH · LIVE</span>
        <span>R.O.S.T.E.R. ξ</span>
      </div>
      <div className="hero-side-body">
        {items.map((r, i) => (
          <div className={"hero-side-line" + (i===0 ? " first" : "")} key={`${r.k}-${i}`} style={{opacity: 1 - i*0.1}}>
            <span className={"t " + r.t}>{r.t}</span>
            <span>
              <div>{r.k}</div>
              <div className="n" style={{opacity:0.7}}>{r.note}</div>
            </span>
            <span className="a">{r.ago}</span>
          </div>
        ))}
      </div>
      <div className="hero-side-foot">
        <span>tail -f iba.kernel</span>
        <span>34ms p50</span>
      </div>
    </aside>
  );
};

// ─── Numbers ──────────────────────────────────────────────────────────────
const IBNumbers = () => (
  <div className="numbers">
    {[
      { k: "PITCHES SHIPPED · LAST 30D", v: "47,210" },
      { k: "ROSTER UNDER AGENT OPS",     v: "180+"   },
      { k: "OPERATING HOURS PER DAY",    v: <>24<span className="accent">/</span>7</> },
      { k: "MANUAL TOUCH REQUIRED",      v: <>~<span className="accent">0</span></> },
    ].map((m, i) => (
      <div className="number" key={i}>
        <div className="k">{m.k}</div>
        <div className="v">{m.v}</div>
      </div>
    ))}
  </div>
);

// ─── Terminal receipts ────────────────────────────────────────────────────
const IBTerminal = () => {
  const seed = [
    { t: "PITCH", k: "PHOEBE/4AD",     note: "ed. playlist drafted + sent",  ago: "2s" },
    { t: "SYNC",  k: "FX/PILOT-204",   note: "music sup → first contact",    ago: "11s" },
    { t: "BOOK",  k: "PRIMAVERA-26",   note: "talent buyer routed",          ago: "38s" },
    { t: "DM",    k: "IG/@kai.run",    note: "reply sent · sentiment +0.84", ago: "1m" },
    { t: "PITCH", k: "PASTE/PREMIERE", note: "slot offered · 03/14",         ago: "2m" },
    { t: "ROYAL", k: "SPLIT-44.3K",    note: "settled · receipts emitted",   ago: "3m" },
    { t: "PR",    k: "PITCHFORK/RTBR", note: "review draft accepted",        ago: "5m" },
    { t: "BOOK",  k: "TOUR-NE/12",     note: "support slot · 12 dates",      ago: "7m" },
    { t: "DM",    k: "COMMENT-TT",     note: "247 hits moderated",           ago: "9m" },
  ];
  const [items, setItems] = React.useState(seed);
  React.useEffect(() => {
    const types  = ["PITCH","SYNC","BOOK","DM","ROYAL","PR"];
    const ks     = ["NETFLIX-2641","SPOTIFY/INDIE","NPR/TINY","HBO/SYNC","PRIMAVERA-26","TIKTOK/47K","SUP.MGM","SPLIT-12.4K","RADIO.LOWE","COMMENT-TT","TOUR-WC-08","COACH-26"];
    const notes  = ["drafted + sent","first contact","routed to partner","premiere offered","demo accepted","sentiment +0.91","12 dates booked","receipts emitted","moderation routed","follow-up scheduled","fit score 0.93"];
    const id = setInterval(() => {
      setItems(prev => [
        { t: types[Math.floor(Math.random()*types.length)],
          k: ks[Math.floor(Math.random()*ks.length)],
          note: notes[Math.floor(Math.random()*notes.length)],
          ago: "now" },
        ...prev.slice(0,8).map(x => ({ ...x, ago: bump(x.ago) })),
      ]);
    }, 2600);
    return () => clearInterval(id);
  }, []);
  function bump(ago) {
    if (ago === "now") return "3s";
    if (ago.endsWith("s")) { const n = parseInt(ago)+3; return n>59 ? "1m" : `${n}s`; }
    if (ago.endsWith("m")) { return `${parseInt(ago)+1}m`; }
    return ago;
  }
  return (
    <div className="terminal">
      <div className="terminal-head">
        <span className="live">PROOF-CHAIN · LIVE</span>
        <span>tail -f iba.kernel</span>
      </div>
      <div className="terminal-body">
        {items.map((r, i) => (
          <div className="term-row" key={`${r.k}-${i}`} style={{opacity: 1 - i*0.07}}>
            <span className={"term-t " + r.t}>{r.t}</span>
            <span className="term-k">{r.k}</span>
            <span className="term-n">{r.note}</span>
            <span className="term-a">{r.ago}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

// ─── Doctrine ─────────────────────────────────────────────────────────────
const IBDoctrine = () => {
  const items = [
    {
      tag: "I. RECEIPTS",
      not: "A management dashboard you log into and operate.",
      is: <>An agent that runs the roster — and <span className="italic">prints receipts</span> as it does.</>,
      body: "CoManager, Artist Growth, the rest — they're filing cabinets. Helpful, but you still do the work. Icon Breaking is an autonomous engine: pitches go out, threads get answered, splits get settled. Your team shows up to qualified calls and signs the checks.",
    },
    {
      tag: "II. PROOF",
      not: "A royalty calculator with a fancy UI.",
      is: <>A <span className="italic">proof-chain</span> that audits every pitch, placement, and payout.</>,
      body: "Recoupable, Revio, Royalty Exchange — they price the past. Icon Breaking builds the future and keeps the receipts. Every send, reply, settlement chains into a verifiable proof your label, manager, or LP can audit at any time.",
    },
    {
      tag: "III. SURFACES",
      not: "A chatbot you've wrapped around a CRM.",
      is: <>An <span className="italic">agent stack</span> that pitches, books, and replies — across every rail.</>,
      body: "The 'Agent Vibes' wave is mostly GPT wrappers staring at a dashboard. Icon Breaking runs across email, DMs, comments, supervisors, blogs, festivals, radio, and TikTok — proposing, sequencing, escalating only when human judgment is required.",
    },
    {
      tag: "IV. COMPOUND",
      not: "A one-off campaign that ends when the retainer ends.",
      is: <>A roster engine that <span className="italic">compounds</span> across catalogs and quarters.</>,
      body: "Every correction makes the agent smarter. Every quarter the kernel re-baselines and inherits the law of the prior cycle. Your second year of data is a moat; your fifth year is unreplicable — the brand becomes the model.",
    },
  ];
  return (
    <div className="doctrine-grid">
      {items.map((d, i) => (
        <article className="doc-card" key={i}>
          <div className="tag">{d.tag}</div>
          <div className="not">{d.not}</div>
          <h3 className="is-h">{d.is}</h3>
          <p className="body">{d.body}</p>
        </article>
      ))}
    </div>
  );
};

// ─── Protocol R.O.S.T.E.R. ────────────────────────────────────────────────
const IBProtocol = () => {
  const [active, setActive] = React.useState(0);
  const stages = [
    { letter: "R", name: "RECEIVE",  sub: "Brief intake & roster scan",
      body: "An artist, a release, a tour — the brief enters as raw signal. The agent maps the artist's catalog, fan graph, prior placements, and stylistic adjacencies before a partner touches it." },
    { letter: "O", name: "OBSERVE",  sub: "Multi-surface intelligence",
      body: "Continuous canvass across editors, supervisors, blogs, festivals, radio, talent buyers, sync libraries, and fan rails. Every viable target is scored against the brief and queued for the next stage." },
    { letter: "S", name: "SEQUENCE", sub: "Pitch composition & cadence",
      body: "The agent drafts in the artist's voice — pitch decks, sync briefs, premiere offers, booking holds. Sequences are scheduled, sent, and followed up at human-grade cadence, no template smell." },
    { letter: "T", name: "TRACK",    sub: "Every action emits a receipt",
      body: "Opens, replies, premieres, holds, no-shows, hits — all logged into the proof-chain. The kernel learns from every yes and every silence. Reporting is not a slide deck; it's a live audit." },
    { letter: "E", name: "ENGAGE",   sub: "Conversational rails, 24/7",
      body: "Inbound DMs, comments, fan threads, supervisor follow-ups — handled in-voice, in-context. Senior partners are paged only when judgment, contract, or relationship capital is on the line." },
    { letter: "R", name: "ROUTE",    sub: "Settle. Compound. Re-deploy.",
      body: "Closed loops route to splits, royalty receipts, partner queues. Each quarter the kernel re-baselines and inherits the law of every prior cycle. The roster you ran in Q1 is not the roster you run in Q4." },
  ];
  const s = stages[active];
  return (
    <div className="protocol-grid">
      <div className="protocol-list">
        {stages.map((stage, i) => (
          <button key={i}
                  className={"protocol-row " + (active === i ? "active" : "")}
                  onClick={() => setActive(i)}
                  onMouseEnter={() => setActive(i)}>
            <span className="p-letter">{stage.letter}</span>
            <span className="p-meta">
              <span className="p-name">{stage.name}</span>
              <span className="p-sub">{stage.sub}</span>
            </span>
            <span className="p-idx">0{i+1}</span>
          </button>
        ))}
      </div>
      <div className="protocol-detail">
        <div className="tag">R.O.S.T.E.R.™ · STAGE {String(active+1).padStart(2,"0")} / 06</div>
        <h3 className="title">
          {s.letter}<span className="italic">{s.name.slice(1).toLowerCase()}</span>
        </h3>
        <p className="body">{s.body}</p>
        <div className="mini">
          <div className="mini-row"><span className="k">INPUT</span>
            <span className="v">{["Brief","Surface signal","Scored target","Outbound action","Inbound thread","Closed loop"][active]}</span></div>
          <div className="mini-row"><span className="k">OUTPUT</span>
            <span className="v">{["Mapped roster","Ranked queue","Sent pitch","Receipt","Qualified handoff","Settled split"][active]}</span></div>
          <div className="mini-row"><span className="k">RECEIPTS</span>
            <span className="v red">{["340","2,108","6,421","18,902","842","continuous"][active]}</span></div>
        </div>
      </div>
    </div>
  );
};

// ─── Stack (Surfaces) ─────────────────────────────────────────────────────
const IBStack = () => {
  const surfaces = [
    { name: "PITCH & PLACEMENT", sub: "Editorial · Sync · Press",
      body: "Editors at every major DSP, music supervisors across film/TV/ads, premiere desks at every relevant blog — pitched continuously, in your artist's voice, with cadence and follow-through human teams burn out hitting.",
      targets: ["Spotify","Apple","Tidal","Pitchfork","NPR","NETFLIX","HBO","FX","NIKE","COKE"] },
    { name: "BOOKING & TOUR",    sub: "Venues · Festivals · Radio",
      body: "Talent buyers, festival programmers, radio hosts, support-slot opportunists — surfaced, scored, and contacted before the calendar fills. Holds, confirms, riders — routed to a partner with the receipt chain attached.",
      targets: ["Primavera","Coachella","SXSW","Roskilde","BBC1","KCRW","Lowe","BUYERS"] },
    { name: "FAN & RELEASE",     sub: "DMs · Comments · Drops",
      body: "Inbound fan traffic across IG, TikTok, Discord, email — moderated, replied, escalated. Release windows orchestrated end-to-end: assets, embargoes, sequencing, settlements. Every conversation is a receipt.",
      targets: ["Instagram","TikTok","Discord","YouTube","Substack","Mailchimp","Splice"] },
  ];
  return (
    <div className="stack">
      {surfaces.map((s, i) => (
        <article className="stack-card" key={i}>
          <div className="head">
            <span>0{i+1} / 03</span>
            <span className="red">OPERATING STACK</span>
          </div>
          <h3 className="name">{s.name}</h3>
          <div className="sub">{s.sub}</div>
          <p className="body">{s.body}</p>
          <div className="targets">
            {s.targets.map(t => <span key={t}>{t}</span>)}
          </div>
        </article>
      ))}
    </div>
  );
};

// ─── The Fight ────────────────────────────────────────────────────────────
const IBFight = () => {
  const cols = [
    { name: "CoManager",     tag: "DASHBOARD" },
    { name: "Revio",         tag: "ANALYTICS" },
    { name: "Recoupable",    tag: "ROYALTY" },
    { name: "Agent Vibes",   tag: "GPT WRAPPER" },
    { name: "Icon Breaking", tag: "AGENT + BOARD", us: true },
  ];
  const rows = [
    { k: "FORM",          v: ["SaaS dashboard","Analytics SaaS","Royalty SaaS","Chatbot wrapper","Autonomous agent + senior advisors"] },
    { k: "PITCHES / DAY", v: ["0 — you send","—","—","drafted, not sent","200+ sent · sequenced · replied"] },
    { k: "BOOKING FLOW",  v: ["manual entry","—","—","hand-off only","inbox → calendar, autonomous"] },
    { k: "FAN OPS",       v: ["—","—","—","surface-only","24/7 DMs, comments, threads"] },
    { k: "ROYALTY",       v: ["splits doc","aggregator view","recoup ledger","—","proof-chain · audit-ready"] },
    { k: "SR. COUNSEL",   v: ["—","—","—","—","board · seasoned operators"] },
    { k: "RECEIPTS",      v: ["none","charts","statements","logs","every action · chained"] },
    { k: "WHO OPERATES",  v: ["you","you","you","you","the agent — you sign checks"] },
    { k: "PRICING",       v: ["per seat","per artist","% of recoup","per seat","flat retainer + outcomes"] },
  ];
  return (
    <div className="fight">
      <div className="fight-head">
        <div className="fight-corner">vs.</div>
        {cols.map((c, i) => (
          <div key={i} className={"fight-col " + (c.us ? "us" : "")}>
            <div className="name">{c.name}</div>
            <div className="tag">{c.tag}</div>
          </div>
        ))}
      </div>
      <div>
        {rows.map((r, ri) => (
          <div className="fight-row" key={r.k}>
            <div className="fight-rowk">{r.k}</div>
            {r.v.map((cell, ci) => {
              const us = cols[ci].us;
              const empty = cell === "—";
              return (
                <div key={ci} className={"fight-cell " + (us ? "us " : "") + (empty ? "empty" : "")}>
                  {us && <span className="fight-dot" />}
                  <span>{cell}</span>
                </div>
              );
            })}
          </div>
        ))}
      </div>
      <div className="fight-foot">
        Five firms compete for the same slot. <span className="red">Only one of them is the agent doing the work.</span>
      </div>
    </div>
  );
};

// ─── Plans ────────────────────────────────────────────────────────────────
const IBPlans = () => {
  const tiers = [
    { tier: "TIER · RECEIPT", title: "Single-artist agent", v: "$8K", k: "PER MONTH · ONE ACT",
      bullets: [
        "Pitch + Placement surface (editorial, sync, press)",
        "Inbound DM & comment moderation",
        "Live proof-chain · weekly audit",
        "Senior advisor: 2 hrs / mo",
      ],
      cta: "Qualify a roster", btn: "btn-ghost" },
    { tier: "TIER · CADENCE", title: "Roster engine", v: "$28K", k: "PER MONTH · UP TO 12 ACTS",
      bullets: [
        "All three operating surfaces, full deployment",
        "Booking · touring · radio routing",
        "Senior advisor: 8 hrs / mo · partner-in-residence",
        "Quarterly re-baseline + enriched law",
        "Bespoke voice training per artist",
      ],
      cta: "Qualify a roster", btn: "btn-red",
      featured: true },
    { tier: "TIER · COVENANT", title: "Bespoke + capital surface", v: "Inquire", k: "ANNUAL · UNLIMITED ROSTER",
      bullets: [
        "White-label deployment · your domain · your voice",
        "Multi-team agent · enterprise rails",
        "Capital surface · catalog acquisition support",
        "Board-level engagement · weekly partner cadence",
        "Custom kernel · proprietary covenant",
      ],
      cta: "Speak to partner", btn: "btn-ghost" },
  ];
  return (
    <div className="plans">
      {tiers.map((t, i) => (
        <article key={i} className={"plan " + (t.featured ? "featured" : "")}>
          {t.featured && <div className="plan-flag">MOST DEPLOYED</div>}
          <div className="plan-head">
            <div className="tier">{t.tier}</div>
            <h3 className="plan-title">{t.title}</h3>
          </div>
          <div className="plan-price">
            <span className="v">{t.v}</span>
            <span className="k">{t.k}</span>
          </div>
          <ul className="plan-bullets">
            {t.bullets.map((b, j) => (
              <li key={j}><span className="dot" /><span>{b}</span></li>
            ))}
          </ul>
          <a className={"btn " + t.btn} href="#dispatch">
            {t.cta} <span>→</span>
          </a>
        </article>
      ))}
    </div>
  );
};

// ─── FAQ ──────────────────────────────────────────────────────────────────
const IBFAQ = () => {
  const [open, setOpen] = React.useState(0);
  const qs = [
    { q: <>What does <span className="italic">"breaking an artist"</span> mean — and how is the agent doing it?</>,
      a: "To break an artist is to drive them from local awareness to mass awareness across the rails that matter — editorial playlists, music supervisors, festival buyers, premiere desks, fan platforms. The agent pitches every relevant editor, supervisor, programmer, and host in your artist's voice, sequences follow-ups, handles inbound, and routes qualified opportunities to a senior partner. It does the work a 12-person agency does — without burning out at month four." },
    { q: <>How is this different from <span className="italic">CoManager, Revio, or Recoupable?</span></>,
      a: "Those are dashboards and ledgers. They surface information; you do the work. Icon Breaking is an autonomous engine that does the work — pitches go out, threads get answered, splits get settled — and the dashboards become a byproduct. You can still see every action; you don't have to perform any of them." },
    { q: <>What about all the <span className="italic">"AI agent"</span> tools coming out of YC?</>,
      a: "Most of what you've seen is a GPT wrapper around a CRM with a Notion-like UI. They draft; they don't ship. Icon Breaking deploys covenant-bound agents that operate end-to-end on email, DMs, comments, sync briefs, booking holds, and royalty settlements. Every action chains into a verifiable proof-chain. It is closer to a trading desk than a chatbot." },
    { q: <>Who is operating this — <span className="italic">people or machines?</span></>,
      a: "Both, in deliberate sequence. The agent does the volume — discovery, drafting, sequencing, follow-up, inbound moderation, settlement. Senior partners review the consequential calls — relationship capital, contract terms, brand positioning, the no's that matter. The agent proposes; the partners dispose; the artist breaks." },
    { q: <>What kind of roster <span className="italic">qualifies?</span></>,
      a: "Revenue-generating artists, labels, and rights-holders. We qualify engagements at the boutique tier ($8K/mo) through institutional ($1M+/yr). The criteria are catalog quality, management coherence, and a willingness to let the agent do its job between the partner calls." },
    { q: <>Why are you called <span className="italic">Icon Breaking?</span></>,
      a: "Because the unit of value is the icon — the artist whose catalog will pay back for thirty years — and the unit of work is the break. We break artists. We do not 'support' them, 'market' them, or 'manage' them. We break them, and we keep the receipts." },
  ];
  return (
    <div className="faq">
      {qs.map((item, i) => (
        <div className={"faq-item " + (open === i ? "open" : "")} key={i} onClick={() => setOpen(open === i ? -1 : i)}>
          <div className="faq-q">
            <span className="faq-num">{String(i+1).padStart(2,"0")}</span>
            <span className="faq-text">{item.q}</span>
            <span className="faq-toggle">{open === i ? "—" : "+"}</span>
          </div>
          <div className="faq-a">{item.a}</div>
        </div>
      ))}
    </div>
  );
};

// ─── Dispatch (deploy / contact) ──────────────────────────────────────────
const IBDispatch = () => {
  const [stage, setStage] = React.useState(0);
  const [form, setForm] = React.useState({ name: "", firm: "", role: "", roster: "", brief: "" });
  const [qualifying, setQualifying] = React.useState(false);
  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const submit = () => {
    setQualifying(true);
    setTimeout(() => { setQualifying(false); setStage(2); }, 2400);
  };

  return (
    <div className="dispatch">
      <div className="dispatch-left">
        <div className="eyebrow">DISPATCH · BY INVITATION</div>
        <h2 className="dispatch-title">
          30 minutes. <span className="italic">We scan the roster,</span><br/>
          map the rails,<br/>
          you watch a sandbox pitch ship.
        </h2>
        <p className="dispatch-sub">
          Icon Breaking qualifies engagements at $8K/mo+. The agent performs a
          preliminary roster screen in under 12 seconds. If the fit is strong,
          a partner reaches you within one business day.
        </p>
        <div className="dispatch-assure">
          <div>OPERATING UNDER COVENANT · LOS ANGELES · MIAMI</div>
          <div>© 2026 ICON BREAKING AGENCY · A BENFORD GROUP COMPANY</div>
        </div>
      </div>

      <div className="dispatch-right">
        <div className="df-frame">
          <div className="df-head">
            <span className="red">AGENT.QUALIFY</span>
            <span>v4.07 · SESSION {Math.floor(Math.random()*99999)}</span>
          </div>

          {stage === 0 && (
            <div className="df-body">
              <div className="df-line"><span className="arrow">›</span><span>State your name, label, and role.</span></div>
              <div className="df-inputs">
                <input placeholder="Your full name" value={form.name} onChange={e=>update("name", e.target.value)} />
                <input placeholder="Label / agency / artist entity" value={form.firm} onChange={e=>update("firm", e.target.value)} />
                <input placeholder="Role (Founder, A&R, Manager, GM...)" value={form.role} onChange={e=>update("role", e.target.value)} />
              </div>
              <button className="btn btn-primary" disabled={!form.name || !form.firm} onClick={() => setStage(1)}>
                Continue <span>→</span>
              </button>
            </div>
          )}

          {stage === 1 && (
            <div className="df-body">
              <div className="df-line"><span className="arrow">›</span><span>Describe the roster and the ask.</span></div>
              <div className="df-inputs">
                <input placeholder="Roster size (number of active artists)" value={form.roster} onChange={e=>update("roster", e.target.value)} />
                <textarea placeholder="One paragraph: who you represent, what stage they're at, what surfaces are bottlenecked." value={form.brief} onChange={e=>update("brief", e.target.value)} />
              </div>
              {qualifying ? (
                <div>
                  <div style={{fontFamily:"var(--font-mono)",fontSize:11,letterSpacing:"0.16em",textTransform:"uppercase",color:"var(--red-0)",display:"flex",alignItems:"center",gap:8,marginBottom:10}}>
                    <span style={{width:8,height:8,background:"var(--red-0)",animation:"blink 1.4s infinite"}}/>
                    AGENT SCANNING · 14 PASSES…
                  </div>
                  <div className="df-scan"><div className="df-scan-bar"/></div>
                </div>
              ) : (
                <div className="df-actions">
                  <button className="btn btn-ghost" onClick={() => setStage(0)}>← Back</button>
                  <button className="btn btn-primary" disabled={!form.roster || !form.brief} onClick={submit}>
                    Submit to agent <span>→</span>
                  </button>
                </div>
              )}
            </div>
          )}

          {stage === 2 && (
            <div className="df-body">
              <div style={{fontFamily:"var(--font-mono)",fontSize:11,letterSpacing:"0.16em",textTransform:"uppercase",color:"var(--red-0)",display:"flex",alignItems:"center",gap:8}}>
                <span style={{width:8,height:8,background:"var(--red-0)"}}/>
                QUALIFIED · ROSTER FIT 0.93
              </div>
              <h4 style={{fontFamily:"var(--font-display)",fontWeight:700,fontSize:36,lineHeight:1,textTransform:"uppercase",color:"var(--paper-0)",margin:"4px 0"}}>
                Thank you, {form.name.split(" ")[0] || "Partner"}.
              </h4>
              <p style={{fontFamily:"var(--font-editorial)",color:"var(--paper-2)",fontSize:16,lineHeight:1.5}}>
                A partner will reach you within one business day at the contact on file at {form.firm}. Your session emitted receipt <span style={{color:"var(--red-0)",fontFamily:"var(--font-mono)",fontSize:13}}>RCPT-{Math.floor(Math.random()*900000)+100000}</span>.
              </p>
              <div className="df-receipt">
                <div className="dfr-row"><span className="k">entity</span><span>{form.firm}</span></div>
                <div className="dfr-row"><span className="k">role</span><span>{form.role || "—"}</span></div>
                <div className="dfr-row"><span className="k">roster</span><span style={{color:"var(--red-0)"}}>{form.roster} acts</span></div>
                <div className="dfr-row"><span className="k">status</span><span style={{color:"var(--red-0)"}}>ROUTED → PARTNER QUEUE</span></div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

window.IBHeroLog  = IBHeroLog;
window.IBNumbers  = IBNumbers;
window.IBTerminal = IBTerminal;
window.IBDoctrine = IBDoctrine;
window.IBProtocol = IBProtocol;
window.IBStack    = IBStack;
window.IBFight    = IBFight;
window.IBPlans    = IBPlans;
window.IBFAQ      = IBFAQ;
window.IBDispatch = IBDispatch;