// Wasabil Startup — "¿Cómo funciona?" step-by-step flows + modal
// Shared between producto.jsx and intent-picker drawer.

(function () {
  const { useState, useEffect } = React;

  const HOW_IT_WORKS = {
    facturacion: {
      title: "Emite una factura en Wasabil",
      steps: [
        { ic: <IconDoc size={32}/>, t: "Inicias la emisión", d: "Entras a Wasabil, seleccionas tu cliente y escribes lo que vendiste. Todo desde una sola pantalla." },
        { ic: <IconSpark size={32}/>, t: "Validamos con SII en tiempo real", d: "Antes de emitir, Wasabil revisa el RUT, los folios y los datos con el SII. Si algo está mal, te lo avisamos al tiro." },
        { ic: <IconBolt size={32}/>, t: "Se emite en milisegundos", d: "La factura queda emitida oficialmente. Nosotros gestionamos los folios CAF por ti — nunca más te preocupas de reobtener." },
        { ic: <IconCart size={32}/>, t: "Llega al cliente automáticamente", d: "El PDF + XML se envía al correo del cliente. Queda guardado en tu cuenta y listo para tu contador." },
      ],
    },
    ecommerce: {
      title: "Cómo funciona con tu tienda online",
      steps: [
        { ic: <IconCart size={32}/>, t: "Un cliente compra en tu tienda", d: "Alguien llega al checkout de tu Shopify o Mercado Libre y termina una compra. Todo normal." },
        { ic: <IconBolt size={32}/>, t: "Wasabil recibe la venta", d: "En segundos recibimos los datos de la venta vía integración nativa. Nada de webhooks manuales ni Zapier." },
        { ic: <IconDoc size={32}/>, t: "Emitimos la boleta o factura", d: "Generamos el documento tributario correcto, lo validamos con SII y lo enviamos al comprador a su correo." },
        { ic: <IconSpark size={32}/>, t: "¿Hay devolución? Nota de crédito automática", d: "Si el cliente devuelve, detectamos el cambio en la tienda y emitimos la nota de crédito al instante. Cero trabajo manual." },
      ],
    },
    gastos: {
      title: "Cómo recuperas IVA de Google, Meta, AWS",
      steps: [
        { ic: <IconGlobe size={32}/>, t: "Conectas tu cuenta con Google/Meta/AWS", d: "En 2 minutos conectas Wasabil con los servicios digitales que ya usas. Sin credenciales raras, todo vía OAuth oficial." },
        { ic: <IconBolt size={32}/>, t: "Detectamos cada cobro", d: "Cada vez que Google te cobra por Ads o AWS por infra, Wasabil ve el cargo automáticamente y lo clasifica." },
        { ic: <IconDoc size={32}/>, t: "Generamos la factura de compra", d: "Emitimos la factura de compra al SII con la conversión USD→CLP correcta del día. Sin Excel, sin errores de tipo de cambio." },
        { ic: <IconTag size={32}/>, t: "Recuperas el IVA", d: "El IVA queda declarado como crédito fiscal en tu F29. Hasta $4.000.000 al año de vuelta a tu bolsillo." },
      ],
    },
    conciliacion: {
      title: "Cómo conciliamos tu banco",
      steps: [
        { ic: <IconBank size={32}/>, t: "Conectas tu cuenta corriente", d: "Link-up seguro con Santander, Chile, BCI, Itau, BICE o Scotiabank. Solo lectura — nunca movemos tu plata." },
        { ic: <IconBolt size={32}/>, t: "Ingresan las cartolas en vivo", d: "Cada transferencia, cargo o cobro entra a Wasabil en tiempo real. Sin esperar al cierre de mes." },
        { ic: <IconSpark size={32}/>, t: "Cruzamos con tus documentos", d: "Usamos reglas + IA para matchear cada movimiento con su boleta, factura o nota de crédito. 98% automático." },
        { ic: <IconDoc size={32}/>, t: "Listo para tu contador", d: "Exportas el libro conciliado en el formato que él espera. Adiós macros de Excel, adiós domingo trabajando." },
      ],
    },
    mcp: {
      title: "Cómo conectas Wasabil con tu agente de IA",
      steps: [
        { ic: <IconSpark size={32}/>, t: "Agregas el MCP a Claude o Cursor", d: "Copiamos 3 líneas de config en tu app de IA favorita. Listo: tu agente ya puede hablar con Wasabil." },
        { ic: <IconBolt size={32}/>, t: "Le hablas en lenguaje natural", d: "\"¿Cuánto IVA recuperable tengo este mes?\" · \"Factura a La Casa Roja por $120k\" · \"Arma el EERR del Q1\"." },
        { ic: <IconDoc size={32}/>, t: "El agente ejecuta tool-calls reales", d: "Claude usa get_financials, issue_invoice, reconcile_payments. Ve la data real, no simulaciones." },
        { ic: <IconTag size={32}/>, t: "Respuesta en menos de 500ms", d: "Todo con permisos granulares que tú defines. Auditable, reversible, seguro." },
      ],
    },
  };

  function HowItWorksModal({ flow, isOpen, onClose }) {
    const [step, setStep] = useState(0);

    useEffect(() => {
      if (isOpen) setStep(0);
    }, [isOpen, flow]);

    useEffect(() => {
      if (!isOpen) return;
      const onKey = (e) => {
        if (e.key === "Escape") onClose();
        if (e.key === "ArrowRight" && flow && step < flow.steps.length - 1) setStep(s => s + 1);
        if (e.key === "ArrowLeft" && step > 0) setStep(s => s - 1);
      };
      document.addEventListener("keydown", onKey);
      const prev = document.body.style.overflow;
      document.body.style.overflow = "hidden";
      return () => {
        document.removeEventListener("keydown", onKey);
        document.body.style.overflow = prev;
      };
    }, [isOpen, step, flow, onClose]);

    if (!flow) return null;

    const current = flow.steps[step];
    const isLast = step === flow.steps.length - 1;

    return (
      <div className={`hiw-portal ${isOpen ? "is-open" : ""}`} aria-hidden={!isOpen}>
        <div className="hiw-backdrop" onClick={onClose}/>
        <div className="hiw-sheet" role="dialog" aria-modal="true">
          <div className="hiw-header">
            <div>
              <div className="caption" style={{ color: "var(--signal)" }}>¿Cómo funciona?</div>
              <h3 className="hiw-title">{flow.title}</h3>
            </div>
            <button className="hiw-close" onClick={onClose} aria-label="Cerrar">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
                <path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
              </svg>
            </button>
          </div>

          <div className="hiw-progress">
            {flow.steps.map((_, i) => (
              <div key={i} className={`hiw-progress-bar ${i <= step ? "is-filled" : ""} ${i === step ? "is-current" : ""}`}/>
            ))}
          </div>

          <div className="hiw-body" key={step}>
            <div className="hiw-step-num mono">Paso {step + 1} de {flow.steps.length}</div>
            <div className="hiw-icon-big">{current.ic}</div>
            <h4 className="hiw-step-title">{current.t}</h4>
            <p className="hiw-step-desc">{current.d}</p>
          </div>

          <div className="hiw-nav">
            <button
              className="btn btn-ghost"
              onClick={() => setStep(s => Math.max(0, s - 1))}
              disabled={step === 0}
              style={{ opacity: step === 0 ? 0.4 : 1 }}
            >
              <ArrowLeft size={13}/> Anterior
            </button>

            <div className="hiw-dots">
              {flow.steps.map((_, i) => (
                <button
                  key={i}
                  className={`hiw-dot ${i === step ? "is-active" : ""}`}
                  onClick={() => setStep(i)}
                  aria-label={`Paso ${i + 1}`}
                />
              ))}
            </div>

            {isLast ? (
              <a className="btn btn-primary" href="pricing.html">
                <IconSpark size={13}/> Probar gratis <span className="arrow"><ArrowRight size={13}/></span>
              </a>
            ) : (
              <button className="btn btn-primary" onClick={() => setStep(s => s + 1)}>
                Siguiente <span className="arrow"><ArrowRight size={13}/></span>
              </button>
            )}
          </div>
        </div>
      </div>
    );
  }

  window.HOW_IT_WORKS = HOW_IT_WORKS;
  window.HowItWorksModal = HowItWorksModal;
})();