const SCENARIOS = [
  {
    id: "inmobiliaria",
    biz: "Inmobiliaria",
    bizItalic: "barrial",
    Icon: IconBuilding,
    tagline: "Zona Norte, 6 agentes.",
    problem: "El teléfono y WhatsApp no paran. Los agentes contestan lo mismo 40 veces por día y se pierden consultas los fines de semana.",
    solution: "Un bot que responde consultas frecuentes (precio, ubicación, disponibilidad), pre-califica al lead (compra / alquiler, presupuesto, zona) y agenda visita en la agenda del agente más cercano.",
    resultNum: "+34%",
    resultText: "de visitas agendadas, y fines de semana que ya no se pierden.",
    chat: [
      { side: "in", text: "Hola, vi la propiedad de Av. Libertador. ¿Está disponible?", time: "21:14", delay: 300 },
      { side: "out", text: "¡Hola! Sí, está disponible. Es un 2 ambientes con balcón, USD 185.000. ¿Es para compra o alquiler?", time: "21:14", check: true, typingBefore: 1200 },
      { side: "in", text: "Compra. ¿Se puede ir a verla el sábado?", time: "21:15", delay: 1200 },
      { side: "out", text: "Perfecto. Tengo sábado a las 11 o a las 15. ¿Cuál te queda mejor?", time: "21:15", check: true, typingBefore: 1400 },
      { side: "in", text: "A las 11", time: "21:16", delay: 1100 },
      { side: "out", text: "Listo, te espera Laura en la puerta. Te mandé la ubicación y un recordatorio para el viernes.", time: "21:16", check: true, typingBefore: 1500 },
    ],
  },
  {
    id: "clinica",
    biz: "Clínica",
    bizItalic: "odontológica",
    Icon: IconHeart,
    tagline: "3 consultorios, obra social mixta.",
    problem: "La secretaria pasa 4 horas al día agendando turnos, cancelando y reprogramando. El 20% de los turnos se pierden por no confirmar.",
    solution: "Bot que agenda, confirma el día anterior, reprograma si hace falta, avisa cuáles obras sociales se atienden. Integrado con el calendario de cada profesional.",
    resultNum: "−4 hs",
    resultText: "diarias de agenda manual, y ausentismo bajó del 20% al 6%.",
    chat: [
      { side: "in", text: "Buen día, necesito un turno para limpieza", time: "09:02", delay: 300 },
      { side: "out", text: "¡Hola! Soy la asistente de la clínica. ¿Tenés obra social o es particular?", time: "09:02", check: true, typingBefore: 1200 },
      { side: "in", text: "OSDE", time: "09:02", delay: 1000 },
      { side: "out", text: "Perfecto, atendemos OSDE. Para limpieza tengo martes 14hs con la Dra. Paz o jueves 18hs con el Dr. Luna.", time: "09:03", check: true, typingBefore: 1500 },
      { side: "in", text: "Jueves 18", time: "09:03", delay: 900 },
      { side: "out", text: "Reservado ✅. Te mando recordatorio el miércoles. ¿Me confirmás tu nombre completo y DNI?", time: "09:03", check: true, typingBefore: 1400 },
    ],
  },
  {
    id: "ecommerce",
    biz: "E-commerce",
    bizItalic: "de indumentaria",
    Icon: IconShop,
    tagline: "Tiendanube, ~300 pedidos/mes.",
    problem: "El 40% de los mensajes son '¿dónde está mi pedido?'. El resto son consultas de talles y stock. La dueña contesta hasta la medianoche.",
    solution: "Bot conectado a Tiendanube: responde estado del pedido con solo el número, chequea stock en vivo, recomienda talles. Si hay un problema real, deriva a humano con el contexto ya cargado.",
    resultNum: "−78%",
    resultText: "de mensajes que llegan a un humano. La dueña duerme.",
    chat: [
      { side: "in", text: "Hola! Dónde está mi pedido?", time: "23:41", delay: 300 },
      { side: "out", text: "¡Hola! Pasame el número de pedido o el mail con el que compraste 📦", time: "23:41", check: true, typingBefore: 1200 },
      { side: "in", text: "#8842", time: "23:41", delay: 900 },
      { side: "out", text: "Lo tengo. Tu pedido salió ayer por Andreesmart, código TRK-4291. Llega mañana o pasado a Palermo.", time: "23:42", check: true, typingBefore: 1500 },
      { side: "in", text: "Dale gracias! Aprovecho, tienen el jean Nora en 28?", time: "23:42", delay: 1300 },
      { side: "out", text: "Sí, tengo 3 en stock. ¿Te guardo uno o querés ver cómo le queda al modelo?", time: "23:42", check: true, typingBefore: 1500 },
    ],
  },
];

function Scenarios() {
  const [active, setActive] = React.useState(0);
  const s = SCENARIOS[active];
  return (
    <section id="casos" className="scenarios">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">Escenarios de aplicación</span>
            <h2 className="section-title">Así se <em>siente</em> cuando andan.</h2>
          </div>
          <p className="section-lead">
            Tres casos hipotéticos basados en conversaciones reales que ya tuvimos. Elegí uno y mirá el flujo completo.
          </p>
        </div>

        <div className="scn-tabs">
          {SCENARIOS.map((sc, i) => (
            <button key={sc.id} className={`scn-tab ${i === active ? "active" : ""}`} onClick={() => setActive(i)}>
              <sc.Icon size={14} />
              {sc.biz} {sc.bizItalic}
            </button>
          ))}
        </div>

        <div className="scn-stage" key={active}>
          <div className="scn-info">
            <div>
              <span className="pill"><span className="pill-dot"></span>{s.tagline}</span>
            </div>
            <h3 className="scn-biz">{s.biz} <em>{s.bizItalic}</em></h3>

            <div className="scn-row">
              <span className="scn-row-label">Problema</span>
              <p className="scn-row-text" style={{margin:0}}>{s.problem}</p>
            </div>

            <div className="scn-row">
              <span className="scn-row-label">Solución</span>
              <p className="scn-row-text" style={{margin:0}}>{s.solution}</p>
            </div>

            <div className="scn-result">
              <span className="scn-result-num">{s.resultNum}</span>
              <span>{s.resultText}</span>
            </div>
          </div>

          <div style={{display:"flex", justifyContent:"center", alignItems:"flex-start", padding:"0 10px"}}>
            <AnimatedChat
              name={`${s.biz} ${s.bizItalic}`}
              status="asistente · online"
              avatar={<s.Icon size={18} />}
              script={s.chat}
              badge="simulación"
            />
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Scenarios });