function Chatbot() {
  const SYSTEM = `Eres "Gen", el asistente virtual de Generative Solutions, una consultoría de automatización con IA en Alaquàs (Valencia) dirigida por Enric, un profesional con 20 años de experiencia en atención al cliente y administración pública. Ofrecéis automatizaciones con IA, webs/landings, chatbots y servicios a medida para PYMES y autónomos. Cumplimiento estricto de RGPD y normativa europea de IA. Trabajáis con Make, Airtable, OpenAI, Anthropic, Gemini, Google Workspace.

Tu trabajo: responder dudas comerciales en español, breve (máx 60 palabras), tono cercano y profesional, nunca prometas precios cerrados (siempre "podemos valorarlo en una llamada gratuita"). Si preguntan por algo no relacionado, redirige amablemente. Si quieren contratar, invítales a usar el formulario de contacto debajo.`;

  const [messages, setMessages] = React.useState([
    { role: 'bot', text: '¡Hola! Soy Gen, el asistente de Generative Solutions. Pregúntame por servicios, precios o cómo trabajamos. ¿En qué te ayudo?' },
  ]);
  const [input, setInput] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const scrollRef = React.useRef(null);

  React.useEffect(() => {
    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
  }, [messages, loading]);

  const send = async (text) => {
    const t = (text ?? input).trim();
    if (!t || loading) return;
    setInput('');
    const newMsgs = [...messages, { role: 'user', text: t }];
    setMessages(newMsgs);
    setLoading(true);
    try {
      const history = newMsgs.map(m => ({
        role: m.role === 'bot' ? 'assistant' : 'user',
        content: m.text,
      }));
      const reply = await window.claude.complete({
        messages: [{ role: 'user', content: SYSTEM }, ...history],
      });
      setMessages([...newMsgs, { role: 'bot', text: reply }]);
    } catch (e) {
      setMessages([...newMsgs, { role: 'bot', text: 'Ahora mismo no puedo responder. Escríbeme por el formulario de contacto y te respondo personalmente en menos de 24h.' }]);
    } finally {
      setLoading(false);
    }
  };

  const suggestions = [
    '¿Cuánto cuesta un chatbot?',
    '¿Cómo cumplís RGPD?',
    '¿Plazos para una landing?',
    'Soy autónomo, ¿me sirve?',
  ];

  return (
    <section id="demo">
      <div className="container">
        <Reveal><SectionLabel>04 / Demo en vivo</SectionLabel></Reveal>
        <div className="chatbot-wrap" style={{ marginTop: 40 }}>
          <div>
            <Reveal>
              <h2 style={{ marginBottom: 20 }}>
                Esto es un <span className="gradient-text">chatbot real</span>,
                no un vídeo.
              </h2>
            </Reveal>
            <Reveal delay={80}>
              <p style={{ color: 'var(--fg-dim)', fontSize: '1.05rem', marginBottom: 24, maxWidth: 480 }}>
                Habla con "Gen", el asistente que responde dudas comerciales 24/7
                con la base de conocimiento del negocio. Algo así pero con TU
                información, TUS productos y TU tono — eso es lo que monto.
              </p>
            </Reveal>
            <Reveal delay={160}>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
                {[
                  'Entrenado con tu propia documentación',
                  'Filtra datos personales antes de procesar',
                  'Deriva a humano cuando la consulta lo requiere',
                  'Panel para revisar y mejorar respuestas',
                ].map((t) => (
                  <li key={t} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', color: 'var(--fg-dim)' }}>
                    <span style={{ color: 'var(--c1)', flexShrink: 0, marginTop: 2 }}>{I.check}</span>
                    <span>{t}</span>
                  </li>
                ))}
              </ul>
            </Reveal>
          </div>

          <Reveal delay={120} className="chatbot-frame">
            <div className="chatbot-header">
              <div className="avatar">G</div>
              <div className="info">
                <div className="name">Gen · Asistente IA</div>
                <div className="status"><span className="dot"/> En línea · responde al instante</div>
              </div>
              <Badge>DEMO</Badge>
            </div>
            <div className="chatbot-messages" ref={scrollRef}>
              {messages.map((m, i) => (
                <div key={i} className={`msg ${m.role}`}>{m.text}</div>
              ))}
              {loading && (
                <div className="msg bot typing"><span/><span/><span/></div>
              )}
            </div>
            {messages.length <= 1 && (
              <div className="chatbot-suggestions">
                {suggestions.map((s) => (
                  <button key={s} onClick={() => send(s)}>{s}</button>
                ))}
              </div>
            )}
            <form className="chatbot-input" onSubmit={(e) => { e.preventDefault(); send(); }}>
              <input
                value={input}
                onChange={(e) => setInput(e.target.value)}
                placeholder="Pregunta lo que quieras…"
                disabled={loading}
              />
              <button type="submit" disabled={loading || !input.trim()}>
                {I.send}
              </button>
            </form>
          </Reveal>
        </div>
      </div>
    </section>
  );
}
window.Chatbot = Chatbot;