// BROADCAST — Fuel Talent homepage
// Dark cinematic. Sora display + Geist body + Geist Mono.
// Full-bleed animated abstract hero background.

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

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#8cf2c0",
  "theme": "dark"
}/*EDITMODE-END*/;

const ACCENTS = {
  mint:     "#8cf2c0",
  orange:   "#ff7a4d",
  electric: "#7aa8ff",
  amber:    "#ffc24a",
};

const NAV = [
  { label: "Expertise",  href: "#expertise",  panel: "expertise" },
  { label: "Services",   href: "#services",   panel: "services" },
  { label: "Resources",  href: "#resources",  panel: "resources" },
  { label: "Find a Job", href: "jobs.html", panel: null, noUnderline: true },
  { label: "About",      href: "#about",      panel: null, noUnderline: true },
];

const EXPERTISE = [
  { id: "tech",      title: "Tech & Engineering",   live: 47, days: 18, blurb: "Software, infra, ML, security & platform leaders for high-growth tech." },
  { id: "design",    title: "Design & UX Research", live: 23, days: 16, blurb: "Product designers, design systems leads & research-led practitioners." },
  { id: "product",   title: "Product",              live: 19, days: 21, blurb: "PMs and product leadership who can ship inside ambiguity." },
  { id: "marketing", title: "Marketing",            live: 14, days: 17, blurb: "Growth, brand, content & demand-gen operators." },
  { id: "csuite",    title: "C-Suite",              live:  6, days: 41, blurb: "CEO, CTO, CPO, CFO searches for venture-backed companies." },
  { id: "admin",     title: "Admin & Lifestyle",    live: 11, days: 12, blurb: "EAs, chiefs of staff, household operators." },
  { id: "hrops",     title: "HR & Operations",      live: 17, days: 19, blurb: "People leaders, recruiters, biz-ops & program managers." },
  { id: "finance",   title: "Finance & Accounting", live: 12, days: 22, blurb: "Controllers, FP&A, CFOs ready to scale." },
];

const SERVICES = [
  { num: "01", title: "Recruiting & Staffing",        blurb: "Permanent and contract hires across engineering, design, product and operations." },
  { num: "02", title: "Professional & Managed Services", blurb: "Embedded teams of senior specialists who execute critical initiatives end-to-end." },
  { num: "03", title: "Digital Workers",              blurb: "AI-fueled digital agents that automate the work that doesn't need humans." },
];

const TESTIMONIALS = [
  { quote: "Fuel consistently takes the time to learn what's needed from an open role, how it fits within the team, and the qualities that will help a candidate thrive.", name: "CHRO", role: "Think Tank / Executive Private Office", initials: "TT" },
  { quote: "Incredibly responsive, adaptable. A valuable partner that delivers results.", name: "Beth Mead", role: "Providence", initials: "BM" },
  { quote: "Continuous improvement is in your DNA. The experience was exactly what I'd hoped for.", name: "Casey Bayless", role: "Moss Adams — Recruiting Manager", initials: "CB" },
  { quote: "Fuel found the most effective candidates for us.", name: "Director of Product Design", role: "Remitly", initials: "RT" },
  { quote: "Their ability to consistently present high-quality candidates tailored to our needs has been remarkable.", name: "Marc", role: "Co-Founder & CTO", initials: "MC" },
];

const CLIENT_WORDMARKS = [
  { name: "Providence",   render: () => <span className="wm wm-providence">Providence</span> },
  { name: "Moss Adams",   render: () => <span className="wm wm-mossadams">MOSS ADAMS</span> },
  { name: "Appen",         render: () => <span className="wm wm-appen"><i>a</i>ppen</span> },
  { name: "Remitly",       render: () => <span className="wm wm-remitly">Remitly</span> },
  { name: "Whitepages",    render: () => <span className="wm wm-whitepages">white<b>pages</b></span> },
  { name: "Madrona",       render: () => <span className="wm wm-madrona">Madrona</span> },
  { name: "RealSelf",      render: () => <span className="wm wm-realself">real<b>self</b></span> },
  { name: "KnowLabs",      render: () => <span className="wm wm-knowlabs">knowlabs</span> },
  { name: "Pacagen",       render: () => <span className="wm wm-pacagen">P<i>aca</i>gen</span> },
];

const JOBS_PREVIEW = [
  { id: "FT-0481", title: "Staff Software Engineer, Platform", company: "Series C SaaS", loc: "Seattle · Hybrid",  type: "Direct", area: "Tech" },
  { id: "FT-0476", title: "Senior Product Designer",           company: "AI Health",     loc: "Remote (US)",       type: "Direct", area: "Design" },
  { id: "FT-0470", title: "Director of Product, Growth",       company: "Consumer Mkt",  loc: "Bellevue, WA",      type: "Direct", area: "Product" },
  { id: "FT-0463", title: "Head of Recruiting",                company: "Climate Tech",  loc: "Seattle · Onsite",  type: "Direct", area: "HR & Ops" },
];

const RESOURCES = [
  { kind: "Field Notes", date: "May 12", title: "10 strategies for attracting top talent in a thin market", read: "5 min" },
  { kind: "Field Notes", date: "Apr 29", title: "Streamlining the virtual onboarding process",              read: "4 min" },
  { kind: "Candidates",  date: "Apr 14", title: "Affected by layoffs? Where to start and regain confidence", read: "6 min" },
  { kind: "Case Study",  date: "Mar 30", title: "How we built an engineering team from zero to 40",          read: "8 min" },
];

const ROLES = [
  { id: "eng",      label: "Engineering",    word: "engineers" },
  { id: "design",   label: "Design",         word: "designers" },
  { id: "product",  label: "Product",        word: "product leaders" },
  { id: "leader",   label: "Leadership",     word: "executives" },
  { id: "looking",  label: "I'm looking",    word: "your next role" },
];

const PILLARS = [
  { id: "who", idx: "01", tab: "Who we fuel",
    heading: "High-growth teams that value precision and people.",
    body: "Venture-backed startups, scale-ups, and innovation-led enterprises. We deliver talent that fits on paper and in culture, values, and ambition.",
    stats: [{ k: "48hr", v: "to first slate" }, { k: "18d", v: "median offer time" }, { k: "91%", v: "offer accept" }] },
  { id: "how", idx: "02", tab: "How we fuel",
    heading: "Relationship-first process, accelerated by AI.",
    body: "Discovery, calibration, sourcing, vetting, present. Our consultants pair human judgment with proprietary AI sourcing that surfaces strong candidates outside obvious channels.",
    stats: [{ k: "5-step", v: "calibrated" }, { k: "AI", v: "outreach + screening" }, { k: "Human", v: "judgement, end-to-end" }] },
  { id: "why", idx: "03", tab: "Why we fuel",
    heading: "We build legacies, not just fill roles.",
    body: "We close 91% of extended offers because we don't push wrong fits across the finish line. We invest in long-term relationships — and it compounds.",
    stats: [{ k: "75+", v: "5-star reviews" }, { k: "100k", v: "podcast listeners" }, { k: "10y+", v: "client tenure" }] },
];

// ─── abstract SVG art for pillars/podcast ────────────────
function FlowArt({ accent }) {
  return (
    <svg viewBox="0 0 400 220" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" style={{ display: "block" }}>
      <rect width="400" height="220" fill="var(--bg-2)" />
      {Array.from({ length: 28 }).map((_, i) => {
        const y = i * 8 + 4;
        return (
          <path key={i} d={`M 0 ${y} Q 100 ${y - 22 - Math.sin(i * 0.5) * 18}, 200 ${y - Math.cos(i * 0.4) * 14}, T 400 ${y + Math.sin(i * 0.6) * 18}`}
            fill="none" stroke={i % 7 === 0 ? accent : "var(--ink)"}
            strokeOpacity={i % 7 === 0 ? 0.9 : 0.12 + (i % 5) * 0.03}
            strokeWidth={i % 7 === 0 ? 1.5 : 0.6} />
        );
      })}
    </svg>
  );
}
function NodeArt({ accent }) {
  return (
    <svg viewBox="0 0 400 220" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" style={{ display: "block" }}>
      <rect width="400" height="220" fill="var(--bg-2)" />
      {Array.from({ length: 8 }).map((_, i) =>
        Array.from({ length: 14 }).map((__, j) => {
          const cx = 20 + j * 28, cy = 14 + i * 28;
          const dist = Math.hypot(cx - 200, cy - 110);
          const isHub = (i === 3 && j === 6) || (i === 5 && j === 9);
          return <circle key={`${i}-${j}`} cx={cx} cy={cy}
            r={isHub ? 5 : 1.4 + (1 - dist / 220) * 2}
            fill={isHub ? accent : "var(--ink)"}
            fillOpacity={isHub ? 1 : 0.18 + (1 - dist / 220) * 0.6} />;
        })
      )}
      <line x1="195" y1="100" x2="271" y2="156" stroke={accent} strokeOpacity="0.45" />
    </svg>
  );
}
function PulseArt({ accent }) {
  const data = [22, 28, 18, 38, 32, 56, 48, 72, 64, 88, 78, 96, 88, 112, 124];
  return (
    <svg viewBox="0 0 400 220" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" style={{ display: "block" }}>
      <rect width="400" height="220" fill="var(--bg-2)" />
      {data.map((v, i) => {
        const x = 20 + i * 24, w = 14, h = v * 1.3, y = 200 - h;
        const last = i >= data.length - 3;
        return (
          <rect key={i} x={x} y={y} width={w} height={h}
            fill={last ? accent : "var(--ink)"}
            fillOpacity={last ? 1 : 0.12 + i * 0.04} />
        );
      })}
    </svg>
  );
}
const ART_MAP = { who: NodeArt, how: FlowArt, why: PulseArt };

// ─── 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 (
    <nav className="hero-nav" onMouseLeave={leave}>
      <div className="container nav-inner">
        <a className="brand" href="index.html" aria-label="Fuel Talent">
          <span className="star"></span>
          <img src="wordmark.png" alt="Fuel Talent" className="wordmark" />
        </a>
        <div className="nav-links">
          {NAV.map((n) => (
            <a key={n.label}
               className={`nav-link ${open && open === n.panel ? "is-open" : ""} ${n.noUnderline ? "no-underline" : ""}`}
               href={n.href}
               onMouseEnter={() => enter(n.panel)}>
              {n.label}
            </a>
          ))}
        </div>
        <a className="nav-pill" href="jobs.html">For Candidates <span>→</span></a>
      </div>
      <MegaMenu open={open} onMouseEnter={() => clearTimeout(closeT.current)} onMouseLeave={leave} />
    </nav>
  );
}

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: ["AI agent design", "Workflow automation", "Human + agent hybrids"] },
      { 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"] },
    ],
  },
};

function MegaMenu({ open, onMouseEnter, onMouseLeave }) {
  const p = open && MEGA_PANELS[open];
  return (
    <div className="megamenu" style={{
      maxHeight: p ? 340 : 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) => (
                  <li key={it}><a href="#">{it}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// ─── hero ────────────────────────────────────────────────
function Hero() {
  const [role, setRole] = useState(ROLES[0]);
  const isCand = role.id === "looking";

  return (
    <section className="hero" id="top">
      <div className="hero-bg">
        <div className="grid"></div>
        <div className="orb orb-1"></div>
        <div className="orb orb-2"></div>
        <div className="orb orb-3"></div>
        <div className="shape shape-ring shape-1"></div>
        <div className="shape shape-2"></div>
        <div className="shape shape-ring shape-3"></div>
        <div className="scan"></div>
      </div>

      <TopNav />

      <div className="container hero-content">
        <div className="eyebrow" style={{ marginBottom: 28 }}>
          <span className="dot"></span>
          BROADCAST · ISSUE Nº 047 · MAY 2026 · SEATTLE
        </div>

        <h1 className="hero-headline">
          <span className="wash">We fuel</span><br/>
          <span>{role.word}</span><br/>
          <span className="accent">for what's next.</span>
        </h1>

        <div className="hero-meta-row">
          <p className="sub">
            Fuel Talent is a Seattle-based recruiting firm for high-growth companies. Direct hire, embedded teams, AI digital workers — the right people and the right systems for teams that expect more.
          </p>
          <div></div>
          <div className="stats">
            <div className="stat">
              <div className="n">48<span style={{ fontSize: "0.45em", letterSpacing: "0", color: "var(--muted)" }}> HR</span></div>
              <div className="l">to first slate</div>
            </div>
            <div className="stat">
              <div className="n">91<span style={{ fontSize: "0.45em", letterSpacing: "0", color: "var(--muted)" }}>%</span></div>
              <div className="l">offer accept</div>
            </div>
            <div className="stat">
              <div className="n">300<span style={{ fontSize: "0.45em", letterSpacing: "0", color: "var(--muted)" }}>+</span></div>
              <div className="l">partners</div>
            </div>
          </div>
        </div>

        <div style={{ marginTop: 36, display: "flex", flexWrap: "wrap", gap: 18, alignItems: "center" }}>
          <div className="chip-bar">
            <span className="lbl">I'm here for →</span>
            {ROLES.map((r) => (
              <button key={r.id}
                className={`chip ${role.id === r.id ? "on" : ""}`}
                onClick={() => setRole(r)}>
                {r.label}
              </button>
            ))}
          </div>
        </div>

        <div className="hero-cta">
          <a className="btn btn-accent" href={isCand ? "jobs.html" : "#contact"}>
            {isCand ? "Browse open roles" : "Submit a role"}<span className="arr">→</span>
          </a>
          <a className="btn" href="#services">How it works<span className="arr">→</span></a>
        </div>
      </div>

      <div className="hero-corner-l">
        N 47°37′ · W 122°20′<br/>
        SEATTLE / WA / USA
      </div>
      <div className="hero-corner-r">
        EST 2014 / V10.4<br/>
        HUMAN-FIRST · AI-ENABLED
      </div>
    </section>
  );
}

// ─── marquee ──────────────────────────────────────────
function Marquee() {
  const items = [
    { n: "48 hr", l: "to first candidate slate" },
    { n: "18 d",  l: "average time-to-offer" },
    { n: "91%",   l: "offer accept rate" },
    { n: "300+",  l: "active partners" },
    { n: "75+",   l: "5-star reviews" },
    { n: "100k",  l: "podcast listeners" },
    { n: "10y+",  l: "in market" },
    { n: "9",     l: "specialty practices" },
  ];
  const d = [...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {d.map((it, i) => (
          <span key={i} className="marquee-item">
            <span className="n">{it.n}</span>
            <span className="l">{it.l}</span>
            <span className="dot"></span>
          </span>
        ))}
      </div>
    </div>
  );
}

// ─── clients ──────────────────────────────────────────
function Clients() {
  return (
    <section className="clients">
      <div className="container">
        <div className="eyebrow" style={{ marginBottom: 24, justifyContent: "center", width: "100%", display: "flex" }}>
          <span className="dot"></span> Selected partners
        </div>
        <div className="clients-grid">
          {CLIENT_WORDMARKS.map((c) => (
            <div key={c.name} className="client-cell" title={c.name}>
              {c.render()}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── pillars ──────────────────────────────────────────
function Pillars() {
  const [a, setA] = useState("who");
  const p = PILLARS.find((x) => x.id === a);
  const Art = ART_MAP[a];
  const [accentVar, setAccentVar] = useState("#8cf2c0");
  useEffect(() => {
    const read = () => setAccentVar(getComputedStyle(document.documentElement).getPropertyValue("--accent").trim() || "#8cf2c0");
    read();
    const t = setInterval(read, 500); return () => clearInterval(t);
  }, []);
  return (
    <section id="about">
      <div className="container">
        <div className="sect-head">
          <div>
            <div className="eyebrow"><span className="dot"></span> Operating system</div>
            <h2 style={{ marginTop: 20 }}>Who, how, <em>why</em> we fuel.</h2>
          </div>
          <div className="meta">
            <span className="mono">§ 02 · OPERATING MODEL</span>
            <span className="mono">3 PILLARS · TAP TO EXPLORE</span>
          </div>
        </div>
        <div className="pillar-grid">
          <div className="pillar-tabs">
            {PILLARS.map((x) => (
              <div key={x.id} className={`pillar-tab ${a === x.id ? "is-active" : ""}`} onClick={() => setA(x.id)}>
                <span className="idx">{x.idx}</span>
                <span>{x.tab}</span>
                <span className="arr">→</span>
              </div>
            ))}
          </div>
          <div className="pillar-panel">
            <div className="art"><Art accent={accentVar} /></div>
            <h3>{p.heading}</h3>
            <p>{p.body}</p>
            <div className="stat-row">
              {p.stats.map((s) => (
                <div key={s.k}>
                  <div className="k">{s.k}</div>
                  <div className="v">{s.v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── services ─────────────────────────────────────────
function Services() {
  return (
    <section id="services">
      <div className="container">
        <div className="sect-head">
          <div>
            <div className="eyebrow"><span className="dot"></span> Services</div>
            <h2 style={{ marginTop: 20 }}>Talent solutions that <em>move you forward.</em></h2>
          </div>
          <div className="meta">
            <span className="mono">§ 03 · DELIVERABLES</span>
            <a href="#contact" className="mono" style={{ color: "var(--accent)" }}>NOT SURE? TALK TO US →</a>
          </div>
        </div>
        {SERVICES.map((s) => (
          <a key={s.num} href="#" className="svc-row">
            <div className="num">[{s.num}]</div>
            <h3>{s.title}</h3>
            <p>{s.blurb}</p>
            <span className="go">Explore <span>→</span></span>
          </a>
        ))}
      </div>
    </section>
  );
}

// ─── expertise ────────────────────────────────────────
function Expertise() {
  const [filter, setFilter] = useState("All");
  const groups = { All: EXPERTISE.map(e => e.id), Build: ["tech", "product", "design"], Operate: ["hrops", "finance", "admin"], Lead: ["csuite", "marketing"] };
  const filtered = EXPERTISE.filter((e) => groups[filter].includes(e.id));
  return (
    <section id="expertise" style={{ background: "var(--bg-2)", borderBlock: "1px solid var(--line)" }}>
      <div className="container">
        <div className="sect-head">
          <div>
            <div className="eyebrow"><span className="dot"></span> Expertise</div>
            <h2 style={{ marginTop: 20 }}>Deep expertise, <em>human-shipped.</em></h2>
          </div>
          <div className="meta">
            <span className="mono">§ 04 · {filtered.length} PRACTICES</span>
          </div>
        </div>
        <div style={{ display: "flex", gap: 8, marginBottom: 24, flexWrap: "wrap" }}>
          {Object.keys(groups).map((g) => (
            <button key={g} onClick={() => setFilter(g)}
              className="chip" style={{
                background: filter === g ? "var(--accent)" : "transparent",
                color: filter === g ? "var(--accent-ink)" : "var(--ink-2)",
                borderColor: filter === g ? "var(--accent)" : "var(--line-2)",
              }}>
              {g}
            </button>
          ))}
        </div>
        <div className="ex-grid">
          {filtered.map((e, i) => (
            <a key={e.id} className="ex-card" href="#">
              <div className="top">
                <span className="num">{String(i+1).padStart(2,"0")}</span>
                <span className="live">live</span>
              </div>
              <h3>{e.title}</h3>
              <p className="blurb">{e.blurb}</p>
              <div className="footer">
                <span>{e.live} roles · <b>{e.days}d avg</b></span>
                <span>view →</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── testimonials ────────────────────────────────────
function Testimonials() {
  const [i, setI] = useState(0);
  const next = useCallback(() => setI((x) => (x + 1) % TESTIMONIALS.length), []);
  const prev = useCallback(() => setI((x) => (x - 1 + TESTIMONIALS.length) % TESTIMONIALS.length), []);
  useEffect(() => { const t = setInterval(next, 7500); return () => clearInterval(t); }, [next]);
  const q = TESTIMONIALS[i];
  return (
    <section>
      <div className="container">
        <div className="sect-head">
          <div>
            <div className="eyebrow"><span className="dot"></span> Testimonials</div>
            <h2 style={{ marginTop: 20 }}>The power of <em>people.</em></h2>
          </div>
          <div className="meta">
            <span className="mono">§ 05 · CLIENT VOICES</span>
            <span className="mono">{String(i + 1).padStart(2, "0")} / {String(TESTIMONIALS.length).padStart(2, "0")}</span>
          </div>
        </div>
        <div className="quote-block" key={i}>
          <span className="mark">"</span>
          <div>
            <p className="q">{q.quote}</p>
            <div className="attr">
              <div className="avatar">{q.initials}</div>
              <div>
                <div className="name">{q.name}</div>
                <div className="role">{q.role}</div>
              </div>
            </div>
          </div>
        </div>
        <div className="qctrl">
          <button onClick={prev} aria-label="Previous">←</button>
          <button onClick={next} aria-label="Next">→</button>
          <span className="ix">{String(i+1).padStart(2,"0")} / {String(TESTIMONIALS.length).padStart(2,"0")}</span>
          <div className="dots">
            {TESTIMONIALS.map((_, k) => (
              <span key={k} className={`dot ${k === i ? "on" : ""}`} onClick={() => setI(k)} />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── jobs ────────────────────────────────────────────
function Jobs() {
  const [q, setQ] = useState("");
  const [loc, setLoc] = useState("");
  const filtered = useMemo(() => {
    const ql = q.toLowerCase(), ll = loc.toLowerCase();
    return JOBS_PREVIEW.filter((j) =>
      (!ql || j.title.toLowerCase().includes(ql) || j.area.toLowerCase().includes(ql)) &&
      (!ll || j.loc.toLowerCase().includes(ll))
    );
  }, [q, loc]);
  return (
    <section className="jobs-bg" id="jobs">
      <div className="container">
        <div className="sect-head">
          <div>
            <div className="eyebrow"><span className="dot"></span> Quick job search</div>
            <h2 style={{ marginTop: 20 }}>Where careers <em>get fueled.</em></h2>
          </div>
          <div className="meta">
            <a href="jobs.html" className="mono" style={{ color: "var(--accent)" }}>§ 06 · OPEN FULL BOARD →</a>
          </div>
        </div>
        <form className="jobs-form" onSubmit={(e) => e.preventDefault()}>
          <label className="jobs-field">
            <span>Title / Practice</span>
            <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Staff engineer, designer..." />
          </label>
          <label className="jobs-field">
            <span>Location</span>
            <input value={loc} onChange={(e) => setLoc(e.target.value)} placeholder="Seattle, remote..." />
          </label>
          <label className="jobs-field">
            <span>Stage</span>
            <select defaultValue="any">
              <option value="any">Any stage</option>
              <option>Seed</option><option>Series A</option><option>Series B</option><option>Series C+</option>
            </select>
          </label>
          <button type="submit" className="jobs-go">Search →</button>
        </form>
        <div className="jobs-results">
          {filtered.map((j) => (
            <a key={j.id} className="job-row" href="jobs.html">
              <span className="job-id">{j.id}</span>
              <div>
                <span className="job-title">{j.title}</span>
                <div className="meta" style={{ marginTop: 4 }}>{j.company} · {j.area}</div>
              </div>
              <span className="meta">{j.loc}</span>
              <span className="pill">{j.type}</span>
              <span className="arr">→</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── resources ───────────────────────────────────────
function Resources() {
  const [playing, setPlaying] = useState(false);
  const [pos, setPos] = useState(0.32);
  useEffect(() => {
    if (!playing) return;
    const t = setInterval(() => setPos((p) => (p >= 0.99 ? 0 : p + 0.005)), 200);
    return () => clearInterval(t);
  }, [playing]);
  const wave = useMemo(() => Array.from({ length: 60 }).map((_, i) => 6 + Math.sin(i * 0.5) * 4 + (i % 3) * 4 + Math.random() * 6), []);
  const [accentVar, setAccentVar] = useState("#8cf2c0");
  useEffect(() => {
    const read = () => setAccentVar(getComputedStyle(document.documentElement).getPropertyValue("--accent").trim() || "#8cf2c0");
    read();
    const t = setInterval(read, 500); return () => clearInterval(t);
  }, []);
  return (
    <section id="resources">
      <div className="container">
        <div className="sect-head">
          <div>
            <div className="eyebrow"><span className="dot"></span> Resources</div>
            <h2 style={{ marginTop: 20 }}>Fuel for <em>thought.</em></h2>
          </div>
          <div className="meta">
            <a href="#" className="mono" style={{ color: "var(--accent)" }}>§ 07 · BROWSE ALL →</a>
          </div>
        </div>
        <div className="res-grid">
          <div className="res-list">
            {RESOURCES.map((r) => (
              <a key={r.title} className="res-item" href="#">
                <div>
                  <div className="meta"><span>{r.kind}</span><span>·</span><span>{r.date}</span></div>
                  <h4>{r.title}</h4>
                </div>
                <div className="read">{r.read} →</div>
              </a>
            ))}
          </div>
          <div className="pod-card">
            <div className="mono" style={{ color: "var(--accent)" }}>LATEST PODCAST · EP. 047</div>
            <div className="pod-cover"><FlowArt accent={accentVar} /></div>
            <div className="pod-title">"Make Them Lose Sleep" — Dr. Evan Zhao, CEO of Pacagen.</div>
            <div className="pod-row">
              <button className="pod-play" onClick={() => setPlaying(!playing)} aria-label="Play">
                {playing ? "❚❚" : <span style={{ marginLeft: 3 }}>▶</span>}
              </button>
              <div className="pod-wave">
                {wave.map((h, i) => <i key={i} className={i / wave.length < pos ? "on" : ""} style={{ height: `${h}px` }} />)}
              </div>
              <div className="pod-time">{Math.floor(pos*42)}:{String(Math.floor((pos*42*60)%60)).padStart(2,"0")} / 42:18</div>
            </div>
            <div className="pod-stats">
              <div><div className="n">75+</div><div className="l">5-star reviews</div></div>
              <div><div className="n">100k</div><div className="l">listeners</div></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── CTA ─────────────────────────────────────────────
function CTA() {
  return (
    <section className="cta" id="contact">
      <div className="container">
        <div className="eyebrow" style={{ justifyContent: "center", width: "100%", display: "flex", marginBottom: 28 }}>
          <span className="dot"></span> § 08 · WHAT'S NEXT
        </div>
        <h2>
          <span style={{ display: "block" }}>We build <em>legacies,</em></span>
          <span style={{ display: "block", marginTop: "0.18em" }}>not just fill roles.</span>
        </h2>
        <p>Haven't found the role? We'll help you find the right one. Hiring? We'll deliver people who change what's possible.</p>
        <div className="btns">
          <a className="btn btn-accent" href="jobs.html">Find a Job <span className="arr">→</span></a>
          <a className="btn" href="#">Let's Talk <span className="arr">→</span></a>
        </div>
      </div>
    </section>
  );
}

// ─── footer ──────────────────────────────────────────
function Footer() {
  return (
    <footer>
      <div className="container">
        <div className="footgrid">
          <div>
            <div className="brand" style={{ fontSize: 20 }} aria-label="Fuel Talent">
              <span className="star"></span>
              <img src="wordmark.png" alt="Fuel Talent" className="wordmark wordmark-foot" />
            </div>
            <div style={{ fontSize: 14, color: "var(--ink-2)", marginTop: 14, lineHeight: 1.6 }}>
              500 108th Avenue NE, Suite 1100<br/>
              Bellevue, WA 98004
            </div>
            <div style={{ marginTop: 14, fontSize: 14 }}>
              <a href="mailto:info@fueltalent.com" style={{ color: "var(--accent)" }}>info@fueltalent.com</a>
            </div>
            <div style={{ display: "flex", gap: 14, marginTop: 16 }}>
              {["LinkedIn", "Instagram", "Facebook"].map(s => (
                <a key={s} href="#" className="mono" style={{ borderBottom: "1px solid currentColor", paddingBottom: 2, color: "var(--ink-2)" }}>{s}</a>
              ))}
            </div>
          </div>
          <div>
            <h5>Expertise</h5>
            {EXPERTISE.slice(0,6).map(e => <a key={e.id} href="#expertise">{e.title}</a>)}
          </div>
          <div>
            <h5>Services</h5>
            {SERVICES.map(s => <a key={s.num} href="#services">{s.title}</a>)}
          </div>
          <div>
            <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>
            <h5>About</h5>
            <a href="#">About</a>
            <a href="#">Meet the Team</a>
            <a href="#">Insights</a>
            <a href="#">Privacy Policy</a>
          </div>
        </div>
        <div className="footmeta">
          <span>© 2026 FUEL TALENT · ALL RIGHTS RESERVED</span>
          <span>HUMAN FIRST · AI-ENABLED · SEATTLE</span>
          <a href="#">PRIVACY POLICY</a>
        </div>
      </div>
    </footer>
  );
}

function TweaksUI({ t, setTweak }) {
  return (
    <TweaksPanel>
      <TweakSection label="Theme" />
      <TweakRadio label="Mode" value={t.theme}
        options={["dark", "light"]}
        onChange={(v) => setTweak("theme", v)} />
      <TweakSection label="Accent" />
      <TweakColor label="Accent color" value={t.accent}
        options={Object.values(ACCENTS)}
        onChange={(v) => setTweak("accent", v)} />
    </TweaksPanel>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useEffect(() => {
    document.documentElement.setAttribute("data-theme", t.theme);
    document.documentElement.style.setProperty("--accent", t.accent);
  }, [t.theme, t.accent]);
  return (
    <>
      <Hero />
      <Marquee />
      <Clients />
      <Pillars />
      <Services />
      <Expertise />
      <Testimonials />
      <Jobs />
      <Resources />
      <CTA />
      <Footer />
      <TweaksUI t={t} setTweak={setTweak} />
    </>
  );
}

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