// Hero.jsx — split: copy + LIVE chat demo wired to Claude
const Hero = () => {
  const [messages, setMessages] = React.useState([
    { who: 'them', text: '¡Hola! 👋 Soy el asistente IA de BYTEC. Probame: pediment una cita, preguntá por precios o lo que querás.' },
  ]);
  const [input, setInput] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const [demoStarted, setDemoStarted] = React.useState(false);
  const chatRef = React.useRef(null);

  // First-time scripted demo (auto-plays once until user types)
  const demoScript = [
    { who: 'us',   text: 'Quiero agendar limpieza para el martes' },
    { who: 'them', text: 'Tengo 10am o 3pm disponibles. ¿Cuál te queda mejor?' },
    { who: 'us',   text: '3pm porfa' },
    { who: 'them', text: '¡Listo! Cita confirmada martes 3pm. Te llega WhatsApp con recordatorio ✓' },
  ];
  React.useEffect(() => {
    if (demoStarted) return;
    let cancelled = false;
    const play = async () => {
      for (let i = 0; i < demoScript.length; i++) {
        await new Promise(r => setTimeout(r, 1400));
        if (cancelled) return;
        setMessages(m => [...m, demoScript[i]]);
      }
    };
    play();
    return () => { cancelled = true; };
  }, [demoStarted]);

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

  const send = async () => {
    const text = input.trim();
    if (!text || busy) return;
    setDemoStarted(true);
    setInput('');
    setMessages(m => [...m, { who: 'us', text }]);
    setBusy(true);

    try {
      const history = [...messages, { who: 'us', text }]
        .map(m => `${m.who === 'us' ? 'Cliente' : 'Asistente'}: ${m.text}`)
        .join('\n');

      const prompt = `Sos el asistente virtual de BYTEC, una agencia digital en Cartago, Costa Rica que vende: chatbots con IA ($180/mes), webs modernas ($800 setup + $80/mes) y automatizaciones Make.com (custom). 17 años de experiencia, 90+ proyectos.

Tu trabajo: responder en español tico, breve (1-2 oraciones), cálido pero directo. Si te piden agendar, simulá agendar. Si te piden precio, dalo. Si no aplica, ofrecé hablar con un humano por WhatsApp +506 6049 5999. NUNCA inventes datos personales reales.

Conversación hasta ahora:
${history}

Tu respuesta como Asistente (1-2 oraciones, sin saludo repetido):`;

      const reply = await window.claude.complete(prompt);
      setMessages(m => [...m, { who: 'them', text: reply.trim() }]);
    } catch (e) {
      setMessages(m => [...m, { who: 'them', text: 'Mejor escribime por WhatsApp para resolverlo: +506 6049 5999 👋' }]);
    } finally {
      setBusy(false);
    }
  };

  const onKey = (e) => {
    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); }
  };

  return (
    <section className="hero">
      <div className="hero-glow"></div>
      <div className="container hero-inner">
        <div className="hero-copy">
          <span className="badge-loc">
            <span className="pulse"></span>
            Cartago, Costa Rica · Desde 2007 · 17+ años
          </span>
          <h1>
            <span className="strike">Clientes perdidos</span><br />
            <span className="strike">a las 2am.</span><br />
            La IA de BYTEC <span className="acc">los atiende.</span>
          </h1>
          <p className="lead">
            Web moderna + chatbot con IA + automatización para empresas en Costa Rica.
            Tu negocio responde, agenda y vende mientras tu equipo descansa.
          </p>
          <div className="ctas">
            <a href="#solucion" className="btn btn-primary lg">
              Ver cómo funciona <Icon name="arrow-right" size={16} />
            </a>
            <a href="https://wa.me/50660495999" className="btn btn-ghost-dark">
              <Icon name="message-circle" size={16} />
              Hablar por WhatsApp
            </a>
          </div>
          <div className="meta">
            <div><strong>17+</strong>años en CR</div>
            <div><strong>90+</strong>proyectos</div>
            <div><strong>24/7</strong>respuesta IA</div>
            <div><strong>3</strong>canales: WhatsApp · Web · IG</div>
          </div>
        </div>

        <div className="hero-stage">
          <div className="float-tag tag-tl">
            <span className="ic"><Icon name="sparkles" size={16} /></span>
            <div>
              <div>Demo en vivo</div>
              <span className="v">probá el bot ahora ↓</span>
            </div>
          </div>
          <div className="float-tag tag-br">
            <span className="ic"><Icon name="trending-up" size={16} /></span>
            <div>
              <div>+38% conversiones</div>
              <span className="v">vs. atender solo en horario</span>
            </div>
          </div>

          <div className="phone">
            <div className="notch"></div>
            <div className="phone-screen">
              <div className="phone-status">
                <span>9:41</span>
                <div className="icons">
                  <Icon name="signal" size={13} />
                  <Icon name="wifi" size={13} />
                  <Icon name="battery-full" size={14} />
                </div>
              </div>
              <div className="phone-header">
                <span className="av"><Icon name="zap" size={20} /></span>
                <div className="info">
                  <div className="name">Asistente BYTEC</div>
                  <div className="stat">{busy ? 'escribiendo…' : 'en línea · 24/7'}</div>
                </div>
                <Icon name="phone" size={18} />
              </div>
              <div className="phone-chat" ref={chatRef}>
                {messages.map((b, i) => (
                  <div
                    key={i}
                    className={"bub " + b.who}
                    style={{ animationDelay: i < 5 ? `${i * 0.2}s` : '0s' }}
                  >
                    {b.text}
                  </div>
                ))}
                {busy && (
                  <div className="bub typing">
                    <span></span><span></span><span></span>
                  </div>
                )}
              </div>
              <div className="phone-input">
                <input
                  className="field field-real"
                  placeholder="Escribí algo… probá 'agendar' o 'precios'"
                  value={input}
                  onChange={e => setInput(e.target.value)}
                  onKeyDown={onKey}
                  disabled={busy}
                />
                <button className="send send-btn" onClick={send} disabled={busy || !input.trim()} aria-label="Enviar">
                  <Icon name="send" size={14} />
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};
window.Hero = Hero;