/* global React, Icon, WAChat, Counter */
const { useState: useTabS } = React;

const TABS = [
  {
    id: "agenda", label: "Agenda de citas", icon: "calendar",
    script: [
      { from: "client", text: "Hola, quiero agendar una cita", time: "10:02" },
      { from: "system", text: "¡Hola! Estos son los horarios disponibles hoy: 11:00 · 13:30 · 15:00", time: "10:02" },
      { from: "client", text: "Me viene bien 15:00", time: "10:03" },
      { from: "system", text: "Cita confirmada para hoy 15:00 ✅ Te enviaré un recordatorio.", time: "10:03" },
    ],
  },
  {
    id: "proforma", label: "Proforma automática", icon: "doc",
    script: [
      { from: "client", text: "Necesito una cotización de 3 escritorios ejecutivos", time: "11:20" },
      { from: "system", text: "Con gusto. ¿A nombre de qué empresa la emitimos?", time: "11:20" },
      { from: "client", text: "Importadora del Sur", time: "11:21" },
      { from: "system", text: "Listo 📄 Generé tu proforma N.º P-0241 con el detalle.", time: "11:21" },
    ],
  },
  {
    id: "tracking", label: "Seguimiento de pedido", icon: "track",
    script: [
      { from: "client", text: "Mi código de seguimiento es STX-58213", time: "16:45" },
      { from: "system", text: "Tu pedido está en camino 🚚", time: "16:45" },
      { from: "system", text: "Última ubicación: Centro de distribución Lima. Entrega estimada: mañana.", time: "16:45" },
    ],
  },
];

function AgendaVisual() {
  const slots = [
    { t: "11:00", s: "ocupado" }, { t: "13:30", s: "ocupado" },
    { t: "15:00", s: "nuevo" }, { t: "17:30", s: "libre" },
  ];
  return (
    <div className="demoviz">
      <div className="demoviz__head"><Icon name="calendar" size={18} /> Agenda · Hoy</div>
      <div className="agenda">
        {slots.map((sl, i) => (
          <div key={sl.t} className={"agenda__slot agenda__slot--" + sl.s} style={{ animationDelay: 0.4 + i * 0.18 + "s" }}>
            <span className="agenda__time">{sl.t}</span>
            <span className="agenda__bar" />
            <span className="agenda__tag">
              {sl.s === "nuevo" ? "Reservado ✓" : sl.s === "ocupado" ? "Ocupado" : "Disponible"}
            </span>
          </div>
        ))}
      </div>
      <div className="demoviz__foot"><Icon name="check" size={15} /> Cita registrada y recordatorio programado</div>
    </div>
  );
}

function ProformaVisual() {
  const rows = [
    { d: "Escritorio ejecutivo", q: "3", p: "S/ 1,290" },
    { d: "Instalación", q: "1", p: "S/ 120" },
  ];
  return (
    <div className="demoviz">
      <div className="demoviz__head"><Icon name="doc" size={18} /> Proforma N.º P-0241</div>
      <div className="proforma">
        <div className="proforma__to">
          <span>Cliente</span><b>Importadora del Sur</b>
        </div>
        <div className="proforma__rows">
          <div className="proforma__rowh"><span>Detalle</span><span>Cant.</span><span>Importe</span></div>
          {rows.map((r, i) => (
            <div key={r.d} className="proforma__row" style={{ animationDelay: 0.5 + i * 0.25 + "s" }}>
              <span>{r.d}</span><span>{r.q}</span><span>{r.p}</span>
            </div>
          ))}
        </div>
        <div className="proforma__total" style={{ animationDelay: "1.1s" }}>
          <span>Total</span><b>S/ <Counter end={1410} /></b>
        </div>
      </div>
      <div className="demoviz__foot"><Icon name="send" size={15} /> Proforma enviada al cliente</div>
    </div>
  );
}

function TrackingVisual() {
  const steps = [
    { l: "Pedido recibido", done: true },
    { l: "En preparación", done: true },
    { l: "En camino", done: true, now: true },
    { l: "Entregado", done: false },
  ];
  return (
    <div className="demoviz">
      <div className="demoviz__head"><Icon name="track" size={18} /> Seguimiento · STX-58213</div>
      <div className="tracking">
        {steps.map((s, i) => (
          <div key={s.l} className={"tracking__step" + (s.done ? " is-done" : "") + (s.now ? " is-now" : "")} style={{ animationDelay: 0.4 + i * 0.2 + "s" }}>
            <span className="tracking__dot">{s.done ? <Icon name="check" size={12} stroke={3} /> : null}</span>
            <span className="tracking__label">{s.l}</span>
            {s.now && <span className="tracking__pill"><Icon name="location" size={12} /> Lima</span>}
          </div>
        ))}
      </div>
      <div className="demoviz__foot"><Icon name="clock" size={15} /> Entrega estimada: mañana</div>
    </div>
  );
}

const VIZ = { agenda: AgendaVisual, proforma: ProformaVisual, tracking: TrackingVisual };

function Experiences() {
  const [tab, setTab] = useTabS("agenda");
  const current = TABS.find((t) => t.id === tab);
  const Viz = VIZ[tab];
  return (
    <section className="section section--soft" id="experiencias">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Experiencias automatizadas</span>
          <h2 className="section-title">Mira cómo se siente en la práctica</h2>
          <p className="section-sub">Tres situaciones reales, resueltas automáticamente de principio a fin.</p>
        </div>

        <div className="exp-tabs reveal">
          {TABS.map((t) => (
            <button key={t.id} className={"exp-tab" + (t.id === tab ? " is-active" : "")} onClick={() => setTab(t.id)}>
              <Icon name={t.icon} size={18} /> {t.label}
            </button>
          ))}
        </div>

        <div className="exp-stage reveal" key={tab}>
          <div className="exp-phone">
            <PhoneFrame width={252}>
              <WAChat title="STAMINEX" subtitle="en línea" script={current.script} statusBar fill />
            </PhoneFrame>
          </div>
          <div className="exp-viz"><Viz /></div>
        </div>
      </div>
    </section>
  );
}

window.Experiences = Experiences;