function Demo2() {
  const { provider, apiKey } = useAPI();
  const [role, setRole] = useState("analyst");
  const [area, setArea] = useState("retail");
  const [budget, setBudget] = useState("2 weeks");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [brief, setBrief] = useState(null);

  async function run() {
    if (!apiKey) { setError("No API key set. Scroll up to §5."); return; }
    setLoading(true); setError(""); setBrief(null);

    const system = `You design UK-specific data portfolio briefs for new graduates. Prioritise real, public UK data sources: ONS, data.gov.uk, TfL, NHS Digital, Companies House, FCA, UK Gov statistics, Police.uk. Reject cliché datasets (Titanic, Iris, generic Kaggle). Brief must be shippable in the time budget. Return only JSON.`;
    const user = `Generate one UK-contextual portfolio brief for:
- target role: ${role}
- interest area: ${area}
- time budget: ${budget}

Return ONLY JSON (no markdown):
{
  "title": "<punchy project title>",
  "tagline": "<one-line hook, max 18 words>",
  "problem": "<2-3 sentences, real UK angle, named decision>",
  "uk_data_source": {"name": "<e.g. ONS, TfL API>", "url": "<real URL>", "note": "<why this dataset>"},
  "scope": ["<bullet>", "<bullet>", "<bullet>"],
  "deliverables": ["<deliverable 1>", "<deliverable 2>", "<deliverable 3>"],
  "tools": ["<tool>", "<tool>"],
  "portfolio_highlights": ["<what to boast about in CV>", "<another>"],
  "stretch": "<optional stretch goal, one sentence>"
}`;

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

  return (
    <section className="py-20 sm:py-28 bg-paper2">
      <div className="max-w-6xl mx-auto px-5 sm:px-8">
        <SectionHeader
          num="07"
          kicker="live demo · 2 of 3"
          title={<>"Build me a project brief".</>}
          lede="Three dropdowns, one prompt, a bespoke UK portfolio brief pointed at real public data. Rerun it until one feels right."
        />

        <div className="grid lg:grid-cols-12 gap-6">
          <div className="lg:col-span-5">
            <Card className="p-6 sticky top-4">
              <LabelledInput label="target role">
                <select className="select" value={role} onChange={e => setRole(e.target.value)}>
                  <option value="analyst">Data Analyst</option>
                  <option value="scientist">Data Scientist</option>
                </select>
              </LabelledInput>
              <div className="h-3"/>
              <LabelledInput label="interest area">
                <select className="select" value={area} onChange={e => setArea(e.target.value)}>
                  <option value="retail">Retail &amp; consumer</option>
                  <option value="health">Health &amp; NHS</option>
                  <option value="finance">Finance &amp; FCA</option>
                  <option value="transport">Transport &amp; TfL</option>
                  <option value="public sector">Public sector / gov</option>
                </select>
              </LabelledInput>
              <div className="h-3"/>
              <LabelledInput label="time budget">
                <select className="select" value={budget} onChange={e => setBudget(e.target.value)}>
                  <option>a weekend</option>
                  <option>2 weeks</option>
                  <option>a month</option>
                </select>
              </LabelledInput>

              <button onClick={run} disabled={loading || !apiKey}
                className="btn-teal w-full mt-5 px-5 py-2.5 rounded-lg text-sm inline-flex items-center gap-2 justify-center">
                {loading ? <><I.Loader size={14} className="animate-spin"/>Writing brief</> : <><I.Send size={14}/>Generate brief</>}
              </button>
              {!apiKey && <div className="mt-3"><NeedKeyNotice/></div>}
              <ErrorBox onRetry={error ? run : null}>{error}</ErrorBox>
            </Card>
          </div>

          <div className="lg:col-span-7">
            <Card className="p-7 min-h-[480px]">
              {!brief && !loading && (
                <div className="text-muted text-sm h-full flex flex-col justify-center items-center text-center py-16">
                  <I.Folder size={28} className="mb-3 text-line"/>
                  <div>pick three dropdowns, hit generate</div>
                </div>
              )}
              {loading && (
                <div className="space-y-3">
                  <Thinking label="assembling a UK brief"/>
                  <div className="h-8 shimmer rounded w-3/4 mt-2"/>
                  <div className="h-4 shimmer rounded w-full"/>
                  <div className="h-4 shimmer rounded w-5/6"/>
                  <div className="h-24 shimmer rounded mt-4"/>
                </div>
              )}
              {brief && (
                <article>
                  <div className="flex items-center gap-2 mb-3">
                    <Pill tone="dark">{role}</Pill>
                    <Pill tone="teal">{area}</Pill>
                    <Pill>{budget}</Pill>
                  </div>
                  <h3 className="serif text-4xl text-ink leading-tight mb-2">{brief.title}</h3>
                  <p className="serif text-xl text-teal mb-5">{brief.tagline}</p>

                  <div className="mono text-[11px] uppercase tracking-widest text-muted mb-1.5">the problem</div>
                  <p className="text-ink2 mb-5 leading-relaxed">{brief.problem}</p>

                  {brief.uk_data_source && (
                    <div className="rounded-xl bg-paper2 p-4 mb-5">
                      <div className="mono text-[11px] uppercase tracking-widest text-muted mb-1">data source</div>
                      <div className="flex items-center justify-between gap-3">
                        <div>
                          <div className="serif text-xl text-ink">{brief.uk_data_source.name}</div>
                          <div className="text-[13px] text-ink2 mt-0.5">{brief.uk_data_source.note}</div>
                        </div>
                        {brief.uk_data_source.url && (
                          <a href={brief.uk_data_source.url} target="_blank" rel="noreferrer"
                            className="mono text-[11px] inline-flex items-center gap-1 text-ink hover:text-teal">
                            open <I.External size={12}/>
                          </a>
                        )}
                      </div>
                    </div>
                  )}

                  <div className="grid sm:grid-cols-2 gap-5 mb-5">
                    <div>
                      <div className="mono text-[11px] uppercase tracking-widest text-muted mb-1.5">scope</div>
                      <ul className="tick-list space-y-1 text-ink2 text-[14px]">
                        {brief.scope?.map((s, i) => <li key={i}>{s}</li>)}
                      </ul>
                    </div>
                    <div>
                      <div className="mono text-[11px] uppercase tracking-widest text-muted mb-1.5">deliverables</div>
                      <ul className="tick-list space-y-1 text-ink2 text-[14px]">
                        {brief.deliverables?.map((s, i) => <li key={i}>{s}</li>)}
                      </ul>
                    </div>
                  </div>

                  <div className="flex flex-wrap gap-1.5 mb-5">
                    <span className="mono text-[11px] text-muted mr-1 self-center">tools:</span>
                    {brief.tools?.map((t, i) => <Pill key={i}>{t}</Pill>)}
                  </div>

                  <div className="rounded-xl bg-ink text-paper p-4 mb-4">
                    <div className="mono text-[11px] uppercase tracking-widest text-paper/60 mb-1.5">portfolio signals to boast about</div>
                    <ul className="space-y-1">
                      {brief.portfolio_highlights?.map((s, i) => (
                        <li key={i} className="flex gap-2"><span className="text-teal-soft">→</span><span className="text-paper/90 text-[14px]">{s}</span></li>
                      ))}
                    </ul>
                  </div>

                  {brief.stretch && (
                    <div className="text-[13px] text-ink2 italic">
                      <span className="mono not-italic text-[11px] uppercase tracking-widest text-ember mr-2">stretch</span>
                      {brief.stretch}
                    </div>
                  )}
                </article>
              )}
            </Card>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Demo2 = Demo2;