function Portfolio() {
  return (
    <section className="py-20 sm:py-28">
      <div className="max-w-6xl mx-auto px-5 sm:px-8">
        <SectionHeader
          id="portfolio"
          num="03"
          kicker="portfolio"
          title={<>A portfolio site is <em className="text-teal">the CV now</em>.</>}
          lede="Recruiters will open your link before they scroll your CV. If the first click is a Medium article or a dead GitHub, you've already lost the shortlist."
        />

        <div className="grid md:grid-cols-2 gap-6">
          <Card className="p-6">
            <div className="flex items-center gap-2 mb-4">
              <div className="text-teal"><I.Check size={18}/></div>
              <div className="mono text-[11px] uppercase tracking-widest text-teal">strong portfolio</div>
            </div>
            <ul className="tick-list space-y-3 text-ink2">
              <li>End-to-end thinking: problem → data → decision → impact.</li>
              <li>Business framing up top. Model second. Code third.</li>
              <li>Named personal decisions: "I chose logistic over XGBoost because…"</li>
              <li>A write-up that reads like a human wrote it, because one did.</li>
              <li>UK context visible in at least one project.</li>
            </ul>
          </Card>
          <Card className="p-6 bg-paper2">
            <div className="flex items-center gap-2 mb-4">
              <div className="text-ember"><I.X size={18}/></div>
              <div className="mono text-[11px] uppercase tracking-widest text-ember">weak portfolio</div>
            </div>
            <ul className="space-y-3 text-ink2">
              {[
                "Titanic / Iris / House Prices — seen it.",
                "\"I used AI to generate this project\" — they can tell.",
                "No business context — why should the reader care?",
                "Notebook dumps with no readme, no write-up.",
                "Dashboards with no named question at the top.",
              ].map((t, i) => (
                <li key={i} className="flex items-start gap-2">
                  <span className="text-ember mono text-sm mt-0.5">×</span>
                  <span>{t}</span>
                </li>
              ))}
            </ul>
          </Card>
        </div>

        <div className="mt-10 grid md:grid-cols-3 gap-4">
          {[
            { k: "Lovable", href: "https://lovable.dev", body: "Fastest way from zero to a decent-looking site. Good for a first pass you'll replace." },
            { k: "Vercel + Next.js", href: "https://vercel.com", body: "The serious option. Free, fast, looks like a senior engineer's site." },
            { k: "Notion site", href: "https://notion.so", body: "If you're avoiding code entirely. Plain but clear — better than nothing, honest." },
          ].map(p => (
            <a key={p.k} href={p.href} target="_blank" rel="noreferrer"
               className="hairline rounded-xl p-5 bg-[#FFFDF9] hover:bg-paper2 transition-colors block">
              <div className="flex items-center justify-between mb-2">
                <span className="serif text-xl text-ink">{p.k}</span>
                <I.External size={14} className="text-muted"/>
              </div>
              <p className="text-ink2 text-[14px] leading-relaxed">{p.body}</p>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Portfolio = Portfolio;