// Mission + What we build + Work. Clean Institutional system.

function MissionStatement() {
  const ref = React.useRef(null);
  const [inView, setInView] = React.useState(false);
  React.useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) setInView(true); });
    }, { threshold: 0.25 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, []);

  const sentence = "Our mission is to build the agents that make your business run leaner, grow faster, and come out of the AI shift ahead of everyone who waited.";
  const words = sentence.split(" ");

  return (
    <section ref={ref} className={"mission" + (inView ? " in" : "")} aria-label="Mission">
      <div className="mission-inner">
        <p className="mission-statement">
          {words.map((w, i) => (
            <React.Fragment key={i}>
              <span className="mission-word" style={{ transitionDelay: `${i * 35}ms` }}>{w}</span>
              {i < words.length - 1 && " "}
            </React.Fragment>
          ))}
        </p>
      </div>
    </section>
  );
}

function AgentDetail({ item }) {
  return (
    <div className="detail-card detail-agent">
      <div className="detail-card-head">
        <span className="detail-card-eyebrow">Agent · {item.label}</span>
        <span className="detail-card-badge">{item.badge}</span>
      </div>
      <div className="detail-agent-rows">
        <div className="detail-agent-row">
          <span className="detail-mini-label">Scenario</span>
          <p>{item.scenario}</p>
        </div>
        <div className="detail-agent-row detail-agent-row-out">
          <span className="detail-mini-label">Outcome</span>
          <p>{item.outcome}</p>
        </div>
      </div>
    </div>
  );
}

function ProductDetail({ item, index, total }) {
  const num = String(index + 1).padStart(2, "0");
  const tot = String(total).padStart(2, "0");
  return (
    <div className="detail-card detail-product">
      <div className="detail-card-head">
        <span className="detail-card-eyebrow">Phase {num} / {tot}</span>
        <span className="detail-card-badge">{item.when}</span>
      </div>
      <h4 className="detail-product-title">{item.label}</h4>
      <p className="detail-product-text">{item.summary}</p>
      <div className="detail-product-deliver">
        <span className="detail-mini-label">You leave with</span>
        <p>{item.deliverable}</p>
      </div>
    </div>
  );
}

function ContextDetail({ item }) {
  // Phased sequence: 0 = booting (dots), 1 = user message, 2 = agent typing, 3 = agent answer
  const [phase, setPhase] = React.useState(0);
  React.useEffect(() => {
    setPhase(0);
    const t1 = setTimeout(() => setPhase(1),  900);
    const t2 = setTimeout(() => setPhase(2), 1900);
    const t3 = setTimeout(() => setPhase(3), 2900);
    return () => { clearTimeout(t1); clearTimeout(t2); clearTimeout(t3); };
  }, [item.label]);

  return (
    <div className="detail-card detail-context">
      <div className="detail-card-head">
        <span className="detail-card-eyebrow">Context Layer · {item.label}</span>
        <span className={"detail-card-dot" + (phase === 0 ? " detail-card-dot-boot" : "")}><span/><span/><span/></span>
      </div>
      <div className="chat-thread">
        {phase >= 1 && (
          <div className="chat-bubble chat-bubble-user">
            <span className="chat-author">You</span>
            <p>{item.question}</p>
          </div>
        )}
        {phase === 2 && (
          <div className="chat-bubble chat-bubble-agent chat-bubble-typing" aria-label="Context is typing">
            <span className="chat-author">Context</span>
            <span className="typing-dots"><span/><span/><span/></span>
          </div>
        )}
        {phase === 3 && (
          <div className="chat-bubble chat-bubble-agent">
            <span className="chat-author">Context</span>
            <p>{item.answer}</p>
          </div>
        )}
      </div>
    </div>
  );
}

function Capability({ title, body, tags, variant }) {
  const [active, setActive] = React.useState(0);
  const [userPicked, setUserPicked] = React.useState(false);
  const ref = React.useRef(null);
  const [inView, setInView] = React.useState(false);

  React.useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => setInView(e.isIntersecting));
    }, { threshold: 0.2 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);

  React.useEffect(() => {
    if (userPicked || !inView) return;
    const id = setInterval(() => {
      setActive(a => (a + 1) % tags.length);
    }, 6400);
    return () => clearInterval(id);
  }, [userPicked, inView, tags.length]);

  const item = tags[active];

  return (
    <article ref={ref} className={"capability capability-" + variant}>
      <h3 className="capability-title">{title}</h3>
      <div className="capability-right">
        <p className="capability-body">{body}</p>
        <div className="capability-tags" role="tablist">
          {tags.map((t, j) => (
            <button
              key={j}
              role="tab"
              aria-selected={active === j}
              className={"chip" + (active === j ? " chip-active" : "")}
              style={{ transitionDelay: `${j * 40}ms` }}
              onClick={() => { setActive(j); setUserPicked(true); }}
            >
              {t.label}
            </button>
          ))}
        </div>
        <div className="capability-detail" aria-live="polite">
          <div key={active} className="capability-detail-inner">
            {variant === "agent"   && <AgentDetail   item={item} />}
            {variant === "product" && <ProductDetail item={item} index={active} total={tags.length} />}
            {variant === "context" && <ContextDetail item={item} />}
          </div>
        </div>
      </div>
    </article>
  );
}

function WhatWeBuild() {
  const capabilities = [
    {
      variant: "agent",
      title: "Agents that do the work.",
      body: "Software that does the boring, repetitive stuff your team does by hand. Anything one of your people does over and over - an agent can do faster, around the clock, with a human checking the output before it goes out.",
      tags: [
        { label: "Triage",        badge: "Saves ~2 hrs/day", scenario: "Your support inbox has 50 new tickets by 9am.", outcome: "An agent has already sorted them by urgency, labelled the billing issues, and dropped the critical ones into your lead engineer's queue." },
        { label: "Documentation", badge: "Drafts in seconds", scenario: "Your team just finished a 45-minute client call.", outcome: "Before they hang up, an agent has drafted the call notes, the follow-up email, and the CRM update. They review and send." },
        { label: "Scoring",       badge: "Every lead, 24/7",  scenario: "A new lead fills in your demo form at 2am.", outcome: "By 8am, an agent has scored them 9/10 against your ICP, enriched the company data, and booked them with the right SDR." },
        { label: "Routing",       badge: "No triage meeting", scenario: "A client emails in with a technical question that spans three teams.", outcome: "An agent reads it, works out which specialist should handle it, and books it straight into their calendar." },
        { label: "Content",       badge: "3 drafts in 10 min", scenario: "You need a LinkedIn post, a blog intro, and a client update by Friday.", outcome: "An agent drafts all three in your voice, with links and evidence pulled from your own past work. You edit for ten minutes." },
        { label: "Reporting",     badge: "Board-ready Monday", scenario: "Monday morning. Board report due.", outcome: "An agent has already pulled the numbers from Stripe, HubSpot, and your ops tool, and drafted the report in your format. You check the commentary." },
        { label: "Compliance",    badge: "Catches every send", scenario: "A junior sales rep is about to send a contract to a new client.", outcome: "An agent checks it against your legal playbook, flags two clauses that need partner review, and holds the send until they're fixed." },
        { label: "Onboarding",    badge: "24/7, answers first", scenario: "A new customer signs up at midnight.", outcome: "An agent walks them through setup, answers their first 12 questions, and pings your CS team only about the one they got stuck on." },
        { label: "Intake",        badge: "Clean brief, no back-and-forth", scenario: "A prospective client fills in your 'work with us' form.", outcome: "An agent runs a structured intake over email, produces a clean brief with budget, timeline, and fit, and hands it to your team." },
        { label: "Outreach",      badge: "200 messages, each one real", scenario: "You have a list of 200 ideal customers to reach out to.", outcome: "An agent drafts a personalised message to each one that references their actual work - not 'hope you're having a great week'." },
      ],
    },
    {
      variant: "product",
      title: "Products, built end-to-end.",
      body: "For non-technical founders launching an AI-enabled product. We're the embedded AI engineering team that shapes it, ships V1, and keeps it working - so you don't have to hire a CTO on day one.",
      tags: [
        { label: "Shape",    when: "Week 0 – 1",  summary: "Turn a rough idea into a buildable spec. We run discovery, map the agent workflows, and scope the architecture.", deliverable: "A buildable spec, a clear architecture, and a fixed price for V1." },
        { label: "Design",   when: "Week 1 – 2",  summary: "Design the product and the agent workflows together, so AI isn't bolted on afterwards.", deliverable: "Wireframes, agent workflows, and the end-to-end user journey, ready to build against." },
        { label: "Build V1", when: "Week 2 – 8",  summary: "Ship a working V1 with real agents, real data, real users. Engineered properly from day one.", deliverable: "A live product, fully owned by you. Source code, data, and agent prompts in your repo." },
        { label: "Iterate",  when: "Week 8 – 12", summary: "Tune the product against real usage until it holds up under load and real customer behaviour.", deliverable: "A product that's been stress-tested by actual users - and fixed accordingly." },
        { label: "Maintain", when: "Ongoing",     summary: "Keep it running as models and infrastructure shift. Model upgrades, regressions caught early, costs controlled.", deliverable: "A product that keeps getting better. You're not holding a black box you can't maintain." },
        { label: "Support",  when: "Ongoing",     summary: "Embedded engineering help for anything your team needs, without hiring a full AI team in year one.", deliverable: "An engineer on Slack. New features shipped as the product grows." },
      ],
    },
    {
      variant: "context",
      title: "A Context Layer for your business.",
      body: "We plug every system your business runs on - Google Sheets, Stripe, your CRM, your ops tools - into a single bespoke context layer. Then we build you a chat interface on WhatsApp or desktop so you can ask what's going on and get a real answer, in real time.",
      tags: [
        { label: "Cash",      question: "How much cash do we have next Friday?",        answer: "£47,320 available. £12,400 in invoices clearing Thursday. £8,900 in subscription renewals on Friday. Payroll on the 28th is covered." },
        { label: "Sales",     question: "Who's closest to closing this week?",          answer: "Three. Northland Legal — proposal sent Tuesday, last touch yesterday. Meridian Health — verbal yes, contract out. Oakwood — stalled on procurement for 11 days." },
        { label: "Pipeline",  question: "What moved in the pipeline this week?",        answer: "4 new deals opened, 2 moved to proposal, 1 closed won (£18k, Meridian), 1 closed lost (budget). Total pipeline value up £34k week-on-week." },
        { label: "Ops",       question: "What's stuck in fulfilment?",                  answer: "Two orders on hold. #4817 waiting on supplier ETA (chased Tuesday). #4832 needs a signature from the client — I've emailed them twice." },
        { label: "Team",      question: "What did everyone ship last week?",            answer: "James: 3 PRs merged, client demo for Meridian. Sarah: finalised the onboarding flow. Tom: closed 2 support tickets, started the billing migration." },
        { label: "Customers", question: "Which accounts are going quiet?",              answer: "Four accounts with no activity in 14+ days: Northland, Brightwave, Kestrel, Harbour Co. Suggest a check-in from the CSM this week." },
        { label: "Marketing", question: "Which channel is working this month?",         answer: "LinkedIn ads: 12 leads, £89 CPA. Google: 8 leads, £143 CPA. Organic referrals: 6 leads, £0. Paid down 22% month-on-month." },
        { label: "Finance",   question: "Are we on track for this quarter?",            answer: "Revenue: £142k of £180k target (79%, on pace). Burn: £61k of £75k budget (under). Runway at current burn: 14 months." },
      ],
    },
  ];
  return (
    <section id="what" className="section section-tinted reveal" aria-label="What we build">
      <div className="wrap">
        <div className="section-head">
          <h2>What we build.</h2>
        </div>
        <div className="capabilities">
          {capabilities.map((c, i) => (
            <Capability key={i} {...c} />
          ))}
        </div>
      </div>
    </section>
  );
}

// Pull-number component. Counts up from 0 to target on scroll-into-view.
function PullNumber({ value, prefix = "", suffix = "" }) {
  const ref = React.useRef(null);
  const [display, setDisplay] = React.useState(prefix + "0" + suffix);
  const fired = React.useRef(false);

  React.useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !fired.current) {
          fired.current = true;
          const start = performance.now();
          const duration = 800;
          const ease = (t) => 1 - Math.pow(1 - t, 4);
          function frame(now) {
            const t = Math.min(1, (now - start) / duration);
            const v = Math.round(ease(t) * value);
            setDisplay(prefix + v + suffix);
            if (t < 1) requestAnimationFrame(frame);
          }
          requestAnimationFrame(frame);
        }
      });
    }, { threshold: 0.3 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, [value, prefix, suffix]);

  return <span ref={ref} className="display-num tnum">{display}</span>;
}

function PullText({ children }) {
  return <span className="display-num tnum">{children}</span>;
}

// Shared case study library. Used by homepage Work section (4 featured) and work.html (all 9).
const WORK_CASES = [
  {
    name: "Utom",
    sector: "Micro-Business · Africa / LATAM",
    pull: "90%",
    pullLabel: "Less admin time per week for micro-business owners.",
    link: "",
    problem: "Micro-businesses are stuck between chaotic spreadsheets and enterprise ERPs that were never built for them.",
    agents: [
      { label: "UBOK Framework",      what: "A single conversational overlay that organises every message, receipt, and ledger line into the right place automatically." },
      { label: "Financial Architect", what: "Builds the books around how the owner actually describes their business. No template, no learning curve." },
      { label: "Virtual CFO",         what: "Translates questions like \"what's my burn rate?\" into an instant answer pulled from live data." },
    ],
    outcomes: [
      { stat: "90%",     text: "Less admin time. 5-10 hours a week back to owners." },
      { stat: "0",       text: "Manual record-keeping. Everything runs through WhatsApp." },
      { stat: "1 admin", text: "Can now run global ops that previously needed one per site." },
    ],
  },
  {
    name: "Ground Control",
    sector: "Industrial Ops · UK",
    pull: "4 → 1",
    pullLabel: "One administrator now runs what previously needed a team of four.",
    link: "groundcontroldev.com",
    problem: "Running industrial facilities means drowning in manuals, work orders, contractor paperwork, and compliance checks. Institutional knowledge lives in people's heads and lost in PDFs.",
    agents: [
      { label: "Major Tom",         what: "An ops co-pilot sitting on a vector-indexed corpus of every facility document, SOP, and historical work order. Ask anything - it retrieves the exact source in seconds." },
      { label: "Work-Order Agent",  what: "Triages requests, drafts technical specs, and assigns the right contractor automatically based on site requirements and past work." },
      { label: "Compliance Agent",  what: "Checks every outgoing action against site-specific regulations and safety protocols. Nothing leaves the system without passing the gate." },
    ],
    outcomes: [
      { stat: "4 → 1", text: "Team of four compressed into one administrator plus Major Tom." },
      { stat: "85%",   text: "Faster contractor onboarding. Two weeks down to under 48 hours." },
      { stat: "0",     text: "Compliance failures. Every action gated before it hits a real system." },
    ],
  },
  {
    name: "Frontrow MD",
    sector: "Healthtech · US",
    pull: "3×",
    pullLabel: "Outreach volume with the same team, fully evidence-backed.",
    link: "frontrowmd.com",
    problem: "Sourcing credible clinician endorsements takes months, and the copy reads like an ad.",
    agents: [
      { label: "Lead Scoring", what: "Ranks every clinician for product fit by specialty, publication history, and practice profile. Sales only see the top of the list." },
      { label: "Outreach",     what: "Drafts personalised messages that reference the clinician's actual research. No 'Dear Doctor'." },
      { label: "Testimonials", what: "Produces evidence-backed draft copy. Every claim cited to peer-reviewed literature, with the source chain attached." },
    ],
    outcomes: [
      { stat: "3×",    text: "Outreach volume with the same team." },
      { stat: "48 hr", text: "Testimonial turnaround. Previously two weeks." },
      { stat: "100%",  text: "Of claims cited to peer-reviewed literature." },
    ],
  },
  {
    name: "The Accubin",
    sector: "Sovereign Identity · Gov",
    pull: "< 1 sec",
    pullLabel: "Real-time biometric verification across millions of records.",
    link: "accubin.com",
    problem: "National-scale identity infrastructure still relies on documents that can be forged and databases that can't keep up. Governments need tamper-proof biometric verification that works at the speed of the service it gates.",
    agents: [
      { label: "Face-as-an-ID",         what: "AI models that transform facial landmarks into unique, immutable cryptographic vectors. The face is the key - no card, no password." },
      { label: "Vector Match Engine",   what: "Sub-second identification against government-scale datasets. Optimised for accuracy and latency under load." },
      { label: "Secure Key Generation", what: "Derives cryptographic access keys directly from biometric vectors. High-stakes verification with no recoverable secret on the wire." },
    ],
    outcomes: [
      { stat: "< 1 s", text: "Verification latency at national scale." },
      { stat: "100%",  text: "Tamper-proof mapping. Physical document forgery off the table." },
      { stat: "Prod",  text: "Proven under regulated, high-stakes biometric workloads." },
    ],
  },
  {
    name: "Showroom360",
    sector: "Automotive · Multi-site",
    pull: "5 → 1",
    pullLabel: "Fragmented legacy tools consolidated into one system of record.",
    link: "showroom360.com",
    problem: "Dealerships run on a patchwork of five-plus tools: CRM, inventory, payments, analytics, compliance. Data never reconciles, back-office drowns in duplication, and owners can't see a live picture of the business.",
    agents: [
      { label: "Workflow Agents",    what: "Coordinate inventory, sales, and payments across the platform so a single change propagates everywhere - no double entry, no drift." },
      { label: "Reporting Agents",   what: "Generate real-time operational and financial insights for owners. Live P&L, live stock turn, live commission." },
      { label: "Compliance Helpers", what: "Proactively surface missing or inconsistent fields in sales records before they become audit findings." },
    ],
    outcomes: [
      { stat: "5 → 1", text: "Legacy tools replaced by one unified system." },
      { stat: "60%",   text: "Reduction in back-office overhead." },
      { stat: "2×",    text: "Inventory volume without adding back-office headcount." },
    ],
  },
  {
    name: "Bold Better Living",
    sector: "Wellness · Consumer",
    pull: "95%",
    pullLabel: "Logging consistency via photo + text multimodal tracking.",
    link: "boldbetterliving.com",
    problem: "Wellness apps lose users at the logging step. Manual entry is a tax. And generic advice misses the cultural and physiological context that actually matters - especially for people on GLP-1s or managing chronic conditions.",
    agents: [
      { label: "Alex (Coach)",        what: "A personal AI coach guiding day-to-day decisions across nutrition, fitness, and mental wellbeing. Remembers you, doesn't reset." },
      { label: "Multimodal Tracking", what: "Log meals, water, and workouts via text or photo. The agent connects the dots and explains what it means for your day." },
      { label: "Medication Support",  what: "Designed for GLP-1 users. Tracks symptoms and adjusts diet around side effects without needing a clinical appointment." },
    ],
    outcomes: [
      { stat: "95%",  text: "Logging consistency, well above manual-entry apps." },
      { stat: "100%", text: "Of meal plans tailored to cultural and physiological context." },
      { stat: "Live", text: "Diet + exercise adjustments based on symptom tracking." },
    ],
  },
  {
    name: "Bloomie",
    sector: "Education · Early Years",
    pull: "2 min",
    pullLabel: "90-minute parent reports, now drafted in under two.",
    link: "app.bloomie.com",
    problem: "Early-years educators can't personalise content for every child without burning out.",
    agents: [
      { label: "Curriculum", what: "Generates age-appropriate lesson variants mapped to each child's developmental stage and interests." },
      { label: "Content",    what: "Produces the stories, exercises, and visuals for each variant. Tuned to individual learning styles." },
      { label: "Reporting",  what: "Drafts 90-minute parent progress reports in under two minutes, in the educator's voice. Human sign-off before it goes out." },
    ],
    outcomes: [
      { stat: "2 min", text: "Parent reports. Previously 90 minutes each." },
      { stat: "30+",   text: "Personalised lesson variants per child per week, zero manual authoring." },
      { stat: "100%",  text: "Of content tailored to each child's stage and interests." },
    ],
  },
  {
    name: "Proxy Medicine",
    sector: "Healthtech · Urgent Care",
    pull: "40%",
    pullLabel: "Less clinician time on documentation per visit.",
    link: "proxymedicine.com",
    problem: "Urgent care clinics lose hours every day to intake admin and repetitive documentation.",
    agents: [
      { label: "Alfie (Triage)", what: "Runs structured intake with every patient and produces a clinical pre-visit summary. Flags red-risk conditions the moment they appear." },
      { label: "Documentation",  what: "Drafts the visit note the second the consultation ends, to clinical guidelines. Reviewed, not written." },
      { label: "Routing",        what: "Reads the intake and puts the patient in front of the right clinician, first time." },
    ],
    outcomes: [
      { stat: "30 sec", text: "Intake drafted per patient. Previously 10+ clinician minutes." },
      { stat: "40%",    text: "Less post-visit documentation work per clinician." },
      { stat: "0",      text: "Missed red-risk flags. Every intake runs the safety gate." },
    ],
  },
  {
    name: "Statwell MD",
    sector: "Healthtech · Telehealth",
    pull: "$29.99",
    pullLabel: "Asynchronous care price point - 70% lower than live telehealth.",
    link: "statwellmd.com",
    problem: "Telehealth still forces live video calls for simple, common conditions. Scheduling friction kills access. State-by-state clinician licensing makes scaling a legal nightmare. The cost of care stays high because humans are in every loop.",
    agents: [
      { label: "Intake Agents",     what: "Condition-specific agents that guide users through structured medical questionnaires. No live call required." },
      { label: "Drafting Agents",   what: "Generate care plans and prescriptions for clinician review. Strict scope control keeps the agent inside the guideline." },
      { label: "State-Aware Logic", what: "Handles clinician licensing constraints and state-specific regulations automatically - so expansion isn't bottlenecked by legal review." },
    ],
    outcomes: [
      { stat: "70%", text: "Lower cost of care. $29.99 transparent pricing." },
      { stat: "0",   text: "Appointment friction. No scheduling, no video, same care plan." },
      { stat: "50+", text: "States of automated compliance, ready for nationwide scale." },
    ],
  },
];

// Featured on homepage. Change these names to swap which cases show on index.html.
const FEATURED_CASES = ["Utom", "Proxy Medicine", "Frontrow MD", "Bold Better Living"];

function WorkCase({ name, sector, pull, pullLabel, problem, agents, outcomes, link }) {
  const [active, setActive] = React.useState(0);
  const [userPicked, setUserPicked] = React.useState(false);
  const ref = React.useRef(null);
  const [inView, setInView] = React.useState(false);

  React.useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => setInView(e.isIntersecting));
    }, { threshold: 0.2 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);

  React.useEffect(() => {
    if (userPicked || !inView) return;
    const id = setInterval(() => setActive(a => (a + 1) % agents.length), 5000);
    return () => clearInterval(id);
  }, [userPicked, inView, agents.length]);

  const a = agents[active];

  return (
    <article ref={ref} className="work-case reveal">
      <header className="work-case-head">
        <div className="work-case-meta">
          <span className="eyebrow">{sector}</span>
          <h2 className="work-case-name">{name}</h2>
        </div>
        <div className="work-case-pull">
          <span className="display-num tnum">{pull}</span>
          <p className="work-case-pull-label">{pullLabel}</p>
        </div>
      </header>

      <div className="work-case-grid">
        <div className="work-case-col">
          <span className="work-case-label">The problem</span>
          <p className="work-case-problem">{problem}</p>
        </div>

        <div className="work-case-col work-case-col-wide">
          <span className="work-case-label">What we built</span>
          <div className="capability-tags" role="tablist">
            {agents.map((ag, j) => (
              <button
                key={j}
                role="tab"
                aria-selected={active === j}
                className={"chip" + (active === j ? " chip-active" : "")}
                onClick={() => { setActive(j); setUserPicked(true); }}
              >
                {ag.label}
              </button>
            ))}
          </div>
          <div className="capability-detail" aria-live="polite">
            <div key={active} className="capability-detail-inner">
              <div className="detail-card detail-agent">
                <div className="detail-card-head">
                  <span className="detail-card-eyebrow">Agent · {a.label}</span>
                  <span className="detail-card-badge">{String(active + 1).padStart(2, "0")} / {String(agents.length).padStart(2, "0")}</span>
                </div>
                <div className="detail-agent-rows">
                  <div className="detail-agent-row">
                    <span className="detail-mini-label">What it does</span>
                    <p>{a.what}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="work-case-outcomes">
        <span className="work-case-label">Outcomes</span>
        <div className="outcomes-grid">
          {outcomes.map((o, j) => (
            <div key={j} className="outcome-card">
              <span className="outcome-stat tnum">{o.stat}</span>
              <p className="outcome-text">{o.text}</p>
            </div>
          ))}
        </div>
      </div>

      {link && (
        <a className="link-draw" href={"https://" + link} target="_blank" rel="noopener">
          <span>See it live</span>
          <Arrow/>
        </a>
      )}
    </article>
  );
}

function Work() {
  const cases = FEATURED_CASES
    .map(n => WORK_CASES.find(c => c.name === n))
    .filter(Boolean);

  return (
    <section id="work" className="section section-work reveal" aria-label="Work">
      <div className="wrap">
        <div className="section-head">
          <h2>AI agents and products, live across multiple sectors.</h2>
          <p className="lede">Four recent builds. Each one: a real business problem, agents built around it, a working system in production. Under clinical, operational or human sign-off at every step.</p>
        </div>

        <div className="sector-marquee" aria-hidden="true">
          <div className="marquee-track">
            {["Healthcare", "Education", "Industrial Ops", "Fintech", "Legal", "Media", "Retail", "B2B SaaS", "Insurance", "Real Estate",
              "Healthcare", "Education", "Industrial Ops", "Fintech", "Legal", "Media", "Retail", "B2B SaaS", "Insurance", "Real Estate"
            ].map((s, i) => <span key={i}>{s}</span>)}
          </div>
        </div>

        <div className="work-cases work-cases-home">
          {cases.map(c => <WorkCase key={c.name} {...c} />)}
        </div>

        <div className="work-more">
          <a className="work-more-btn" href="/work">
            <span className="work-more-label">More agents + products we've built</span>
            <Arrow/>
          </a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { MissionStatement, WhatWeBuild, Capability, Work, WorkCase, WORK_CASES, FEATURED_CASES });