// Wasabil — Pricing page
const { useState: useStatePrice } = React;

function PricingPage() {
  const fmt = (n) => `$${n.toLocaleString("es-CL")}`;

  const plans = [
    {
      name: "Growth",
      price: 34990,
      desc: "Para empresas con pocas ventas que declaran gastos en el extranjero",
      cta: "Prueba gratis 14 días",
      bullets: [
        "Hasta 2 usuarios",
        "Integración a tu facturador y el gratuito del SII",
        "Integra tu eCommerce Shopify",
        "Integra Mercadolibre",
        "Soporte ilimitado",
        "Declara hasta 10 servicios digitales al mes o hasta $10.000.000 en gastos",
        "Emite hasta 500 documentos tributarios/mes (facturas, boletas, notas)",
        "Acceso a la API y MCP",
      ],
    },
    {
      name: "Full",
      price: 79990,
      desc: "Para empresas consolidadas con hartas ventas y gastos en el extranjero",
      cta: "Prueba gratis 14 días",
      featured: true,
      bullets: [
        "Hasta 10 usuarios",
        "Integración a tu facturador y el gratuito del SII",
        "Integra tu eCommerce Shopify",
        "Integra Mercadolibre",
        "Soporte ilimitado",
        "Declara hasta 30 servicios digitales al mes o hasta $50.000.000 en gastos",
        "Emite hasta 1.500 documentos tributarios/mes",
        "Acceso a la API y MCP",
      ],
    },
    {
      name: "Unlimited",
      price: 119990,
      desc: "Para empresas que necesitan emitir muchos documentos y declarar gastos en el extranjero",
      cta: "Prueba gratis 14 días",
      bullets: [
        "Usuarios ilimitados",
        "Integración a tu facturador y el gratuito del SII",
        "Integra tu eCommerce Shopify",
        "Integra Mercadolibre",
        "Soporte ilimitado",
        "Declara servicios digitales ilimitados al mes",
        "Emite hasta 5.000 documentos tributarios/mes · $119.990 por cada tramo adicional de 5.000",
        "Acceso a la API y MCP",
      ],
    },
  ];

  return (
    <>
      <Nav current="pricing" />
      <section style={{ padding: "88px 0 48px" }}>
        <div className="container-wide" style={{ textAlign: "center" }}>
          <div className="eyebrow"><span className="dot"/>Precios</div>
          <h1 className="display-1 serif" style={{ marginTop: 20, maxWidth: "18ch", margin: "20px auto 0" }}>
            Simples. <em className="italic">Transparentes.</em><br/>Sin sorpresas.
          </h1>
          <p className="lede" style={{ marginTop: 24, maxWidth: "54ch", margin: "24px auto 0" }}>
            Paga lo que usas. Cambia de plan cuando quieras. Cancela en un click.
          </p>
          <div style={{ marginTop: 40, fontSize: 13, color: "var(--muted)" }}>Sin contratos, sin permanencia. Cancela en un click.</div>
        </div>
      </section>

      <section style={{ paddingBottom: 96 }}>
        <div className="container-wide">
          <div className="pricing-plans-grid">
            {plans.map((p, i) => (
              <div key={i} className="pricing-card" style={{ background: p.featured ? "var(--ink)" : "var(--paper)", color: p.featured ? "var(--bg)" : "var(--ink)", border: "1px solid " + (p.featured ? "var(--ink)" : "var(--rule)"), borderRadius: 14, position: "relative", boxShadow: p.featured ? "var(--shadow-lg)" : "var(--shadow-sm)", overflow: "hidden" }}>
                {p.featured && (
                  <div style={{ position: "absolute", top: -14, right: -8, pointerEvents: "none", transform: "rotate(8deg)", zIndex: 2 }}>
                    <Mascot pose="king" size={96} />
                  </div>
                )}
                {p.featured && <div style={{ position: "absolute", top: 20, left: 20, fontSize: 10, background: "var(--accent)", color: "#0a0a0a", padding: "4px 10px", borderRadius: 4, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase" }}>Más popular</div>}
                <div style={{ marginTop: p.featured ? 28 : 0 }}>
                  <h3 className="serif" style={{ fontSize: 32 }}>{p.name}</h3>
                  <div className="caption" style={{ color: p.featured ? "color-mix(in oklab, var(--bg) 60%, transparent)" : "var(--muted)", marginTop: 10, textTransform: "none", letterSpacing: 0, fontFamily: "var(--sans)", fontSize: 13, lineHeight: 1.5, minHeight: 42 }}>{p.desc}</div>
                </div>
                <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginTop: 24 }}>
                  <span className="serif" style={{ fontSize: 52, lineHeight: 1 }}>{fmt(p.price)}</span>
                  <span style={{ fontSize: 11, color: p.featured ? "color-mix(in oklab, var(--bg) 60%, transparent)" : "var(--muted)", lineHeight: 1.3 }}>
                    + IVA<br/>/ CLP mes
                  </span>
                </div>
                <a className="btn" href="https://app.wasabil.com/register" style={{ marginTop: 24, width: "100%", justifyContent: "center", background: p.featured ? "var(--accent)" : "var(--ink)", color: p.featured ? "#0a0a0a" : "var(--bg)", padding: "12px 20px", fontSize: 14 }}>
                  {p.cta}
                </a>
                <div style={{ marginTop: 32, paddingTop: 24, borderTop: "1px solid " + (p.featured ? "rgba(246,243,236,0.15)" : "var(--rule)") }}>
                  <div className="caption" style={{ marginBottom: 14, color: p.featured ? "color-mix(in oklab, var(--bg) 50%, transparent)" : "var(--muted)" }}>Incluye</div>
                  <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12 }}>
                    {p.bullets.map((b, bi) => (
                      <li key={bi} style={{ display: "flex", gap: 10, fontSize: 13, lineHeight: 1.45 }}>
                        <span style={{ color: p.featured ? "var(--accent)" : "oklch(0.55 0.15 135)", flexShrink: 0 }}>✓</span>
                        {b}
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 24, padding: "20px 28px", background: "var(--paper)", border: "1px dashed var(--rule-2)", borderRadius: 10, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
            <div>
              <div style={{ fontSize: 14, fontWeight: 500 }}>¿Enterprise?</div>
              <div style={{ fontSize: 13, color: "var(--muted)", marginTop: 2, maxWidth: "56ch" }}>Si tu operación es más compleja y necesitas algo distinto, hablemos. Incluso si no es enterprise pero necesitas algo custom — el objetivo es ayudarte en tu operación.</div>
            </div>
                        <a className="btn btn-ghost" href="agenda.html">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none"><rect x="3" y="5" width="18" height="16" rx="2" stroke="currentColor" strokeWidth="1.8"/><path d="M3 9h18M8 3v4M16 3v4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>
              Agenda una reunión
            </a>
          </div>
        </div>
      </section>

      {/* Calculator */}
      <section id="calculadora" className="section" style={{ background: "var(--bg-2)" }}>
        <div className="container-wide">
          <Calculator />
        </div>
      </section>

      {/* FAQ */}
      <section className="section">
        <div className="container-wide">
          <div className="section-title">
            <div>
              <div className="eyebrow"><span className="dot"/>FAQ</div>
              <h2 className="display-2 serif" style={{ marginTop: 16 }}>Preguntas habituales.</h2>
            </div>
          </div>
          <div className="pricing-faq-grid">
            {[
              ["¿Necesito cambiar de facturador?", "No. Wasabil funciona con el facturador gratuito del SII, Bsale, OpenFactura, Lioren, y nuestro propio facturador. La función de gastos extranjeros funciona con cualquiera."],
              ["¿Cuánto demora el onboarding?", "Entre 10 y 30 minutos para la configuración inicial, incluyendo conexión con SII, e-commerce e importación de tu histórico."],
              ["¿El MCP está incluido?", "Sí, desde el plan Growth. En Starter no está disponible; en Scale viene con permisos granulares y logging extendido."],
              ["¿Qué pasa si emito más documentos de lo contratado?", "Te avisamos antes. Puedes subir de plan o pagar un tramo adicional sin interrumpir la operación."],
              ["¿Por qué debo declarar mis gastos en el extranjero?", "La Ley 21.210 de IVA a los servicios digitales establece este proceso. Lo bueno es que se traduce en beneficios tributarios para ti."],
              ["¿Guardan mi información?", "Sí, para que la puedas usar y es sólo tuya. Está cifrada en reposo (AES-256) y en tránsito (TLS 1.3). Backups diarios. Infraestructura en AWS."],
            ].map(([q, a], i) => (
              <div key={i} style={{ paddingBottom: 24, borderBottom: "1px solid var(--rule)" }}>
                <h3 className="serif" style={{ fontSize: 20, marginBottom: 10, letterSpacing: "-0.01em" }}>{q}</h3>
                <p style={{ fontSize: 14, color: "var(--ink-2)", lineHeight: 1.55, margin: 0 }}>{a}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

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

function Calculator() {
  const [gastoExt, setGastoExt] = useStatePrice(700000);
  const [docs, setDocs] = useStatePrice(200);
  const ivaMensual = Math.round(gastoExt * 0.19);
  const ivaAnual = ivaMensual * 12;
  const rentaAnual = Math.round(gastoExt * 12 * 0.27);
  const totalAhorro = ivaAnual + rentaAnual;

  return (
    <div className="pricing-calc-grid">
      <div>
        <div className="eyebrow"><span className="dot"/>Calculadora</div>
        <h2 className="display-2 serif" style={{ marginTop: 16 }}>
          ¿Cuánto <em className="italic">ahorras</em> con Wasabil?
        </h2>
        <p className="lede" style={{ marginTop: 20 }}>
          Calcula el IVA recuperable + rebaja de renta que dejas sobre la mesa cada año.
        </p>
        <div style={{ marginTop: 40, display: "flex", flexDirection: "column", gap: 28 }}>
          <label style={{ display: "block" }}>
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 10 }}>
              <span className="caption">Gasto mensual en servicios extranjeros</span>
              <span className="mono" style={{ fontSize: 13 }}>${gastoExt.toLocaleString("es-CL")}</span>
            </div>
            <input type="range" min="100000" max="5000000" step="50000" value={gastoExt} onChange={e => setGastoExt(+e.target.value)} style={{ width: "100%", accentColor: "oklch(0.55 0.15 135)" }} />
          </label>
          <label style={{ display: "block" }}>
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 10 }}>
              <span className="caption">Documentos tributarios / mes</span>
              <span className="mono" style={{ fontSize: 13 }}>{docs.toLocaleString("es-CL")}</span>
            </div>
            <input type="range" min="10" max="5000" step="10" value={docs} onChange={e => setDocs(+e.target.value)} style={{ width: "100%", accentColor: "oklch(0.55 0.15 135)" }} />
          </label>
        </div>
      </div>
      <div style={{ padding: 40, background: "var(--ink)", color: "var(--bg)", borderRadius: 16, position: "relative", overflow: "hidden" }}>
        <div className="caption" style={{ color: "color-mix(in oklab, var(--bg) 55%, transparent)" }}>Ahorro anual estimado</div>
        <div className="serif" style={{ fontSize: 68, lineHeight: 1, marginTop: 12, letterSpacing: "-0.03em" }}>
          ${totalAhorro.toLocaleString("es-CL")}
        </div>
        <div style={{ marginTop: 28, paddingTop: 24, borderTop: "1px solid rgba(246,243,236,0.15)", display: "flex", flexDirection: "column", gap: 12 }}>
          <div style={{ display: "flex", justifyContent: "space-between", fontSize: 14 }}>
            <span style={{ color: "color-mix(in oklab, var(--bg) 70%, transparent)" }}>IVA recuperable anual</span>
            <span className="mono">${ivaAnual.toLocaleString("es-CL")}</span>
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", fontSize: 14 }}>
            <span style={{ color: "color-mix(in oklab, var(--bg) 70%, transparent)" }}>Rebaja impuesto a la renta</span>
            <span className="mono">${rentaAnual.toLocaleString("es-CL")}</span>
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", fontSize: 14 }}>
            <span style={{ color: "color-mix(in oklab, var(--bg) 70%, transparent)" }}>Costo plan Growth anual</span>
            <span className="mono">−$287.904</span>
          </div>
        </div>
        <div style={{ position: "absolute", bottom: -30, right: -20, transform: "rotate(6deg)", pointerEvents: "none", opacity: 0.9 }}>
          <Mascot size={120} pose="clap" />
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PricingPage });