function Projects() {
  const projects = [
    {
      tag: "Analyst",
      title: "TfL Tube Delay Dashboard",
      question: "Which lines, stations and times of day have the worst delays — and is it getting better?",
      data: { name: "TfL Unified API", url: "https://api.tfl.gov.uk/", note: "Free, no auth for basic endpoints. Real-time + historical." },
      deliverables: ["Power BI dashboard with line/station drill-downs", "500-word write-up naming a business decision"],
      signal: "UK context · real-time data · named question at the top",
      stretch: "Predict next-week delays from historical patterns.",
      time: "2 weeks",
      tools: ["Python", "Power BI", "SQL-lite"],
    },
    {
      tag: "Analyst / Scientist",
      title: "UK Small Business Pulse",
      question: "Which UK sectors are genuinely growing vs declining post-2024, and where?",
      data: { name: "ONS Business Demography + Companies House API", url: "https://developer.company-information.service.gov.uk/", note: "ONS for macro, Companies House for incorporations." },
      deliverables: ["Interactive regional dashboard", "Policy-maker-style brief, 1 page"],
      signal: "UK economic relevance · public-data fluency · policy framing",
      stretch: "Sector-growth forecast with confidence bands.",
      time: "2–3 weeks",
      tools: ["Python", "pandas", "Power BI / Plotly"],
    },
    {
      tag: "Scientist",
      title: "NHS Waiting Times Analysis",
      question: "What factors predict longer A&E waits by region — demographics, staffing, admissions?",
      data: { name: "NHS Digital open datasets", url: "https://digital.nhs.uk/data-and-information", note: "Monthly A&E stats by trust + workforce figures." },
      deliverables: ["Analysis notebook with clear hypothesis log", "Regression model + write-up of trade-offs"],
      signal: "Socially meaningful · UK-specific · ML applied sensibly",
      stretch: "Regional forecast dashboard with uncertainty.",
      time: "3–4 weeks",
      tools: ["Python", "scikit-learn", "statsmodels"],
    },
  ];

  return (
    <section className="py-20 sm:py-28 bg-paper2" id="projects">
      <div className="max-w-6xl mx-auto px-5 sm:px-8">
        <SectionHeader
          num="10"
          kicker="static project menu"
          title={<>Three briefs you could <em className="text-teal">start tomorrow</em>.</>}
          lede="No API key needed to read these. Each one is UK-contextual, has a real public data source, and a named business question at the top."
        />

        <div className="space-y-5">
          {projects.map((p, i) => (
            <Card key={i} className="p-6 sm:p-8">
              <div className="grid md:grid-cols-[1.4fr_1fr] gap-6">
                <div>
                  <div className="flex items-center gap-2 mb-2 flex-wrap">
                    <Pill tone="dark">Project {i+1}</Pill>
                    <Pill tone="teal">{p.tag}</Pill>
                    <Pill><I.Clock size={11}/>&nbsp;{p.time}</Pill>
                  </div>
                  <h3 className="serif text-3xl sm:text-4xl text-ink leading-tight mb-2">{p.title}</h3>
                  <p className="serif text-xl text-teal mb-4">"{p.question}"</p>
                  <div className="mono text-[11px] uppercase tracking-widest text-muted mb-1">deliverables</div>
                  <ul className="tick-list space-y-1 text-ink2 text-[14px] mb-4">
                    {p.deliverables.map((d, j) => <li key={j}>{d}</li>)}
                  </ul>
                  <div className="mono text-[11px] uppercase tracking-widest text-muted mb-1">portfolio signal</div>
                  <p className="text-ink2 text-[14px]">{p.signal}</p>
                </div>
                <div className="space-y-3">
                  <div className="rounded-xl bg-paper2 p-4">
                    <div className="mono text-[11px] uppercase tracking-widest text-muted mb-1">data</div>
                    <a href={p.data.url} target="_blank" rel="noreferrer"
                       className="serif text-xl text-ink hover:text-teal inline-flex items-center gap-1.5">
                      {p.data.name} <I.External size={13}/>
                    </a>
                    <div className="text-[13px] text-ink2 mt-1">{p.data.note}</div>
                  </div>
                  <div className="flex flex-wrap gap-1.5">
                    <span className="mono text-[11px] text-muted self-center mr-1">tools:</span>
                    {p.tools.map(t => <Pill key={t}>{t}</Pill>)}
                  </div>
                  <div className="rounded-xl bg-ink text-paper p-4">
                    <div className="mono text-[11px] uppercase tracking-widest text-paper/60 mb-1">stretch</div>
                    <div className="text-[14px] text-paper/90">{p.stretch}</div>
                  </div>
                </div>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Projects = Projects;