function Market() {
  return (
    <section className="py-20 sm:py-28">
      <div className="max-w-6xl mx-auto px-5 sm:px-8">
      <SectionHeader
        id="market"
        num="01"
        kicker="the real state"
        title={<>The UK data market, <em className="text-teal">honestly</em>.</>}
        lede="No doom, no hype. Just the read from someone who did the same MSc, watched friends job-hunt through this, and has been hiring-adjacent in 2025/26."
      />
      <div className="grid md:grid-cols-12 gap-8">
        <div className="md:col-span-7 space-y-6">
          <Card className="p-6">
            <div className="flex items-start gap-3">
              <Pill tone="ember">visa reality</Pill>
              <div>
                <div className="serif text-2xl mb-2 text-ink">Graduate Visa — it's fine, until it isn't.</div>
                <p className="text-ink2 leading-relaxed">
                  Two years feels long in April. It feels short in August of the following year when you realise the company you love doesn't sponsor juniors. Employers in 2026 are <span className="underline-teal">noticeably more cautious</span> about sponsoring downstream, so you need to signal <em>"I can work here, long-term, without drama"</em> louder than a UK citizen would. That's a CV and portfolio problem, not a you problem.
                </p>
              </div>
            </div>
          </Card>

          <Card className="p-6">
            <div className="flex items-start gap-3">
              <Pill tone="teal">what's changed</Pill>
              <div>
                <div className="serif text-2xl mb-2 text-ink">Hiring managers in 2026 want three things.</div>
                <ul className="tick-list space-y-2 text-ink2">
                  <li><b>Thinking &gt; tools.</b> Anyone can spin up a model. Not everyone can tell you why the metric moved.</li>
                  <li><b>Business sense &gt; model accuracy.</b> A 0.83 AUC with no business framing loses to a 0.71 AUC that saved £140k.</li>
                  <li><b>Portfolio &gt; CV.</b> They'll click your GitHub before they read your summary.</li>
                </ul>
              </div>
            </div>
          </Card>

          <Card className="p-6">
            <div className="flex items-start gap-3">
              <Pill>ai-smell</Pill>
              <div>
                <div className="serif text-2xl mb-2 text-ink">The generic Kaggle project is dead.</div>
                <p className="text-ink2 leading-relaxed">
                  Titanic, Iris, House Prices — recruiters have seen the same notebook 4,000 times, and now they can <em>smell</em> when ChatGPT wrote the README. If your portfolio doesn't answer <b>"why this, why now, why in the UK?"</b>, it reads as noise.
                </p>
              </div>
            </div>
          </Card>
        </div>

        <aside className="md:col-span-5 space-y-5">
          <Card className="p-5">
            <div className="mono text-[11px] uppercase tracking-widest text-muted mb-3">signal vs noise — from JD audits</div>
            {[
              ["Strong signal", "UK-context project with a business decision", "teal"],
              ["Strong signal", "Write-up that names trade-offs", "teal"],
              ["Strong signal", "SQL from a real database, not a CSV", "teal"],
              ["Weak signal",   "Kaggle notebook copied from a tutorial", "ember"],
              ["Weak signal",   '"End-to-end ML pipeline" with no users',  "ember"],
              ["Weak signal",   "Generic 'AI researcher' LinkedIn banner", "ember"],
            ].map(([k, v, tone], i) => (
              <div key={i} className="flex items-start gap-3 py-2 border-t border-line first:border-t-0">
                <div className={tone === "teal" ? "text-teal mt-0.5" : "text-ember mt-0.5"}>
                  {tone === "teal" ? <I.Check size={14}/> : <I.X size={14}/>}
                </div>
                <div>
                  <div className="mono text-[10px] uppercase tracking-widest text-muted">{k}</div>
                  <div className="text-[14px] text-ink2">{v}</div>
                </div>
              </div>
            ))}
          </Card>

          <Card className="p-5 bg-teal text-paper">
            <div className="mono text-[10px] uppercase tracking-widest opacity-70 mb-2">the one sentence</div>
            <p className="serif text-[26px] leading-[1.15]">
              "AI isn't a threat to data jobs. It's leverage the people already in those jobs are using — and most candidates still aren't."
            </p>
          </Card>
        </aside>
      </div>
      </div>{/* /container */}
    </section>
  );
}
window.Market = Market;