function LiveDemo() {
  const presets = [
    { label: "Draft a follow-up email", prompt: "Draft a friendly, professional follow-up email to a small business owner who I quoted for AI consulting work two weeks ago and hasn't replied. Keep it under 80 words. No pressure, gentle nudge, offer to answer questions." },
    { label: "Summarise a meeting", prompt: "I had a 45-minute discovery call with a 10-person accounting firm. They want to use AI for client onboarding, document review, and email triage. They use Xero, Microsoft 365, and HubSpot. Their concern: data privacy. Write a 5-bullet summary I can send the team." },
    { label: "Generate a job ad", prompt: "Write a friendly, modern job ad for an Office Manager at a small Australian café group (3 locations). Casual tone, 150 words max. Highlight: flexible hours, free coffee, real ownership of the role." },
    { label: "Explain AI to my mum", prompt: "Explain in plain English what an 'AI agent' is, using one analogy a 65-year-old non-technical Australian person would actually understand. 4 sentences max." },
  ];

  const [activeIdx, setActiveIdx] = useState(0);
  const [input, setInput] = useState(presets[0].prompt);
  const [output, setOutput] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const run = async () => {
    if (loading || !input.trim()) return;
    setLoading(true);
    setOutput("");
    setError(null);
    try {
      const text = await window.claude.complete(
        "You are a senior AI consultant at Base 38, a small Australian agency that helps SMEs adopt AI without the hype. You write in plain, warm, useful English. Australian spelling. No emoji unless asked. Be specific and concrete. The user asked: " + input
      );
      // Type-out effect
      let i = 0;
      const tick = () => {
        i += Math.max(1, Math.floor(text.length / 220));
        setOutput(text.slice(0, i));
        if (i < text.length) setTimeout(tick, 14);
      };
      tick();
    } catch (e) {
      setError("Something went wrong. Try again, or just email us at hello@base38.com.au.");
    } finally {
      setLoading(false);
    }
  };

  const pickPreset = (i) => {
    setActiveIdx(i);
    setInput(presets[i].prompt);
    setOutput("");
    setError(null);
  };

  return (
    <section className="live-demo" id="try-it">
      <div className="container">
        <div className="demo-wrap">
          <div className="demo-left reveal">
            <span className="eyebrow">Try it live</span>
            <h2 className="h-section">
              Don't take<br/>our word for it.
            </h2>
            <p className="body-lg">
              This is the same AI we'd use to build your tools. Pick a real-world job from the list,
              tweak it, and run it. The answer comes back in seconds — and it's a tiny taste
              of what a custom assistant trained on <em>your</em> business could do.
            </p>
            <div className="demo-presets">
              {presets.map((p, i) => (
                <button
                  key={i}
                  className={"demo-preset" + (i === activeIdx ? " active" : "")}
                  onClick={() => pickPreset(i)}
                >
                  {p.label}
                </button>
              ))}
            </div>
          </div>

          <div className="demo-card reveal delay-1">
            <div className="demo-card-head">
              <div className="traffic"><span/><span/><span/></div>
              <span className="title">base38.assistant — preview</span>
              <span className="live">Live</span>
            </div>
            <div className="demo-input-wrap">
              <textarea
                className="demo-input"
                value={input}
                onChange={(e) => setInput(e.target.value)}
                rows={3}
                placeholder="Ask anything a real business owner would ask…"
              />
              <div className="demo-actions">
                <span>{input.length} chars · powered by Claude</span>
                <button className="btn btn-amber" style={{ padding: "0.5rem 1rem", fontSize: "0.82rem" }} onClick={run} disabled={loading}>
                  {loading ? "Thinking…" : "Run it"}
                  {!loading && (
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M5 12h14M13 6l6 6-6 6"/>
                    </svg>
                  )}
                </button>
              </div>
            </div>
            <div className="demo-output">
              {error && <div style={{ color: "#c0392b" }}>{error}</div>}
              {!output && !error && !loading && (
                <span className="placeholder">Output appears here. Pick a preset or write your own prompt above.</span>
              )}
              {loading && !output && (
                <span className="placeholder">Drafting your reply<span className="typing-cursor"/></span>
              )}
              {output && (
                <span style={{ whiteSpace: "pre-wrap" }}>
                  {output}
                  {loading && <span className="typing-cursor"/>}
                </span>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.LiveDemo = LiveDemo;