// Intent Picker — the hero
// "¿En qué puedo ayudarte?" · 6 options · click collapses others into a breadcrumb,
// focused panel reveals content for that intent.

// Icon path helper — thin line paths used in vertical details
const iconPath = (d) => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
    <path d={d} stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const INTENTS = [
  {
    id: "ecommerce",
    flowKey: "ecommerce",
    cardTitle: "Facturación para e-commerce",
    cardIcon: <IconCart size={22}/>,
    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: iconPath("M3 3h18v18H3z M3 9h18 M9 21V9"), title: "Shopify y Mercado Libre", desc: "Integraciones nativas. Cero código. 10 minutos de setup." },
      { icon: iconPath("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: iconPath("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: iconPath("M3 12h18"), title: "Próximamente: Falabella, Paris, Walmart, Ripley", desc: "Normalizamos los datos de cada marketplace y emitimos por ti." },
    ],
    demo: "ecommerce",
  },
  {
    id: "facturacion",
    flowKey: "facturacion",
    cardTitle: "Automatización de documentos",
    cardIcon: <IconDoc size={22}/>,
    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: iconPath("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: iconPath("M12 5v14M5 12h14"), title: "Boletas, facturas, notas, guías", desc: "Todo el catálogo de documentos tributarios electrónicos. Sin licencias aparte." },
      { icon: iconPath("M3 9h18M9 21V9"), title: "Reobtención automática de folios", desc: "Nosotros gestionamos los folios CAF. Tú solo emite." },
      { icon: iconPath("M20 6L9 17l-5-5"), title: "Boletas de tercero", desc: "Emite a nombre de tus clientes o proveedores sin salir de Wasabil." },
    ],
    demo: "invoice",
  },
  {
    id: "gastos",
    flowKey: "gastos",
    cardTitle: "Recuperar IVA",
    cardIcon: <IconGlobe size={22}/>,
    label: "Pago Google, Meta o AWS — quiero recuperar IVA",
    eyebrow: "03 · Gastos extranjeros",
    title: "Recupera el IVA que Google no te avisa.",
    copy: "Nos integramos directo con los servicios digitales que usas — Google, Meta, Shopify, AWS. Por cada cobro generamos la factura de compra, la declaramos al SII y recuperas el IVA.",
    details: [
      { icon: iconPath("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: iconPath("M9 11l3 3L22 4"), title: "Factura de compra emitida al SII", desc: "Generamos y declaramos por ti. Con conversión USD → CLP correcta." },
      { icon: iconPath("M3 3l18 18M3 21L21 3"), title: "$4.000.000 de ahorro anual promedio", desc: "Incluyendo crédito fiscal IVA + rebaja de impuesto a la renta." },
    ],
    demo: "expenses",
  },
  {
    id: "banco",
    flowKey: "banco",
    cardTitle: "Conciliación bancaria",
    cardIcon: <IconBank size={22}/>,
    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: iconPath("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: iconPath("M9 11l3 3L22 4"), title: "Matching automático al 98%", desc: "Cruzamos transferencias y cartolas con tus documentos. Asocia automática y manualmente." },
      { icon: iconPath("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." },
    ],
    demo: "bank",
  },
  {
    id: "mcp",
    flowKey: "mcp",
    cardTitle: "Conectar IA",
    cardIcon: <IconSpark size={22}/>,
    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: iconPath("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: iconPath("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: iconPath("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: iconPath("M20 6L9 17l-5-5"), title: "Permisos granulares", desc: "Define qué puede ver y hacer cada agente. Auditable, reversible, seguro." },
    ],
    demo: "mcp",
  },
  {
    id: "precios",
    cardTitle: "Planes",
    cardIcon: <IconTag size={22}/>,
    label: "Solo muéstrame los precios",
    eyebrow: "Precios · sin contratos",
    title: "Desde $10.990/mes. Sin permanencia.",
    copy: "Tres planes simples. Empieza gratis, crece sin sorpresas. Cancela en un click cuando quieras.",
    details: [
      { icon: iconPath("M12 2v20M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"), title: "Mini · $10.990/mes", desc: "Para empresas que recién comienzan. 10 documentos/mes + 3 servicios digitales." },
      { icon: iconPath("M12 2v20M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"), title: "Growth · $27.990/mes", desc: "Empresas con pocas ventas que declaran gastos en el extranjero. 500 docs/mes + 10 servicios digitales." },
      { icon: iconPath("M12 2v20M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"), title: "Full · $63.990/mes · popular", desc: "Empresas consolidadas. 1.500 docs/mes + 30 servicios digitales + soporte ilimitado." },
      { icon: iconPath("M12 2v20M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"), title: "Unlimited · $95.990/mes", desc: "Empresas que emiten mucho. 5.000 docs/mes + servicios digitales ilimitados." },
    ],
    demo: "pricing",
  },
];

// Keyword bank — expanded with Chilean slang, synonyms, common typos, colloquial speech
const SEARCH_KEYWORDS = {
  ecommerce: [
    // plataformas
    "ecommerce","e-commerce","e commerce","comercio electronico","comercio electrónico",
    "tienda","tienda online","tienda virtual","mi tienda","mitienda",
    "shopify","shopyfy","shopi",
    "mercado libre","mercadolibre","meli","mercadolivre","mercado-libre",
    "marketplace","marketplaces","plaza","marketspace",
    "woocommerce","wocomerce","jumpseller","tiendanube",
    // ventas
    "venta online","ventas online","venta por internet","vender online","vender por internet",
    "vendo online","vendo en internet","vendo en shopify","vendo en mercado",
    "ventas digitales","ventas en linea","ventas en línea",
    "vender","vendedor","emprendedor","emprendimiento",
    // checkout
    "checkout","carrito","carro","carro de compra","pago online","pagar online",
    "compra online","compras online","cliente compra","compró",
    // docs auto
    "boleta automatica","boleta automática","factura automatica","factura automática",
    "emision automatica","emisión automática","documento automatico","documento automático",
    // devoluciones
    "devolucion","devolución","devoluciones","devolver","retorno","reembolso","reembolsar",
    "nota de credito","nota de crédito","notas de credito","nota credito",
    "cambio","cambio de producto","cambios",
    // pos
    "punto de venta","pos","caja","venta presencial",
  ],
  facturacion: [
    // doc types
    "facturacion","facturación","factura","facturar","facturo","facturas","emitir factura",
    "boleta","boletas","emitir boleta","boleta electronica","boleta electrónica",
    "nota de debito","nota de débito","notas de debito","guia de despacho","guía de despacho",
    "guias","guías","documento tributario","documentos tributarios","dte","dtes",
    // actions
    "automatizar","automatizar factura","automatizar facturas","automatizar documentos",
    "automatizar boletas","automatizar mis facturas","automatizar mis boletas",
    "emitir","emite","emision","emisión","emito","emitir electronico","emitir electrónico",
    "electronica","electrónica","electronico","electrónico",
    // SII
    "sii","servicio de impuestos","impuestos internos",
    "folio","folios","caf","reobtener folios",
    // problems
    "no quiero emitir","me olvido","se me olvidan","perdiendo tiempo","harto tiempo",
    "ayuda con facturas","ayuda con boletas","manejar facturas","gestionar facturas",
    "facturador","facturador electronico","facturador electrónico","sistema de facturacion","sistema de facturación",
    // nuestro facturador
    "bsale","openfactura","lioren","cambiar facturador",
    // boletas de tercero
    "boleta de tercero","boletas de tercero","emitir a nombre de",
    // validación
    "validar factura","error sii","rechazo sii","rechazada","rechazado",
  ],
  gastos: [
    // iva
    "iva","recuperar iva","recupero iva","recupera iva","me devuelvan iva","devolucion iva","devolución iva",
    "credito fiscal","crédito fiscal","credito iva","crédito iva",
    "f29","formulario 29","declarar iva",
    "pagar menos iva","menos iva","ahorro iva","ahorrar iva","iva pagado",
    // servicios digitales
    "servicio digital","servicios digitales","gasto digital","gastos digitales",
    "gasto extranjero","gastos extranjeros","gasto en el extranjero","gastos en el extranjero",
    "extranjero","fuera de chile","afuera","servicios afuera",
    // empresas
    "google","google ads","google workspace","google cloud","gsuite","gmail corporativo",
    "meta","facebook","facebook ads","instagram ads","instagram","whatsapp business","wsp business",
    "aws","amazon web services","amazon",
    "openai","chatgpt","chat gpt","anthropic","api de claude",
    "microsoft","azure","office 365","microsoft 365",
    "shopify plus","shopify pro",
    "stripe","paypal","mercado pago",
    "notion","slack","figma","adobe","canva pro",
    "netflix","spotify","zoom","linkedin premium",
    // dolares
    "dolar","dólar","dolares","dólares","usd","en dolares","en dólares","factura en dolares","factura en dólares",
    "conversion","conversión","tipo de cambio","cambio de moneda",
    // factura de compra
    "factura de compra","factura de compras","fc","emitir factura de compra",
    // ahorro
    "ahorro","ahorrar","ahorros","me ahorro","dejar de pagar","pagar menos",
    "plata de vuelta","plata de regreso","devolver plata","me devuelvan plata",
  ],
  banco: [
    // concept
    "conciliacion","conciliación","conciliar","concilio","conciliando","conciliarlo",
    "cruzar","cruce","cruce bancario","cuadrar","cuadrar caja","cuadrar cuenta",
    // banco
    "banco","bancaria","bancario","cuenta corriente","cuenta","ctacte","cta corriente",
    "cartola","cartolas","estado de cuenta","estados de cuenta","movimientos",
    // bancos chile
    "santander","chile","banco de chile","bci","itau","itaú","bice","scotiabank","scotia",
    "bancoestado","banco estado","estado","falabella","ripley","security","consorcio",
    // transactions
    "transferencia","transferencias","tef","tef bancaria","deposito","depósito","depósitos",
    "cheque","cheques","abono","cargo","cargos","comision bancaria","comisión bancaria",
    "movimiento","movimientos","movimiento bancario","movimientos bancarios",
    // pain
    "desastre","mi banco","mi cuenta","vivir en excel","excel","planilla","macro",
    "muchas transferencias","no identifico","no se que es","no sé qué es",
    "perdido","perdido con el banco","sin orden","desordenada","desordenado",
    "caja chica","flujo de caja","cash flow","flujo",
  ],
  mcp: [
    // ai terms
    "ia","ai","inteligencia artificial","inteligencia artifical","i.a.",
    "agente","agente ia","agente ai","agente de ia","agente inteligente",
    "bot","chatbot","asistente","asistente virtual","copilot",
    "llm","modelo de lenguaje","gpt","transformer",
    // models
    "claude","cloud","claud","antropic","anthropic",
    "cursor","cursor ai","cursor ide",
    "chatgpt","chat gpt","openai","open ai",
    "gemini","copilot","perplexity","grok",
    // mcp
    "mcp","model context protocol","servidor mcp","protocol",
    "tool","tool call","tool-call","tool use","herramienta",
    // api
    "api","api wasabil","integracion api","integración api","integrar api",
    "webhook","rest","endpoint","rest api","graphql",
    // automation
    "automatizar con ia","automatizar con ai","automatizar con claude","automatizar con gpt",
    "conectar con ia","conectar con ai","conectar claude","conectar chatgpt","conectar ai",
    "facturar con ia","facturar con ai","facturar con claude",
    "hablar con wasabil","pedirle a claude","pedirle a gpt",
    "lenguaje natural","en lenguaje natural",
    // programador
    "desarrollador","programador","developer","sdk",
  ],
  precios: [
    // direct
    "precio","precios","plan","planes","tarifa","tarifas","valor","valores",
    // cuanto cuesta
    "cuanto cuesta","cuánto cuesta","cuanto sale","cuánto sale","cuanto vale","cuánto vale",
    "cuanto me sale","cuánto me sale","cuanto me cobran","cuánto me cobran","cuanto pago","cuánto pago",
    "cuanto es","cuánto es","que cuesta","qué cuesta",
    // cost
    "costo","costos","costear","inversion","inversión",
    // mensual
    "mensual","mensualidad","al mes","por mes","mensualmente",
    "anual","al año","al ano","por año","por ano","suscripcion","suscripción","suscribir",
    "membresia","membresía",
    // specific plans
    "mini","growth","full","unlimited","enterprise","plan mini","plan growth","plan full",
    // compare
    "mas barato","más barato","mas economico","más económico","mas conveniente","más conveniente",
    "economico","económico","barato","caro","cuanto mas","cuánto más",
    // quote
    "cotizacion","cotización","cotizar","quiero cotizar","presupuesto","budget",
    // cl slang
    "cuanta plata","cuánta plata","cuanta luca","cuánta luca","cuantas lucas","cuántas lucas",
    "la plata","a cuanto","a cuánto","sale caro","sale barato",
    // free trial
    "gratis","prueba gratis","probar","trial","free",
  ],
};

// Stop-words — pronouns, fillers that shouldn't count as signal alone
const STOP_WORDS = new Set([
  "quiero","necesito","me","yo","tu","tú","de","la","el","los","las","un","una","unos","unas",
  "que","qué","como","cómo","donde","dónde","cuando","cuándo","para","por","con","sin","sobre",
  "y","o","pero","mas","más","menos","es","son","ser","estar","hay","tengo","tiene","tienes",
  "ayuda","saber","quisiera","puedo","podria","podría","mostrar","muestrame","muéstrame",
  "dime","dímelo","favor","por favor","gracias","hola","hi","hey","ok","bueno","si","sí","no",
  "en","mi","tu","su","sus","mis","tus","esto","esta","este","eso","esa","ese",
  "porque","porqué","cual","cuál","cuales","cuáles",
]);

function normalizeSearch(s) {
  return (s || "")
    .toLowerCase()
    .normalize("NFD")
    .replace(/[̀-ͯ]/g, "")
    .replace(/[¿?¡!,.:;()]/g, " ")
    .replace(/\s+/g, " ")
    .trim();
}

// Split query into significant tokens (filter stop words)
function tokenize(q) {
  return normalizeSearch(q)
    .split(" ")
    .filter(w => w.length >= 2 && !STOP_WORDS.has(w));
}

// Hard override — if the user mentions these, always go to eCommerce
// (Shopify, Mercado Libre, marketplaces = always "Facturación para e-commerce")
const ECOMMERCE_HARD_HITS = [
  "shopify","shopyfy","shopi",
  "mercado libre","mercadolibre","meli","mercado-libre","mercadolivre",
  "jumpseller","tiendanube","woocommerce","wocomerce",
];

function searchIntent(query) {
  const q = normalizeSearch(query);
  if (!q || q.length < 2) return null;

  // Hard override for Shopify / Mercado Libre mentions
  for (const kw of ECOMMERCE_HARD_HITS) {
    if (q.includes(kw)) return "ecommerce";
  }

  const tokens = tokenize(q);

  let best = null;
  for (const [id, keywords] of Object.entries(SEARCH_KEYWORDS)) {
    let score = 0;
    for (const kw of keywords) {
      const nk = normalizeSearch(kw);
      // Full-phrase match
      if (q === nk) {
        score += 8;
        continue;
      }
      if (q.includes(nk)) {
        // bonus if keyword is a whole word (not just a substring)
        const wholeWord = new RegExp(`\\b${nk.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\b`).test(q);
        score += Math.min(6, (wholeWord ? 2 : 1) + Math.floor(nk.length / 4));
        continue;
      }
      // Single-token match for short keywords (catches things like "precio" when user types "precios")
      if (nk.length >= 3 && !nk.includes(" ")) {
        for (const t of tokens) {
          if (t === nk) { score += 3; break; }
          // prefix match for morphology (precio/precios, factura/facturar, banco/bancaria)
          if (t.length >= 4 && nk.length >= 4 &&
              (t.startsWith(nk.slice(0, Math.min(5, nk.length))) ||
               nk.startsWith(t.slice(0, Math.min(5, t.length))))) {
            score += 2;
            break;
          }
        }
      }
    }
    if (score > 0 && (!best || score > best.score)) {
      best = { id, score };
    }
  }
  return best ? best.id : null;
}

function IntentPicker() {
  const [active, setActive] = React.useState(null);
  const [hiwFlow, setHiwFlow] = React.useState(null); // flow key for HIW modal
  const [typedHeadline, setTypedHeadline] = React.useState("");
  const [searchQuery, setSearchQuery] = React.useState("");
  const [searchError, setSearchError] = React.useState(false);
  const fullHeadline = "Finanzas sin fricción para negocios que crecen.";

  // Type the headline on mount
  React.useEffect(() => {
    let i = 0;
    const timer = setInterval(() => {
      i++;
      setTypedHeadline(fullHeadline.slice(0, i));
      if (i >= fullHeadline.length) clearInterval(timer);
    }, 45);
    return () => clearInterval(timer);
  }, []);

  // Lock scroll + Escape closes drawer
  React.useEffect(() => {
    if (!active) return;
    const onKey = (e) => { if (e.key === "Escape") setActive(null); };
    document.addEventListener("keydown", onKey);
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = prevOverflow;
    };
  }, [active]);

  // Live match as user types
  const liveMatch = searchQuery.length >= 2 ? searchIntent(searchQuery) : null;
  const liveIntent = liveMatch ? INTENTS.find(i => i.id === liveMatch) : null;

  function handleSearch() {
    const matched = searchIntent(searchQuery);
    if (matched) {
      setActive(matched);
      setSearchError(false);
    } else if (searchQuery.trim().length > 0) {
      setSearchError(true);
      setTimeout(() => setSearchError(false), 2400);
    }
  }

  const activeIntent = INTENTS.find(i => i.id === active);
  const activeIdx = INTENTS.findIndex(i => i.id === active);

  return (
    <>
      <section className="picker-shell">
        <div className="container-wide">
          <div className="picker-hero-grid">
            {/* LEFT — headline */}
            <div className="picker-header">
              <Mascot pose="explain" size={64} className="picker-mascot-top" />
              <div className="eyebrow" style={{ marginBottom: 18 }}>
                <span className="dot"/>Wasabilito
              </div>
              <h1 className="headline">
                {typedHeadline.length < fullHeadline.length ? (
                  <>
                    {typedHeadline}
                    <span className="cursor"/>
                  </>
                ) : (
                  // Styled headline — editorial weight mix + serif italic accent
                  <>
                    <span className="hw-light">Finanzas</span>{" "}
                    <em className="hw-serif">sin fricción</em>
                    <br/>
                    <span className="hw-mid">para negocios que</span>{" "}
                    <span className="hw-heavy">crecen<span className="hw-dot">.</span></span>
                  </>
                )}
              </h1>
            </div>

            {/* RIGHT — search box */}
            <div className="picker-search-wrap">
              <div className="picker-search-label">Dime lo que necesitas y yo te llevo.</div>
              <div className={`picker-search ${searchError ? "is-error" : ""}`}>
                <span className="picker-search-icon">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                    <circle cx="11" cy="11" r="7" stroke="currentColor" strokeWidth="1.8"/>
                    <path d="M20 20l-3.5-3.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
                  </svg>
                </span>
                <input
                  type="text"
                  placeholder="Ej: quiero facturar en mi Shopify…"
                  value={searchQuery}
                  onChange={e => { setSearchQuery(e.target.value); setSearchError(false); }}
                  onKeyDown={e => { if (e.key === "Enter") handleSearch(); }}
                  className="picker-search-input"
                />
                {searchQuery && (
                  <button
                    className="picker-search-clear"
                    onClick={() => { setSearchQuery(""); setSearchError(false); }}
                    aria-label="Limpiar"
                  >
                    <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>
                )}
                <button className="picker-search-btn" onClick={handleSearch} aria-label="Buscar">
                  <ArrowRight size={14}/>
                </button>
              </div>

              {/* Live hint */}
              {liveIntent && (
                <div className="picker-search-hint is-match">
                  <Check size={12}/>
                  <span>Te llevo a <strong>{liveIntent.cardTitle}</strong></span>
                  <ArrowRight size={11}/>
                </div>
              )}
              {searchError && (
                <div className="picker-search-hint is-error">
                  No soy tan inteligente, ¿me lo puedes decir más tranqui 😅?
                </div>
              )}
              {!liveIntent && !searchError && (
                <div className="picker-search-chips">
                  <span className="picker-search-chips-label">Prueba:</span>
                  {[
                    "Factura Shopify",
                    "Recuperar IVA Google",
                    "Conciliar banco",
                    "Precios",
                  ].map((s, i) => (
                    <button key={i} className="picker-search-chip" onClick={() => {
                      setSearchQuery(s);
                      const id = searchIntent(s);
                      if (id) setActive(id);
                    }}>{s}</button>
                  ))}
                </div>
              )}
            </div>
          </div>

          <OptionCardGrid onPick={setActive} activeId={active}/>
        </div>
      </section>

      {/* Modal drawer — slides up from bottom when an intent is picked */}
      <IntentDrawer
        intent={activeIntent}
        activeIdx={activeIdx}
        isOpen={!!active}
        onPick={setActive}
        onClose={() => setActive(null)}
        onOpenHiw={(flowKey) => {
          // Map the drawer's flowKey to the HIW_IT_WORKS key
          const hiwKey = flowKey === "banco" ? "conciliacion" : flowKey;
          setHiwFlow(hiwKey);
        }}
      />

      {/* "¿Cómo funciona?" step-by-step modal */}
      <HowItWorksModal
        flow={hiwFlow ? HOW_IT_WORKS[hiwFlow] : null}
        isOpen={!!hiwFlow}
        onClose={() => setHiwFlow(null)}
      />
    </>
  );
}

function OptionCardGrid({ onPick, activeId }) {
  return (
    <div className="option-card-grid">
      {INTENTS.map((intent, i) => (
        <button
          key={intent.id}
          className={`option-card stagger ${activeId === intent.id ? "is-active" : ""}`}
          onClick={() => onPick(intent.id)}
        >
          <div className="option-card-head">
            <div className="option-card-icon">{intent.cardIcon}</div>
            <div className="option-card-num">0{i + 1}</div>
          </div>
          <div className="option-card-body">
            <div className="option-card-title">{intent.cardTitle}</div>
            <div className="option-card-label">{intent.label}</div>
          </div>
          <div className="option-card-footer">
            <span className="option-card-hint">{intent.eyebrow.split(" · ")[1] || intent.eyebrow}</span>
            <span className="option-card-arrow"><ArrowUpRight size={16}/></span>
          </div>
        </button>
      ))}
    </div>
  );
}

function IntentDrawer({ intent, activeIdx, isOpen, onPick, onClose, onOpenHiw }) {
  // Keep the last intent rendered for smooth exit animation
  const [lastIntent, setLastIntent] = React.useState(intent);
  React.useEffect(() => { if (intent) setLastIntent(intent); }, [intent]);
  const shown = intent || lastIntent;
  if (!shown) return null;

  return (
    <div className={`drawer-portal ${isOpen ? "is-open" : ""}`} aria-hidden={!isOpen}>
      <div className="drawer-backdrop" onClick={onClose}/>
      <div className="drawer-sheet" role="dialog" aria-modal="true">
        {/* Header strip — grab handle + nav + close */}
        <div className="drawer-header">
          <div className="drawer-grab"/>
          <div className="drawer-nav">
            <button
              className="drawer-nav-btn"
              onClick={() => onPick(INTENTS[(activeIdx - 1 + INTENTS.length) % INTENTS.length].id)}
              aria-label="Anterior"
            >
              <ArrowLeft size={14}/>
            </button>
            <span className="drawer-progress">
              <span className="mono" style={{ color: "var(--signal)" }}>0{activeIdx + 1}</span>
              <span className="drawer-progress-sep"/>
              <span className="mono" style={{ color: "var(--muted)" }}>0{INTENTS.length}</span>
            </span>
            <button
              className="drawer-nav-btn"
              onClick={() => onPick(INTENTS[(activeIdx + 1) % INTENTS.length].id)}
              aria-label="Siguiente"
            >
              <ArrowRight size={14}/>
            </button>
          </div>
          <button className="drawer-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>
            <span>Cerrar</span>
            <span className="drawer-close-kbd">ESC</span>
          </button>
        </div>

        <div className="drawer-body" key={shown.id}>
          <div className="drawer-content">
            <div className="caption" style={{ color: "var(--signal)" }}>{shown.eyebrow}</div>
            <h2 className="focus-title">{shown.title}</h2>
            <p className="focus-copy">{shown.copy}</p>

            <ul className="focus-details">
              {shown.details.map((d, i) => (
                <li key={i} className="focus-detail-item">
                  <div className="focus-detail-icon">{d.icon}</div>
                  <div>
                    <div className="focus-detail-title">{d.title}</div>
                    <div className="focus-detail-desc">{d.desc}</div>
                  </div>
                </li>
              ))}
            </ul>

            <div className="focus-ctas">
              <a className="btn btn-primary" href="pricing.html">
                <IconSpark size={13}/> {shown.id === "precios" ? "Ver los 4 planes" : "Probar gratis"}
                <span className="arrow"><ArrowRight size={13}/></span>
              </a>
              {shown.flowKey && HOW_IT_WORKS[shown.flowKey === "banco" ? "conciliacion" : shown.flowKey] && (
                <button
                  type="button"
                  className="hiw-trigger hiw-trigger-inline"
                  onClick={() => onOpenHiw(shown.flowKey)}
                >
                  <span className="hiw-trigger-icon"><Check size={18}/></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"><ArrowRight size={14}/></span>
                </button>
              )}
            </div>
          </div>

          <div className="drawer-aside">
            {shown.demo && <FocusDemo kind={shown.demo}/>}

            {/* Mini intent list — jump to any */}
            <div className="drawer-jump">
              <div className="caption" style={{ marginBottom: 12 }}>Otras necesidades</div>
              <div className="drawer-jump-list">
                {INTENTS.filter(it => it.id !== shown.id).map(it => (
                  <button key={it.id} className="drawer-jump-item" onClick={() => onPick(it.id)}>
                    <span className="drawer-jump-icon">{it.cardIcon}</span>
                    <span className="drawer-jump-text">{it.cardTitle}</span>
                    <ArrowUpRight size={12}/>
                  </button>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// Demo fragments per intent — compact, readable
function FocusDemo({ kind }) {
  const box = {
    background: "var(--bg-2)",
    border: "1px solid var(--hairline)",
    borderRadius: 14,
    padding: 20,
    position: "relative",
    overflow: "hidden",
  };

  if (kind === "ecommerce") {
    return (
      <div style={box}>
        <div className="caption" style={{ marginBottom: 12 }}>Integraciones activas</div>
        {[
          { n: "Shopify", doc: "Boleta · auto · hace 1 min" },
          { n: "Mercado Libre", doc: "Factura · auto · hace 2 min" },
        ].map((p, i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 12, padding: "10px 0", borderTop: "1px solid var(--hairline)" }}>
            <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--signal)", boxShadow: "0 0 8px var(--signal)" }}/>
            <span style={{ flex: 1, fontSize: 13.5, color: "var(--ink)" }}>{p.n}</span>
            <span className="mono" style={{ fontSize: 11, color: "var(--muted)" }}>{p.doc}</span>
          </div>
        ))}
        <div style={{ marginTop: 12, padding: "10px 12px", background: "var(--signal-wash)", border: "1px solid var(--hairline-glow)", borderRadius: 10, fontSize: 12.5, color: "var(--signal)", display: "flex", justifyContent: "space-between" }}>
          <span>Hoy · 347 documentos emitidos</span>
          <span className="mono">100% ✓</span>
        </div>
      </div>
    );
  }

  if (kind === "invoice") {
    return (
      <div style={box}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 12 }}>
          <div>
            <div className="caption">Folio · emitida</div>
            <div style={{ fontSize: 17, marginTop: 4, color: "var(--ink)" }}>Boleta #48,291</div>
          </div>
          <div style={{ fontSize: 10.5, padding: "4px 10px", background: "var(--signal-wash)", color: "var(--signal)", borderRadius: 999, fontWeight: 600, letterSpacing: "0.08em", border: "1px solid var(--hairline-glow)" }}>SII ✓</div>
        </div>
        {[
          ["Camiseta oversized", "$29.980"],
          ["Pantalón lino", "$39.990"],
          ["Envío Santiago", "$4.990"],
        ].map((row, i, arr) => (
          <div key={i} style={{ display: "flex", justifyContent: "space-between", padding: "8px 0", fontSize: 12.5, borderBottom: i < arr.length - 1 ? "1px solid var(--hairline)" : "none", color: "var(--ink-2)" }}>
            <span>{row[0]}</span>
            <span className="mono" style={{ color: "var(--ink)" }}>{row[1]}</span>
          </div>
        ))}
        <div style={{ marginTop: 12, paddingTop: 12, borderTop: "1px solid var(--hairline-glow)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <span style={{ fontSize: 14 }}>Total</span>
          <span className="mono" style={{ fontSize: 18, fontWeight: 600, color: "var(--signal)" }}>$74.960</span>
        </div>
      </div>
    );
  }

  if (kind === "expenses") {
    const items = [
      { n: "Google Ads", iva: "$235.840" },
      { n: "Meta / Facebook", iva: "$169.290" },
      { n: "Shopify Plus", iva: "$380.400" },
      { n: "AWS", iva: "$79.884" },
    ];
    return (
      <div style={box}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", paddingBottom: 14, borderBottom: "1px solid var(--hairline)" }}>
          <div className="caption">IVA recuperable · Abril</div>
          <div style={{ fontSize: 24, color: "var(--signal)", letterSpacing: "-0.02em" }}>$865.414</div>
        </div>
        {items.map((e, i, arr) => (
          <div key={i} style={{ display: "flex", justifyContent: "space-between", padding: "10px 0", borderBottom: i < arr.length - 1 ? "1px solid var(--hairline)" : "none", fontSize: 12.5 }}>
            <span style={{ color: "var(--ink-2)" }}>{e.n}</span>
            <span className="mono" style={{ color: "var(--signal)", fontWeight: 600 }}>+{e.iva}</span>
          </div>
        ))}
      </div>
    );
  }

  if (kind === "bank") {
    const moves = [
      { t: "TRF DMC MOTORS SPA", a: "+$2.020.491", ok: true, l: "Factura F184589" },
      { t: "CARGO VISA · GOOGLE ADS", a: "−$1.240.250", ok: true, l: "Factura de compra" },
      { t: "TRF MERCADO PAGO", a: "+$847.900", ok: true, l: "7 boletas cruzadas" },
      { t: "TRF SHOPIFY PAYMENTS", a: "+$5.382.100", ok: null },
    ];
    return (
      <div style={box}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingBottom: 14, borderBottom: "1px solid var(--hairline)" }}>
          <span className="caption">Banco Santander · cta. corriente</span>
          <span style={{ fontSize: 10.5, padding: "3px 10px", borderRadius: 999, background: "var(--signal-wash)", color: "var(--signal)", border: "1px solid var(--hairline-glow)", fontWeight: 600, letterSpacing: "0.08em" }}>98% AUTO</span>
        </div>
        {moves.map((m, i, arr) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 12, padding: "11px 0", borderBottom: i < arr.length - 1 ? "1px solid var(--hairline)" : "none", alignItems: "center" }}>
            <div>
              <div style={{ fontSize: 12.5, color: "var(--ink)" }}>{m.t}</div>
              {m.ok !== null ? (
                <div style={{ marginTop: 4, display: "inline-flex", alignItems: "center", gap: 6, fontSize: 10.5, color: "var(--signal)" }}>
                  <Check size={10}/> {m.l}
                </div>
              ) : (
                <div style={{ marginTop: 4, display: "inline-flex", alignItems: "center", gap: 6, fontSize: 10.5, color: "var(--muted)" }}>
                  <span style={{ width: 5, height: 5, borderRadius: "50%", background: "var(--muted)", animation: "pulse 1.8s infinite" }}/>
                  Buscando documento…
                </div>
              )}
            </div>
            <div className="mono" style={{ fontSize: 12.5, color: m.a.startsWith("−") ? "var(--muted)" : "var(--ink)", fontWeight: 500 }}>{m.a}</div>
          </div>
        ))}
      </div>
    );
  }

  if (kind === "mcp") {
    return (
      <div style={box}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, paddingBottom: 12, borderBottom: "1px solid var(--hairline)" }}>
          <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--signal)", boxShadow: "0 0 10px var(--signal)" }}/>
          <span className="caption">Claude Desktop · wasabil-mcp</span>
        </div>
        <div style={{ marginTop: 14, fontSize: 13, color: "var(--ink-2)", lineHeight: 1.55 }}>
          <span style={{ color: "var(--signal)", fontFamily: "var(--mono)", fontSize: 11 }}>▸ tú</span><br/>
          "Necesito el EERR del Q1 2026"
        </div>
        <div style={{ marginTop: 16, padding: "10px 12px", background: "rgba(0,0,0,0.3)", border: "1px solid var(--hairline)", borderRadius: 8, fontFamily: "var(--mono)", fontSize: 11, color: "var(--muted)" }}>
          <span style={{ color: "var(--signal)" }}>⬢ wasabil.get_financials</span><br/>
          {`{ period: 'Q1-2026', format: 'income-statement' }`}
        </div>
        <div style={{ marginTop: 14, fontSize: 13, color: "var(--ink-2)" }}>
          <span style={{ color: "var(--signal)", fontFamily: "var(--mono)", fontSize: 11 }}>▸ claude</span><br/>
          Ingresos: <span className="mono" style={{ color: "var(--ink)" }}>$142.487.200</span> · Utilidad: <span className="mono" style={{ color: "var(--signal)" }}>$49.356.000</span> (34.6%)
        </div>
      </div>
    );
  }

  if (kind === "pricing") {
    const plans = [
      { n: "Mini", p: "$10.990" },
      { n: "Growth", p: "$27.990" },
      { n: "Full", p: "$63.990", hot: true },
      { n: "Unlimited", p: "$95.990" },
    ];
    return (
      <div style={{ ...box, display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 10 }}>
        {plans.map(pl => (
          <div key={pl.n} style={{ padding: 16, background: pl.hot ? "var(--signal-wash)" : "rgba(255,255,255,0.02)", border: pl.hot ? "1px solid var(--hairline-glow)" : "1px solid var(--hairline)", borderRadius: 10, textAlign: "center" }}>
            <div className="caption" style={{ color: pl.hot ? "var(--signal)" : "var(--muted)", fontSize: 10 }}>{pl.n}</div>
            <div style={{ fontSize: 20, marginTop: 6, letterSpacing: "-0.02em", color: pl.hot ? "var(--signal)" : "var(--ink)" }}>{pl.p}</div>
            <div style={{ fontSize: 10.5, color: "var(--muted)", marginTop: 2 }}>/ mes</div>
          </div>
        ))}
      </div>
    );
  }

  return null;
}

window.IntentPicker = IntentPicker;
window.INTENTS = INTENTS;
window.FocusDemo = FocusDemo;