function Closing() {
  const [picked, setPicked] = useState("");
  const options = [
    "Set up my API key today",
    "Start TfL Tube Delay Dashboard",
    "Start UK Small Business Pulse",
    "Start NHS Waiting Times",
    "Join mebetter analytics",
    "Rewrite my CV this week",
    "Ship my portfolio site",
  ];

  return (
    <section className="py-24 sm:py-32 relative overflow-hidden">
      <div className="absolute inset-0 grain opacity-50 pointer-events-none"/>
      <div className="max-w-3xl mx-auto px-5 sm:px-8 relative">
        <div className="mono text-[11px] uppercase tracking-widest text-teal mb-6">§13 · closing note</div>

        <h2 className="serif text-5xl sm:text-6xl md:text-7xl text-ink leading-[0.98] mb-8">
          One thing. <em className="text-teal">This week.</em> Tell me what you picked.
        </h2>

        <div className="space-y-5 text-ink2 text-lg leading-relaxed">
          <p>
            I built this page in a weekend because I know the shape of where you are — I was there two years ago, same visa, same stack, same LinkedIn doomscroll. The thing that actually changed my trajectory wasn't another course. It was picking <em>one</em> concrete project and not stopping until it was public.
          </p>
          <p>
            If you do nothing else with this page, do this: <span className="underline-teal">pick one thing below</span>, then message me what you picked. That's it. That's the whole ask.
          </p>
          <p>
            I'm proud of you already. Now go do the boring next step.
          </p>
        </div>

        <div className="mt-10 rounded-2xl bg-[#FFFDF9] hairline p-6">
          <div className="mono text-[11px] uppercase tracking-widest text-muted mb-3">pick one</div>
          <div className="flex flex-wrap gap-2 mb-4">
            {options.map(o => (
              <button key={o} onClick={() => setPicked(o)}
                className={`text-left text-[14px] px-4 py-2 rounded-full transition-colors ${
                  picked === o ? "bg-teal text-paper" : "hairline bg-paper hover:bg-paper2 text-ink2"
                }`}>
                {o}
              </button>
            ))}
          </div>
          <div className="flex items-center gap-3 flex-wrap">
            <button
              disabled={!picked}
              onClick={() => {
                const subject = encodeURIComponent("This week I'm doing this");
                const body = encodeURIComponent(`I picked: ${picked}\n\nHere's what I'll have by Sunday:\n— \n— \n`);
                window.location.href = `mailto:?subject=${subject}&body=${body}`;
              }}
              className="btn-teal px-5 py-2.5 rounded-lg text-sm inline-flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed">
              <I.Send size={14}/> Message me what I picked
            </button>
            {picked && (
              <span className="mono text-[11px] text-muted">
                you picked: <span className="text-ink">{picked}</span>
              </span>
            )}
          </div>
        </div>

        <div className="mt-16 flex items-center gap-3 text-muted">
          <div className="h-px flex-1 bg-line"/>
          <I.Heart size={14}/>
          <div className="h-px flex-1 bg-line"/>
        </div>

        <div className="mt-10 flex flex-wrap items-center justify-between gap-3 text-[12px] text-muted mono">
          <div>written for you · apr '26</div>
          <div className="flex gap-4">
            <a href="#market" className="hover:text-ink">top</a>
            <a href="#api-setup" className="hover:text-ink">api</a>
            <a href="#demos" className="hover:text-ink">demos</a>
            <a href="#collab" className="hover:text-ink">collab</a>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Closing = Closing;