/* Direction 5 — Arx Labor home (Sierra aesthetic, arxsec.io structure).
   Universal positioning: "Three agents per knowledge worker. Same team. More revenue."
   FS is one of five industries, not the entire pitch.
*/

const D5 = () => {
  return (
    <div style={{ background: "var(--paper)", color: "var(--ink)" }}>
      <ArxNav />

      {/* ─── HERO ─────────────────────────────────────── */}
      <section style={{
        padding: "clamp(72px, 8vw, 128px) 0 clamp(48px, 5vw, 80px)",
        textAlign: "center",
      }}>
        <Container size="narrow">
          <Eyebrow dot>The operating model for AI labor</Eyebrow>
          <h1 style={{
            margin: "28px auto 0",
            fontFamily: "var(--font-display)", fontWeight: 340,
            fontSize: "clamp(3rem, 7vw, 6.6rem)",
            lineHeight: 0.98, letterSpacing: "-0.045em",
            color: "var(--ink)", maxWidth: "16ch",
          }}>
            Aligned execution.<br />
            <em style={{ fontStyle: "italic", fontWeight: 320, color: "var(--ink-2)" }}>Built on</em> Arx.
          </h1>
          <p style={{
            margin: "28px auto 0",
            maxWidth: "62ch", fontSize: 18, lineHeight: 1.5,
            color: "var(--ink-2)",
          }}>
            Three agents per knowledge worker — Researcher, Producer, Coordinator — scoped to the
            work that compounds toward the bet your CEO is making. Built for the operators on the
            hook for delivering against numbers already on their annual review.
          </p>
          <div style={{ marginTop: 36, display: "flex", justifyContent: "center", gap: 12, flexWrap: "wrap" }}>
            <Button arrow onClick={() => { window.location.href = "/industries/"; }}>See how it works for your industry</Button>
            <Button variant="ghost" onClick={() => { window.location.href = "/thinking/"; }}>Read the thesis</Button>
          </div>
        </Container>

        {/* 3 product moments */}
        <Container style={{ marginTop: "clamp(56px, 6vw, 88px)" }}>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
            <RoleMoment kind="researcher" />
            <RoleMoment kind="producer" />
            <RoleMoment kind="coordinator" />
          </div>
        </Container>
      </section>

      {/* ─── BUILT BY OPERATORS ─────────────────────── */}
      <section style={{ borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)",
        padding: "clamp(48px, 5vw, 72px) 0", background: "var(--paper)" }}>
        <Container>
          <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 48,
            alignItems: "center", justifyContent: "center", maxWidth: 1100,
            marginLeft: "auto", marginRight: "auto" }}>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11,
              letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-3)",
              whiteSpace: "nowrap" }}>
              Built by operators<br />and engineers from
            </div>
            <div style={{
              display: "grid", gridTemplateColumns: "repeat(4, 1fr)",
              gap: 32, alignItems: "center", justifyItems: "center",
            }}>
              {["Snyk", "Oracle", "Proofpoint", "ServiceNow"].map(n => (
                <span key={n} style={{
                  fontFamily: "var(--font-sans)", fontWeight: 600,
                  fontSize: 14, letterSpacing: "0.18em",
                  color: "var(--ink-2)", textTransform: "uppercase", opacity: 0.85,
                  whiteSpace: "nowrap",
                }}>{n}</span>
              ))}
            </div>
          </div>
        </Container>
      </section>

      {/* ─── THESIS callout ─────────────────────────── */}
      <section style={{ padding: "clamp(96px, 11vw, 160px) 0" }}>
        <Container>
          <div style={{ display: "grid", gridTemplateColumns: "1.05fr 1fr",
            gap: "clamp(48px, 6vw, 96px)", alignItems: "start" }}>
            <div>
              <Eyebrow>The thesis</Eyebrow>
              <h2 style={{ margin: "20px 0 0", fontFamily: "var(--font-display)", fontWeight: 350,
                fontSize: "clamp(2.4rem, 5vw, 4.4rem)", lineHeight: 1.0,
                letterSpacing: "-0.04em", color: "var(--ink)" }}>
                AI is not the bet.<br />
                AI is <em style={{ fontStyle: "italic", color: "var(--ink-2)", fontWeight: 320 }}>the wrapper</em> around the bet.
              </h2>
            </div>
            <div style={{ paddingTop: 12 }}>
              <p style={{ margin: 0, fontSize: 18, lineHeight: 1.55, color: "var(--ink-2)" }}>
                Every generational company is defined by one or two bets per decade. Electricity
                wasn&apos;t the bet for Ford — the assembly line was. The cloud wasn&apos;t the bet
                for Netflix — streaming was. AI is not the bet for any company. AI is the wrapper
                around the bet your CEO has on the table right now.
              </p>
              <p style={{ margin: "20px 0 0", fontSize: 18, lineHeight: 1.55, color: "var(--ink-2)" }}>
                The companies that adopt AI as the wrapper around the bet they are already making
                will compound a structural advantage for the next decade.
              </p>
              <div style={{ marginTop: 28, display: "flex", gap: 14, alignItems: "center" }}>
                <a href="/thinking/" style={{ display: "inline-flex", alignItems: "center", gap: 8,
                  color: "var(--ink)", fontSize: 14, fontWeight: 500,
                  borderBottom: "1px solid var(--ink)", paddingBottom: 2 }}>Read the essay →</a>
              </div>
            </div>
          </div>
        </Container>
      </section>

      {/* ─── ARCHITECTURE intro (centered) ──────────── */}
      <section style={{ borderTop: "1px solid var(--rule)",
        padding: "clamp(96px, 11vw, 160px) 0 clamp(48px, 5vw, 80px)",
        textAlign: "center" }}>
        <Container size="narrow">
          <Eyebrow>The architecture</Eyebrow>
          <h2 style={{
            margin: "20px auto 0", fontFamily: "var(--font-display)", fontWeight: 350,
            fontSize: "clamp(2.6rem, 5.4vw, 4.6rem)", lineHeight: 1, letterSpacing: "-0.04em",
            color: "var(--ink)", maxWidth: "20ch",
          }}>
            Three agents. One supervisor. <em style={{ fontStyle: "italic", color: "var(--ink-2)", fontWeight: 320 }}>One workflow.</em>
          </h2>
          <p style={{ marginTop: 22, fontSize: 17, lineHeight: 1.5, color: "var(--ink-2)",
            maxWidth: "62ch", marginLeft: "auto", marginRight: "auto" }}>
            Every knowledge worker is already doing three kinds of work: research, production, and
            coordination. Arx deploys one agent for each. The human owns judgment, relationships,
            and sign-off. The agents own the throughput.
          </p>
        </Container>
      </section>

      {/* ─── RESEARCHER ─────────────────────────────── */}
      <FeatureBlock
        side="left" eyebrow="01 · The Researcher" anchor="researcher"
        title={<>Gathers and synthesizes <em>the inputs your team needs to decide</em>.</>}
        body="Reads data rooms, prior memos, policy documents, precedent contracts, and source material. Reports its sources. Leaves a verifiable audit trail."
        cta="See a Researcher in motion →"
      >
        <SurfaceCard padding={0}><BigResearcher /></SurfaceCard>
      </FeatureBlock>

      {/* ─── PRODUCER ───────────────────────────────── */}
      <FeatureBlock
        side="right" eyebrow="02 · The Producer" anchor="producer"
        title={<>Drafts the deliverable. <em>Builds the artifact.</em> Writes the first version.</>}
        body="The blank page is gone — the operator edits and signs. Every clause cited back to a source. Sign-off is the last step, not the bottleneck."
        cta="See a Producer in motion →"
      >
        <SurfaceCard padding={0}><BigProducer /></SurfaceCard>
      </FeatureBlock>

      {/* ─── COORDINATOR ────────────────────────────── */}
      <FeatureBlock
        side="left" eyebrow="03 · The Coordinator" anchor="coordinator"
        title={<>Manages handoffs. <em>Threads communication.</em> Keeps work from stalling between humans.</>}
        body="Knows the named approvers, the SLAs, the prior decisions. Schedules follow-ups across the org and keeps the workflow moving while the operator owns judgment."
        cta="See a Coordinator in motion →"
      >
        <SurfaceCard padding={0}><BigCoordinator /></SurfaceCard>
      </FeatureBlock>

      {/* ─── GOVERNANCE note (after the three) ──────── */}
      <section style={{ borderTop: "1px solid var(--rule)",
        padding: "clamp(56px, 6vw, 96px) 0", background: "var(--paper-2)" }}>
        <Container>
          <div style={{ maxWidth: 880, marginLeft: "auto", marginRight: "auto",
            textAlign: "center" }}>
            <Eyebrow>Governance, by the work</Eyebrow>
            <p style={{ marginTop: 18, fontFamily: "var(--font-display)", fontWeight: 380,
              fontStyle: "italic", fontSize: "clamp(1.4rem, 2.4vw, 1.9rem)",
              lineHeight: 1.35, letterSpacing: "-0.015em", color: "var(--ink)" }}>
              Each agent operates with scoped permissions, named human supervision, and a
              verifiable audit trail. Governance is built in. <em style={{ fontStyle: "italic",
                color: "var(--ink-2)", fontWeight: 340 }}>Compliance is generated.</em>
            </p>
          </div>
        </Container>
      </section>

      {/* ─── WHO WE SERVE ────────────────────────────── */}
      <section style={{ borderTop: "1px solid var(--rule)", padding: "clamp(96px, 11vw, 160px) 0" }}>
        <Container style={{ textAlign: "center", marginBottom: "clamp(48px, 5vw, 80px)" }}>
          <Eyebrow>Who we serve</Eyebrow>
          <h2 style={{ margin: "20px auto 0", fontFamily: "var(--font-display)", fontWeight: 360,
            fontSize: "clamp(2.4rem, 4.8vw, 4rem)", lineHeight: 1.02,
            letterSpacing: "-0.035em", color: "var(--ink)", maxWidth: "22ch" }}>
            Six industries. <em style={{ fontStyle: "italic", color: "var(--ink-2)", fontWeight: 320 }}>One operating model.</em>
          </h2>
          <p style={{ marginTop: 20, fontSize: 17, lineHeight: 1.5, color: "var(--ink-2)",
            maxWidth: "60ch", marginLeft: "auto", marginRight: "auto" }}>
            Arx ships first in regulated knowledge-work industries — where bets are explicit,
            regulators are engaged, and operators have the discipline to deploy in 90 days.
          </p>
        </Container>
        <Container><Industries /></Container>
      </section>

      {/* ─── HOW IT SCALES (platform layers) ─────────── */}
      <section style={{ borderTop: "1px solid var(--rule)", padding: "clamp(96px, 11vw, 160px) 0",
        background: "var(--paper)" }}>
        <Container>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr",
            gap: "clamp(48px, 6vw, 88px)", alignItems: "start" }}>
            <div>
              <Eyebrow>How it scales</Eyebrow>
              <h2 style={{ margin: "20px 0 0", fontFamily: "var(--font-display)", fontWeight: 350,
                fontSize: "clamp(2.2rem, 4.4vw, 3.6rem)", lineHeight: 1.05,
                letterSpacing: "-0.035em", color: "var(--ink)" }}>
                Three agents are the first step. <em style={{ fontStyle: "italic", color: "var(--ink-2)", fontWeight: 320 }}>The platform is what compounds.</em>
              </h2>
              <p style={{ margin: "22px 0 0", fontSize: 17, lineHeight: 1.55, color: "var(--ink-2)",
                maxWidth: "46ch" }}>
                Underneath every Arx deployment sits a governed catalog where Arx first-party
                agents, partner agents, and customer-built agents all live under the same
                control plane.
              </p>
              <a href="/platform" style={{
                marginTop: 26, display: "inline-flex", alignItems: "center", gap: 8,
                color: "var(--ink)", fontSize: 14, fontWeight: 500,
                borderBottom: "1px solid var(--ink)", paddingBottom: 2,
              }}>See the platform →</a>
            </div>
            <div style={{ alignSelf: "center" }}>
              <PlatformLayers />
            </div>
          </div>
        </Container>
      </section>

      {/* ─── WHY I'M BUILDING ARX (founder's note) ──── */}
      <section id="founder" style={{ borderTop: "1px solid var(--rule)", padding: "clamp(96px, 11vw, 160px) 0",
        background: "var(--paper-2)" }}>
        <Container>
          <div style={{ display: "grid", gridTemplateColumns: "300px 1fr",
            gap: "clamp(40px, 5vw, 80px)", alignItems: "start" }}>
            <div>
              <Eyebrow>Why I'm building Arx</Eyebrow>
              <div style={{ marginTop: 22, display: "flex", alignItems: "center", gap: 16 }}>
                <Portrait initials="MF" size={56} />
                <div>
                  <div style={{ fontSize: 15, fontWeight: 500 }}>Mershard Frierson</div>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 11,
                    color: "var(--ink-3)", letterSpacing: "0.06em",
                    textTransform: "uppercase", marginTop: 3 }}>Founder · Arx Labor</div>
                </div>
              </div>
              <div style={{ marginTop: 22, fontFamily: "var(--font-mono)", fontSize: 11.5,
                color: "var(--ink-3)" }}>
                <a href="mailto:mershard@arxlabor.com" style={{
                  borderBottom: "1px solid var(--rule-2)", paddingBottom: 2 }}>
                  mershard@arxlabor.com
                </a>
              </div>
            </div>
            <div>
              <p style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: 380,
                fontStyle: "italic", fontSize: "clamp(1.4rem, 2.2vw, 1.8rem)",
                lineHeight: 1.4, letterSpacing: "-0.015em", color: "var(--ink)",
                maxWidth: "46ch" }}>
                I&apos;ve spent fifteen years in enterprise security sales — Snyk, Proofpoint,
                Oracle, ServiceNow. I&apos;ve watched operators with real P&amp;L responsibility try
                to deploy AI inside their functions and hit the same wall every time.
              </p>
              <p style={{ marginTop: 20, fontSize: 17, lineHeight: 1.55, color: "var(--ink-2)",
                maxWidth: "56ch" }}>
                The technology works. The operating model to run it against the numbers already on
                their annual review doesn&apos;t exist yet.
              </p>
              <p style={{ marginTop: 14, fontSize: 17, lineHeight: 1.55, color: "var(--ink-2)",
                maxWidth: "56ch" }}>
                Arx is the operating model. Three agents per knowledge worker, scoped to the work
                that compounds toward your CEO&apos;s bet, supervised by your named operators,
                priced by the work produced.
              </p>
            </div>
          </div>
        </Container>
      </section>

      {/* ─── FINAL CTA ───────────────────────────────── */}
      <section style={{ borderTop: "1px solid var(--rule)", padding: "clamp(96px, 11vw, 160px) 0",
        textAlign: "center" }}>
        <Container size="narrow">
          <h2 style={{
            margin: "0 auto", fontFamily: "var(--font-display)", fontWeight: 350,
            fontSize: "clamp(2.4rem, 5vw, 4.2rem)", lineHeight: 1.02,
            letterSpacing: "-0.04em", color: "var(--ink)", maxWidth: "22ch",
          }}>
            The bet is yours. <em style={{ fontStyle: "italic", color: "var(--ink-2)", fontWeight: 320 }}>The wrapper is AI.</em>
          </h2>
          <p style={{ margin: "22px auto 0", fontSize: 18, lineHeight: 1.5, color: "var(--ink-2)",
            maxWidth: "52ch" }}>
            The operating model is what we build together.
          </p>
          <div style={{ marginTop: 36, display: "flex", justifyContent: "center", gap: 12 }}>
            <Button arrow onClick={() => { window.location.href = "/talk-to-us/"; }}>Book a 30-minute capacity review</Button>
          </div>
          <div style={{ marginTop: 22, fontFamily: "var(--font-mono)", fontSize: 11.5,
            color: "var(--ink-3)", letterSpacing: "0.04em" }}>
            arxlabor.com · mershard@arxlabor.com
          </div>
        </Container>
      </section>

      <HomeFooter />
    </div>
  );
};

/* ─── Nav (mirroring arxsec.io structure, Sierra polish) ─ */
const ArxNav = () => {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{
      borderBottom: "1px solid var(--rule)",
      background: "rgba(246,243,236,0.85)", backdropFilter: "saturate(140%) blur(10px)",
      position: "sticky", top: 0, zIndex: 20,
    }}>
      <Container style={{
        display: "grid", gridTemplateColumns: "auto 1fr auto",
        alignItems: "center", height: 72, gap: 40,
      }}>
        <ArxWordmark size={20} />
        <div style={{ display: "flex", gap: 32, justifySelf: "center",
          fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--ink-2)",
          position: "relative" }}>
          <button
            onClick={() => setOpen(o => !o)}
            onBlur={() => setTimeout(() => setOpen(false), 150)}
            style={{ background: "none", border: 0, color: "var(--ink-2)",
              fontSize: 14, cursor: "pointer", padding: 0,
              display: "inline-flex", alignItems: "center", gap: 6 }}>
            Industries
            <span style={{ fontSize: 9, opacity: 0.55 }}>▼</span>
          </button>
          <a href="/how-it-works/">How it works</a>
          <a href="/platform">Platform</a>
          <a href="/thinking/">Thinking</a>
          {open && <IndustriesDropdown />}
        </div>
        <div style={{ display: "flex", gap: 16, alignItems: "center" }}>
          <a href="https://www.app.arxsec.io" style={{ fontSize: 14, color: "var(--ink-2)" }}>Sign in</a>
          <button onClick={() => { window.location.href = "/talk-to-us/"; }} style={{
            height: 36, padding: "0 16px", fontSize: 13.5, fontWeight: 500,
            background: "var(--ink)", color: "var(--paper)", border: 0,
            borderRadius: 2, cursor: "pointer", display: "inline-flex",
            alignItems: "center", gap: 8,
          }}>Talk to us <span>→</span></button>
        </div>
      </Container>
    </div>
  );
};

const INDUSTRIES = [
  { n: "01", name: "Financial Services", line: "Grow the bet your CEO already made.", href: "/industries/financial-services/" },
  { n: "02", name: "Healthcare",         line: "Recover the revenue. Compress the auth cycle.", href: "/industries/healthcare/" },
  { n: "03", name: "Insurance",          line: "Bind at partner velocity. Underwrite at scale.", href: "/industries/insurance/" },
  { n: "04", name: "Pharma / Life Sciences", line: "Ship the submissions the IPO timeline requires.", href: "/industries/life-sciences/" },
  { n: "05", name: "Legal Services",     line: "Execute the firm's bet, not the lawyer's contract.", href: "/industries/legal/" },
  { n: "06", name: "Real Estate - Title Companies", line: "Clear stuck files. Document every chase.", href: "/industries/title-companies/" },
];

const IndustriesDropdown = () => (
  <div style={{
    position: "absolute", top: 36, left: "50%", transform: "translateX(-50%)",
    background: "var(--paper)", border: "1px solid var(--rule-2)",
    boxShadow: "var(--shadow-2)", padding: "16px", minWidth: 560,
    display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1,
    backgroundColor: "var(--rule)",
  }}>
    {INDUSTRIES.map(i => (
      <a key={i.n} href={i.href} style={{
        display: "block", padding: "14px 16px", background: "var(--paper)",
        textDecoration: "none",
      }}>
        <div style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 10,
            color: "var(--ink-3)", letterSpacing: "0.1em" }}>{i.n}</span>
          <span style={{ fontFamily: "var(--font-display)", fontWeight: 440,
            fontSize: 15, letterSpacing: "-0.01em", color: "var(--ink)" }}>{i.name}</span>
        </div>
        <div style={{ marginTop: 4, fontSize: 12.5, color: "var(--ink-3)",
          lineHeight: 1.4 }}>{i.line}</div>
      </a>
    ))}
    <a href="/industries/" style={{ gridColumn: "1 / -1", display: "flex",
      justifyContent: "space-between", alignItems: "center",
      background: "var(--paper-2)", padding: "12px 16px",
      fontFamily: "var(--font-mono)", fontSize: 11.5, color: "var(--ink-2)",
      letterSpacing: "0.04em" }}>
      <span>All industries</span><span>→</span>
    </a>
  </div>
);

/* ─── Role moments (hero tiles, abstract) ────────── */
const RoleMoment = ({ kind }) => {
  const content = {
    researcher: { eyebrow: "01 · The Researcher",
      title: "Gathers the inputs.", visual: <SmallResearcher /> },
    producer:   { eyebrow: "02 · The Producer",
      title: "Drafts the deliverable.", visual: <SmallProducer /> },
    coordinator:{ eyebrow: "03 · The Coordinator",
      title: "Threads the handoffs.", visual: <SmallCoordinator /> },
  }[kind];
  return (
    <div style={{
      border: "1px solid var(--rule-2)", borderRadius: 4,
      background: "var(--paper-warm)", overflow: "hidden",
      boxShadow: "var(--shadow-2)", display: "flex", flexDirection: "column",
    }}>
      <div style={{ flex: 1, padding: "24px 24px 20px", display: "flex",
        flexDirection: "column", justifyContent: "center", minHeight: 260, textAlign: "left" }}>
        {content.visual}
      </div>
      <div style={{ borderTop: "1px solid var(--rule)", padding: "18px 22px 20px",
        textAlign: "left", background: "var(--paper)" }}>
        <Eyebrow>{content.eyebrow}</Eyebrow>
        <div style={{ marginTop: 8, fontFamily: "var(--font-display)", fontWeight: 420,
          fontSize: 18, letterSpacing: "-0.015em", color: "var(--ink)" }}>{content.title}</div>
      </div>
    </div>
  );
};

const SmallResearcher = () => {
  const items = [
    { src: "Data room · 142 documents",         st: "ok" },
    { src: "Prior memos · 8 priors",            st: "ok" },
    { src: "Policy doc · v3 (current)",         st: "ok" },
    { src: "Precedent · 24 approved cases",     st: "ok" },
    { src: "Source filings · public + private", st: "live" },
  ];
  return (
    <div>
      <Eyebrow>INPUTS · synthesizing</Eyebrow>
      <div style={{ marginTop: 12, fontFamily: "var(--font-display)", fontWeight: 440,
        fontSize: 22, letterSpacing: "-0.02em", lineHeight: 1.15 }}>
        Reading 32 sources
      </div>
      <div style={{ marginTop: 16, display: "flex", flexDirection: "column", gap: 8 }}>
        {items.map((it, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "10px 1fr auto",
            gap: 10, alignItems: "center", fontFamily: "var(--font-mono)", fontSize: 11.5,
            color: "var(--ink-2)" }}>
            <span style={{ width: 6, height: 6, borderRadius: "50%",
              background: it.st === "live" ? "var(--signal)" : "var(--ok)" }} />
            <span>{it.src}</span>
            <span style={{ color: "var(--ink-3)", fontSize: 10.5 }}>
              {it.st === "live" ? "reading" : "synthesized"}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
};

const SmallProducer = () => {
  const sections = [
    { lbl: "I. Background & context", st: "done" },
    { lbl: "II. Recommendation",      st: "done" },
    { lbl: "III. Risk assessment",    st: "done" },
    { lbl: "IV. Open questions",      st: "live" },
    { lbl: "V. Sign-off",             st: "pending" },
  ];
  return (
    <div>
      <Eyebrow>DELIVERABLE · v1 draft</Eyebrow>
      <div style={{ marginTop: 12, fontFamily: "var(--font-display)", fontWeight: 440,
        fontSize: 22, letterSpacing: "-0.02em", lineHeight: 1.15 }}>
        Decision memo · 5 sections
      </div>
      <div style={{ marginTop: 16, display: "flex", flexDirection: "column", gap: 8 }}>
        {sections.map((s, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "10px 1fr auto",
            gap: 10, alignItems: "center", fontFamily: "var(--font-mono)", fontSize: 11.5,
            color: s.st === "pending" ? "var(--ink-3)" : "var(--ink-2)" }}>
            <span style={{ width: 6, height: 6, borderRadius: "50%",
              background: s.st === "done" ? "var(--ok)" : s.st === "live" ? "var(--signal)" : "var(--rule-2)" }} />
            <span>{s.lbl}</span>
            <span style={{ color: "var(--ink-3)", fontSize: 10.5 }}>{s.st}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

const SmallCoordinator = () => {
  const handoffs = [
    { who: "Subject reviewer", when: "today 11:30", st: "scheduled" },
    { who: "Compliance",       when: "today 14:00", st: "scheduled" },
    { who: "Operations",       when: "Thu, 09:00",  st: "queued" },
    { who: "Operator sign-off",when: "Fri, 10:00",  st: "pending" },
  ];
  return (
    <div>
      <Eyebrow>WORKFLOW · 4 handoffs</Eyebrow>
      <div style={{ marginTop: 12, fontFamily: "var(--font-display)", fontWeight: 440,
        fontSize: 22, letterSpacing: "-0.02em", lineHeight: 1.15 }}>
        Threading the next steps
      </div>
      <div style={{ marginTop: 16, display: "flex", flexDirection: "column", gap: 8 }}>
        {handoffs.map((h, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr auto",
            gap: 10, alignItems: "baseline" }}>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, color: "var(--ink-2)" }}>{h.who}</span>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, color: "var(--ink-3)" }}>{h.when}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

/* ─── Big surfaces for feature blocks (industry-neutral) ─ */
const BigResearcher = () => (
  <div>
    <ConsoleBar path="researcher · in motion" user="audit row · 0x9f42…c104" />
    <div style={{ padding: "26px 28px 28px", background: "var(--paper-warm)" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
        <Eyebrow>OBJECTIVE · supervised by Sarah</Eyebrow>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)" }}>
          1.4s · 142 docs read
        </span>
      </div>
      <div style={{ marginTop: 10, fontFamily: "var(--font-display)", fontWeight: 440,
        fontSize: 22, letterSpacing: "-0.02em" }}>
        Synthesize the inputs for this decision
      </div>
      <div style={{ marginTop: 22, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 28 }}>
        <div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 10,
            letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-3)" }}>
            Inputs gathered
          </div>
          <div style={{ marginTop: 12, display: "flex", flexDirection: "column", gap: 8,
            fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--ink-2)" }}>
            {[
              "Data room · 142 documents",
              "Prior memos · 8 priors with outcomes",
              "Policy doc · current version + amendments",
              "Precedent · 24 analogous approved cases",
              "Source filings · public + private records",
              "Senior bios · counterparties + counsel",
            ].map((s, i) => (
              <div key={i} style={{ display: "grid", gridTemplateColumns: "10px 1fr",
                gap: 10, alignItems: "center" }}>
                <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--ok)" }} />
                <span>{s}</span>
              </div>
            ))}
          </div>
        </div>
        <div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 10,
            letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-3)" }}>
            Synthesis
          </div>
          <p style={{ margin: "10px 0 0", fontSize: 13.5, lineHeight: 1.55, color: "var(--ink-2)" }}>
            Fits the 2024 precedent template — two regulators, three counterparties, and a
            structure with prior approval inside the function. <em style={{ color: "var(--ink)" }}>Recommend
            proceeding on the precedent template</em>, with two clauses flagged for the operator&apos;s
            judgment.
          </p>
          <p style={{ margin: "12px 0 0", fontSize: 13.5, lineHeight: 1.55, color: "var(--ink-2)" }}>
            Two unresolved questions surfaced: one commercial, one regulatory. Both flagged in the
            handoff to the Producer.
          </p>
          <div style={{ marginTop: 18, fontFamily: "var(--font-mono)", fontSize: 11,
            color: "var(--ink-3)", paddingLeft: 12, borderLeft: "2px solid var(--signal)" }}>
            sources cited inline · scope read-only · supervisor: Sarah Whitehurst
          </div>
        </div>
      </div>
    </div>
  </div>
);

const BigProducer = () => (
  <div>
    <ConsoleBar path="producer · drafting" user="awaiting operator sign-off" />
    <div style={{ padding: "26px 28px 28px", background: "var(--paper-warm)" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
        <Eyebrow>DELIVERABLE · v1</Eyebrow>
        <Pill tone="amber">awaiting sign-off</Pill>
      </div>
      <div style={{ marginTop: 10, fontFamily: "var(--font-display)", fontWeight: 440,
        fontSize: 22, letterSpacing: "-0.02em" }}>
        Decision memo, cited to source
      </div>
      <div style={{ marginTop: 22, border: "1px solid var(--rule)", background: "var(--paper)" }}>
        {[
          { num: "I",   t: "Background & context",       cite: "Researcher synthesis · 142 docs",   st: "done" },
          { num: "II",  t: "Recommendation",             cite: "precedent template · 2024",         st: "done" },
          { num: "III", t: "Risk assessment",            cite: "policy doc · §3.2 + 24 analogues",  st: "done" },
          { num: "IV",  t: "Open questions for operator",cite: "two clauses flagged",               st: "live" },
          { num: "V",   t: "Sign-off",                   cite: "Operator · final judgment",         st: "pending" },
        ].map((row, i) => (
          <div key={i} style={{
            display: "grid", gridTemplateColumns: "30px 1.4fr 1.1fr 90px",
            gap: 14, padding: "14px 16px",
            borderTop: i === 0 ? 0 : "1px solid var(--rule)",
            alignItems: "baseline",
          }}>
            <span style={{ fontFamily: "var(--font-display)", fontStyle: "italic",
              fontWeight: 380, fontSize: 14, color: "var(--ink-3)" }}>{row.num}.</span>
            <span style={{ fontSize: 14, color: row.st === "pending" ? "var(--ink-3)" : "var(--ink)" }}>{row.t}</span>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)" }}>{row.cite}</span>
            <span style={{ textAlign: "right" }}>
              <Pill tone={row.st === "done" ? "ok" : row.st === "live" ? "signal" : "neutral"}
                dot={row.st !== "pending"}>{row.st}</Pill>
            </span>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 18, display: "flex", justifyContent: "space-between",
        fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)" }}>
        <span>every clause cited back to the source</span>
        <span>operator review · 6 min of judgment</span>
      </div>
    </div>
  </div>
);

const BigCoordinator = () => (
  <div>
    <ConsoleBar path="coordinator · pipeline" user="day 4 of 8 · on SLA" />
    <div style={{ padding: "26px 28px 28px", background: "var(--paper-warm)" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
        <Eyebrow>WORKFLOW</Eyebrow>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)" }}>
          SLA · 8 business days
        </span>
      </div>
      <div style={{ marginTop: 12, fontFamily: "var(--font-display)", fontWeight: 440,
        fontSize: 22, letterSpacing: "-0.02em" }}>
        Threading 6 handoffs across the org
      </div>
      <div style={{ marginTop: 16, position: "relative" }}>
        <div style={{ position: "absolute", top: 16, left: 16, right: 16, height: 1,
          background: "var(--rule-2)" }} />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 0 }}>
          {[
            { lbl: "Researcher", sub: "synthesis", day: "Day 1", who: "auto",        st: "done" },
            { lbl: "Producer",   sub: "draft v1",  day: "Day 2", who: "auto",        st: "done" },
            { lbl: "Subject",    sub: "review",    day: "Day 3", who: "named SME",   st: "done" },
            { lbl: "Compliance", sub: "review",    day: "Day 4", who: "named approver", st: "live" },
            { lbl: "Operations", sub: "handoff",   day: "Day 6", who: "named team",  st: "pending" },
            { lbl: "Sign-off",   sub: "final",     day: "Day 7", who: "operator",    st: "pending" },
          ].map((s, i) => (
            <div key={i} style={{ display: "flex", flexDirection: "column",
              alignItems: "flex-start", gap: 6, position: "relative" }}>
              <span style={{
                width: 12, height: 12, borderRadius: "50%",
                background: s.st === "done" ? "var(--ok)"
                          : s.st === "live" ? "var(--signal)"
                          : "var(--paper)",
                border: `2px solid ${s.st === "pending" ? "var(--rule-2)" : "transparent"}`,
                marginLeft: 10, marginTop: 10,
                boxShadow: s.st === "live" ? "0 0 0 6px rgba(181,74,43,0.12)" : "none",
              }} />
              <div style={{ paddingTop: 4 }}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 10,
                  letterSpacing: "0.1em", textTransform: "uppercase",
                  color: "var(--ink-3)" }}>{s.day}</div>
                <div style={{ marginTop: 4, fontFamily: "var(--font-display)",
                  fontWeight: 440, fontSize: 15, letterSpacing: "-0.015em",
                  color: s.st === "pending" ? "var(--ink-3)" : "var(--ink)" }}>{s.lbl}</div>
                <div style={{ fontSize: 12, color: "var(--ink-3)" }}>{s.sub}</div>
                <div style={{ marginTop: 6, fontFamily: "var(--font-mono)", fontSize: 10.5,
                  color: "var(--ink-2)" }}>{s.who}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <div style={{ marginTop: 26, display: "grid", gridTemplateColumns: "repeat(4, 1fr)",
        gap: 1, background: "var(--rule)", border: "1px solid var(--rule)" }}>
        {[
          { k: "throughput",  v: "3.1× / FTE" },
          { k: "cycle p50",   v: "8.2 days" },
          { k: "vs. last yr", v: "−42%" },
          { k: "stall rate",  v: "0.2%" },
        ].map(s => (
          <div key={s.k} style={{ background: "var(--paper)", padding: "14px 16px" }}>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 10,
              letterSpacing: "0.12em", textTransform: "uppercase",
              color: "var(--ink-3)" }}>{s.k}</div>
            <div style={{ marginTop: 4, fontFamily: "var(--font-display)",
              fontWeight: 440, fontSize: 22, letterSpacing: "-0.02em" }}>{s.v}</div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

/* ─── Industries grid ────────────────────────────── */
const Industries = () => (
  <div style={{
    display: "grid", gridTemplateColumns: "repeat(3, 1fr)",
    border: "1px solid var(--rule)", background: "var(--rule)", gap: 1,
  }}>
    {INDUSTRIES.map(i => (
      <a key={i.n} href={i.href} style={{
        background: "var(--paper)", padding: "32px 24px 28px",
        display: "flex", flexDirection: "column", gap: 16,
        minHeight: 280, textDecoration: "none",
        transition: "background 180ms var(--ease)",
      }}
      onMouseOver={e => e.currentTarget.style.background = "var(--paper-warm)"}
      onMouseOut={e => e.currentTarget.style.background = "var(--paper)"}>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 11,
          letterSpacing: "0.12em", color: "var(--ink-3)" }}>{i.n}</div>
        <div style={{ fontFamily: "var(--font-display)", fontWeight: 440,
          fontSize: 22, letterSpacing: "-0.02em", lineHeight: 1.15,
          color: "var(--ink)" }}>{i.name}</div>
        <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.5, color: "var(--ink-2)" }}>{i.line}</p>
        <span style={{ marginTop: "auto",
          fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-2)",
          borderBottom: "1px solid var(--rule-2)", paddingBottom: 2,
          alignSelf: "start", letterSpacing: "0.04em" }}>
          See the operating model →
        </span>
      </a>
    ))}
  </div>
);

/* ─── Platform layers (HOW IT SCALES) ────────────── */
const PlatformLayers = () => {
  const layers = [
    { n: "01", name: "First-party agents",
      d: "The three Arx-built agents — Researcher, Producer, Coordinator — plus role-specific variants per function.",
      tone: "ink" },
    { n: "02", name: "Partner agents",
      d: "Specialist agents from vetted vendors. Same scoped identity, named supervisor, audit row.",
      tone: "neutral" },
    { n: "03", name: "Customer-built agents",
      d: "Your own agents, deployed against your own workflows — under the same operating model.",
      tone: "neutral" },
    { n: "04", name: "Governance layer",
      d: "Scoped identity, named supervision, verifiable audit. Every agent. Every call. Every regulator.",
      tone: "signal" },
  ];
  return (
    <div style={{ position: "relative" }}>
      {layers.map((l, i) => (
        <div key={l.n} style={{
          background: l.tone === "ink" ? "var(--ink)"
                    : l.tone === "signal" ? "var(--paper)"
                    : "var(--paper-warm)",
          color: l.tone === "ink" ? "var(--paper)" : "var(--ink)",
          border: `1px solid ${l.tone === "ink" ? "var(--ink)" : "var(--rule-2)"}`,
          padding: "18px 22px 20px",
          marginTop: i === 0 ? 0 : -1,
          position: "relative",
          transform: `translateX(${i * 8}px)`,
          maxWidth: 480,
          boxShadow: l.tone === "ink" ? "var(--shadow-2)" : "none",
        }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11,
              letterSpacing: "0.12em",
              color: l.tone === "ink" ? "rgba(246,243,236,0.6)" : "var(--ink-3)" }}>
              {l.n}
            </div>
            {l.tone === "signal" && <Pill tone="signal" dot>foundation</Pill>}
          </div>
          <div style={{ marginTop: 6, fontFamily: "var(--font-display)", fontWeight: 440,
            fontSize: 20, letterSpacing: "-0.02em",
            color: l.tone === "ink" ? "var(--paper)" : "var(--ink)" }}>{l.name}</div>
          <p style={{ margin: "6px 0 0", fontSize: 13.5, lineHeight: 1.5,
            color: l.tone === "ink" ? "rgba(246,243,236,0.78)" : "var(--ink-2)",
            maxWidth: "40ch" }}>{l.d}</p>
        </div>
      ))}
    </div>
  );
};

/* ─── Feature block (reused pattern) ─────────────── */
const FeatureBlock = ({ side = "left", eyebrow, title, body, cta, children, anchor }) => {
  const text = (
    <div style={{ alignSelf: "center", maxWidth: "44ch",
      paddingLeft: side === "left" ? "clamp(24px, 4vw, 64px)" : 0,
      paddingRight: side === "right" ? "clamp(24px, 4vw, 64px)" : 0,
    }}>
      <Eyebrow>{eyebrow}</Eyebrow>
      <h3 style={{ margin: "16px 0 0", fontFamily: "var(--font-display)", fontWeight: 380,
        fontSize: "clamp(2rem, 3.6vw, 2.8rem)", lineHeight: 1.05,
        letterSpacing: "-0.03em", color: "var(--ink)" }}>{title}</h3>
      <p style={{ margin: "18px 0 0", fontSize: 17, lineHeight: 1.55, color: "var(--ink-2)" }}>{body}</p>
      <a href={`/how-it-works/#${anchor}`} style={{
        marginTop: 26, display: "inline-flex", alignItems: "center", gap: 8,
        color: "var(--ink)", fontSize: 14, fontWeight: 500,
        borderBottom: "1px solid var(--ink)", paddingBottom: 2,
      }}>{cta}</a>
    </div>
  );
  return (
    <section id={anchor} style={{ borderTop: "1px solid var(--rule)",
      padding: "clamp(72px, 8vw, 120px) 0" }}>
      <Container>
        <div style={{ display: "grid", gridTemplateColumns: "1.05fr 1fr",
          gap: "clamp(40px, 5vw, 80px)", alignItems: "stretch" }}>
          {side === "left" ? <>{children}{text}</> : <>{text}{children}</>}
        </div>
      </Container>
    </section>
  );
};

const SurfaceCard = ({ children, padding = 0, dark = false }) => (
  <div style={{
    background: dark ? "var(--ink)" : "var(--paper-warm)",
    color: dark ? "var(--paper)" : "var(--ink)",
    border: `1px solid ${dark ? "var(--ink)" : "var(--rule-2)"}`,
    borderRadius: 4, padding,
    boxShadow: "var(--shadow-2)", overflow: "hidden",
  }}>{children}</div>
);

window.D5 = D5;