function Skills() {
  const [path, setPath] = useState("analyst");

  const stacks = {
    analyst: {
      title: "Data Analyst",
      blurb: "70%+ of UK listings. Your fastest, cleanest route to a first offer.",
      items: [
        { k: "SQL",       must: true,  note: "The single most important skill. Joins, window functions, CTEs. No excuses.", hrs: "40h" },
        { k: "Excel",     must: true,  note: "Pivot tables, lookups, Power Query. Boring, still essential, learn it fast.", hrs: "20h" },
        { k: "Power BI",  must: true,  note: "UK market leans Microsoft. DAX basics + one good dashboard beats three mediocre ones.", hrs: "30h" },
        { k: "Python + pandas", must: false, note: "Separates you from spreadsheet-only analysts.", hrs: "40h" },
        { k: "Statistics literacy", must: false, note: "Enough to read a report and spot nonsense.", hrs: "15h" },
        { k: "Git/GitHub", must: false, note: "Underrated. Signals engineering maturity even at analyst level.", hrs: "8h" },
      ],
    },
    scientist: {
      title: "Data Scientist",
      blurb: "Harder entry in 2026. More competition, more scrutiny. But doable with sharp signal.",
      items: [
        { k: "Python, deeply", must: true,  note: "Not just notebooks — functions, modules, tests.", hrs: "80h" },
        { k: "SQL",            must: true,  note: "Yes, still. Data scientists who can't SQL don't get hired.", hrs: "30h" },
        { k: "scikit-learn",   must: true,  note: "Classical ML beats deep learning for most real problems.", hrs: "25h" },
        { k: "Statistics, properly", must: true, note: "Hypothesis tests, sampling, causal thinking.", hrs: "40h" },
        { k: "PyTorch or JAX",  must: false, note: "Only if you're going ML-engineer / research-adjacent.", hrs: "40h" },
        { k: "MLOps basics",    must: false, note: "Docker, one cloud, model monitoring. Massive differentiator.", hrs: "25h" },
      ],
    },
  };

  const stack = stacks[path];
  return (
    <section className="py-20 sm:py-28 bg-paper2">
      <div className="max-w-6xl mx-auto px-5 sm:px-8">
        <SectionHeader
          id="stack"
          num="02"
          kicker="the stack"
          title={<>Pick the narrower path, <em className="text-teal">win faster</em>.</>}
          lede="You can't be half an analyst and half a scientist in the same 90 days. Pick one, accept the trade-off, change later. Here's what each actually demands."
        />

        <div className="inline-flex hairline rounded-full p-1 bg-[#FFFDF9] mb-8">
          {[
            ["analyst", "Analyst — 70% of UK listings"],
            ["scientist", "Scientist — harder, pricier"],
          ].map(([k, label]) => (
            <button key={k} onClick={() => setPath(k)} aria-selected={path === k}
              className="tab-btn px-4 py-2 rounded-full text-[13px] mono transition-colors">
              {label}
            </button>
          ))}
        </div>

        <div className="grid md:grid-cols-12 gap-8">
          <div className="md:col-span-5">
            <Card className="p-6 sticky top-4">
              <div className="serif text-3xl text-ink">{stack.title}</div>
              <p className="mt-2 text-ink2 leading-relaxed">{stack.blurb}</p>
              <div className="mt-5 pt-5 border-t border-line">
                <div className="mono text-[11px] uppercase tracking-widest text-muted mb-2">My honest note</div>
                <p className="text-ink2 leading-relaxed">
                  {path === "analyst"
                    ? "If you want to be earning in 6 months: this path. You can always level up to scientist from inside a role — much harder from outside."
                    : "Only go here if you love the maths and the long tail. You'll out-grind people who went analyst, but you also risk hunting longer."}
                </p>
              </div>
            </Card>
          </div>

          <div className="md:col-span-7">
            <div className="space-y-2.5">
              {stack.items.map((it) => (
                <div key={it.k} className="hairline bg-[#FFFDF9] rounded-xl p-4 flex items-start gap-4">
                  <div className={`mt-1 ${it.must ? "text-teal" : "text-muted"}`}>
                    {it.must ? <I.Check size={16}/> : <I.Spark size={16}/>}
                  </div>
                  <div className="flex-1">
                    <div className="flex items-baseline gap-2 flex-wrap">
                      <span className="serif text-xl text-ink">{it.k}</span>
                      {it.must
                        ? <Pill tone="teal">non-negotiable</Pill>
                        : <Pill>differentiator</Pill>}
                    </div>
                    <div className="text-ink2 mt-1 text-[15px]">{it.note}</div>
                  </div>
                  <div className="mono text-[11px] text-muted whitespace-nowrap mt-1">{it.hrs}</div>
                </div>
              ))}
            </div>

            <div className="mt-6 rounded-xl bg-ink text-paper p-6">
              <div className="mono text-[11px] uppercase tracking-widest text-paper/60 mb-2">ai fluency — the multiplier</div>
              <p className="serif text-2xl leading-snug">
                On top of whichever stack: know how to use AI like a senior analyst would. Write evals. Structure prompts. Know when it's wrong. That's the gap most candidates still haven't closed.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Skills = Skills;