function Plan() {
  const phases = [
    {
      weeks: "Weeks 1–4",
      name: "Foundations",
      goals: [
        "SQL fluency: joins, windows, CTEs — build, don't read",
        "Excel properly: Power Query + pivot tables + lookups",
        "Power BI: one good dashboard from scratch, end-to-end",
      ],
      proof: "A single Power BI file you'd be willing to paste into an interview chat.",
    },
    {
      weeks: "Weeks 5–8",
      name: "Project 1",
      goals: [
        "Pick one: mebetter analytics or one brief from §10",
        "Scope tight, ship in four weeks",
        "Write the README like a human",
      ],
      proof: "Public repo + deployed or screenshot-ready dashboard + 500-word write-up.",
    },
    {
      weeks: "Weeks 9–12",
      name: "Project 2 + apply",
      goals: [
        "Ship project 2 (different format — analysis or ML)",
        "Portfolio site live (Lovable / Vercel / Notion — doesn't matter, just live)",
        "Start applying in earnest",
      ],
      proof: "Two linked projects, live site, 20+ applications submitted by end of week 12.",
    },
  ];
  const throughout = [
    "5 applications / week — quality matters, but so does volume",
    "1 LinkedIn post / week — your thinking, not repost slop",
    "1 coffee chat / week — people, not portals",
  ];

  return (
    <section className="py-20 sm:py-28 bg-paper2" id="plan">
      <div className="max-w-6xl mx-auto px-5 sm:px-8">
        <SectionHeader
          num="12"
          kicker="90-day plan"
          title={<>Twelve weeks. <em className="text-teal">Doable, not overwhelming.</em></>}
          lede="Not a motivational programme. A realistic sequence that assumes you have roughly twenty hours a week."
        />

        <div className="grid md:grid-cols-3 gap-4 mb-8">
          {phases.map((p, i) => (
            <div key={i} className="hairline rounded-2xl bg-[#FFFDF9] p-6 relative overflow-hidden">
              <div className="absolute top-0 right-0 serif text-[120px] text-paper2 leading-none select-none">{i+1}</div>
              <div className="relative">
                <div className="mono text-[11px] uppercase tracking-widest text-teal mb-2">{p.weeks}</div>
                <div className="serif text-3xl text-ink mb-4">{p.name}</div>
                <ul className="tick-list space-y-1.5 text-[14px] text-ink2 mb-5">
                  {p.goals.map((g, j) => <li key={j}>{g}</li>)}
                </ul>
                <div className="mono text-[11px] uppercase tracking-widest text-muted mb-1">proof of progress</div>
                <p className="text-[13px] text-ink2">{p.proof}</p>
              </div>
            </div>
          ))}
        </div>

        <div className="rounded-2xl bg-ink text-paper p-6 sm:p-8">
          <div className="grid sm:grid-cols-[auto_1fr] gap-6 items-center">
            <div className="mono text-[11px] uppercase tracking-widest text-paper/60">running throughout</div>
            <div className="grid sm:grid-cols-3 gap-5">
              {throughout.map((t, i) => (
                <div key={i} className="flex gap-3 items-start">
                  <I.Refresh size={16} className="text-teal-soft mt-1"/>
                  <div className="text-paper/90 text-[15px] leading-snug">{t}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <p className="mt-6 text-ink2 italic text-[14px] max-w-[60ch]">
          If week 4 slips, ship week 4 in week 5 — don't cut projects. The plan forgives slippage, not shortcuts.
        </p>
      </div>
    </section>
  );
}
window.Plan = Plan;