// Wasabil — Producto page
const { useState: useStateProd } = React;

function ProductHero() {
  return (
    <section style={{ padding: "88px 0 48px", borderBottom: "1px solid var(--rule)" }}>
      <div className="container-wide">
        <div className="eyebrow"><span className="dot"/>Producto</div>
        <h1 className="display-1 serif" style={{ marginTop: 20, maxWidth: "18ch" }}>
          Todo tu <em className="italic">stack tributario,</em> en una plataforma.
        </h1>
        <p className="lede" style={{ marginTop: 24, maxWidth: "58ch" }}>
          Tres verticales. Cero integraciones que mantener. Wasabil absorbe la complejidad del SII para que tu equipo financiero vuelva a pensar en estrategia, no en folios.
        </p>
        <div style={{ display: "flex", gap: 24, marginTop: 48, flexWrap: "wrap" }}>
          {[
            ["#facturacion", "01", "Facturación electrónica"],
            ["#ecommerce", "02", "eCommerce"],
            ["#gastos", "03", "Gastos extranjeros"],
            ["#conciliacion", "04", "Conciliación bancaria"],
            ["#mcp", "05", "MCP & API"],
          ].map(([h, n, l]) => (
            <a key={n} href={h} className="pill" style={{ padding: "8px 14px", fontSize: 13 }}>
              <span className="mono" style={{ color: "var(--muted)" }}>{n}</span>
              <span>{l}</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function FeatureBlock({ anchor, num, tag, title, copy, bullets, children, reverse }) {
  return (
    <section id={anchor} style={{ padding: "96px 0", borderBottom: "1px solid var(--rule)" }}>
      <div className="container-wide">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
          <div style={{ order: reverse ? 2 : 1 }}>
            <div className="mono caption" style={{ marginBottom: 20 }}>{num} / {tag}</div>
            <h2 className="display-2 serif">{title}</h2>
            <p className="lede" style={{ marginTop: 20 }}>{copy}</p>
            <ul style={{ listStyle: "none", padding: 0, margin: "36px 0 0", display: "flex", flexDirection: "column", gap: 0 }}>
              {bullets.map((b, i) => (
                <li key={i} style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 20, padding: "18px 0", borderBottom: "1px solid var(--rule)", alignItems: "flex-start" }}>
                  <div style={{ width: 32, height: 32, borderRadius: 8, background: "var(--accent-wash)", display: "grid", placeItems: "center", color: "oklch(0.45 0.15 135)", flexShrink: 0 }}>
                    {b.icon}
                  </div>
                  <div>
                    <div style={{ fontSize: 15, fontWeight: 500, marginBottom: 4 }}>{b.title}</div>
                    <div style={{ fontSize: 14, color: "var(--muted)", lineHeight: 1.5 }}>{b.desc}</div>
                  </div>
                </li>
              ))}
            </ul>
          </div>
          <div style={{ order: reverse ? 1 : 2, display: "grid", placeItems: "center" }}>{children}</div>
        </div>
      </div>
    </section>
  );
}

function ProductoPage() {
  const ic = (d) => <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d={d} stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>;
  return (
    <>
      <Nav current="producto" />
      <ProductHero />
      <FeatureBlock
        anchor="facturacion"
        num="01"
        tag="Facturación"
        title={<>Facturación que <em className="italic">aprende</em> cómo trabajas.</>}
        copy="Emite boletas, facturas, notas de crédito y débito sin pensarlo. Validamos con SII en milisegundos, reobtención automática de folios, emisión de boletas de tercero y mucho más."
        bullets={[
          { icon: ic("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: ic("M12 5v14M5 12h14"), title: "Boletas, facturas, notas, guías", desc: "Todo el catálogo de documentos tributarios electrónicos. Sin licencias aparte." },
          { icon: ic("M3 9h18M9 21V9"), title: "Reobtención automática de folios", desc: "Nosotros gestionamos los folios CAF. Tú solo emite." },
          { icon: ic("M20 6L9 17l-5-5"), title: "Boletas de tercero", desc: "Emite a nombre de tus clientes o proveedores sin salir de Wasabil." },
        ]}
      >
        <InvoiceDemo />
      </FeatureBlock>

      <FeatureBlock
        anchor="ecommerce"
        num="02"
        tag="eCommerce"
        title={<>eCommerce <em className="italic">resuelto al 100%.</em></>}
        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 un cambio o devolución, la nota de crédito se emite sola — sincronizada en tiempo real con tu e-commerce."
        bullets={[
          { icon: ic("M3 3h18v18H3z M3 9h18 M9 21V9"), title: "Shopify y Mercado Libre", desc: "Integraciones nativas. Cero código. 10 minutos de setup." },
          { icon: ic("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: ic("M9 11l3 3L22 4"), title: "Notas de crédito automáticas", desc: "Cada cambio o devolución en tu tienda emite la nota de crédito al instante. Sin conciliación manual." },
          { icon: ic("M3 12h18"), title: "Próximamente: Falabella, Paris, Walmart, Ripley", desc: "Normalizamos los datos de cada marketplace y emitimos por ti." },
        ]}
        reverse
      >
        <EcommerceDemo />
      </FeatureBlock>

      <FeatureBlock
        anchor="gastos"
        num="03"
        tag="Gastos extranjeros"
        title={<>Recupera el IVA que <em className="italic">Google no te avisa.</em></>}
        copy="Nos integramos directo con los servicios digitales que usas — Google, Meta, Shopify, AWS. Por cada cobro, generamos automáticamente la factura de compra, la declaramos al SII, y recuperas el IVA."
        bullets={[
          { icon: ic("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: ic("M9 11l3 3L22 4"), title: "Factura de compra emitida al SII", desc: "Generamos y declaramos por ti. Con conversión USD → CLP correcta." },
          { icon: ic("M3 3l18 18"), title: "$4.000.000 de ahorro anual promedio", desc: "Incluyendo crédito fiscal IVA + rebaja de impuesto a la renta." },
        ]}
      >
        <ForeignExpensesDemo />
      </FeatureBlock>

      <FeatureBlock
        anchor="conciliacion"
        num="04"
        tag="Conciliación bancaria"
        title={<>Tu banco, <em className="italic">conciliado</em> 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 para saber cuánta plata realmente tienes."
        bullets={[
          { icon: ic("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: ic("M9 11l3 3L22 4"), title: "Matching automático al 98%", desc: "Cruzamos transferencias y cartolas con tus documentos. Asocia automática y manualmente." },
          { icon: ic("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." },
        ]}
        reverse
      >
        <ReconciliationDemo />
      </FeatureBlock>

      <FeatureBlock
        anchor="mcp"
        num="05"
        tag="MCP & API"
        title={<>El primer facturador con <em className="italic">MCP.</em></>}
        copy="Wasabil expone un Model Context Protocol nativo. Eso significa que Claude, Cursor, o tu agente custom pueden consultar, emitir y conciliar documentos hablando con Wasabil como si fuera un compañero de equipo."
        bullets={[
          { icon: ic("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: ic("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: ic("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: ic("M20 6L9 17l-5-5"), title: "Permisos granulares", desc: "Define qué puede ver y hacer cada agente. Auditable, reversible, seguro." },
        ]}
        reverse
      >
        <div className="window" style={{ background: "#0f0e0c", width: "100%", maxWidth: 440 }}>
          <div className="window-bar" style={{ background: "#1a1816" }}>
            <div className="window-dots"><span/><span/><span/></div>
            <div className="window-title" style={{ color: "#888" }}>claude.config.json</div>
          </div>
          <pre style={{ margin: 0, padding: 20, fontFamily: "var(--mono)", fontSize: 12, color: "#e8e6e0", lineHeight: 1.6 }}>
{`{
  "mcpServers": {
    `}<span style={{ color: "oklch(0.72 0.14 135)" }}>"wasabil"</span>{`: {
      "command": "npx",
      "args": ["-y", "@wasabil/mcp"],
      "env": {
        `}<span style={{ color: "#cba" }}>"WASABIL_API_KEY"</span>{`: "wsb_live_•••"
      }
    }
  }
}`}
          </pre>
        </div>
      </FeatureBlock>

      <section style={{ padding: "96px 0", position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", right: 20, top: 60, opacity: 0.95, pointerEvents: "none", transform: "rotate(-4deg)" }}>
          <Mascot pose="nimbus" size={180} />
        </div>
        <div className="container-wide" style={{ position: "relative" }}>
          <div className="eyebrow"><span className="dot"/>Roadmap</div>
          <h2 className="display-2 serif" style={{ marginTop: 20, maxWidth: "20ch" }}>
            Wasabil está en <em className="italic">evolución constante.</em>
          </h2>
          <p className="lede" style={{ marginTop: 20, maxWidth: "56ch" }}>
            Lo que viene: únete a Wasabil y sé parte de una plataforma que mejora constantemente. No te quedes en el pasado.
          </p>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 1, marginTop: 56, background: "var(--rule)", border: "1px solid var(--rule)", borderRadius: 12, overflow: "hidden" }}>
            {[
              { q: "Q2 2026", t: "Cobranza automática", d: "Recordatorios, links de pago, 2ª llamada." },
              { q: "Q3 2026", t: "Pagos integrados", d: "Paga facturas desde Wasabil. Transferencias, tarjeta." },
              { q: "Q4 2026", t: "Anticipo de facturas", d: "Financia tus cuentas por cobrar con un click." },
              { q: "2027", t: "Te tenemos cubierto", d: "Algo grande está por venir. Stay tuned." },
            ].map((r, i) => (
              <div key={i} style={{ padding: 32, background: "var(--paper)", minHeight: 200, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
                <div className="mono caption">{r.q}</div>
                <div>
                  <div className="serif" style={{ fontSize: 22, letterSpacing: "-0.01em", marginBottom: 6 }}>{r.t}</div>
                  <div style={{ fontSize: 13, color: "var(--muted)" }}>{r.d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CtaBand />
      <Footer />
    </>
  );
}

Object.assign(window, { ProductoPage });