// Wasabil — Intent Picker (acordeón inline)
// 6 cards. Click → la card se expande mostrando descripción + pasos "Cómo funciona".

const { useState: useStateIP } = React;

const ipSvg = (d, size = 22) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <path d={d} stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);
const IpIconCart  = ({ size = 22 }) => ipSvg("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", size);
const IpIconDoc   = ({ size = 22 }) => ipSvg("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", size);
const IpIconGlobe = ({ size = 22 }) => ipSvg("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", size);
const IpIconBank  = ({ size = 22 }) => ipSvg("M3 10l9-6 9 6 M5 10v8 M9 10v8 M15 10v8 M19 10v8 M3 21h18", size);
const IpIconSpark = ({ size = 22 }) => ipSvg("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", size);
const IpIconTag   = ({ size = 22 }) => ipSvg("M21 12l-9 9-9-9 9-9h9z M16 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2z", size);
const IpArrowR    = ({ size = 13 }) => ipSvg("M5 12h14 M13 5l7 7-7 7", size);
const IpArrowUR   = ({ size = 14 }) => ipSvg("M7 17L17 7 M9 7h8v8", size);
const IpPlus      = ({ size = 18 }) => ipSvg("M12 5v14M5 12h14", size);

const ipDet = (d) => ipSvg(d, 14);

const INTENTS = [
  {
    id: "facturacion", flowKey: "facturacion",
    cardTitle: "Automatización de documentos",
    cardIcon: <IpIconDoc/>,
    label: "Quiero automatizar mis documentos tributarios",
    eyebrow: "01 · Facturación",
    title: "Facturación que aprende cómo trabajas.",
    copy: "Emite boletas, facturas, notas de crédito y débito sin pensarlo. Validamos con el SII en milisegundos, reobtención automática de folios, emisión de boletas de tercero y mucho más.",
    details: [
      { icon: ipDet("M5 12l5 5L20 7"), title: "Validación en tiempo real con SII", desc: "Cada documento se valida antes de emitirse. Si algo está mal, lo corregimos por ti." },
      { icon: ipDet("M12 5v14M5 12h14"), title: "Boletas, facturas, notas, guías", desc: "Todo el catálogo de documentos tributarios electrónicos. Sin licencias aparte." },
      { icon: ipDet("M3 9h18M9 21V9"), title: "Reobtención automática de folios", desc: "Nosotros gestionamos los folios CAF. Tú solo emite." },
      { icon: ipDet("M20 6L9 17l-5-5"), title: "Boletas de tercero", desc: "Emite a nombre de tus clientes o proveedores sin salir de Wasabil." },
    ],
  },
  {
    id: "ecommerce", flowKey: "ecommerce",
    cardTitle: "Facturación para e-commerce",
    cardIcon: <IpIconCart/>,
    label: "Tengo un eCommerce — vendo en Shopify o Mercado Libre",
    eyebrow: "02 · eCommerce",
    title: "eCommerce resuelto al 100%.",
    copy: "La razón por la que las marcas top de Chile nos eligen. Conectas tu tienda y cada venta — manual, marketplace o POS — genera su documento automáticamente. Cuando hay una devolución, la nota de crédito se emite sola.",
    details: [
      { icon: ipDet("M3 3h18v18H3z M3 9h18 M9 21V9"), title: "Shopify, Mercado Libre y Falabella", desc: "Integraciones nativas. Cero código. 10 minutos de setup." },
      { icon: ipDet("M4 4v16h16"), title: "Factura en el checkout (cualquier plan de Shopify)", desc: "El cliente sale del carro con su documento tributario ya emitido y en su correo." },
      { icon: ipDet("M9 11l3 3L22 4"), title: "Notas de crédito automáticas", desc: "Cada cambio o devolución emite la nota de crédito al instante. Sin conciliación manual." },
      { icon: ipDet("M3 12h18"), title: "Próximamente: Paris, Walmart, Ripley", desc: "Normalizamos los datos de cada marketplace y emitimos por ti." },
    ],
  },
  {
    id: "gastos", flowKey: "gastos",
    cardTitle: "Recuperar IVA",
    cardIcon: <IpIconGlobe/>,
    label: "Pago Google, Meta o AWS — quiero recuperar IVA",
    eyebrow: "03 · Gastos extranjeros",
    title: "Recupera el IVA que Google, Meta y otros no te avisan.",
    copy: "Nos integramos directo con los servicios digitales extranjeros que usas — Google, Meta, Shopify, AWS. Por cada cobro generamos la factura de compra, la declaramos al SII y recuperas el IVA.",
    details: [
      { icon: ipDet("M12 2v20M2 12h20"), title: "Integración nativa con los servicios", desc: "Conectamos Google, Meta, Shopify, AWS y más. Nada de subir facturas a mano." },
      { icon: ipDet("M9 11l3 3L22 4"), title: "Factura de compra emitida al SII", desc: "Generamos y declaramos por ti. Con conversión USD → CLP correcta." },
      { icon: ipDet("M3 3l18 18"), title: "$4.000.000 de ahorro anual promedio", desc: "Incluyendo crédito fiscal IVA + rebaja de impuesto a la renta." },
    ],
  },
  {
    id: "banco", flowKey: "conciliacion",
    cardTitle: "Conciliación bancaria",
    cardIcon: <IpIconBank/>,
    label: "Mi banco es un desastre — necesito conciliar",
    eyebrow: "04 · Conciliación bancaria",
    title: "Tu banco, conciliado automáticamente.",
    copy: "Conectamos tu cuenta corriente y cruzamos cada movimiento con sus documentos tributarios. Pagos, cobros, reembolsos, comisiones — todo identificado y matcheado en segundos. Dejas de vivir en Excel.",
    details: [
      { icon: ipDet("M3 3h18v18H3z M3 9h18 M9 21V9"), title: "Integración con los principales bancos", desc: "Santander, Chile, BCI, Itau, BICE, Scotiabank. Sincronización en tiempo real." },
      { icon: ipDet("M9 11l3 3L22 4"), title: "Matching automático al 98%", desc: "Cruzamos transferencias y cartolas con tus documentos. Asocia automática y manualmente." },
      { icon: ipDet("M20 6L9 17l-5-5"), title: "Listo para tu contador", desc: "Export en el formato que él espera. Menos ida y vuelta, menos tiempo perdido." },
    ],
  },
  {
    id: "mcp", flowKey: "mcp",
    cardTitle: "Conectar IA",
    cardIcon: <IpIconSpark/>,
    label: "Quiero facturar con IA — desde Claude o Cursor",
    eyebrow: "05 · MCP & API",
    title: "El primer facturador con MCP.",
    copy: "Wasabil expone un Model Context Protocol nativo. Claude, Cursor o tu agente custom pueden consultar, emitir y conciliar documentos hablando con Wasabil como si fuera un compañero de equipo.",
    details: [
      { icon: ipDet("M13 2L3 14h9l-1 8 10-12h-9z"), title: "Tool-calls pre-construidos", desc: "get_financials, issue_invoice, reconcile_payments, list_expenses. Todos documentados." },
      { icon: ipDet("M4 6h16M4 12h10M4 18h16"), title: "Reportería personalizada", desc: "Propuesta de F29, F22, cash-flow — lo que se te ocurra. Tu agente lo arma en minutos." },
      { icon: ipDet("M12 2a10 10 0 100 20 10 10 0 000-20z M12 6v6l4 2"), title: "Respuestas en tiempo real", desc: "Latencia < 500ms. Funciona como pedir un dato en Slack." },
      { icon: ipDet("M20 6L9 17l-5-5"), title: "Permisos granulares", desc: "Define qué puede ver y hacer cada agente. Auditable, reversible, seguro." },
    ],
  },
  {
    id: "precios", flowKey: null,
    cardTitle: "Planes",
    cardIcon: <IpIconTag/>,
    label: "Solo muéstrame los precios",
    eyebrow: "Precios · sin contratos",
    title: "Desde $34.990/mes. Sin permanencia.",
    copy: "Tres planes simples. Empieza gratis, crece sin sorpresas. Cancela en un click cuando quieras.",
    details: [
      { icon: ipDet("M12 2v20"), title: "Growth · $34.990/mes", desc: "Empresas con pocas ventas que declaran gastos en el extranjero. 500 docs/mes + 10 servicios digitales." },
      { icon: ipDet("M12 2v20"), title: "Full · $79.990/mes · popular", desc: "Empresas consolidadas. 1.500 docs/mes + 30 servicios digitales + soporte ilimitado." },
      { icon: ipDet("M12 2v20"), title: "Unlimited · $119.990/mes", desc: "Empresas que emiten mucho. 5.000 docs/mes + servicios digitales ilimitados." },
    ],
  },
];

function IntentPicker() {
  const [active, setActive] = useStateIP(null);
  const [hiwFlow, setHiwFlow] = useStateIP(null);
  const toggle = (id) => setActive(curr => curr === id ? null : id);
  const HiwModal = window.HowItWorksModal;
  const flowData = hiwFlow && window.HOW_IT_WORKS ? window.HOW_IT_WORKS[hiwFlow] : null;

  return (
    <section className="ip-shell">
      <div className="container-wide">
        <div className="ip-head" data-reveal>
          <div className="eyebrow"><span className="dot"/>¿En qué puedo ayudarte?</div>
          <h2 className="display-2 serif" style={{ marginTop: 16, maxWidth: "22ch" }}>
            Elige lo que necesitas <em className="italic">y te muestro cómo funciona.</em>
          </h2>
          <p className="lede" style={{ marginTop: 16, maxWidth: "56ch" }}>
            Cada caso abre un detalle paso a paso. Sin demos infinitas, sin formularios — entiende Wasabil en 30 segundos.
          </p>
        </div>

        <div className="ip-grid" data-reveal-stagger="70">
          {INTENTS.map((it, i) => {
            const isOpen = active === it.id;
            return (
              <article key={it.id} className={`ip-card ${isOpen ? "is-open" : ""}`} data-reveal>
                <button
                  type="button"
                  className="ip-card-trigger"
                  onClick={() => toggle(it.id)}
                  aria-expanded={isOpen}
                >
                  <div className="ip-card-head">
                    <span className="ip-card-icon">{it.cardIcon}</span>
                    <span className="ip-card-num mono">0{i + 1}</span>
                  </div>
                  <div className="ip-card-body">
                    <div className="ip-card-title">{it.cardTitle}</div>
                    <div className="ip-card-label">{it.label}</div>
                  </div>
                  <div className="ip-card-foot">
                    <span className="ip-card-hint">{it.eyebrow.split(" · ")[1] || it.eyebrow}</span>
                    <span className="ip-card-arrow" aria-hidden="true">
                      {isOpen ? <IpPlus size={16}/> : <IpArrowUR/>}
                    </span>
                  </div>
                </button>

                {isOpen && (
                  <div className="ip-card-panel">
                    <div className="ip-panel-head">
                      <h3 className="display-3 serif">{it.title}</h3>
                      <p className="lede">{it.copy}</p>
                    </div>

                    <ul className="ip-details">
                      {it.details.map((d, i2) => (
                        <li key={i2}>
                          <span className="ip-detail-icon">{d.icon}</span>
                          <div>
                            <div className="ip-detail-title">{d.title}</div>
                            <div className="ip-detail-desc">{d.desc}</div>
                          </div>
                        </li>
                      ))}
                    </ul>

                    <div className="ip-ctas">
                      <a className="btn btn-primary" href="pricing.html">
                        {it.id === "precios" ? "Ver los 4 planes" : "Probar gratis"}
                        <span className="arrow"><IpArrowR/></span>
                      </a>
                      {it.flowKey && window.HOW_IT_WORKS && window.HOW_IT_WORKS[it.flowKey] && (
                        <button
                          type="button"
                          className="hiw-trigger"
                          onClick={() => setHiwFlow(it.flowKey)}
                        >
                          <span className="hiw-trigger-icon" aria-hidden="true">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
                              <path d="M5 13l4 4L19 7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
                            </svg>
                          </span>
                          <span className="hiw-trigger-text">
                            <span className="hiw-trigger-label">Ve cómo funciona</span>
                            <span className="hiw-trigger-sub">Paso a paso</span>
                          </span>
                          <span className="hiw-trigger-arrow" aria-hidden="true">
                            <svg width="13" height="13" viewBox="0 0 24 24" fill="none">
                              <path d="M5 12h14 M13 5l7 7-7 7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
                            </svg>
                          </span>
                        </button>
                      )}
                      <button
                        type="button"
                        className="btn btn-ghost"
                        onClick={() => setActive(null)}
                      >
                        Cerrar
                      </button>
                    </div>
                  </div>
                )}
              </article>
            );
          })}
        </div>
      </div>
      {HiwModal && (
        <HiwModal flow={flowData} isOpen={!!hiwFlow} onClose={() => setHiwFlow(null)}/>
      )}
    </section>
  );
}

function HowItWorksInline({ flow }) {
  const [step, setStep] = useStateIP(0);
  if (!flow) return null;
  const total = flow.steps.length;
  const current = flow.steps[step];

  return (
    <div className="ip-hiw">
      <div className="ip-hiw-head">
        <div className="caption mono">¿Cómo funciona?</div>
        <div className="ip-hiw-counter mono">Paso {step + 1} de {total}</div>
      </div>
      <div className="ip-hiw-progress">
        {flow.steps.map((_, i) => (
          <div key={i} className={`ip-hiw-bar ${i <= step ? "is-filled" : ""}`}/>
        ))}
      </div>
      <div className="ip-hiw-body" key={step}>
        <div className="ip-hiw-icon">{current.ic}</div>
        <div className="ip-hiw-text">
          <div className="ip-hiw-title">{current.t}</div>
          <div className="ip-hiw-desc">{current.d}</div>
        </div>
      </div>
      <div className="ip-hiw-nav">
        <button
          type="button"
          className="ip-hiw-btn"
          onClick={() => setStep(s => Math.max(0, s - 1))}
          disabled={step === 0}
        >← Anterior</button>
        <div className="ip-hiw-dots">
          {flow.steps.map((_, i) => (
            <button
              key={i}
              type="button"
              className={`ip-hiw-dot ${i === step ? "is-active" : ""}`}
              onClick={() => setStep(i)}
              aria-label={`Paso ${i + 1}`}
            />
          ))}
        </div>
        <button
          type="button"
          className="ip-hiw-btn"
          onClick={() => setStep(s => Math.min(total - 1, s + 1))}
          disabled={step === total - 1}
        >Siguiente →</button>
      </div>
    </div>
  );
}

Object.assign(window, { IntentPicker, INTENTS });