// CLARITY — Digital Workers page (Apple-emulation, Fuel Talent)

const { useState, useEffect, useRef, useMemo, useCallback } = React;

// ─── content ────────────────────────────────────────────────────────
const NAV = [
  { label: "Expertise",       href: "index.html#expertise", panel: "expertise" },
  { label: "Services",        href: "index.html#services",  panel: "services" },
  { label: "Digital Workers", href: "digital-worker.html", panel: null, current: true },
  { label: "Resources",       href: "index.html#resources", panel: "resources" },
  { label: "Find a Job",      href: "jobs.html",            panel: null },
];

const MEGA_PANELS = {
  expertise: {
    eyebrow: "Expertise · 8 practices",
    cols: [
      { head: "Build",    items: ["Tech & Engineering", "Product", "Design & UX Research"] },
      { head: "Operate",  items: ["HR & Operations", "Finance & Accounting", "Admin & Lifestyle"] },
      { head: "Lead",     items: ["C-Suite", "Marketing"] },
      { head: "Featured", items: ["Browse all expertise ›", "Submit a role"] },
    ],
  },
  services: {
    eyebrow: "Services · 3 modes",
    cols: [
      { head: "01 — Recruiting & Staffing",   items: ["Permanent placement", "Contract & contingent", "Embedded recruiting"] },
      { head: "02 — Professional & Managed", items: ["Specialist teams", "Operational coverage", "Project execution"] },
      { head: "03 — Digital Workers",         items: [{ label: "The roles we staff", href: "#roles" }, { label: "How we build them", href: "#stack" }, { label: "Hire a Digital Worker ›", href: "#contact" }] },
      { head: "Not sure?",                    items: ["Talk to a strategist ›"] },
    ],
  },
  resources: {
    eyebrow: "Fuel for thought",
    cols: [
      { head: "Field Notes",  items: ["Hiring playbooks", "Career guides", "Salary trends 2026"] },
      { head: "Case Studies", items: ["Provider case · Providence", "Scale-up case · Pacagen"] },
      { head: "Podcast",      items: ["Make Them Lose Sleep", "Browse all episodes ›"] },
      { head: "Subscribe",    items: ["Monthly newsletter"] },
    ],
  },
};

const PROOF_STATS = [
  { n: "24/7",  l: "awake" },
  { n: "4 wks", l: "average time-to-live" },
  { n: "~70%",  l: "of repeatable tasks automatable" },
  { n: "$1.3M", l: "annual manual-process cost absorbed" },
  { n: "SOC 2", l: "in transit" },
  { n: "MCP",   l: "every integration, every model" },
];

const ROLES = [
  { num: "01",
    title: <>Customer Operations <em>Agent.</em></>,
    body: "Handles tier-one inquiries, scheduling, and follow-up. Escalates to a human only when the call needs judgment.",
    stack: ["Zendesk", "Intercom", "HubSpot", "Slack"] },
  { num: "02",
    title: <>Document <em>Operator.</em></>,
    body: "Ingests, parses, and routes contracts, claims, and invoices at volume. Built for the inbox you keep meaning to clean out.",
    stack: ["DocuSign", "Workday", "NetSuite", "SharePoint"] },
  { num: "03",
    title: <>SDR <em>Researcher.</em></>,
    body: "Builds prospect lists, drafts outreach, watches for signals. Quietly does the work that fills a pipeline.",
    stack: ["Apollo", "LinkedIn", "Salesforce", "Outreach"] },
  { num: "04",
    title: <>Analyst <em>on Watch.</em></>,
    body: "Silent during business as usual. Loud when something breaks. Surfaces anomalies and drafts the first read on what they mean.",
    stack: ["Snowflake", "Looker", "Datadog", "PagerDuty"] },
  { num: "05",
    title: <>Operations <em>Coordinator.</em></>,
    body: "Ticket triage, expense routing, calendar tetris — the in-between work nobody asks for and everybody needs.",
    stack: ["Jira", "Concur", "Google Workspace", "Notion"] },
  { num: "06",
    title: <>Recruiting <em>Sourcer.</em></>,
    body: "Scours channels, builds slates, drafts outreach. (Yes — we use this one ourselves.)",
    stack: ["LinkedIn", "Apollo", "GEM", "Our ATS"] },
];

const STEPS = [
  { num: "01",
    title: <>Tell us <em>what the seat does.</em></>,
    body: "A 25-minute brief: what the role touches, what good looks like, where a wrong move would cost real money. We listen more than we pitch.",
    tag: "Day 1" },
  { num: "02",
    title: <>We design. <em>You watch.</em></>,
    body: "Inside a week you see a working agent running against your real data, with guardrails already wired in. No vaporware demos.",
    tag: "Week 1" },
  { num: "03",
    title: <>Launch and <em>stay.</em></>,
    body: "We deploy into your stack, watch for drift, and retune as the work changes. Digital workers don't ship and disappear — a Fuel engineer stays on the role for 90 days post-launch.",
    tag: "Week 2+" },
];

const WHY = [
  { num: "01",
    title: <>Calibrated, <em>not improvised.</em></>,
    body: "Every digital worker is briefed against your actual workflow — not a generic prompt. The same discovery rigor we use for an executive search applies here." },
  { num: "02",
    title: <>Embedded, <em>not over the wall.</em></>,
    body: "A Fuel engineer stays on the role for the first 90 days post-launch. Drift gets caught and corrected before it becomes an outage." },
  { num: "03",
    title: <>Accountable, <em>not unmanned.</em></>,
    body: "You get a human point of contact, an audit log of every action the agent takes, and the right to pull the plug from one screen." },
];

const STACK = [
  { key: "Models",
    body: <>
      <b>Claude Opus</b> for the heavy reasoning — long-context planning, multi-step agents, anywhere accuracy beats cost.<br/>
      <b>Claude Sonnet</b> for the everyday agent loops — the workhorse most teams ship on.<br/>
      <b>Claude Haiku</b> (or <b>GPT-5 mini</b>) for high-volume parsing, classification, and triage.<br/>
      <b>Llama 4</b>, <b>Qwen 3</b>, or <b>DeepSeek V3</b> self-hosted when the data can't leave your cloud.<br/>
      Routing logic chooses the right model per task, not per vendor relationship.
    </> },
  { key: "Orchestration",
    body: <>
      <b>LangGraph</b> for Python workflows — stateful, observable, recoverable. Used by Klarna, Replit, LinkedIn, Uber.<br/>
      <b>Mastra</b> for TypeScript teams already on Vercel or Next.js — same primitives, native deploy.<br/>
      <b>OpenAI Agents SDK</b> or <b>Anthropic Agent SDK</b> for vendor-native simplicity. <b>Pydantic AI</b> when you want type safety end-to-end.<br/>
      We pick the runtime that fits your team's stack — not the other way around.
    </> },
  { key: "Tools",
    body: <>
      Every integration goes through <b>MCP</b> — the open protocol Anthropic, OpenAI, Google, and most enterprise vendors have standardized on.<br/>
      Hundreds of servers ship today: <b>Salesforce</b>, <b>HubSpot</b>, <b>Snowflake</b>, <b>Linear</b>, <b>GitHub</b>, <b>Slack</b>, <b>Postgres</b>. Remote/HTTPS-based for production, OAuth 2.1 auth.<br/>
      Custom servers built in days when your internal tool isn't already covered.<br/>
      Swap a model. The tools keep working.
    </> },
  { key: "Durability",
    body: <>
      <b>Temporal</b> for enterprise-grade durability — battle-tested at Coinbase, Snap, and Stripe-adjacent teams.<br/>
      <b>Inngest</b> for event-driven agent workflows — agent-native, easier TypeScript and Python on-ramp.<br/>
      <b>LangGraph's built-in checkpoints</b> when the workflow is simple enough to skip a separate runtime.<br/>
      An agent eleven steps into a workflow when the pod restarts picks up where it left off — not from the start.
    </> },
  { key: "Memory",
    body: <>
      <b>pgvector</b> on the Postgres you already run — one database to back up, one auth model, no extra vendor to onboard.<br/>
      <b>Turbopuffer</b> when you need cheap-at-scale — per-tenant indexes, object-storage-backed, what Cursor and Linear ship on.<br/>
      <b>Voyage AI</b> embeddings + <b>Cohere Rerank</b> for the two-stage retrieval pattern that beats vanilla cosine search by 20–40 points.<br/>
      <b>LangMem</b> or <b>Zep</b> when you want a managed memory abstraction; custom when you don't.
    </> },
  { key: "Observability",
    body: <>
      <b>LangSmith</b> or <b>Langfuse</b> for distributed tracing — every agent step, every tool call, every decision.<br/>
      <b>Braintrust</b> for offline evals and prompt regression testing — the 2026 dataset and eval standard.<br/>
      Instrumented via <b>OpenTelemetry GenAI</b> semantic conventions, so traces aren't locked into one vendor.<br/>
      Every regression caught in eval before it ships.
    </> },
  { key: "Sandboxes",
    body: <>
      <b>E2B</b> for code-execution sandboxes — what Cursor, Replit Agent, and Devin rely on.<br/>
      <b>Browserbase</b> for managed headless browsers, with <b>Stagehand</b> as the higher-level browser-agent API.<br/>
      <b>Modal</b> sandboxes for heavier compute. <b>Daytona</b> for full agent dev environments.<br/>
      Nothing the agent does happens on your production network unless you explicitly say so.
    </> },
];

const FAQ = [
  { q: "What is a digital worker?",
    a: "A digital worker is an AI-powered agent built to handle a specific workflow autonomously, such as inbox triage, sourcing support, data processing, or customer response. It operates within defined rules and human oversight guardrails." },
  { q: "What business functions can digital workers support?",
    a: "Sales enablement, marketing automation, customer support, operations, finance and forecasting, and product workflows are the most common use cases we deploy into." },
  { q: "When should a company use a digital worker instead of hiring a person?",
    a: "When the task is repetitive, rules-based, high-volume, or time-sensitive and does not require human judgment on every instance. Digital workers are best deployed alongside people, not as replacements for complex roles." },
  { q: "Can Fuel build AI agents securely for enterprise workflows?",
    a: "Yes. Our AI implementations include governance frameworks, human-in-the-loop approvals, auditability, and security controls. We are vendor-neutral and build to your existing stack where possible." },
  { q: "How does Fuel protect privacy and data security in AI implementations?",
    a: "Every engagement includes a review of data handling practices, access controls, and compliance requirements. We do not deploy agents that touch sensitive data without appropriate safeguards in place." },
];

// ─── Nav ─────────────────────────────────────────────────────────────
function TopNav() {
  const [open, setOpen] = useState(null);
  const closeT = useRef(null);
  const enter = (key) => { clearTimeout(closeT.current); setOpen(key); };
  const leave = () => { closeT.current = setTimeout(() => setOpen(null), 120); };
  return (
    <header className="topnav" onMouseLeave={leave}>
      <div className="container nav-inner">
        <a className="brand" href="index.html">
          <span className="brand-mark"></span>
          <span>Fuel Talent</span>
        </a>
        <nav className="nav-links">
          {NAV.map((n) => (
            <a key={n.label}
               className={`nav-link ${open && open === n.panel ? "is-open" : ""} ${n.current ? "current" : ""}`}
               href={n.href}
               onMouseEnter={() => enter(n.panel)}>
              {n.label}
            </a>
          ))}
        </nav>
        <a className="nav-pill" href="#contact">Hire a Digital Worker <span>›</span></a>
      </div>
      <MegaMenu open={open} onMouseEnter={() => clearTimeout(closeT.current)} onMouseLeave={leave} />
    </header>
  );
}

function MegaMenu({ open, onMouseEnter, onMouseLeave }) {
  const p = open && MEGA_PANELS[open];
  return (
    <div className="megamenu" style={{
      maxHeight: p ? 380 : 0,
      opacity: p ? 1 : 0,
      pointerEvents: p ? "auto" : "none",
    }} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
      {p && (
        <div className="container megamenu-inner">
          <div className="mega-eyebrow">{p.eyebrow}</div>
          {p.cols.map((c) => (
            <div key={c.head} className="mega-col">
              <div className="mega-head">{c.head}</div>
              <ul>
                {c.items.map((it) => {
                  const label = typeof it === "string" ? it : it.label;
                  const href  = typeof it === "string" ? "#"   : it.href;
                  return <li key={label}><a href={href}>{label}</a></li>;
                })}
              </ul>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// ─── Hero ───────────────────────────────────────────────────────────
function Hero() {
  const videoRef = useRef(null);
  useEffect(() => {
    const v = videoRef.current;
    if (!v) return;
    v.muted = true;
    const tryPlay = () => v.play().catch(() => {});
    tryPlay();
    document.addEventListener("visibilitychange", tryPlay);
    return () => document.removeEventListener("visibilitychange", tryPlay);
  }, []);
  return (
    <section className="hero" id="top">
      <video
        ref={videoRef}
        className="hero-video"
        src="/uploads/clarity-eye-blog-video.mp4"
        autoPlay muted loop playsInline
      />
      <div className="hero-scrim"></div>
      <div className="container hero-inner">
        <div className="hero-eyebrow">
          <span className="brand-mark"></span>
          <span>Fuel Talent</span>
          <span className="sep">·</span>
          <span>Digital Workers</span>
        </div>
        <h1 className="hero-headline">
          A new kind <em>of hire.</em>
        </h1>
        <p className="hero-tagline">
          Calibrated AI agents that work inside your stack — built by the recruiters you already trust to fill the seats next to them.
        </p>
        <div className="hero-ctas">
          <a className="btn" href="#contact">Hire a Digital Worker <span>›</span></a>
          <a className="btn btn-ghost" href="#roles">See the roles <span>›</span></a>
        </div>
      </div>
    </section>
  );
}

// ─── Proof bar ──────────────────────────────────────────────────────
function ProofBar() {
  const doubled = [...PROOF_STATS, ...PROOF_STATS];
  return (
    <div className="proof">
      <div className="proof-track">
        {doubled.map((it, i) => (
          <span key={i} className="proof-item">
            <span className="n">{it.n}</span>
            <span className="l">{it.l}</span>
            <span className="sep">·</span>
          </span>
        ))}
      </div>
    </div>
  );
}

// ─── Intro ──────────────────────────────────────────────────────────
function Intro() {
  return (
    <section className="intro s-light" id="why">
      <div className="container">
        <div className="eyebrow">Why now</div>
        <h2>
          We don't sell software.<br/>
          <em>We staff outcomes.</em>
        </h2>
        <p>
          For ten years we've placed humans into roles they were calibrated for. The same discipline — discovery, calibration, fit — now applies to a second workforce: AI agents that handle the work nobody loves doing, inside the systems you already run. You hire them the same way. You manage them with less.
        </p>
        <div className="ctas">
          <a className="btn" href="#how">See how calibration works <span>›</span></a>
          <a className="clink" href="#roles">Browse the roles</a>
        </div>
      </div>
    </section>
  );
}

// ─── Compare table ──────────────────────────────────────────────────
function Compare() {
  const rows = [
    { label: "Job",     a: "Answers questions",                   b: "Executes tasks end-to-end" },
    { label: "Scope",   a: "One conversation at a time",          b: "Multi-system workflows" },
    { label: "Memory",  a: "Forgets between sessions",            b: "Remembers, learns, escalates" },
    { label: "Best for",a: "FAQ and deflection",                  b: "Operations that ship work" },
  ];
  return (
    <section className="compare sect-pad">
      <div className="container">
        <div className="sect-head">
          <div className="eyebrow">What you're hiring</div>
          <h2>Not a chatbot. <em>A worker.</em></h2>
          <p className="sub">Most "AI" you've seen in the last two years was a chatbot in a costume. A digital worker is something else.</p>
        </div>
        <div className="compare-table">
          <div className="ch col-head"></div>
          <div className="ch col-head">
            <span className="big">Chatbot</span>
          </div>
          <div className="ch col-head is-ours">
            <span className="big">Digital Worker</span>
          </div>
          {rows.map((r) => (
            <React.Fragment key={r.label}>
              <div className="ch row-head">{r.label}</div>
              <div className="ch cell">{r.a}</div>
              <div className="ch cell is-ours">{r.b}</div>
            </React.Fragment>
          ))}
        </div>
        <p className="compare-body">
          Chatbots talk. Digital workers act — they read the inbox, pull the record, draft the response, route the exception, and log the result. Built on the same agent frameworks the leading dev shops ship on, deployed with guardrails, observability, and a human in the loop wherever a wrong move costs more than the time it saves.
        </p>
      </div>
    </section>
  );
}

// ─── Scroll-pinned reveal ───────────────────────────────────────────
const REVEAL_STOPS = [
  { stat: <><span>$1.3</span><span className="unit">M</span></>, phrase: <>Annual cost of manual processes one digital worker <em>can absorb.</em></> },
  { stat: <><span>70</span><span className="unit">%</span></>,    phrase: <>Of repeatable tasks, <em>automatable end-to-end</em> with current models.</> },
  { stat: <><span>24/7</span></>,                                  phrase: <>No PTO. No tier-one turnover. <em>No drift.</em></> },
];

function ScrollReveal() {
  const wrapRef = useRef(null);
  const [stop, setStop] = useState(0);
  useEffect(() => {
    const update = () => {
      const el = wrapRef.current;
      if (!el) return;
      const r = el.getBoundingClientRect();
      const total = Math.max(1, el.offsetHeight - window.innerHeight);
      const raw = Math.min(1, Math.max(0, -r.top / total));
      const idx = Math.min(REVEAL_STOPS.length - 1, Math.floor(raw * REVEAL_STOPS.length));
      setStop(idx);
    };
    update();
    window.addEventListener("scroll", update, { passive: true });
    window.addEventListener("resize", update);
    return () => {
      window.removeEventListener("scroll", update);
      window.removeEventListener("resize", update);
    };
  }, []);
  return (
    <section className="reveal" ref={wrapRef} style={{ height: `${REVEAL_STOPS.length * 100}vh` }}>
      <div className="reveal-sticky">
        <video className="reveal-video" src="/studio/case.mp4" autoPlay muted loop playsInline />
        <div className="reveal-scrim"></div>
        {REVEAL_STOPS.map((s, i) => (
          <div key={i} className={`reveal-stop ${stop === i ? "is-on" : ""}`}>
            <div>
              <p className="stat">{s.stat}</p>
              <p className="phrase">{s.phrase}</p>
            </div>
          </div>
        ))}
        <div className="reveal-progress">
          {REVEAL_STOPS.map((_, i) => (
            <span key={i} className={stop === i ? "on" : ""} />
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Roles bento ────────────────────────────────────────────────────
function Roles() {
  return (
    <section className="roles sect-pad" id="roles">
      <div className="container">
        <div className="sect-head">
          <div className="eyebrow">The roles we staff</div>
          <h2>Hire one. <em>Or hire a team.</em></h2>
          <p className="sub">Each is a real production agent we've built before. Each is calibrated to your stack before it goes live.</p>
        </div>
        <div className="roles-grid">
          {ROLES.map((r) => (
            <article key={r.num} className="role-card">
              <div className="num">{r.num} · Role</div>
              <h3>{r.title}</h3>
              <p className="role-body">{r.body}</p>
              <div className="stack-label">Works in</div>
              <div className="stack">
                {r.stack.map((s) => <span key={s}>{s}</span>)}
              </div>
              <div className="foot">
                <a className="clink" href="#contact">Brief this role</a>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Steps ──────────────────────────────────────────────────────────
function Steps() {
  return (
    <section className="steps sect-pad" id="how">
      <div className="container">
        <div className="sect-head">
          <div className="eyebrow">How we hire them</div>
          <h2>Three steps, <em>no theatrics.</em></h2>
          <p className="sub">The same calibration process we run for an executive search — applied to a role that doesn't sleep.</p>
        </div>
        <div className="steps-row">
          {STEPS.map((s) => (
            <div className="step" key={s.num}>
              <div className="num">{s.num}</div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
              <div className="tag">{s.tag}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Case study (illustrative) ──────────────────────────────────────
function Case() {
  const videoRef = useRef(null);
  useEffect(() => {
    const v = videoRef.current;
    if (!v) return;
    v.muted = true;
    v.play().catch(() => {});
  }, []);
  return (
    <section className="case sect-pad">
      <div className="container">
        <div className="case-inner">
          <div className="case-media">
            <video ref={videoRef} src="/uploads/fuel-talent-surgery.mp4" autoPlay muted loop playsInline />
            <span className="tag">Case · Document Operator</span>
          </div>
          <div className="case-copy">
            <div className="eyebrow on-dark">Inside the work</div>
            <h3>From 400 hours <em>to 11.</em></h3>
            <p>A regional health-services client was burning 400+ ops hours per month on prior-auth document intake — five FTEs reading PDFs, keying records, and chasing exceptions. We placed one Document Operator. Eleven months in, the same monthly volume costs eleven hours of human review — exception cases only.</p>
            <div className="case-stats">
              <div><div className="k">400 → 11</div><div className="l">hours per month</div></div>
              <div><div className="k">11 mo</div><div className="l">end-to-end</div></div>
              <div><div className="k">97%</div><div className="l">straight-through</div></div>
            </div>
            <a className="clink on-dark" href="#contact">Talk to the team that ran it</a>
            <div className="case-note">Illustrative composite. Details abstracted for client confidentiality.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Why Fuel ───────────────────────────────────────────────────────
function WhyFuel() {
  return (
    <section className="why sect-pad">
      <div className="container">
        <div className="sect-head">
          <div className="eyebrow">Why Fuel</div>
          <h2>The same partner. <em>A second workforce.</em></h2>
          <p className="sub">Most AI vendors disappear after launch. Most recruiters can't build software. We do both — and we stay.</p>
        </div>
        <div className="why-grid">
          {WHY.map((w) => (
            <article key={w.num} className="why-card">
              <div className="num">{w.num}</div>
              <h3>{w.title}</h3>
              <p>{w.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Tech stack callout ─────────────────────────────────────────────
function Stack() {
  return (
    <section className="stack sect-pad" id="stack">
      <div className="container">
        <div className="sect-head">
          <div className="eyebrow">How we build them</div>
          <h2>Boring infrastructure. <em>Agent-native.</em></h2>
          <p className="sub">The same stack the leading engineering teams ship on. Nothing experimental in your critical path.</p>
        </div>
        <div className="stack-rows">
          {STACK.map((s) => (
            <div className="stack-row" key={s.key}>
              <div className="key">{s.key}</div>
              <div className="body">{s.body}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── FAQ ────────────────────────────────────────────────────────────
function Faq() {
  const [open, setOpen] = useState(0);
  return (
    <section className="faq sect-pad">
      <div className="container">
        <div className="sect-head">
          <div className="eyebrow">Frequently asked</div>
          <h2>The questions <em>worth answering.</em></h2>
        </div>
        <div className="faq-list">
          {FAQ.map((f, i) => (
            <div key={i} className={`faq-item ${open === i ? "is-open" : ""}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                <span className="label">{f.q}</span>
                <span className="chev">+</span>
              </button>
              <div className="faq-a">
                <div className="faq-a-inner">{f.a}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── CTA ────────────────────────────────────────────────────────────
function CTABand() {
  return (
    <section className="cta" id="contact">
      <div className="cta-content container">
        <h2>
          Ready to <em>put one to work?</em>
        </h2>
        <p>Brief us on the role you'd hire if hiring were easier. We'll show you what a digital worker would do with it — running on your data, inside your stack, in under a week.</p>
        <div className="btns">
          <a className="btn btn-light" href="mailto:info@fueltalent.com?subject=Hire a Digital Worker">Hire a Digital Worker <span>›</span></a>
          <a className="clink on-dark" href="mailto:info@fueltalent.com">Talk to a strategist</a>
        </div>
      </div>
    </section>
  );
}

// ─── Footer ─────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer>
      <div className="container">
        <div className="foot-grid">
          <div>
            <a className="foot-brand" href="index.html">
              <span className="brand-mark"></span>
              <span>Fuel Talent</span>
            </a>
            <div className="foot-addr">
              500 108th Avenue NE, Suite 1100<br/>
              Bellevue, WA 98004<br/>
              <a href="mailto:info@fueltalent.com">info@fueltalent.com</a>
            </div>
            <div className="foot-social">
              {["LinkedIn", "Instagram", "Facebook"].map((s) => <a key={s} href="#">{s}</a>)}
            </div>
          </div>
          <div className="foot-col">
            <h5>Digital Workers</h5>
            <a href="#roles">The roles we staff</a>
            <a href="#how">How we hire them</a>
            <a href="#stack">How we build them</a>
            <a href="#contact">Hire a Digital Worker</a>
          </div>
          <div className="foot-col">
            <h5>Services</h5>
            <a href="index.html#services">Recruiting & Staffing</a>
            <a href="index.html#services">Professional & Managed</a>
            <a href="digital-worker.html">Digital Workers</a>
          </div>
          <div className="foot-col">
            <h5>Find a Job</h5>
            <a href="jobs.html">Job search</a>
            <a href="jobs.html">For candidates</a>
            <a href="jobs.html">Upload resume</a>
          </div>
          <div className="foot-col">
            <h5>About</h5>
            <a href="index.html#about">About Fuel Talent</a>
            <a href="#">Meet the team</a>
            <a href="#">Insights</a>
            <a href="#">Privacy policy</a>
          </div>
        </div>
        <div className="foot-meta">
          <span>© 2026 Fuel Talent, LLC · All rights reserved</span>
          <span>Human first · AI-enabled · Seattle</span>
          <a href="index.html">Back to homepage ›</a>
        </div>
      </div>
    </footer>
  );
}

// ─── App ────────────────────────────────────────────────────────────
function App() {
  return (
    <>
      <TopNav />
      <Hero />
      <ProofBar />
      <Intro />
      <Compare />
      <ScrollReveal />
      <Roles />
      <Steps />
      <Case />
      <WhyFuel />
      <Stack />
      <Faq />
      <CTABand />
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("app")).render(<App />);
