function Demo3() {
  const { provider, apiKey } = useAPI();
  const [jd, setJd] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [out, setOut] = useState(null);

  const sample = `Data Analyst — Retail Analytics
Location: London (hybrid, 2 days on-site)
We're a UK grocery retailer looking for a Data Analyst to join our Merchandising team. You'll work with SQL (Snowflake), Power BI, and Python to build reporting on promotions, stock, and customer segmentation.
Responsibilities: build dashboards, run ad-hoc analyses, partner with category managers on pricing experiments.
Required: 1-2 yrs experience, strong SQL, Power BI, comfortable with Excel. Python a plus. Right to work in the UK (we sponsor skilled worker visa for the right candidate).`;

  async function run() {
    if (!apiKey) { setError("No API key set. Scroll up to §5."); return; }
    if (jd.trim().length < 80) { setError("Paste a full job description — at least a paragraph."); return; }
    setLoading(true); setError(""); setOut(null);

    const system = `You are a UK data career coach helping a new MSc graduate on a Graduate Visa tailor her application. Be direct and UK-specific. Return ONLY JSON.`;
    const user = `Job description:
"""${jd.trim()}"""

Return ONLY JSON (no markdown):
{
  "role_summary": "<one sentence capturing the real role>",
  "top_skills": [
    {"skill": "<skill>", "why": "<why this matters for THIS role, one sentence>"},
    {"skill": "<skill>", "why": "<...>"},
    {"skill": "<skill>", "why": "<...>"}
  ],
  "gaps_to_flag": [
    "<gap a new MSc grad might have, one sentence>",
    "<another>"
  ],
  "portfolio_matches": [
    {"project": "<project type>", "pitch": "<how to pitch it for this JD>"},
    {"project": "<project type>", "pitch": "<...>"}
  ],
  "cv_bullets": [
    "<one tailored CV bullet, measurable, STAR-ish>",
    "<another>",
    "<another>"
  ],
  "visa_note": "<one sentence on visa/sponsorship angle given this JD — honest>"
}`;

    try {
      const raw = await callAI({ provider, apiKey, system, user, json: true });
      setOut(parseJSONLoose(raw));
    } catch (e) { setError(e.message); }
    finally { setLoading(false); }
  }

  return (
    <section className="py-20 sm:py-28">
      <div className="max-w-6xl mx-auto px-5 sm:px-8">
        <SectionHeader
          num="08"
          kicker="live demo · 3 of 3"
          title={<>"Job application co-pilot".</>}
          lede="Paste any UK data JD. Get back: the three skills to lead with, the gaps to address up front, which of your projects to foreground, and CV bullets to steal."
        />

        <div className="grid lg:grid-cols-12 gap-6">
          <div className="lg:col-span-6">
            <Card className="p-6">
              <LabelledInput label="paste the job description" hint={`${jd.length} chars`}>
                <textarea rows={12} className="textarea" value={jd}
                  onChange={e => setJd(e.target.value)}
                  placeholder="Paste the full JD here — the more detail, the sharper the advice."/>
              </LabelledInput>
              <div className="mt-3 flex items-center justify-between gap-3 flex-wrap">
                <button onClick={() => setJd(sample)} className="mono text-[11px] text-muted underline underline-offset-2 hover:text-ink">
                  use a sample JD
                </button>
                <button onClick={run} disabled={loading || !apiKey}
                  className="btn-teal px-5 py-2.5 rounded-lg text-sm inline-flex items-center gap-2">
                  {loading ? <><I.Loader size={14} className="animate-spin"/>Reading JD</> : <><I.Bolt size={14}/>Draft my angle</>}
                </button>
              </div>
              {!apiKey && <div className="mt-3"><NeedKeyNotice/></div>}
              <ErrorBox onRetry={error ? run : null}>{error}</ErrorBox>
            </Card>
          </div>

          <div className="lg:col-span-6">
            <Card className="p-6 min-h-[520px]">
              {!out && !loading && (
                <div className="text-muted text-sm h-full flex flex-col justify-center items-center text-center py-16">
                  <I.Chart size={28} className="mb-3 text-line"/>
                  <div>your tailored angle appears here</div>
                </div>
              )}
              {loading && (
                <div className="space-y-3">
                  <Thinking label="reading between the lines"/>
                  <div className="h-5 shimmer rounded w-1/2"/>
                  <div className="h-20 shimmer rounded"/>
                  <div className="h-20 shimmer rounded"/>
                </div>
              )}
              {out && (
                <div className="space-y-5">
                  <div>
                    <div className="mono text-[11px] uppercase tracking-widest text-muted mb-1">this role is really…</div>
                    <div className="serif text-xl text-ink leading-snug">{out.role_summary}</div>
                  </div>

                  <div>
                    <div className="mono text-[11px] uppercase tracking-widest text-teal mb-2">top 3 skills to lead with</div>
                    <div className="space-y-2">
                      {out.top_skills?.map((s, i) => (
                        <div key={i} className="flex gap-3">
                          <div className="mono text-[12px] text-muted w-5 pt-0.5">{i+1}.</div>
                          <div>
                            <div className="serif text-[18px] text-ink">{s.skill}</div>
                            <div className="text-[13px] text-ink2">{s.why}</div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>

                  <div>
                    <div className="mono text-[11px] uppercase tracking-widest text-ember mb-2">gaps to flag (proactively)</div>
                    <ul className="tick-list space-y-1 text-[14px] text-ink2">
                      {out.gaps_to_flag?.map((g, i) => <li key={i}>{g}</li>)}
                    </ul>
                  </div>

                  <div>
                    <div className="mono text-[11px] uppercase tracking-widest text-muted mb-2">portfolio projects to foreground</div>
                    <div className="space-y-2">
                      {out.portfolio_matches?.map((p, i) => (
                        <div key={i} className="rounded-lg bg-paper2 p-3">
                          <div className="serif text-[16px] text-ink">{p.project}</div>
                          <div className="text-[13px] text-ink2">{p.pitch}</div>
                        </div>
                      ))}
                    </div>
                  </div>

                  <div>
                    <div className="mono text-[11px] uppercase tracking-widest text-muted mb-2">CV bullets to steal</div>
                    <ul className="space-y-1.5">
                      {out.cv_bullets?.map((b, i) => (
                        <li key={i} className="flex gap-2 text-[14px] text-ink2">
                          <span className="text-teal mono">—</span>
                          <span>{b}</span>
                        </li>
                      ))}
                    </ul>
                  </div>

                  {out.visa_note && (
                    <div className="rounded-lg bg-[#F3DCCF]/50 border border-ember/30 p-3">
                      <div className="mono text-[11px] uppercase tracking-widest text-ember mb-1">visa angle</div>
                      <div className="text-[13px] text-ink2">{out.visa_note}</div>
                    </div>
                  )}
                </div>
              )}
            </Card>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Demo3 = Demo3;