function Own() {
  const sources = [
    { name: "ONS", url: "https://www.ons.gov.uk/", note: "Economy, population, labour market" },
    { name: "data.gov.uk", url: "https://www.data.gov.uk/", note: "The master index" },
    { name: "TfL", url: "https://api.tfl.gov.uk/", note: "Transport, real-time + history" },
    { name: "NHS Digital", url: "https://digital.nhs.uk/data-and-information", note: "Health + workforce" },
    { name: "Companies House", url: "https://developer.company-information.service.gov.uk/", note: "Every UK company" },
    { name: "FCA", url: "https://www.fca.org.uk/data", note: "Financial services" },
    { name: "Police.uk", url: "https://data.police.uk/", note: "Street-level crime" },
    { name: "UK Gov stats", url: "https://www.gov.uk/government/statistics", note: "Every department" },
  ];

  const rules = [
    { k: "Pick a UK-contextual problem", v: "Not Titanic. Not Iris. A thing someone in the UK would nod at." },
    { k: "Scope tight: one question, one answer, one decision", v: "Widen once, not three times. Better a tight v1 shipped than a grand v3 abandoned." },
    { k: "AI is co-pilot, not ghostwriter", v: "Use it to accelerate. Document your decisions — hiring managers smell the opposite." },
    { k: "Ship 3 projects, not 10", v: "One dashboard, one analysis, one ML. That's the set." },
    { k: "The write-up matters as much as the code", v: "Short, human, honest about trade-offs. README > notebook." },
    { k: "GitHub, properly", v: "Clean repo, real README, reproducible. This is the engineering signal." },
  ];

  return (
    <section className="py-20 sm:py-28">
      <div className="max-w-6xl mx-auto px-5 sm:px-8">
        <SectionHeader
          num="11"
          kicker="scope your own"
          title={<>Or <em className="text-teal">invent your own</em> — here's the rulebook.</>}
          lede="If none of the three briefs above speak to you, make one. The rules are tight because they have to be."
        />

        <div className="grid md:grid-cols-2 gap-8">
          <div>
            <div className="mono text-[11px] uppercase tracking-widest text-muted mb-3">the six rules</div>
            <div className="space-y-3">
              {rules.map((r, i) => (
                <div key={i} className="hairline rounded-xl p-4 bg-[#FFFDF9]">
                  <div className="flex items-baseline gap-2.5">
                    <span className="mono text-[11px] text-teal">{String(i+1).padStart(2, "0")}</span>
                    <div>
                      <div className="serif text-[18px] text-ink leading-snug">{r.k}</div>
                      <div className="text-[14px] text-ink2 mt-0.5">{r.v}</div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div>
            <div className="mono text-[11px] uppercase tracking-widest text-muted mb-3">UK data sources — bookmark this</div>
            <div className="grid grid-cols-2 gap-2">
              {sources.map(s => (
                <a key={s.name} href={s.url} target="_blank" rel="noreferrer"
                   className="hairline rounded-xl p-3 bg-[#FFFDF9] hover:bg-paper2 transition-colors">
                  <div className="flex items-center justify-between">
                    <span className="serif text-lg text-ink">{s.name}</span>
                    <I.External size={12} className="text-muted"/>
                  </div>
                  <div className="mono text-[11px] text-muted mt-0.5">{s.note}</div>
                </a>
              ))}
            </div>
            <div className="mt-4 text-[13px] text-muted italic">
              (if you can't find a story in at least two of these, the story isn't there — not the data's fault.)
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Own = Own;