// Wasabil — "¿Cómo funciona?" datos + modal
// Datos compartidos por IntentPicker (home) y producto.jsx.

const { useState: useStateHIW, useEffect: useEffectHIW } = React;

const hiwSvg = (d, size = 32) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <path d={d} stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);
const HiwICart  = (s = 32) => hiwSvg("M3 4h2l2.4 11.2a2 2 0 0 0 2 1.6h7.2a2 2 0 0 0 2-1.6L21 7H6 M9 21a1 1 0 1 0 0-2 1 1 0 0 0 0 2z M18 21a1 1 0 1 0 0-2 1 1 0 0 0 0 2z", s);
const HiwIDoc   = (s = 32) => hiwSvg("M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z M14 3v5h5 M9 13h6 M9 17h4", s);
const HiwIGlobe = (s = 32) => hiwSvg("M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z M2 12h20 M12 2a15 15 0 0 1 0 20 M12 2a15 15 0 0 0 0 20", s);
const HiwIBank  = (s = 32) => hiwSvg("M3 10l9-6 9 6 M5 10v8 M9 10v8 M15 10v8 M19 10v8 M3 21h18", s);
const HiwISpark = (s = 32) => hiwSvg("M12 3v4 M12 17v4 M3 12h4 M17 12h4 M5.6 5.6l2.8 2.8 M15.6 15.6l2.8 2.8 M5.6 18.4l2.8-2.8 M15.6 8.4l2.8-2.8", s);
const HiwITag   = (s = 32) => hiwSvg("M21 12l-9 9-9-9 9-9h9z M16 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2z", s);
const HiwIBolt  = (s = 32) => hiwSvg("M13 3L4 14h7l-1 7 9-11h-7z", s);

const HOW_IT_WORKS = {
  facturacion: {
    title: "Emite una factura en Wasabil",
    steps: [
      { ic: HiwIDoc(),   t: "Inicias la emisión", d: "Entras a Wasabil, seleccionas tu cliente y escribes lo que vendiste. Todo desde una sola pantalla." },
      { ic: HiwISpark(), 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: HiwIBolt(),  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: HiwICart(),  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: HiwICart(),  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: HiwIBolt(),  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: HiwIDoc(),   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: HiwISpark(), 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: HiwIGlobe(), 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: HiwIBolt(),  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: HiwIDoc(),   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: HiwITag(),   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: HiwIBank(),  t: "Conectas tu cuenta corriente", d: "Link-up seguro con Santander, Chile, BCI, Itau, BICE o Scotiabank. Solo lectura — nunca movemos tu plata." },
      { ic: HiwIBolt(),  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: HiwISpark(), 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: HiwIDoc(),   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: HiwISpark(), 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: HiwIBolt(),  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: HiwIDoc(),   t: "El agente ejecuta tool-calls reales", d: "Claude usa get_financials, issue_invoice, reconcile_payments. Ve la data real, no simulaciones." },
      { ic: HiwITag(),   t: "Respuesta en menos de 500ms", d: "Todo con permisos granulares que tú defines. Auditable, reversible, seguro." },
    ],
  },
};

// Modal usado por producto.jsx (home usa el inline).
function HowItWorksModal({ flow, isOpen, onClose }) {
  const [step, setStep] = useStateHIW(0);

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

  useEffectHIW(() => {
    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="eyebrow"><span className="dot"/>¿Cómo funciona?</div>
            <h3 className="serif 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 12 M18 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-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="serif hiw-step-title">{current.t}</h4>
          <p className="hiw-step-desc">{current.d}</p>
        </div>

        <div className="hiw-nav">
          <button
            className="btn btn-ghost btn-sm"
            onClick={() => setStep(s => Math.max(0, s - 1))}
            disabled={step === 0}
            style={{ opacity: step === 0 ? 0.4 : 1 }}
          >← 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 btn-sm" href="pricing.html">Probar gratis →</a>
          ) : (
            <button className="btn btn-primary btn-sm" onClick={() => setStep(s => s + 1)}>Siguiente →</button>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { HOW_IT_WORKS, HowItWorksModal });