function Collab() {
  const [msg, setMsg] = useState("");
  const [copied, setCopied] = useState(false);

  const stackLabels = ["SQL · Supabase", "Python", "Power BI / Metabase", "Streamlit", "Play Console", "Web analytics"];
  const outcomes = [
    "Built analytics layer for a production app with real users",
    "Informed monetisation strategy with cohort & retention analysis",
    "Defined North Star metric and activation funnel end-to-end",
    "Shipped internal dashboards used in weekly product decisions",
  ];

  return (
    <section className="py-20 sm:py-28 bg-ink text-paper" id="collab">
      <div className="max-w-6xl mx-auto px-5 sm:px-8">
        <div className="mb-10 sm:mb-14">
          <div className="flex items-baseline gap-4 mb-4">
            <span className="section-num text-paper/50">§09</span>
            <div className="h-px flex-1 bg-paper/20" />
            <span className="section-num text-paper/50">a real offer, not a pitch</span>
          </div>
          <div className="flex items-center gap-3 mb-3">
            <Pill tone="teal">mebetter.today</Pill>
            <Pill tone="ember">live startup</Pill>
          </div>
          <h2 className="serif text-4xl sm:text-5xl md:text-6xl leading-[1.02] max-w-[22ch]">
            Want <em className="text-teal-soft">real startup experience</em> on your CV? Come help me ship the analytics layer.
          </h2>
          <p className="mt-5 text-paper/75 text-lg max-w-[62ch] leading-relaxed">
            I'm running a live, in-production focus/goal app — web and Android Play Store, real users, revenue path. Not a side project. Not a made-up internship. The kind of line on your CV a hiring manager actually pauses on.
          </p>
        </div>

        <div className="grid lg:grid-cols-12 gap-6">
          <div className="lg:col-span-7">
            <div className="rounded-2xl bg-paper/5 border border-paper/10 p-6">
              <div className="mono text-[11px] uppercase tracking-widest text-paper/50 mb-3">what you'd actually do</div>
              <ul className="space-y-2.5 text-paper/90">
                {[
                  "Design and ship the internal analytics dashboard",
                  "Own the signup → activation → retention funnel",
                  "Cohort & churn analysis, feature adoption deep-dives",
                  "Pull data from Supabase, Play Console, web analytics",
                  "Help define North Star metric and guardrails",
                  "Turn behavioural data into monetisation recommendations",
                ].map((x, i) => (
                  <li key={i} className="flex gap-3 pb-2.5 border-b border-paper/10 last:border-0">
                    <span className="text-teal-soft mono text-sm pt-0.5">{String(i+1).padStart(2,"0")}</span>
                    <span>{x}</span>
                  </li>
                ))}
              </ul>
              <div className="mt-5 flex flex-wrap gap-1.5">
                {stackLabels.map(s => (
                  <span key={s} className="mono text-[11px] px-2 py-1 rounded-full border border-paper/20 text-paper/80">{s}</span>
                ))}
              </div>
            </div>

            <div className="rounded-2xl bg-teal p-6 mt-5">
              <div className="mono text-[11px] uppercase tracking-widest text-paper/70 mb-3">the CV line you walk away with</div>
              <div className="space-y-2">
                {outcomes.map((o, i) => (
                  <div key={i} className="flex items-start gap-2.5">
                    <div className="text-paper mt-0.5"><I.Check size={16}/></div>
                    <div className="text-paper text-[15px] leading-snug">{o}</div>
                  </div>
                ))}
              </div>
              <div className="mt-5 pt-5 border-t border-paper/20 text-paper/80 text-[14px]">
                Stronger, every single time, than "I finished a Kaggle notebook."
              </div>
            </div>
          </div>

          <aside className="lg:col-span-5">
            <div className="rounded-2xl bg-paper text-ink p-6">
              <div className="mono text-[11px] uppercase tracking-widest text-muted mb-2">commitment</div>
              <div className="serif text-3xl leading-tight mb-2">Flexible. Project-scoped. Not full-time.</div>
              <p className="text-ink2 text-[15px] leading-relaxed">
                Designed to fit alongside your job hunt. A few hours a week, agreed in advance, real deliverables. Paid where the project has revenue to support it — equity/credit where it doesn't. We'll talk openly about this.
              </p>

              <div className="rule my-5"/>

              <div className="mono text-[11px] uppercase tracking-widest text-muted mb-2">if this sounds right</div>
              <textarea rows={4} className="textarea mb-3" placeholder="drop a few lines — what part interests you, what you'd want to own first…"
                value={msg} onChange={e => setMsg(e.target.value)}/>
              <div className="flex gap-2 flex-wrap">
                <button onClick={async () => {
                  const body = encodeURIComponent(msg || "Hey — I want in on the mebetter analytics thing.");
                  window.location.href = `mailto:?subject=mebetter%20analytics&body=${body}`;
                }} className="btn-teal px-4 py-2.5 rounded-lg text-sm inline-flex items-center gap-2">
                  <I.Mail size={14}/> Email me this
                </button>
                <button onClick={async () => {
                  const text = msg || "Hey — I want in on the mebetter analytics thing.";
                  try { await navigator.clipboard.writeText(text); setCopied(true); setTimeout(() => setCopied(false), 1800); } catch {}
                }} className="hairline-ink px-4 py-2.5 rounded-lg text-sm inline-flex items-center gap-2 hover:bg-ink hover:text-paper transition-colors">
                  <I.Copy size={14}/> {copied ? "copied" : "copy"}
                </button>
                <a href="https://mebetter.today" target="_blank" rel="noreferrer"
                  className="mono text-[11px] inline-flex items-center gap-1 text-ink2 hover:text-teal self-center ml-auto">
                  mebetter.today <I.External size={12}/>
                </a>
              </div>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}
window.Collab = Collab;