// ============================================================
// Control AI — Section parts 2: Mission, Chief of Staff, Inbox, Features, CTA
// ============================================================

// ============================================================
// MISSION — live execution view
// ============================================================

function MissionSection() {
  const [step, setStep] = React.useState(0);
  // One workday · deck slide 09 (generic human)
  const day = [
    { t: "07:12", actor: "Clio",       kind: "cos",    label: "Morning briefing", art: "MORNING_BRIEF",
      text: "Overnight: 41 Slack threads, 12 emails, 2 Granola syncs parsed. 3 things need you today — all queued." },
    { t: "09:30", actor: "You",        kind: "human",  label: "In a meeting",     art: null,
      text: "Board prep sync, hour-long. Phone down." },
    { t: "09:34", actor: "Clio",       kind: "cos",    label: "Mission opened",   art: "MISSION · CRO",
      text: "Launched: \"Competitor teardown · Q1 refresh.\" Staffed CRO → 3 analysts. ETA 2h 10m." },
    { t: "11:45", actor: "Pulse",      kind: "agent",  label: "Draft ready",      art: "DOC · 8pp",
      text: "8-page teardown posted. Citations inline. 2 open questions flagged for you." },
    { t: "14:02", actor: "Clio",       kind: "cos",    label: "Churn sync ends",  art: "3 DRAFTS",
      text: "Granola transcript parsed · 3 follow-ups drafted · 1 needs your tone check before sending." },
    { t: "16:40", actor: "CCO Echo",   kind: "agent",  label: "Legal redline",    art: "REDLINE",
      text: "MSA v4 from Acme redlined in your voice. Change log attached — 6 material edits." },
    { t: "18:15", actor: "You",        kind: "human",  label: "Approve & close",  art: null,
      text: "You approve 4 artifacts, reject 1. Clio propagates the edits and archives the missions." },
  ];

  React.useEffect(() => {
    const id = setInterval(() => setStep((s) => (s + 1) % (day.length + 2)), 1800);
    return () => clearInterval(id);
  }, []);

  const visible = day.slice(0, Math.min(step, day.length));

  const kindColor = {
    human: "text-primary",
    cos:   "text-secondary",
    agent: "text-tertiary",
  };
  const kindDot = {
    human: "warning",
    cos:   "nominal",
    agent: "info",
  };

  return (
    <section className="bg-surface-container-lowest py-16 md:py-24 lg:py-32 border-y border-outline-variant/10 relative overflow-hidden">
      <GridBackdrop className="text-primary" opacity={0.04} />
      <div className="max-w-screen-2xl mx-auto px-4 sm:px-6 md:px-8 relative">
        <div className="grid lg:grid-cols-12 gap-16 mb-16">
          <Reveal className="lg:col-span-5">
            <SectionTag num="CTRL·07">A day in the life</SectionTag>
            <h2 className="font-headline text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-[-0.03em] leading-[1.05] mb-8">
              A day in the life<br />
              <span className="text-primary italic">with Control.</span>
            </h2>
          </Reveal>
          <Reveal delay={200} className="lg:col-span-6 lg:col-start-7 flex items-end">
            <p className="text-on-surface-variant text-lg leading-relaxed">
              Control does two things: it <span className="text-on-surface">consolidates every signal</span> across your stack — Slack, email, transcripts, tickets, docs — and then <span className="text-on-surface">executes against it</span>: research, drafts, follow-ups, redlines, scheduling. Below: one workday, start to finish. You stay on the meetings and the few decisions only you can make. Every event is logged, attributable, and replayable.
            </p>
          </Reveal>
        </div>

        <CornerFrame className="bg-surface p-0 relative" size={12} color="primary/30">
          <div className="grid lg:grid-cols-12">
            {/* Day header + actors */}
            <div className="lg:col-span-4 p-8 border-r border-outline-variant/10">
              <div className="flex items-center gap-2 mb-6">
                <StatusDot state={step >= day.length ? "nominal" : "warning"} />
                <span className="font-label text-[10px] tracking-[0.25em] uppercase text-on-surface-variant">
                  {step >= day.length ? "Day complete" : "Day in progress"}
                </span>
              </div>
              <div className="font-label text-[10px] text-outline tracking-widest uppercase mb-2">One workday · L0 human</div>
              <h3 className="font-headline text-2xl font-bold text-on-surface leading-tight mb-6">07:12 → 18:15 · start to finish</h3>

              <TeleLabel className="block mb-4">On the floor today</TeleLabel>
              <div className="space-y-2.5">
                {[
                  { n: "You",       r: "Human · L0",      d: "warning" },
                  { n: "Clio",      r: "Chief of Staff",  d: "nominal" },
                  { n: "Pulse",     r: "Research lead",   d: "info" },
                  { n: "CCO Echo",  r: "Comms / legal",   d: "info" },
                  { n: "Analyst λ", r: "Specialist · CRO",d: "info" },
                ].map((p) => (
                  <div key={p.n} className="flex items-center gap-3 py-2">
                    <StatusDot state={p.d} pulse={false} />
                    <div className="flex-1">
                      <div className="font-label text-[11px] text-on-surface">{p.n}</div>
                      <div className="font-label text-[9px] text-outline tracking-widest uppercase">{p.r}</div>
                    </div>
                  </div>
                ))}
              </div>

              <div className="mt-8 pt-6 border-t border-outline-variant/10">
                <TeleLabel className="block mb-3">Progress</TeleLabel>
                <div className="h-1 bg-surface-container relative overflow-hidden">
                  <div className="absolute inset-y-0 left-0 bg-primary transition-all duration-500" style={{ width: `${Math.min(100, (step / day.length) * 100)}%` }} />
                </div>
                <div className="flex justify-between mt-2 font-label text-[9px] text-outline tracking-widest">
                  <span>07:12</span>
                  <span>{day[Math.min(step, day.length - 1)].t}</span>
                </div>
              </div>

              {/* End-of-day summary (appears once day completes) */}
              <div className={`mt-8 pt-6 border-t border-outline-variant/10 transition-opacity duration-700 ${step >= day.length ? "opacity-100" : "opacity-30"}`}>
                <TeleLabel className="block mb-3">End of day</TeleLabel>
                <div className="space-y-1.5 font-label text-[11px]">
                  <div className="flex justify-between"><span className="text-outline tracking-widest uppercase">Meetings</span><span className="text-primary font-bold">1</span></div>
                  <div className="flex justify-between"><span className="text-outline tracking-widest uppercase">Approvals</span><span className="text-primary font-bold">4</span></div>
                  <div className="flex justify-between"><span className="text-outline tracking-widest uppercase">Status-chasing</span><span className="text-primary font-bold">0</span></div>
                </div>
              </div>
            </div>

            {/* Timeline log */}
            <div className="lg:col-span-8 p-0 min-h-[500px]">
              <div className="flex items-center justify-between px-8 py-4 border-b border-outline-variant/10 bg-surface-container-lowest">
                <TeleLabel>Day log · live</TeleLabel>
                <div className="flex items-center gap-3">
                  <button onClick={() => setStep(0)} className="font-label text-[9px] text-outline hover:text-primary tracking-widest uppercase">↻ Replay</button>
                  <span className="font-label text-[9px] text-outline">{visible.length}/{day.length}</span>
                </div>
              </div>
              <div className="p-5 sm:p-8 space-y-0 max-h-[420px] md:max-h-[500px] overflow-y-auto">
                {visible.map((s, i) => (
                  <div key={i} className="md:grid md:grid-cols-[60px_110px_1fr_auto] md:gap-4 md:items-start flex flex-col gap-1.5 py-3.5 border-b border-outline-variant/5 last:border-0 animate-fadein">
                    <div className="flex items-center gap-3 md:contents">
                      <span className="font-label text-[11px] text-outline tracking-wider md:pt-0.5">{s.t}</span>
                      <div className="flex items-center gap-2 md:pt-0.5">
                        <StatusDot state={kindDot[s.kind]} pulse={false} />
                        <span className={`font-label text-[10px] tracking-widest uppercase ${kindColor[s.kind]}`}>{s.actor}</span>
                      </div>
                    </div>
                    <div>
                      <div className="font-headline text-sm font-bold text-on-surface mb-0.5">{s.label}</div>
                      <div className="text-on-surface-variant text-sm leading-snug">{s.text}</div>
                    </div>
                    <div>
                      {s.art ? (
                        <span className="font-label text-[10px] text-primary tracking-[0.22em] px-2 py-1 border border-primary/30 bg-surface-container-lowest whitespace-nowrap inline-block">{s.art}</span>
                      ) : (
                        <span className="hidden md:inline font-label text-[10px] text-outline tracking-wider">—</span>
                      )}
                    </div>
                  </div>
                ))}
                {step < day.length && (
                  <div className="md:grid md:grid-cols-[60px_110px_1fr_auto] md:gap-4 flex gap-3 py-3">
                    <span className="font-label text-[10px] text-outline tracking-widest">...</span>
                    <span className="font-label text-[10px] text-primary tracking-widest">thinking</span>
                    <div className="flex items-center gap-1">
                      <span className="w-1 h-1 bg-primary animate-pulse" />
                      <span className="w-1 h-1 bg-primary animate-pulse" style={{ animationDelay: "0.2s" }} />
                      <span className="w-1 h-1 bg-primary animate-pulse" style={{ animationDelay: "0.4s" }} />
                    </div>
                    <span />
                  </div>
                )}
              </div>

              {/* Legend */}
              <div className="border-t border-outline-variant/10 px-8 py-4 flex items-center gap-6 font-label text-[10px] tracking-[0.22em]">
                <span className="flex items-center gap-2"><StatusDot state="warning" pulse={false} /><span className="text-primary">HUMAN</span></span>
                <span className="flex items-center gap-2"><StatusDot state="nominal" pulse={false} /><span className="text-secondary">CHIEF</span></span>
                <span className="flex items-center gap-2"><StatusDot state="info" pulse={false} /><span className="text-tertiary">AGENT</span></span>
                <span className="ml-auto text-outline tracking-wider uppercase">◉ every event · replayable</span>
              </div>
            </div>
          </div>
        </CornerFrame>
      </div>
    </section>
  );
}

// ============================================================
// CHIEF OF STAFF — chat + task queue
// ============================================================

function ChiefSection() {
  return (
    <section className="max-w-screen-2xl mx-auto px-4 sm:px-6 md:px-8 py-16 md:py-24 lg:py-32">
      <div className="grid lg:grid-cols-12 gap-16 mb-16">
        <Reveal className="lg:col-span-5">
          <SectionTag num="CTRL·08">The Chief</SectionTag>
          <h2 className="font-headline text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-[-0.03em] leading-[1.05] mb-8">
            Your Chief <span className="text-primary italic">knows you.</span>
          </h2>
        </Reveal>
        <Reveal delay={200} className="lg:col-span-6 lg:col-start-7 flex items-end">
          <p className="text-on-surface-variant text-lg leading-relaxed">
            Your Chief of Staff is a persistent, trained-on-you agent. It remembers how you write, who you trust, what you care about. It talks to other Chiefs on your behalf — and escalates to you only when it needs to.
          </p>
        </Reveal>
      </div>

      <div className="grid lg:grid-cols-12 gap-6">
        {/* Chat */}
        <div className="lg:col-span-7">
          <CornerFrame className="bg-surface-container-lowest" size={12} color="primary/30">
            <div className="flex items-center justify-between px-6 py-4 border-b border-outline-variant/10">
              <div className="flex items-center gap-3">
                <div className="w-8 h-8 bg-primary/20 flex items-center justify-center">
                  <svg width="14" height="14" viewBox="0 0 14 14" className="text-primary"><circle cx="7" cy="7" r="5" stroke="currentColor" fill="none" /><circle cx="7" cy="7" r="1.5" fill="currentColor" /></svg>
                </div>
                <div>
                  <div className="font-headline font-bold text-sm">Clio · Chief of Staff</div>
                  <div className="flex items-center gap-1.5"><StatusDot state="nominal" pulse={false} /><span className="font-label text-[9px] tracking-widest text-secondary uppercase">Online</span></div>
                </div>
              </div>
              <TeleLabel>Session · CTRL-CHAT-2241</TeleLabel>
            </div>
            <div className="p-6 space-y-5 min-h-[380px]">
              <ChatBubble from="clio" time="07:02">
                Morning. Your 7am brief is ready — 3 items need you.
                Want the short version or the full memo?
              </ChatBubble>
              <ChatBubble from="you" time="07:04">Short version.</ChatBubble>
              <ChatBubble from="clio" time="07:04">
                <div className="space-y-2">
                  <div><span className="text-primary font-label text-[10px] tracking-widest uppercase">01 ·</span> Arcwave wants to move contract review to Thursday. I can push your offsite prep to Fri AM if you want.</div>
                  <div><span className="text-primary font-label text-[10px] tracking-widest uppercase">02 ·</span> Three investor intros came in overnight. I filtered to the one you'd say yes to (founder of Parallel).</div>
                  <div><span className="text-primary font-label text-[10px] tracking-widest uppercase">03 ·</span> Ops flagged an invoice ($42k, Heliotype). Outside your threshold. Approve or escalate?</div>
                </div>
              </ChatBubble>
              <ChatBubble from="you" time="07:06">Push offsite. Take the intro. Approve the invoice if legal already signed.</ChatBubble>
              <ChatBubble from="clio" time="07:06" typing>
                <span className="inline-flex items-center gap-1">
                  <span className="w-1.5 h-1.5 bg-primary animate-pulse" />
                  <span className="w-1.5 h-1.5 bg-primary animate-pulse" style={{ animationDelay: "0.2s" }} />
                  <span className="w-1.5 h-1.5 bg-primary animate-pulse" style={{ animationDelay: "0.4s" }} />
                </span>
              </ChatBubble>
            </div>
            <div className="border-t border-outline-variant/10 p-4">
              <div className="flex items-center gap-2 px-3 py-2.5 bg-surface-container">
                <span className="text-outline">›</span>
                <input disabled placeholder="Tell Clio what to do…" className="flex-1 bg-transparent font-label text-[12px] text-on-surface placeholder:text-outline focus:outline-none" />
                <span className="font-label text-[9px] text-outline tracking-widest">⌘ ENTER</span>
              </div>
            </div>
          </CornerFrame>
        </div>

        {/* Task queue */}
        <div className="lg:col-span-5">
          <div className="bg-surface-container-lowest p-6 h-full">
            <div className="flex items-center justify-between mb-6">
              <TeleLabel>Queue · what Clio is doing</TeleLabel>
              <span className="font-label text-[10px] text-primary">7 active</span>
            </div>
            <div className="space-y-0">
              {[
                { s: "running", t: "Drafting Q2 board update", sub: "finance.cos + eng.cos + sales.cos", eta: "~12m" },
                { s: "running", t: "Screening 3 investor intros", sub: "using your 'fit' filters", eta: "~4m" },
                { s: "waiting", t: "Approve invoice · Heliotype $42k", sub: "blocked on your OK", eta: "you" },
                { s: "done", t: "Rescheduled contract review → Thu", sub: "Arcwave notified", eta: "2m ago" },
                { s: "done", t: "Filed weekly exec summary", sub: "sent to #leadership", eta: "14m ago" },
                { s: "queued", t: "Prep Thursday board 1:1 doc", sub: "will start at 14:00", eta: "in 3h" },
                { s: "queued", t: "Weekly donor update", sub: "Friday 16:00", eta: "Fri" },
              ].map((q, i) => (
                <div key={i} className="grid grid-cols-[auto_1fr_auto] gap-3 items-start py-3 border-b border-outline-variant/10 last:border-0">
                  <div className="pt-1.5">
                    <StatusDot
                      state={q.s === "running" ? "warning" : q.s === "waiting" ? "info" : q.s === "done" ? "nominal" : "idle"}
                      pulse={q.s === "running"}
                    />
                  </div>
                  <div>
                    <div className="font-label text-[11px] text-on-surface leading-snug">{q.t}</div>
                    <div className="font-label text-[9px] text-outline tracking-widest uppercase mt-0.5">{q.sub}</div>
                  </div>
                  <span className="font-label text-[9px] text-outline tracking-widest uppercase pt-1">{q.eta}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ChatBubble({ from, children, time, typing }) {
  const isHuman = from === "you";
  return (
    <div className={`flex flex-col ${isHuman ? "items-end" : "items-start"}`}>
      <div className="flex items-center gap-2 mb-1.5">
        <span className={`font-label text-[9px] tracking-[0.25em] uppercase ${isHuman ? "text-tertiary" : "text-primary"}`}>
          {isHuman ? "You" : "Clio"}
        </span>
        <span className="font-label text-[9px] text-outline">{time}</span>
      </div>
      <div
        className={`max-w-[85%] px-4 py-3 font-body text-sm leading-relaxed ${
          isHuman ? "bg-tertiary/10 text-on-surface border-l-2 border-tertiary" : "bg-surface-container text-on-surface border-l-2 border-primary"
        }`}
      >
        {children}
      </div>
    </div>
  );
}

// ============================================================
// INBOX — unified triage
// ============================================================

function InboxSection() {
  const [filter, setFilter] = React.useState("all");
  const items = [
    { src: "Slack", from: "#product-eng", sum: "Ravi asked you to weigh in on the Q3 roadmap doc.", act: "Draft reply", urg: "med", cos: "clio" },
    { src: "Gmail", from: "nina@arcwave.com", sum: "Wants to move contract review to Thursday.", act: "Reschedule", urg: "med", cos: "clio" },
    { src: "Zoom", from: "Deal call · Heliotype", sum: "Follow-up summary · 4 action items for Dana.", act: "Assign", urg: "low", cos: "sales" },
    { src: "Jira", from: "CTRL-1042", sum: "Eng blocked waiting on design asset for onboarding.", act: "Unblock", urg: "high", cos: "eng" },
    { src: "Granola", from: "Board prep", sum: "Transcript pulled · 3 decisions, 2 open questions.", act: "Review", urg: "med", cos: "clio" },
    { src: "Gmail", from: "legal@parallel.com", sum: "Term sheet updates — redline ready for review.", act: "Read", urg: "high", cos: "clio" },
    { src: "Linear", from: "GROW-88", sum: "Pipeline report ready. Dana flagged 3 at-risk deals.", act: "Review", urg: "med", cos: "sales" },
    { src: "Slack", from: "@you", sum: "Theo is waiting on your OK for the Heliotype invoice ($42k).", act: "Approve", urg: "high", cos: "ops" },
  ];

  const filtered = filter === "all" ? items : items.filter((i) => i.src.toLowerCase() === filter);

  return (
    <section className="bg-surface-container-lowest py-16 md:py-24 lg:py-32 border-y border-outline-variant/10 relative">
      <GridBackdrop className="text-primary" opacity={0.04} />
      <div className="max-w-screen-2xl mx-auto px-4 sm:px-6 md:px-8 relative">
        <div className="grid lg:grid-cols-12 gap-16 mb-16">
          <Reveal className="lg:col-span-5">
            <SectionTag num="CTRL·10">Triage</SectionTag>
            <h2 className="font-headline text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-[-0.03em] leading-[1.05] mb-8">
              One inbox for <span className="text-primary italic">everything that asks for you.</span>
            </h2>
          </Reveal>
          <Reveal delay={200} className="lg:col-span-6 lg:col-start-7 flex items-end">
            <p className="text-on-surface-variant text-lg leading-relaxed">
              Action items from every tool, de-duplicated, pre-read, and pre-drafted. One keystroke to delegate to the right Chief — or handle it yourself.
            </p>
          </Reveal>
        </div>

        <div className="bg-surface p-0 relative border border-outline-variant/15">
          <div className="flex items-center border-b border-outline-variant/10 overflow-x-auto">
            {["all", "slack", "gmail", "jira", "zoom", "granola", "linear"].map((f) => (
              <button
                key={f}
                onClick={() => setFilter(f)}
                className={`px-3 sm:px-5 py-3.5 font-label text-[10px] tracking-[0.2em] uppercase transition-colors whitespace-nowrap ${
                  filter === f ? "text-primary border-b-2 border-primary -mb-px" : "text-outline hover:text-on-surface"
                }`}
              >
                {f}
                {f === "all" && <span className="ml-2 text-[9px] text-outline">{items.length}</span>}
              </button>
            ))}
            <div className="flex-1" />
            <div className="hidden md:block px-5 font-label text-[9px] tracking-widest uppercase text-outline whitespace-nowrap">Sort · urgency</div>
          </div>
          <div className="divide-y divide-outline-variant/10">
            {filtered.map((it, i) => (
              <div key={i} className="md:grid md:grid-cols-[60px_90px_1fr_auto_auto] md:gap-4 md:items-center flex flex-col gap-2 px-4 sm:px-6 py-4 hover:bg-surface-container-low transition-colors group">
                <div className="flex items-center gap-3 md:contents">
                  <StatusDot state={it.urg === "high" ? "warning" : it.urg === "med" ? "info" : "idle"} pulse={it.urg === "high"} />
                  <div className="font-label text-[10px] text-on-surface-variant tracking-widest uppercase">{it.src}</div>
                </div>
                <div>
                  <div className="font-label text-[11px] text-outline tracking-widest uppercase mb-0.5">{it.from}</div>
                  <div className="font-body text-sm text-on-surface">{it.sum}</div>
                </div>
                <div className="flex items-center justify-between gap-3 md:contents">
                  <div className="font-label text-[10px] text-outline tracking-widest uppercase">→ {it.cos}.cos</div>
                  <button className="font-label text-[10px] text-primary tracking-[0.2em] uppercase border border-primary/30 px-3 sm:px-4 py-2 hover:bg-primary hover:text-on-primary transition-all whitespace-nowrap">
                    {it.act}
                  </button>
                </div>
              </div>
            ))}
          </div>
          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 px-4 sm:px-6 py-3.5 border-t border-outline-variant/10 bg-surface-container-lowest">
            <TeleLabel>◉ Showing {filtered.length} of {items.length} · {items.filter(i => i.urg === "high").length} urgent</TeleLabel>
            <button className="font-label text-[10px] text-primary tracking-widest uppercase text-left sm:text-right">Delegate all to Chiefs</button>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// COMMAND SURFACE — the dashboard for every agent (deck slide 13)
// ============================================================

function CommandSurfaceSection() {
  const missions = [
    { t: "Market scan",       s: "nominal", p: 72, agents: 3 },
    { t: "Renewal draft",     s: "warning", p: 45, agents: 2 },
    { t: "Offsite plan",      s: "info",    p: 18, agents: 4 },
    { t: "Competitive brief", s: "nominal", p: 91, agents: 3 },
    { t: "Recruiting intake", s: "nominal", p: 63, agents: 2 },
    { t: "Board deck v3",     s: "idle",    p: 5,  agents: 1 },
  ];
  const approvals = [
    { t: "Approve vendor contract",   d: "finance.cos · pending review" },
    { t: "Sign off on outbound email", d: "sales.cos · 48 contacts" },
    { t: "Confirm candidate shortlist", d: "recruit.cos · 5 of 23" },
  ];
  const chartPath = "M0,70 L60,62 L120,66 L180,50 L240,55 L300,40 L360,44 L420,28 L480,32 L540,18 L600,22";

  return (
    <section className="max-w-screen-2xl mx-auto px-4 sm:px-6 md:px-8 py-16 md:py-24 lg:py-32">
      <div className="grid lg:grid-cols-12 gap-16 mb-16">
        <Reveal className="lg:col-span-5">
          <SectionTag num="CTRL·09">The command surface</SectionTag>
          <h2 className="font-headline text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-[-0.03em] leading-[1.05] mb-8">
            The frontend for <span className="text-primary italic">every agent.</span>
          </h2>
        </Reveal>
        <Reveal delay={200} className="lg:col-span-6 lg:col-start-7 flex items-end">
          <p className="text-on-surface-variant text-lg leading-relaxed">
            One window over chat, receipts, approvals, artifacts, memory, and integrations — so no one has to build it, and no one is stuck in a chatbox.
          </p>
        </Reveal>
      </div>

      <div className="grid lg:grid-cols-[2fr_1fr] gap-6">
        {/* Dashboard mock */}
        <Reveal>
          <CornerFrame className="bg-surface-container-lowest p-0 relative" size={12} color="primary/30">
            <div className="px-6 py-4 border-b border-outline-variant/15 flex items-center justify-between">
              <div className="flex items-center gap-3">
                <StatusDot state="nominal" />
                <span className="font-label text-[10px] tracking-[0.28em] text-on-surface-variant uppercase">Control room · live</span>
              </div>
              <span className="font-label text-[10px] text-outline tracking-wider uppercase">Live · {missions.length} missions</span>
            </div>
            <div className="grid grid-cols-2 md:grid-cols-3 gap-3 p-6">
              {missions.map((m, i) => (
                <div key={i} className="border border-outline-variant/20 p-4 bg-surface hover:bg-surface-container-low transition-colors">
                  <div className="flex items-center justify-between mb-3">
                    <StatusDot state={m.s} pulse={m.s === "warning"} />
                    <span className="font-label text-[9px] text-outline tracking-[0.22em] uppercase">Mission</span>
                  </div>
                  <div className="font-headline text-sm text-on-surface font-bold mb-3 leading-tight">{m.t}</div>
                  <div className="h-1 bg-outline-variant/20 relative overflow-hidden">
                    <div className="absolute inset-y-0 left-0 bg-primary transition-all" style={{ width: `${m.p}%` }} />
                  </div>
                  <div className="flex justify-between mt-2 font-label text-[10px] text-outline tracking-wider">
                    <span>{m.p}%</span>
                    <span>{m.agents} agents</span>
                  </div>
                </div>
              ))}
            </div>
            <div className="border-t border-outline-variant/15 p-6">
              <div className="flex items-center justify-between mb-3">
                <TeleLabel>Throughput · last 7d</TeleLabel>
                <span className="font-label text-[10px] text-secondary tracking-wider uppercase">trending up</span>
              </div>
              <svg viewBox="0 0 600 100" className="w-full h-20">
                <path d={chartPath} stroke="#ffc880" strokeWidth="2" fill="none" />
                <path d={`${chartPath} L600,100 L0,100 Z`} fill="#ffc880" opacity="0.08" />
              </svg>
            </div>
          </CornerFrame>
        </Reveal>

        {/* Approvals + Receipts sidebar */}
        <div className="space-y-4">
          <Reveal delay={120}>
            <div className="bg-surface-container-lowest border border-outline-variant/20 p-6">
              <div className="font-label text-[10px] text-primary tracking-[0.3em] uppercase mb-5 flex items-center gap-2">
                <StatusDot state="warning" /> Awaiting you
              </div>
              <div className="space-y-0">
                {approvals.map((a, i) => (
                  <div key={i} className="py-4 border-b border-outline-variant/10 last:border-0">
                    <div className="font-headline text-sm text-on-surface font-bold leading-tight">{a.t}</div>
                    <div className="font-label text-[10px] text-outline mt-1 tracking-wider">{a.d}</div>
                  </div>
                ))}
              </div>
              <button className="mt-4 w-full py-3 font-label text-[10px] tracking-[0.22em] uppercase bg-primary text-on-primary hover:bg-primary-container transition-colors">
                Review queue →
              </button>
            </div>
          </Reveal>

          <Reveal delay={200}>
            <div className="bg-surface-container-lowest border border-outline-variant/20 p-6">
              <div className="font-label text-[10px] text-secondary tracking-[0.3em] uppercase mb-3 flex items-center gap-2">
                <StatusDot state="nominal" /> Receipts
              </div>
              <p className="font-body text-sm text-on-surface-variant leading-relaxed">
                Click any mission to see the full trace — from intent to artifact, every step in between.
              </p>
            </div>
          </Reveal>

          <Reveal delay={280}>
            <div className="bg-surface-container-lowest border border-dashed border-outline-variant/30 p-5">
              <TeleLabel className="block mb-2">◉ One surface for</TeleLabel>
              <div className="grid grid-cols-2 gap-x-4 gap-y-1.5 font-label text-[11px] text-on-surface-variant">
                {["Chat", "Receipts", "Approvals", "Artifacts", "Memory", "Integrations"].map((x) => (
                  <div key={x} className="flex items-center gap-2"><span className="text-primary">◉</span>{x}</div>
                ))}
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { MissionSection, ChiefSection, InboxSection, CommandSurfaceSection });