// ============================================================
// Control AI — Major content sections
// ============================================================

const { useState: useStateS, useEffect: useEffectS, useRef: useRefS, useMemo: useMemoS } = React;

// ============================================================
// PROBLEM
// ============================================================

function ProblemSection() {
  const fragments = [
    { src: "Slack",   tag: "#deal-acme",        msg: "Can someone push the redline by EOD?",     kind: "slack" },
    { src: "Jira",    tag: "PROD-482",          msg: "Blocked: waiting on design review",        kind: "jira" },
    { src: "Linear",  tag: "ENG-1147",          msg: "Claimed by @ravi · P1 · 3d overdue",       kind: "linear" },
    { src: "Gmail",   tag: "legal@acme.com",    msg: "Re: MSA v4 — please confirm terms",        kind: "mail" },
    { src: "Granola", tag: "sync · sales + cs", msg: "Action: follow up on churn w/ 3 accounts", kind: "granola" },
    { src: "Notion",  tag: "Q-plan / draft",    msg: "@you to fill in revenue section",          kind: "notion" },
  ];
  const consolidated = [
    { p: "P0", msg: "MSA redline w/ Acme · 2 threads + doc",  srcs: ["slack","mail","notion"], due: "today" },
    { p: "P1", msg: "Churn follow-up · 3 accounts from sync", srcs: ["granola","hubspot"],     due: "this week" },
    { p: "P1", msg: "Revenue section for Q-plan draft",       srcs: ["notion","linear"],       due: "fri" },
  ];
  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 border-t border-outline-variant/10 relative">
      <Reveal className="max-w-4xl mb-16">
        <SectionTag num="CTRL·02">The problem</SectionTag>
        <h2 className="font-headline text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-[-0.03em] text-on-background leading-[1.05]">
          Your work lives in a dozen places.<br />
          No one's <span className="text-primary italic">conducting it.</span>
        </h2>
      </Reveal>

      {/* Scattered → consolidated visual (deck slide 03) */}
      <Reveal delay={120}>
        <div className="grid lg:grid-cols-[1fr_1.15fr] gap-12 items-center mb-20">
          {/* LHS narrative */}
          <div className="max-w-xl">
            <p className="font-body text-on-surface-variant text-lg leading-relaxed mb-4">
              Slack threads. Jira tickets. Linear issues. Email. Granola transcripts. Docs. Your team spends the day chasing context instead of doing the work.
            </p>
            <p className="font-body text-on-surface-variant text-lg leading-relaxed mb-4">
              There's no single view of what you owe, what's blocked, what's next.
            </p>
            <p className="font-body text-on-surface text-lg leading-relaxed border-l-2 border-primary pl-5">
              And because it's scattered — <span className="text-primary">you can't hand it to AI either.</span>
            </p>
          </div>

          {/* RHS — fragments → arrows → consolidated */}
          <div className="relative">
            {/* Scattered fragment cards */}
            <div className="grid grid-cols-2 sm:grid-cols-3 gap-2 sm:gap-3 mb-6">
              {fragments.map((f, i) => (
                <div key={i}
                  className="bg-surface-container-lowest border border-outline-variant/25 p-2.5 sm:p-3 relative transition-transform hover:-translate-y-1">
                  <div className="flex items-center gap-2 mb-2">
                    <SourceGlyph kind={f.kind} />
                    <span className="font-label text-[9px] tracking-[0.22em] text-outline uppercase truncate">{f.src} · {f.tag}</span>
                  </div>
                  <div className="font-body text-[11px] sm:text-[12px] text-on-surface-variant leading-snug line-clamp-2">{f.msg}</div>
                </div>
              ))}
            </div>

            {/* Converging arrows */}
            <div className="relative h-10">
              <svg className="absolute inset-0 w-full h-full" viewBox="0 0 300 40" preserveAspectRatio="none">
                <line x1="30"  y1="0" x2="148" y2="32" stroke="#ffc880" strokeOpacity="0.4" strokeDasharray="2 3" />
                <line x1="100" y1="0" x2="149" y2="32" stroke="#ffc880" strokeOpacity="0.4" strokeDasharray="2 3" />
                <line x1="150" y1="0" x2="150" y2="32" stroke="#ffc880" strokeOpacity="0.6" strokeDasharray="2 3" />
                <line x1="200" y1="0" x2="151" y2="32" stroke="#ffc880" strokeOpacity="0.4" strokeDasharray="2 3" />
                <line x1="270" y1="0" x2="152" y2="32" stroke="#ffc880" strokeOpacity="0.4" strokeDasharray="2 3" />
                <polygon points="150,38 146,30 154,30" fill="#ffc880" />
              </svg>
            </div>

            {/* Consolidated Control view */}
            <div className="bg-surface border-2 border-primary/60 relative mt-2">
              <div className="absolute -top-2.5 left-3 sm:left-4 bg-background px-2 sm:px-3 font-label text-[9px] sm:text-[10px] text-primary tracking-[0.28em] uppercase">◉ Control · one view</div>
              <div className="divide-y divide-outline-variant/10 pt-3">
                {consolidated.map((r, i) => (
                  <div key={i} className="px-3 sm:px-5 py-3 grid grid-cols-[32px_1fr_auto] sm:grid-cols-[36px_1fr_auto_70px] items-center gap-2 sm:gap-3">
                    <span className={`font-label text-[10px] tracking-[0.24em] px-1.5 sm:px-2 py-1 text-center ${r.p === "P0" ? "bg-error/15 text-error" : "bg-primary/15 text-primary"}`}>{r.p}</span>
                    <span className="font-body text-[12px] sm:text-[13px] text-on-surface truncate">{r.msg}</span>
                    <span className="hidden sm:flex items-center gap-1.5">
                      {r.srcs.map(s => <SourceGlyph key={s} kind={s} />)}
                    </span>
                    <span className="font-label text-[10px] text-outline tracking-wider text-right">{r.due}</span>
                  </div>
                ))}
              </div>
              <div className="px-3 sm:px-5 py-3 border-t border-outline-variant/20 flex items-center justify-between gap-2 bg-surface-container-lowest/60">
                <span className="font-label text-[9px] sm:text-[10px] text-outline tracking-[0.24em] sm:tracking-[0.28em] uppercase">Ready to hand off</span>
                <span className="font-label text-[10px] sm:text-[11px] text-primary tracking-[0.18em] sm:tracking-[0.2em] flex items-center gap-2 whitespace-nowrap">
                  <StatusDot state="nominal" /> Dispatch <span className="hidden sm:inline">to phantom org</span> →
                </span>
              </div>
            </div>
          </div>
        </div>
      </Reveal>

      <Reveal delay={400} className="mt-4 max-w-3xl">
        <p className="font-headline text-2xl md:text-3xl font-medium text-on-surface leading-snug tracking-tight">
          Control gives every person on your team a <span className="text-primary italic">phantom org</span> — the leverage of a hundred reports, without the headcount, the meetings, or the payroll.
        </p>
      </Reveal>
    </section>
  );
}

// ============================================================
// AI ORG — interactive org chart
// ============================================================

function AIOrgSection() {
  const [selected, setSelected] = useStateS("founder");
  const [tick, setTick] = useStateS(0);
  const [hiring, setHiring] = useStateS(false);
  React.useEffect(() => {
    const id = setInterval(() => setTick(t => t + 1), 2600);
    return () => clearInterval(id);
  }, []);

  // Each Chief of Staff builds its OWN functional org — CMO, CTO, CFO, Head of Research, etc.
  // Each function has its own team. The CoS can spin up entirely new orgs for a given mission.
  const org = {
    founder: {
      name: "Casey Reed", role: "Founder · CEO",
      cos: { name: "Clio", mandate: "Runs a full exec team on Casey's behalf. Hires new functions whenever a mission demands it." },
      functions: [
        { title: "Chief Research Officer", lead: "Pulse", subs: ["Analyst · market sizing", "Analyst · competitor intel", "Librarian · deep research", "Fact-checker"] },
        { title: "Chief Comms Officer", lead: "Echo", subs: ["Ghostwriter · exec voice", "Inbox Triager", "Drafter · replies", "PR Liaison"] },
        { title: "Chief of Operations", lead: "Orbit", subs: ["Calendar Planner", "Travel Agent", "Meeting Prep Bot", "Reschedule Bot"] },
      ],
      peerExample: { to: "Helm", re: "Board deck engineering review", status: "acknowledged" },
    },
    eng: {
      name: "Ravi Kapoor", role: "Head of Engineering",
      cos: { name: "Helm", mandate: "Stood up a review & reliability exec team. Hires specialists per incident." },
      functions: [
        { title: "Chief Technical Officer", lead: "Lint", subs: ["PR Reviewer", "Security Scanner", "Style Auditor", "Perf Profiler"] },
        { title: "Chief Reliability Officer", lead: "Watch", subs: ["On-call Triage", "Sentry Analyst", "Log Summarizer", "Postmortem Writer"] },
        { title: "Chief Planning Officer", lead: "Draft", subs: ["Spec Writer", "Scope Estimator", "RFC Critic", "Roadmap Keeper"] },
      ],
      peerExample: { to: "Signal", re: "API limits for enterprise demo", status: "in-progress" },
    },
    sales: {
      name: "Dana Ortiz", role: "Head of Sales",
      cos: { name: "Signal", mandate: "Built a revenue sub-org with its own CMO + CRO structure." },
      functions: [
        { title: "Chief Marketing Officer", lead: "Trail", subs: ["Campaign Writer", "Segment Builder", "Granola Stitcher", "Zoom Summarizer"] },
        { title: "Chief Revenue Officer", lead: "Ledger", subs: ["Hubspot Sync", "Deal Tagger", "Contact Enricher", "Quote Drafter"] },
        { title: "Chief Insights Officer", lead: "Chart", subs: ["Pipeline Memo", "Win/Loss", "Forecast Bot", "Churn Watcher"] },
      ],
      peerExample: { to: "Axis", re: "Procurement ETA for Acme", status: "awaiting" },
    },
    ops: {
      name: "Theo Park", role: "Head of Ops",
      cos: { name: "Axis", mandate: "Assembled a finance + vendor + policy exec bench. Grows per quarter close." },
      functions: [
        { title: "Chief Financial Officer", lead: "Book", subs: ["Invoicing", "AP Approver", "Budget Watch", "Reconciler"] },
        { title: "Chief Vendor Officer", lead: "Parley", subs: ["Contract Diff", "Renewal Alerts", "Vendor Intel", "RFP Writer"] },
        { title: "Chief Compliance Officer", lead: "Charter", subs: ["Policy Q&A", "Audit Prep", "Access Review", "SOC2 Evidence"] },
      ],
      peerExample: { to: "Clio", re: "Q4 budget review scheduling", status: "resolved" },
    },
  };

  const current = org[selected];
  const keys = Object.keys(org);

  // Live "Chief ↔ Chief" gossip feed
  const chatter = [
    { from: "Clio", to: "Helm",  msg: "Casey wants board deck review by Thu EOD." },
    { from: "Helm", to: "Clio",  msg: "Assigned Lint + Draft. Back in 3h." },
    { from: "Signal", to: "Axis", msg: "Acme deal blocked on procurement — ETA?" },
    { from: "Axis", to: "Signal", msg: "Parley on it. Contract diff by 4pm." },
    { from: "Helm", to: "Signal", msg: "Can we raise rate-limits for the demo?" },
    { from: "Signal", to: "Helm", msg: "Confirmed. Ledger updated CRM note." },
  ];
  const visibleChatter = chatter.slice(0, 3 + (tick % 4));

  return (
    <section className="py-16 md:py-24 lg:py-32 bg-surface-container-lowest relative overflow-hidden border-y border-outline-variant/10">
      <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·06">The AI Org</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">
              Every Chief runs <span className="text-primary italic">an entire org.</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">
              A Chief of Staff doesn't do the work — it <em className="text-on-surface not-italic font-semibold">hires and runs an entire org</em> on your behalf. Whatever functions your mission demands — marketing, engineering, finance, research, legal, ops, compliance, design, BD, HR, a new function you just invented — your Chief assembles it, staffs it, and runs it. Chiefs also talk directly to each other, so cross-functional work resolves without ever pulling you in.
            </p>
          </Reveal>
        </div>

        {/* Leader selector */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-10">
          {keys.map((k) => {
            const p = org[k];
            const active = selected === k;
            return (
              <button key={k} onClick={() => setSelected(k)}
                className={`text-left p-4 transition-all ${active ? "bg-primary text-on-primary" : "bg-surface-container hover:bg-surface-container-high"}`}>
                <div className="flex items-center gap-3 mb-2">
                  <div className={`w-9 h-9 flex items-center justify-center font-headline text-xs font-bold ${active ? "bg-on-primary/10 text-on-primary" : "bg-surface-container-high text-primary"}`}>
                    {p.name.split(" ").map(n => n[0]).join("")}
                  </div>
                  <div>
                    <div className="font-headline font-bold text-sm">{p.name}</div>
                    <div className={`font-label text-[9px] tracking-[0.2em] uppercase ${active ? "text-on-primary/70" : "text-outline"}`}>{p.role}</div>
                  </div>
                </div>
              </button>
            );
          })}
        </div>

        {/* Multi-level org tree */}
        <div className="bg-surface-container relative p-4 sm:p-6 md:p-12">
          <div className="absolute top-0 left-0 w-3 h-3 border-t border-l border-primary/40" />
          <div className="absolute top-0 right-0 w-3 h-3 border-t border-r border-primary/40" />
          <div className="absolute bottom-0 left-0 w-3 h-3 border-b border-l border-primary/40" />
          <div className="absolute bottom-0 right-0 w-3 h-3 border-b border-r border-primary/40" />

          {/* L0 — Human */}
          <div className="flex justify-center">
            <div className="bg-surface-container-highest px-5 sm:px-6 py-4 border border-outline-variant/20 text-center w-full max-w-xs md:min-w-[220px] md:max-w-none md:w-auto">
              <div className="font-label text-[9px] tracking-[0.3em] text-outline uppercase mb-1">Human · L0</div>
              <div className="font-headline font-bold text-base">{current.name}</div>
              <div className="font-label text-[10px] text-on-surface-variant uppercase tracking-wider">{current.role}</div>
            </div>
          </div>

          {/* connector L0→L1 */}
          <div className="flex justify-center"><div className="w-px h-8 bg-primary/60" /></div>

          {/* L1 — Chief of Staff (orchestrator) */}
          <div className="flex justify-center mb-2">
            <div className="bg-surface-container-lowest border-l-2 border-primary px-5 sm:px-6 py-5 w-full max-w-md md:min-w-[280px] md:max-w-[420px] relative">
              <div className="flex items-center gap-3 mb-3">
                <div className="w-8 h-8 bg-primary/20 flex items-center justify-center shrink-0">
                  <span className="font-headline text-primary text-sm font-bold">※</span>
                </div>
                <div className="min-w-0">
                  <div className="font-label text-[9px] tracking-[0.3em] text-primary uppercase">Chief of Staff · L1 · Orchestrator</div>
                  <div className="font-headline font-bold text-lg leading-tight">{current.cos.name}</div>
                </div>
              </div>
              <div className="text-sm text-on-surface-variant leading-relaxed mb-3">{current.cos.mandate}</div>
              <div className="flex items-center gap-2 pt-3 border-t border-outline-variant/10">
                <StatusDot state="nominal" />
                <span className="font-label text-[9px] tracking-[0.25em] text-secondary uppercase">
                  Running {current.functions.length} exec functions · {current.functions.reduce((n,t)=>n+t.subs.length,0)} direct reports
                </span>
              </div>
            </div>
          </div>

          {/* connector L1→L2 — branching on md+, vertical line on mobile */}
          <div className="md:hidden flex justify-center"><div className="w-px h-6 bg-primary/60" /></div>
          <div className="hidden md:block relative h-10">
            <svg className="absolute inset-0 w-full h-full" viewBox="0 0 300 40" preserveAspectRatio="none">
              <line x1="150" y1="0" x2="150" y2="12" stroke="#ffc880" strokeOpacity="0.6" />
              <line x1="50" y1="12" x2="250" y2="12" stroke="#ffc880" strokeOpacity="0.6" />
              <line x1="50" y1="12" x2="50" y2="40" stroke="#ffc880" strokeOpacity="0.6" />
              <line x1="150" y1="12" x2="150" y2="40" stroke="#ffc880" strokeOpacity="0.6" />
              <line x1="250" y1="12" x2="250" y2="40" stroke="#ffc880" strokeOpacity="0.6" />
            </svg>
          </div>

          {/* L2 — Functional Chiefs (CMO, CTO, CFO, etc.) each with their own team */}
          <div className="grid md:grid-cols-3 gap-px bg-outline-variant/15">
            {current.functions.map((fn, i) => (
              <div key={fn.title} className="bg-surface-container-lowest p-5">
                {/* Functional Chief — C-level */}
                <div className="flex items-start gap-2 mb-3">
                  <span className="w-7 h-7 bg-primary/15 text-primary flex items-center justify-center font-label text-[10px] font-bold shrink-0 mt-0.5">L2</span>
                  <div className="flex-1 min-w-0">
                    <div className="font-headline font-bold text-base leading-tight">{fn.lead}</div>
                    <div className="font-label text-[9px] text-primary tracking-[0.2em] uppercase mt-0.5">{fn.title}</div>
                    <div className="font-label text-[9px] text-outline tracking-widest uppercase mt-0.5">Runs a team of {fn.subs.length}</div>
                  </div>
                </div>
                {/* Each functional Chief's team */}
                <div className="pl-4 border-l border-outline-variant/20 space-y-2 mt-4">
                  {fn.subs.map((s, j) => (
                    <div key={s} className="flex items-center gap-2">
                      <span className="w-4 h-px bg-outline-variant/40 -ml-4" />
                      <span className="w-5 h-5 bg-surface-container-high text-primary/70 flex items-center justify-center font-label text-[9px]">λ</span>
                      <span className="text-sm text-on-surface truncate">{s}</span>
                      <span className="ml-auto font-label text-[9px] text-outline tracking-widest">L3</span>
                      <StatusDot state="nominal" pulse={((tick + i*3 + j) % 4) === 0} />
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>

          {/* Dynamic hiring — Chief spins up mission-specific specialists */}
          <div className="mt-6 bg-surface-container-highest border border-dashed border-primary/40 p-4 sm:p-5 relative overflow-hidden">
            <div className="flex flex-col md:flex-row md:items-center gap-4">
              <div className="flex items-start gap-4 flex-1 min-w-0">
                <div className="w-10 h-10 bg-primary/10 flex items-center justify-center text-primary text-lg font-bold shrink-0">+</div>
                <div className="flex-1 min-w-0">
                  <div className="font-label text-[9px] tracking-[0.3em] text-primary uppercase mb-1">Mission staffing · Specialists on demand</div>
                  <div className="font-headline font-bold text-sm leading-tight">
                    {hiring
                      ? <>{current.cos.name} is staffing up: <span className="text-primary">Legal, Diligence, Deal-room</span> + 2 more…</>
                      : <>Your Chief of Staff ships day one. Specialists get staffed per mission.</>}
                  </div>
                  <div className="font-label text-[10px] text-on-surface-variant tracking-wider mt-1">
                    {hiring
                      ? "Provisioning access · wiring reporting lines · seeding context from prior missions"
                      : "e.g. M&A diligence → Legal + Diligence + Deal-room · Fundraise → Investor Relations + Finance"}
                  </div>
                </div>
              </div>
              <button onClick={() => { setHiring(true); setTimeout(() => setHiring(false), 3800); }}
                className="font-label text-[10px] tracking-[0.25em] uppercase px-4 py-2.5 bg-primary text-on-primary hover:bg-primary-fixed-dim transition-colors shrink-0 w-full md:w-auto">
                {hiring ? "Staffing…" : "+ Staff a mission"}
              </button>
            </div>
            {hiring && (
              <div className="absolute bottom-0 left-0 h-0.5 bg-primary" style={{ width: "100%", animation: "hiring-bar 3.8s linear forwards" }} />
            )}
          </div>
        </div>

        {/* Chief-to-Chief communication layer */}
        <div className="mt-12 grid lg:grid-cols-12 gap-px bg-outline-variant/15">
          <div className="lg:col-span-5 bg-surface-container-lowest p-8">
            <TeleLabel className="mb-4 block">Lateral Protocol · Chief ↔ Chief</TeleLabel>
            <div className="font-headline text-2xl font-bold leading-tight mb-4">
              Chiefs talk to each other <span className="text-primary italic">directly.</span>
            </div>
            <p className="text-on-surface-variant text-sm leading-relaxed mb-5">
              When {current.cos.name} needs something outside {current.name.split(" ")[0]}'s remit, it doesn't bug {current.name.split(" ")[0]} — it pings a peer Chief. Peer Chief delegates to its own org, returns an answer, and the loop closes before a human is ever involved.
            </p>
            {/* Example routing */}
            <div className="bg-surface-container p-4 border-l-2 border-secondary">
              <div className="font-label text-[9px] text-outline tracking-[0.25em] uppercase mb-2">Active Handoff · {current.cos.name} → {current.peerExample.to}</div>
              <div className="text-sm text-on-surface mb-3">"{current.peerExample.re}"</div>
              <div className="flex items-center gap-2 font-label text-[10px] tracking-widest uppercase">
                <StatusDot state={current.peerExample.status === "resolved" ? "nominal" : "warn"} />
                <span className={current.peerExample.status === "resolved" ? "text-secondary" : "text-primary"}>{current.peerExample.status}</span>
              </div>
            </div>
          </div>

          {/* Live chatter feed */}
          <div className="lg:col-span-7 bg-surface-container-lowest p-8">
            <div className="flex items-center justify-between mb-4">
              <TeleLabel>Inter-Chief Channel · Live</TeleLabel>
              <div className="flex items-center gap-2">
                <span className="w-1.5 h-1.5 bg-secondary rounded-full animate-pulse" />
                <span className="font-label text-[9px] tracking-[0.25em] text-secondary uppercase">Streaming</span>
              </div>
            </div>
            <div className="space-y-2 font-label">
              {visibleChatter.map((m, i) => (
                <div key={i} className="flex items-start gap-3 p-3 bg-surface-container text-[11px] tracking-wider animate-[fadeInUp_0.4s_ease-out_both]" style={{ animationDelay: `${i * 60}ms` }}>
                  <span className="text-outline shrink-0 w-16">T+{String(i*2).padStart(2,"0")}:{String((i*17)%60).padStart(2,"0")}</span>
                  <span className="text-primary font-bold shrink-0 w-14 uppercase tracking-widest">{m.from}</span>
                  <span className="text-outline shrink-0">→</span>
                  <span className="text-secondary font-bold shrink-0 w-14 uppercase tracking-widest">{m.to}</span>
                  <span className="text-on-surface normal-case tracking-normal">{m.msg}</span>
                </div>
              ))}
            </div>
            <div className="mt-5 pt-4 border-t border-outline-variant/10 grid grid-cols-3 gap-4">
              <div>
                <div className="font-headline text-base font-bold text-primary uppercase tracking-[0.15em]">Always-on</div>
                <div className="font-label text-[9px] tracking-widest uppercase text-outline">Inter-Chief handoffs</div>
              </div>
              <div>
                <div className="font-headline text-base font-bold text-secondary uppercase tracking-[0.15em]">Default path</div>
                <div className="font-label text-[9px] tracking-widest uppercase text-outline">Resolved agent-to-agent</div>
              </div>
              <div>
                <div className="font-headline text-base font-bold uppercase tracking-[0.15em]">When you're needed</div>
                <div className="font-label text-[9px] tracking-widest uppercase text-outline">Escalated to humans</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// SOURCES — integrations
// ============================================================

function SourcesSection() {
  const [hovered, setHovered] = useStateS(null);
  const sources = [
    { id: "slack", name: "Slack", desc: "Threads, DMs, mentions", signals: "Read · Post · Scoped", icon: "slack" },
    { id: "gmail", name: "Gmail", desc: "Inbox, sent, drafts", signals: "Read · Draft · Send", icon: "mail" },
    { id: "jira", name: "Jira", desc: "Epics, tickets, comments", signals: "Read · Create · Update", icon: "jira" },
    { id: "zoom", name: "Zoom", desc: "Meeting transcripts", signals: "Transcripts · Summaries", icon: "zoom" },
    { id: "granola", name: "Granola", desc: "AI meeting notes", signals: "Auto-captured", icon: "granola" },
    { id: "linear", name: "Linear", desc: "Projects & issues", signals: "Read · Create · Triage", icon: "linear" },
    { id: "notion", name: "Notion", desc: "Docs, wikis, specs", signals: "Read · Write · Scoped", icon: "notion" },
    { id: "hubspot", name: "Hubspot", desc: "Deals, contacts", signals: "Read · Update", icon: "hubspot" },
    { id: "gcal", name: "Calendar", desc: "Events, attendees", signals: "Read · Schedule", icon: "cal" },
    { id: "github", name: "GitHub", desc: "PRs, issues, commits", signals: "Read · Review · Comment", icon: "github" },
    { id: "drive", name: "Drive", desc: "Docs, sheets, slides", signals: "Read · Write · Scoped", icon: "drive" },
    { id: "loom", name: "Loom", desc: "Async video", signals: "Read · Transcribe", icon: "loom" },
  ];

  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·04">Sources</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">
            Every signal,<br />
            <span className="text-primary italic">one graph.</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 reads from the tools you already use. Each integration is a scoped, read‑write connector with granular permissions that mirror your org. Your agents act through the same auth your team does — never more.
          </p>
        </Reveal>
      </div>

      <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-px bg-outline-variant/15 border border-outline-variant/15">
        {sources.map((s, i) => (
          <Reveal key={s.id} delay={i * 50}>
          <div
            onMouseEnter={() => setHovered(s.id)}
            onMouseLeave={() => setHovered(null)}
            className="bg-surface p-6 transition-all duration-500 hover:bg-surface-container-low hover:-translate-y-1 relative min-h-[170px] flex flex-col justify-between cursor-default h-full"
          >
            <div>
              <div className="w-9 h-9 bg-surface-container-high flex items-center justify-center mb-4">
                <SourceGlyph kind={s.icon} />
              </div>
              <div className="font-headline font-bold text-base mb-1">{s.name}</div>
              <div className="font-label text-[10px] text-on-surface-variant uppercase tracking-wider">{s.desc}</div>
            </div>
            <div className="flex items-center gap-2 pt-3 border-t border-outline-variant/10 mt-4">
              <StatusDot state="nominal" pulse={hovered === s.id} />
              <span className="font-label text-[9px] text-outline tracking-widest uppercase">{s.signals}</span>
            </div>
          </div>
          </Reveal>
        ))}
      </div>

      <div className="flex flex-col md:flex-row items-center justify-between gap-4 mt-10">
        <TeleLabel>◉ New connectors launching regularly · Custom connectors via SDK</TeleLabel>
        <a className="font-label text-[10px] text-primary tracking-widest uppercase hover:underline border-b border-primary/30 pb-1" href="#">View all integrations →</a>
      </div>
    </section>
  );
}

function SourceGlyph({ kind }) {
  // Real brand logos, monochrome amber, to stay on-palette.
  const c = "#ffc880";
  switch (kind) {
    case "slack":
      return (
        <svg width="18" height="18" viewBox="0 0 24 24" fill={c}>
          <path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z"/>
        </svg>
      );
    case "mail": // Gmail
      return (
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.4" strokeLinejoin="round">
          <path d="M2 6v13h4V11l6 4.5L18 11v8h4V6l-10 7.2z" fill={c} stroke="none"/>
        </svg>
      );
    case "jira":
      return (
        <svg width="18" height="18" viewBox="0 0 24 24" fill={c}>
          <path d="M11.571 11.513H0a5.218 5.218 0 0 0 5.232 5.215h2.13v2.057A5.215 5.215 0 0 0 12.575 24V12.518a1.005 1.005 0 0 0-1.005-1.005zm5.723-5.756H5.736a5.215 5.215 0 0 0 5.215 5.214h2.129v2.058a5.218 5.218 0 0 0 5.215 5.214V6.761a1.003 1.003 0 0 0-1.001-1.004zM23.013 0H11.455a5.215 5.215 0 0 0 5.215 5.215h2.129v2.057A5.215 5.215 0 0 0 24 12.483V1.005A1.001 1.001 0 0 0 23.013 0z"/>
        </svg>
      );
    case "zoom":
      return (
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
          <rect x="1" y="6" width="15" height="12" rx="2" fill={c}/>
          <path d="M17 9l6-3v12l-6-3z" fill={c}/>
        </svg>
      );
    case "granola":
      return (
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round">
          <circle cx="6" cy="12" r="2.5" fill={c} stroke="none"/>
          <circle cx="14" cy="7" r="2.5" fill={c} stroke="none"/>
          <circle cx="18" cy="15" r="2.5" fill={c} stroke="none"/>
          <circle cx="10" cy="18" r="2.5" fill={c} stroke="none"/>
        </svg>
      );
    case "linear":
      return (
        <svg width="18" height="18" viewBox="0 0 24 24" fill={c}>
          <path d="M.403 13.795L10.205 23.597a11.99 11.99 0 0 1-5.977-3.22.063.063 0 0 1 0-.09L.487 16.547a12.04 12.04 0 0 1-.084-2.752zM.875 9.936l13.189 13.189a12.01 12.01 0 0 1-3.187-.855L.73 13.123c.058-1.085.248-2.15.145-3.187zm1.565-4.413l16.037 16.037a12.068 12.068 0 0 1-2.244 1.236L1.204 8.767a12.067 12.067 0 0 1 1.236-3.244zm3.08-3.8a12 12 0 0 1 16.757 16.757L5.52 1.723z"/>
        </svg>
      );
    case "notion":
      return (
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.4">
          <rect x="3" y="3" width="18" height="18" rx="1.5"/>
          <path d="M8 7v10M8 7l8 10M16 7v10" strokeLinecap="round"/>
        </svg>
      );
    case "hubspot":
      return (
        <svg width="18" height="18" viewBox="0 0 24 24" fill={c}>
          <path d="M18.164 7.93V5.084a2.199 2.199 0 0 0 1.267-1.978v-.067A2.2 2.2 0 0 0 17.238.846h-.067a2.2 2.2 0 0 0-2.193 2.193v.067a2.192 2.192 0 0 0 1.252 1.973l.013.006v2.852a6.22 6.22 0 0 0-2.969 1.31L6.385 4.176a2.48 2.48 0 1 0-1.164 1.556L12.49 11.4a6.247 6.247 0 0 0 .095 7.047l-2.215 2.214a2.028 2.028 0 0 0-.584-.095 2.028 2.028 0 1 0 2.029 2.029 2.028 2.028 0 0 0-.095-.584l2.19-2.19a6.266 6.266 0 1 0 4.254-11.892zm-1.022 9.38a3.212 3.212 0 1 1 3.212-3.213 3.212 3.212 0 0 1-3.212 3.212z"/>
        </svg>
      );
    case "cal": // Google Calendar — simple square with date
      return (
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.4">
          <rect x="3" y="5" width="18" height="16" rx="1"/>
          <path d="M3 9h18M8 3v4M16 3v4" strokeLinecap="round"/>
          <circle cx="12" cy="15" r="1.3" fill={c} stroke="none"/>
        </svg>
      );
    case "github":
      return (
        <svg width="18" height="18" viewBox="0 0 24 24" fill={c}>
          <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
        </svg>
      );
    case "drive": // Google Drive triangle mark
      return (
        <svg width="18" height="18" viewBox="0 0 24 24" fill={c}>
          <path d="M7.71 3.52L1.15 15l3.42 5.48L11.13 9 7.71 3.52z"/>
          <path d="M22.85 15L16.29 3.52h-6.84L16.01 15h6.84z" opacity=".7"/>
          <path d="M4.57 20.48h13.13L21.13 15H7.99l-3.42 5.48z" opacity=".85"/>
        </svg>
      );
    case "loom":
      return (
        <svg width="18" height="18" viewBox="0 0 24 24" fill={c}>
          <circle cx="12" cy="12" r="10" fillOpacity="0.15" stroke={c} strokeWidth="1.2"/>
          <path d="M8.5 8l8 4-8 4z" fill={c}/>
        </svg>
      );
    default:
      return <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke={c} strokeWidth="1.3"><rect x="3" y="3" width="12" height="12" /></svg>;
  }
}

// ============================================================
// TAKE BACK CONTROL — 2-station approach (Ingest → Execute)
// (deck slide 06B, Brain station omitted by design)
// ============================================================

function TakeBackControlSection() {
  const ingest = [
    ["slack",   "every thread"],
    ["mail",    "every email"],
    ["jira",    "every ticket"],
    ["linear",  "every issue"],
    ["notion",  "every doc"],
    ["drive",   "every file"],
    ["granola", "every transcript"],
    ["github",  "every PR"],
    ["cal",     "every meeting"],
    ["hubspot", "every deal"],
  ];
  const execChiefs = [
    { r: "CRO", n: "Pulse"  },
    { r: "CCO", n: "Echo"   },
    { r: "COO", n: "Orbit"  },
  ];

  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·03">The approach</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">
              Take back <span className="text-primary italic">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">
              We ingest every platform you run on, and hand it to a Chief of Staff that knows your org as well as you do — ready to delegate, execute, and report back across your stack.
            </p>
          </Reveal>
        </div>

        {/* 2 stations + arrow */}
        <div className="grid lg:grid-cols-[1fr_auto_1fr] gap-6 items-stretch">
          {/* 01 — Ingest */}
          <Reveal>
            <CornerFrame className="bg-surface-container-lowest p-8 h-full" size={10} color="primary/30">
              <div className="flex items-baseline justify-between mb-5">
                <div className="font-label text-[10px] tracking-[0.3em] text-primary uppercase">01 · Ingest</div>
                <div className="font-label text-[10px] text-outline tracking-wider uppercase">your stack</div>
              </div>
              <div className="font-headline font-bold text-2xl mb-6 leading-tight">Everywhere your work already lives.</div>
              <div className="grid grid-cols-2 gap-x-4 gap-y-2.5">
                {ingest.map(([k, label], i) => (
                  <div key={i} className="flex items-center gap-2.5">
                    <SourceGlyph kind={k} />
                    <span className="font-body text-sm text-on-surface-variant truncate">{label}</span>
                  </div>
                ))}
              </div>
              <div className="mt-6 pt-4 border-t border-outline-variant/15 flex items-center gap-2">
                <StatusDot state="nominal" />
                <span className="font-label text-[10px] text-on-surface-variant tracking-widest uppercase">Streaming · scoped permissions</span>
              </div>
            </CornerFrame>
          </Reveal>

          {/* Arrow */}
          <Reveal delay={120} className="hidden lg:flex items-center justify-center">
            <div className="flex flex-col items-center gap-3">
              <svg width="44" height="14" viewBox="0 0 44 14"><path d="M0 7h38M34 3l6 4-6 4" stroke="#ffc880" strokeWidth="1.5" fill="none" /></svg>
              <span className="font-label text-[9px] text-outline tracking-[0.28em] uppercase">delegated to</span>
            </div>
          </Reveal>

          {/* 02 — Execute */}
          <Reveal delay={200}>
            <CornerFrame className="bg-surface-container-lowest p-8 h-full border-l-2 border-primary" size={10} color="primary/30">
              <div className="flex items-baseline justify-between mb-5">
                <div className="font-label text-[10px] tracking-[0.3em] text-primary uppercase">02 · Execute</div>
                <div className="font-label text-[10px] text-outline tracking-wider uppercase">your phantom org</div>
              </div>
              <div className="font-headline font-bold text-2xl mb-6 leading-tight">Your Chief, ready to run missions.</div>

              {/* Mini org tree */}
              <div className="space-y-2">
                <div className="flex justify-center">
                  <div className="bg-surface-container-lowest border-l-2 border-primary px-4 py-2 text-center">
                    <div className="font-label text-[9px] tracking-[0.24em] text-primary uppercase">L1 · Chief of Staff</div>
                    <div className="font-headline font-bold text-base">Clio</div>
                  </div>
                </div>
                <div className="flex justify-center">
                  <svg width="180" height="14" viewBox="0 0 180 14">
                    <path d="M90 0v6M30 6h120M30 6v8M90 6v8M150 6v8" stroke="#ffc880" strokeOpacity="0.6" fill="none" />
                  </svg>
                </div>
                <div className="grid grid-cols-3 gap-2">
                  {execChiefs.map((c, i) => (
                    <div key={i} className="bg-surface-container px-2 py-2 text-center">
                      <div className="font-label text-[9px] text-primary tracking-widest">{c.r}</div>
                      <div className="font-headline text-xs font-bold">{c.n}</div>
                    </div>
                  ))}
                </div>
                <div className="flex justify-center pt-2">
                  <div className="font-label text-[10px] text-outline tracking-widest uppercase">+ specialists hired on demand</div>
                </div>
              </div>

              <div className="mt-6 pt-4 border-t border-outline-variant/15 flex items-center gap-2">
                <StatusDot state="nominal" />
                <span className="font-label text-[10px] text-primary tracking-widest uppercase">Ready for intent</span>
              </div>
            </CornerFrame>
          </Reveal>
        </div>

        {/* Closing line */}
        <Reveal delay={300}>
          <div className="mt-12 border-t border-outline-variant/15 pt-8 flex items-center gap-6">
            <TeleLabel className="text-primary">◉ The loop</TeleLabel>
            <span className="font-body text-lg md:text-xl text-on-surface-variant">
              Context in. Delegated execution — across every tool, on your behalf.
            </span>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { ProblemSection, AIOrgSection, SourcesSection, SourceGlyph, TakeBackControlSection });
