// IndustrySwitcher.jsx — pestañas que reescriben el chat según industria
const IndustrySwitcher = () => {
  const industries = [
    {
      key: 'clinicas', label: 'Clínica', icon: 'stethoscope',
      brand: 'Clínica Dental Sonrisa',
      script: [
        { who: 'them', text: '¡Hola! Soy el asistente de Clínica Dental Sonrisa 🦷' },
        { who: 'us',   text: 'Tengo dolor de muela ¿hay cita hoy?' },
        { who: 'them', text: 'Sí. Dra. Vargas tiene 4pm o 6pm. ¿Cuál preferís?' },
        { who: 'us',   text: '4pm' },
        { who: 'them', text: 'Reservada ✓ Te llegó WhatsApp con dirección + recordatorio.' },
      ],
    },
    {
      key: 'restaurantes', label: 'Restaurante', icon: 'utensils-crossed',
      brand: 'Sazón Tica · Cartago',
      script: [
        { who: 'them', text: '¡Pura vida! Soy el asistente de Sazón Tica 🍴' },
        { who: 'us',   text: 'Mesa para 4 hoy 8pm' },
        { who: 'them', text: 'Tengo terraza o salón. ¿Preferencia?' },
        { who: 'us',   text: 'Terraza' },
        { who: 'them', text: 'Listo ✓ Mesa T-3, 8pm. Cancelación libre hasta las 6pm.' },
      ],
    },
    {
      key: 'servicios', label: 'Servicios', icon: 'briefcase',
      brand: 'Estudio Legal Soto',
      script: [
        { who: 'them', text: 'Hola, soy el asistente del Estudio Legal Soto.' },
        { who: 'us',   text: 'Necesito asesoría laboral, ¿costo?' },
        { who: 'them', text: 'Consulta inicial: ₡35,000 (1h). Si contratás, se descuenta. ¿Agendamos?' },
        { who: 'us',   text: 'Sí, mañana en la tarde' },
        { who: 'them', text: 'Mañana 3pm con Lic. Soto ✓ Te envío Zoom + factura proforma.' },
      ],
    },
    {
      key: 'comercios', label: 'Comercio', icon: 'shopping-bag',
      brand: 'Boutique NaturaFy',
      script: [
        { who: 'them', text: '¡Hola! Asistente de NaturaFy 🛍️ ¿Buscás algo?' },
        { who: 'us',   text: '¿Tienen el sérum de vitamina C en stock?' },
        { who: 'them', text: '¡Sí! ₡18,500. Te lo aparto o lo llevamos hoy. ¿SINPE o tarjeta?' },
        { who: 'us',   text: 'SINPE, envío a Curridabat' },
        { who: 'them', text: 'Total ₡21,500 (envío ₡3,000). Te paso el SINPE ahora 📲' },
      ],
    },
  ];

  const [active, setActive] = React.useState('clinicas');
  const current = industries.find(i => i.key === active);
  const [shown, setShown] = React.useState([]);

  React.useEffect(() => {
    setShown([]);
    let cancelled = false;
    const play = async () => {
      for (let i = 0; i < current.script.length; i++) {
        await new Promise(r => setTimeout(r, i === 0 ? 200 : 1000));
        if (cancelled) return;
        setShown(s => [...s, current.script[i]]);
      }
    };
    play();
    return () => { cancelled = true; };
  }, [active]);

  return (
    <section className="s industry-switcher" id="rubros-demo">
      <div className="container">
        <div className="s-head">
          <div className="left">
            <div className="s-eyebrow">Demo por industria</div>
            <h2 className="s-title">Tocá una industria · <span className="acc">mirá cómo cambia el bot.</span></h2>
            <p className="s-sub">No es un chatbot genérico. Cada landing trae su propio script, su tono y sus integraciones. Probá las 4.</p>
          </div>
        </div>

        <div className="is-tabs" role="tablist">
          {industries.map(it => (
            <button
              key={it.key}
              role="tab"
              aria-selected={active === it.key}
              className={"is-tab " + (active === it.key ? "is-active" : "")}
              onClick={() => setActive(it.key)}
            >
              <Icon name={it.icon} size={18}/>
              <span>{it.label}</span>
            </button>
          ))}
        </div>

        <div className="is-stage">
          <div className="is-side">
            <div className="is-brand-tag">
              <span className="dot"></span>
              <span>{current.brand}</span>
            </div>
            <h3 className="is-headline">
              {active === 'clinicas'    && 'Citas que se agendan solas, recordatorios automáticos.'}
              {active === 'restaurantes'&& 'Reservas sin llamadas, mesas siempre confirmadas.'}
              {active === 'servicios'   && 'Cotizaciones rápidas, leads que llegan calientes.'}
              {active === 'comercios'   && 'Catálogo en línea, pagos por SINPE en segundos.'}
            </h3>
            <ul className="is-feats">
              {active === 'clinicas' && <>
                <li><Icon name="check" size={16}/>Sincroniza con Google Calendar</li>
                <li><Icon name="check" size={16}/>Recordatorio 24h antes por WhatsApp</li>
                <li><Icon name="check" size={16}/>Reagendar sin llamar a recepción</li>
              </>}
              {active === 'restaurantes' && <>
                <li><Icon name="check" size={16}/>Reservas + menú digital + delivery</li>
                <li><Icon name="check" size={16}/>Avisos de mesa lista en tiempo real</li>
                <li><Icon name="check" size={16}/>Cero overbooking, cero llamadas</li>
              </>}
              {active === 'servicios' && <>
                <li><Icon name="check" size={16}/>Califica leads antes de tu agenda</li>
                <li><Icon name="check" size={16}/>Envía Zoom + factura proforma solo</li>
                <li><Icon name="check" size={16}/>Integra con tu CRM o Notion</li>
              </>}
              {active === 'comercios' && <>
                <li><Icon name="check" size={16}/>Stock en vivo, sin sobreventas</li>
                <li><Icon name="check" size={16}/>Pagos SINPE / tarjeta integrados</li>
                <li><Icon name="check" size={16}/>Recupera carritos abandonados</li>
              </>}
            </ul>
            <a href="https://wa.me/50660495999" className="btn btn-primary">
              Hablar de mi {active} <Icon name="arrow-right" size={14}/>
            </a>
          </div>

          <div className="is-phone">
            <div className="phone is-phone-frame">
              <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={current.icon} size={20}/></span>
                  <div className="info">
                    <div className="name">{current.brand}</div>
                    <div className="stat">en línea · 24/7</div>
                  </div>
                </div>
                <div className="phone-chat" key={active}>
                  {shown.map((b, i) => (
                    <div key={i} className={"bub " + b.who}>{b.text}</div>
                  ))}
                  {shown.length < current.script.length && (
                    <div className="bub typing"><span></span><span></span><span></span></div>
                  )}
                </div>
                <div className="phone-input">
                  <div className="field">Escribir mensaje…</div>
                  <span className="send"><Icon name="send" size={14}/></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};
window.IndustrySwitcher = IndustrySwitcher;