// STUDIO — Fuel Talent homepage (Runway-inspired)
// Full-bleed hero video, white + lime accent, Manrope display + Geist Mono.

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

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#c8ff3a",
  "theme": "light"
}/*EDITMODE-END*/;

const ACCENTS = {
  lime:   "#c8ff3a",
  orange: "#ff5a36",
  violet: "#7a5cff",
  pink:   "#ff8fa3",
  amber:  "#ffc24a",
};

// ─── content ──────────────────────────────────────────────────────────
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 ROLES = [
  { id: "eng",     label: "Engineers",       word: "engineers",          meta: "48 hr to first slate",   live: 47 },
  { id: "design",  label: "Designers",       word: "designers",          meta: "Specialist network",     live: 23 },
  { id: "product", label: "Product leaders", word: "product leaders",    meta: "PM-led search",          live: 19 },
  { id: "leader",  label: "Executives",      word: "executives",         meta: "Confidential C-suite",   live: 6  },
  { id: "ops",     label: "HR & Operators",  word: "operators",          meta: "People-team partners",   live: 17 },
  { id: "looking", label: "I'm looking",     word: "your next role",     meta: "Career partner",         live: 0  },
];

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

const SERVICES = [
  { num: "01", title: "Recruiting & Staffing",            blurb: "Permanent and contract hires across engineering, design, product and operations. We average 18 days to offer and close 91% of extended offers." },
  { num: "02", title: "Professional & Managed Services",  blurb: "Embedded teams of senior specialists who execute critical initiatives or run ongoing operations end-to-end." },
  { num: "03", title: "Digital Workers",                  blurb: "An AI-fueled workforce of digital agents that automates repetitive work — so your humans can do the hard thinking." },
];

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 succeed and thrive.", name: "CHRO", role: "Think Tank / Executive Private Office", initials: "TT" },
  { quote: "Incredibly responsive, adaptable, and a valuable partner that delivers results.", name: "Beth Mead", role: "Providence", initials: "BM" },
  { quote: "Continuous improvement is in your DNA. The experience and vision 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 specific needs has been remarkable.", name: "Marc", role: "Co-Founder & CTO", initials: "MC" },
];

const CLIENTS = ["Providence", "Moss Adams", "Appen", "Remitly", "Whitepages", "Madrona", "RealSelf", "KnowLabs", "Pacagen"];

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, WA · Hybrid",  type: "Direct", area: "Tech" },
  { id: "FT-0476", title: "Senior Product Designer",            company: "AI Health Startup",   loc: "Remote (US)",            type: "Direct", area: "Design" },
  { id: "FT-0470", title: "Director of Product, Growth",        company: "Consumer Marketplace", 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",  title: "10 strategies for attracting top talent in a thin market", read: "5 min", date: "May 12" },
  { kind: "Field Notes",  title: "Streamlining the virtual onboarding process",              read: "4 min", date: "Apr 29" },
  { kind: "Candidates",   title: "Affected by mass layoffs? Where to start and regain confidence", read: "6 min", date: "Apr 14" },
  { kind: "Case Study",   title: "How we built an engineering team from zero to 40",        read: "8 min", date: "Mar 30" },
];

// ─── nav ─────────────────────────────────────────────────────────────
function TopNav() {
  const [scrolled, setScrolled] = useState(false);
  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); };
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 80);
    on();
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  // force "scrolled" appearance when a panel is open so menu is legible on dark hero
  const stateClass = open ? "is-scrolled" : (scrolled ? "is-scrolled" : "is-light");
  return (
    <header className={`topnav ${stateClass}`} onMouseLeave={leave}>
      <div className="container nav-inner">
        <a className="brand" href="index.html">
          <span className="brand-dot"></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.noUnderline ? "no-underline" : ""}`}
               href={n.href}
               onMouseEnter={() => enter(n.panel)}>
              {n.label}
            </a>
          ))}
        </nav>
        <a className="nav-pill" href="jobs.html">For Candidates <span>→</span></a>
      </div>
      <MegaMenu open={open} onMouseEnter={() => clearTimeout(closeT.current)} onMouseLeave={leave} />
    </header>
  );
}

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 ? 360 : 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 with full-bleed video + slow zoom + scrim + role slider ────
function Hero() {
  const videoRef = useRef(null);
  const [active, setActive] = useState(0);
  const [scale, setScale] = useState(1.15);

  // Force play (in case autoplay attribute doesn't fire in some contexts)
  useEffect(() => {
    const v = videoRef.current;
    if (!v) return;
    v.muted = true;
    const tryPlay = () => v.play().catch(() => {});
    tryPlay();
    // Re-attempt on visibility change / first user interaction
    document.addEventListener('visibilitychange', tryPlay);
    return () => document.removeEventListener('visibilitychange', tryPlay);
  }, []);

  // Slow zoom-out as user scrolls into hero
  useEffect(() => {
    const on = () => {
      const y = window.scrollY;
      const h = window.innerHeight;
      const t = Math.min(1, Math.max(0, y / (h * 1.2)));
      // start zoomed in (1.15), zoom out toward 1.0 as we scroll
      setScale(1.15 - 0.15 * t);
    };
    on();
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);

  const role = ROLES[active];

  return (
    <section className="hero" id="top">
      <video
        ref={videoRef}
        className="hero-video"
        src="hero.mp4"
        autoPlay muted loop playsInline
        style={{ transform: `scale(${scale.toFixed(3)})` }}
      />
      <div className="hero-scrim"></div>

      <div className="hero-corner hero-corner-tr">
        Issue Nº 047<br/>May 2026<br/>Seattle · WA
      </div>
      <div className="hero-corner hero-corner-br">
        <span className="live"></span>
        <span>Live · {EXPERTISE.reduce((a, b) => a + b.live, 0)} open roles</span>
      </div>

      <div className="container hero-content">
        <div className="hero-eyebrow eyebrow">
          <span className="dot"></span>
          Fuel Talent · Seattle recruiting firm
        </div>
        <h1 className="hero-headline">
          We fuel the <em>{role.word}</em><br/>
          who build <span className="accent">what's&nbsp;next.</span>
        </h1>
        <p className="hero-tagline">
          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 className="hero-ctas">
          <a className="btn btn-accent" href={role.id === "looking" ? "jobs.html" : "#contact"}>
            {role.id === "looking" ? "Browse open roles" : "Submit a role"}
            <span className="arr">→</span>
          </a>
          <a className="btn" href="#services">See how we work <span className="arr">→</span></a>
        </div>
      </div>

      {/* horizontal role slider */}
      <div className="role-slider-wrap">
        <div className="role-slider">
          {ROLES.map((r, i) => (
            <button
              key={r.id}
              className={`role-card ${active === i ? "is-active" : ""}`}
              onClick={() => setActive(i)}>
              <span className="num">{String(i + 1).padStart(2, "0")} / {String(ROLES.length).padStart(2, "0")}</span>
              <span className="label">{r.label}</span>
              <span className="meta">{r.meta}</span>
              <span className="arr">↗</span>
            </button>
          ))}
        </div>
        <div className="role-slider-cue">drag to explore</div>
      </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 company partners" },
    { n: "75+",   l: "five-star reviews" },
    { n: "100k",  l: "podcast listeners" },
    { n: "9",     l: "specialty practices" },
    { n: "10y+",  l: "in market" },
  ];
  const doubled = [...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {doubled.map((it, i) => (
          <span className="marquee-item" key={i}>
            <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" style={{ padding: "60px 0" }}>
      <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: stacked rows with story ────────────────────────────────
// ─── pillars: horizontal 3-up with accent words ──────────────────────
const PILLARS = [
  { num: "01", word: "Who",
    title: <>we fuel</>,
    body: "Venture-backed startups, scale-ups, and innovation-led enterprises. Whether you're building your first engineering team or scaling a mature org, we deliver talent that fits on paper and in culture.",
    stats: [{ k: <>48<em>hr</em></>, v: "to first slate" }, { k: <>18<em>d</em></>, v: "median offer time" }] },
  { num: "02", word: "How",
    title: <>we fuel</>,
    body: "Discovery, calibration, sourcing, vetting, present. We pair human judgment with proprietary AI sourcing that surfaces candidates outside the obvious channels — and removes the busywork that slows great recruiters down.",
    stats: [{ k: "5-step", v: "calibrated" }, { k: "AI-assisted", v: "sourcing + screening" }] },
  { num: "03", word: "Why",
    title: <>we fuel</>,
    body: "We build legacies — not just fill roles. We close 91% of extended offers because we don't push the wrong fits. We invest in the long-term relationship with both sides, and that compounds.",
    stats: [{ k: <>91<em>%</em></>, v: "offer accept" }, { k: <>10<em>y</em>+</>, v: "median client tenure" }] },
];

function Pillars() {
  return (
    <section className="pillars" id="about">
      <div className="container">
        <div className="sect-head pillars-head">
          <div className="left">
            <div className="eyebrow"><span className="dot"></span> Operating system</div>
            <h2>
              <span className="accent">Who</span><span className="dim">,</span>{" "}
              <span className="accent">how</span><span className="dim">,</span>{" "}
              <span className="accent">why</span>{" "}
              <span className="dim">we&nbsp;fuel.</span>
            </h2>
          </div>
          <div className="meta">
            <span className="mono">§ 02 · Operating model</span>
            <span className="mono">3 pillars · side by side</span>
          </div>
        </div>
        <div className="pillars-grid">
          {PILLARS.map((p) => (
            <article className="pillar-col" key={p.num}>
              <div className="pillar-col-head">
                <span className="pillar-num">{p.num}</span>
                <span className="pillar-rule"></span>
              </div>
              <h3 className="pillar-col-title">
                <span className="accent">{p.word}</span> {p.title}
              </h3>
              <p className="pillar-col-body">{p.body}</p>
              <div className="pillar-col-stats">
                {p.stats.map((s, i) => (
                  <div key={i} className="pillar-stat">
                    <div className="k">{s.k}</div>
                    <div className="l">{s.v}</div>
                  </div>
                ))}
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── services ────────────────────────────────────────────────────────
function Services() {
  return (
    <section className="services" id="services">
      <div className="container">
        <div className="sect-head">
          <div className="left">
            <div className="eyebrow"><span className="dot"></span> Services</div>
            <h2>Talent that<br/><em>moves you forward.</em></h2>
          </div>
          <div className="meta">
            <span className="mono">§ 03 · Three modes</span>
            <a href="#contact" className="mono" style={{ color: "var(--ink)" }}>Not sure which? Talk to us →</a>
          </div>
        </div>
        {SERVICES.map((s) => (
          <a className="svc-row" key={s.num} href="#">
            <span className="num">[{s.num}]</span>
            <div className="body">
              <h3>{s.title}</h3>
              <p className="blurb">{s.blurb}</p>
            </div>
            <span className="go">Explore <span className="a">→</span></span>
          </a>
        ))}
      </div>
    </section>
  );
}

// ─── inline reels (use hero.mp4 as a sample) ─────────────────────────
function Reel({ tag, title, body, reverse }) {
  return (
    <div className={`reel ${reverse ? "reverse" : ""}`}>
      <div className="reel-media">
        <video src="case.mp4" autoPlay muted loop playsInline />
        <span className="reel-tag">{tag}</span>
      </div>
      <div className="reel-copy">
        <div className="eyebrow"><span className="dot"></span> Inside the work</div>
        <h3>{title}</h3>
        <p>{body}</p>
        <a className="btn" href="#">Read the case study <span className="arr">→</span></a>
      </div>
    </div>
  );
}

function Reels() {
  return (
    <section style={{ paddingBlock: "60px" }}>
      <div className="container">
        <Reel
          tag="Case · 11 months"
          title={<>Built an engineering team from <em>zero to 40.</em></>}
          body="A profitable Series C health-tech company partnered with us on a build-out across platform, ML, and security. 40 hires shipped in 11 months at 92% offer acceptance, without ever scaling beyond two consultants."
        />
      </div>
    </section>
  );
}

// ─── expertise ───────────────────────────────────────────────────────
function Expertise() {
  const [filter, setFilter] = useState("All");
  const groups = ["All", "Build", "Operate", "Lead"];
  const filtered = useMemo(() => filter === "All" ? EXPERTISE : EXPERTISE.filter((e) => e.group === filter), [filter]);
  return (
    <section className="expertise" id="expertise">
      <div className="container">
        <div className="sect-head">
          <div className="left">
            <div className="eyebrow"><span className="dot"></span> Expertise</div>
            <h2>Deep expertise,<br/><em>human-shipped.</em></h2>
          </div>
          <div className="meta">
            <span className="mono">§ 04 · {filtered.length} practices shown</span>
          </div>
        </div>
        <div className="ex-filter-row">
          {groups.map((g) => (
            <button key={g} className={`ex-tag ${filter === g ? "is-active" : ""}`} onClick={() => setFilter(g)}>{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")} · {e.group.toUpperCase()}</span>
                <span className="live">live</span>
              </div>
              <h3>{e.title}</h3>
              <p className="blurb">{e.blurb}</p>
              <div className="footer">
                <span><b>{e.live}</b> roles · <b>{e.days}d</b> avg</span>
                <span className="arr">→</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 className="testimonials">
      <div className="container">
        <div className="sect-head">
          <div className="left">
            <div className="eyebrow"><span className="dot"></span> Testimonials</div>
            <h2>The power<br/><em>of 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-stage" key={i}>
          <span className="quote-mark">"</span>
          <p className="quote-q">{q.quote}</p>
          <div className="quote-attr">
            <div className="quote-avatar">{q.initials}</div>
            <div>
              <div className="quote-name">{q.name}</div>
              <div className="quote-role">{q.role}</div>
            </div>
          </div>
        </div>
        <div className="qctrl">
          <button onClick={prev}>←</button>
          <button onClick={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" id="jobs">
      <div className="container">
        <div className="sect-head">
          <div className="left">
            <div className="eyebrow"><span className="dot"></span> Live job board</div>
            <h2>Where careers<br/><em>get fueled.</em></h2>
          </div>
          <div className="meta">
            <a href="jobs.html" className="mono" style={{ color: "var(--ink)" }}>§ 06 · Open full board →</a>
          </div>
        </div>
        <form className="jobs-form" onSubmit={(e) => e.preventDefault()}>
          <label className="jobs-field">
            <span>Title or practice</span>
            <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Staff Engineer, Product 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 className="jobs-go">Search <span>→</span></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: 56 }).map((_, i) => 6 + Math.sin(i * 0.5) * 4 + (i % 3) * 4 + Math.random() * 5), []);
  return (
    <section className="resources" id="resources">
      <div className="container">
        <div className="sect-head">
          <div className="left">
            <div className="eyebrow"><span className="dot"></span> Resources</div>
            <h2>Fuel for<br/><em>thought.</em></h2>
          </div>
          <div className="meta">
            <a href="#" className="mono" style={{ color: "var(--ink)" }}>§ 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(--ink)" }}>Latest podcast · Ep. 047</div>
            <div className="pod-cover">
              <video src="podcast.mp4" autoPlay muted loop playsInline />
            </div>
            <div className="pod-title">"What Fuels You" — Shauna Swerland, host.</div>
            <div className="pod-row">
              <button className="pod-play" onClick={() => setPlaying(!playing)}>
                {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 className="pod-stat"><div className="n">75+</div><div className="l">five-star reviews</div></div>
              <div className="pod-stat"><div className="n">100k</div><div className="l">listeners</div></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── CTA ─────────────────────────────────────────────────────────────
function CTABand() {
  return (
    <section className="cta" id="contact">
      <div className="cta-content container">
        <div className="eyebrow" style={{ color: "rgba(245,243,238,0.7)", justifyContent: "center", width: "100%", display: "flex", marginBottom: 28 }}>
          <span className="dot"></span> What's next
        </div>
        <h2>
          <span style={{ display: "block" }}>We build <em>legacies,</em></span>
          <span style={{ display: "block", marginTop: "0.18em" }}>not just <span className="accent"><em>fill roles.</em></span></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="#contact">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: 22 }}>
              <span className="brand-dot"></span>
              <span>Fuel Talent</span>
            </div>
            <div style={{ fontSize: 14.5, 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.5 }}>
              <a href="mailto:info@fueltalent.com">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={{ color: "var(--ink-2)", borderBottom: "1px solid var(--line-2)", paddingBottom: 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 Fuel Talent</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, LLC · All rights reserved</span>
          <span>Human first · AI-enabled · Seattle</span>
          <a href="#">Privacy policy</a>
        </div>
      </div>
    </footer>
  );
}

// ─── tweaks ──────────────────────────────────────────────────────────
function TweaksUI({ t, setTweak }) {
  return (
    <TweaksPanel>
      <TweakSection label="Theme" />
      <TweakRadio label="Mode" value={t.theme}
        options={["light", "dark"]}
        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>
  );
}

// ─── App root ────────────────────────────────────────────────────────
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 (
    <>
      <TopNav />
      <Hero />
      <Marquee />
      <Clients />
      <Pillars />
      <Reels />
      <Services />
      <Expertise />
      <Testimonials />
      <Jobs />
      <Resources />
      <CTABand />
      <Footer />
      <TweaksUI t={t} setTweak={setTweak} />
    </>
  );
}

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