// Wasabil Startup — Calculator (shared between home & pricing)
// Calcula ahorro anual por recuperar IVA de servicios digitales extranjeros.

(function () {
  const { useState } = React;

  function Calculator() {
    // "Gasto mensual" = monto neto (sin IVA) que el usuario paga en servicios digitales extranjeros.
    // "Docs" = cantidad de documentos tributarios (boletas, facturas, notas) al mes.
    // IVA recuperable = gasto × 19% (Ley 21.210 — factura de compra al SII)
    // Rebaja renta = IVA recuperado × 27% (impto 1ra categoría, crédito fiscal deducible)
    const [gastoMensual, setGastoMensual] = useState(500000);
    const [docs, setDocs] = useState(500); // starts at Growth tier

    const IVA_RATE = 0.19;
    const IMPTO_RENTA = 0.27;

    // Plan recomendado según docs/mes + gasto extranjero mensual (USD equivalente aprox).
    // Límites oficiales de cada plan:
    //   Mini:      10 docs   · 3 servicios digitales
    //   Growth:    500 docs  · 10 servicios / $10M gastos
    //   Full:      1500 docs · 30 servicios / $50M gastos
    //   Unlimited: 5000 docs · ilimitado
    const PLANS = [
      { name: "Mini",      priceMensual: 10990, maxDocs: 10,   maxGasto: 1000000  },
      { name: "Growth",    priceMensual: 27990, maxDocs: 500,  maxGasto: 10000000 },
      { name: "Full",      priceMensual: 63990, maxDocs: 1500, maxGasto: 50000000 },
      { name: "Unlimited", priceMensual: 95990, maxDocs: 5000, maxGasto: Infinity },
    ];
    const planRecomendado =
      PLANS.find(p => docs <= p.maxDocs && gastoMensual <= p.maxGasto) || PLANS[PLANS.length - 1];
    const planAnualCosto = planRecomendado.priceMensual * 12;

    const ivaMensual = Math.round(gastoMensual * IVA_RATE);
    const ivaAnual = ivaMensual * 12;
    const ahorroRentaAnual = Math.round(ivaAnual * IMPTO_RENTA);
    const ahorroBrutoAnual = ivaAnual + ahorroRentaAnual;
    const ahorroNetoAnual = ahorroBrutoAnual - planAnualCosto;

    return (
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }}>
        <div>
          <Reveal><div className="eyebrow"><span className="dot"/>Calculadora de ahorro</div></Reveal>
          <Reveal delay={1}>
            <h2 className="display-2" style={{ marginTop: 20 }}>
              ¿Cuánto ahorras con Wasabil?
            </h2>
          </Reveal>
          <Reveal delay={2}>
            <p className="lede" style={{ marginTop: 20 }}>
              Mueve el slider con el monto que gastas al mes en Google, Meta, AWS y otros servicios extranjeros. Wasabil te ayuda a recuperar el IVA que hoy estás perdiendo.
            </p>
          </Reveal>
          <Reveal delay={3}>
            <div style={{ marginTop: 40, display: "flex", flexDirection: "column", gap: 24 }}>
              <CalcSlider
                label="Gasto mensual en servicios extranjeros (neto, sin IVA)"
                min={100000} max={5000000} step={50000}
                value={gastoMensual} onChange={setGastoMensual}
                formatValue={v => `$${v.toLocaleString("es-CL")}`}
                minLabel="$100.000" maxLabel="$5.000.000"
              />

              <DocsStepper value={docs} onChange={setDocs}/>

              <div style={{ padding: "14px 16px", background: "var(--surface)", border: "1px solid var(--hairline)", borderRadius: 12, fontSize: 12.5, color: "var(--muted)", lineHeight: 1.55 }}>
                <strong style={{ color: "var(--ink-2)", fontWeight: 500 }}>¿Cómo lo calculamos?</strong><br/>
                IVA recuperable = gasto × 19% (Ley 21.210). La rebaja de renta se estima como el 27% del IVA recuperado, considerando el crédito fiscal como gasto deducible. El plan recomendado depende del gasto y los documentos que emites al mes.
              </div>
            </div>
          </Reveal>

          {/* Redirect buttons */}
          <Reveal delay={4}>
            <div style={{ marginTop: 32, display: "flex", gap: 10, flexWrap: "wrap" }}>
              <a className="btn btn-primary" href="pricing.html">
                <IconSpark size={13}/> Probar gratis
                <span className="arrow"><ArrowRight size={13}/></span>
              </a>
              <a className="btn btn-ghost" href="producto.html#gastos">
                <span className="btn-ic"><IconGlobe size={13}/></span>
                Cómo recupero el IVA
              </a>
              <a className="btn btn-ghost" href="agenda.html">
                <span className="btn-ic"><Calendar size={13}/></span>
                Agendar demo
              </a>
            </div>
          </Reveal>
        </div>

        <Reveal delay={2}>
          <div className="calc-result">
            <div className="calc-result-glow"/>
            <div style={{ position: "relative" }}>
              <div className="caption" style={{ color: "var(--signal)" }}>Tu ahorro anual neto</div>
              <div className="calc-result-number">
                ${ahorroNetoAnual.toLocaleString("es-CL")}
              </div>
              <div style={{ fontSize: 11.5, color: "var(--muted)", marginTop: 6 }}>
                después de descontar el plan {planRecomendado.name} anual
              </div>

              {/* Plan recomendado */}
              <div style={{ marginTop: 20, padding: "12px 14px", borderRadius: 12, background: "var(--signal-wash)", border: "1px solid var(--hairline-glow)", display: "flex", alignItems: "center", gap: 10 }}>
                <span style={{ fontSize: 10.5, padding: "3px 8px", borderRadius: 999, background: "var(--signal)", color: "var(--bg)", fontFamily: "var(--mono)", fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase" }}>
                  Tu plan
                </span>
                <div style={{ flex: 1, fontSize: 13, color: "var(--ink)" }}>
                  <strong style={{ fontWeight: 500 }}>{planRecomendado.name}</strong>
                  <span style={{ color: "var(--muted)", marginLeft: 6 }}>
                    · ${planRecomendado.priceMensual.toLocaleString("es-CL")}/mes
                  </span>
                </div>
              </div>

              <div style={{ marginTop: 20, paddingTop: 18, borderTop: "1px solid var(--hairline)", display: "flex", flexDirection: "column", gap: 10 }}>
                <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13.5 }}>
                  <span style={{ color: "var(--ink-2)" }}>IVA recuperable anual</span>
                  <span className="mono" style={{ color: "var(--ink)" }}>+${ivaAnual.toLocaleString("es-CL")}</span>
                </div>
                <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13.5 }}>
                  <span style={{ color: "var(--ink-2)" }}>Rebaja impuesto a la renta</span>
                  <span className="mono" style={{ color: "var(--ink)" }}>+${ahorroRentaAnual.toLocaleString("es-CL")}</span>
                </div>
                <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13.5, paddingTop: 6, borderTop: "1px dashed var(--hairline)" }}>
                  <span style={{ color: "var(--ink-2)" }}>Subtotal ahorro</span>
                  <span className="mono" style={{ color: "var(--ink)" }}>${ahorroBrutoAnual.toLocaleString("es-CL")}</span>
                </div>
                <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13.5 }}>
                  <span style={{ color: "var(--muted)" }}>− Plan {planRecomendado.name} anual</span>
                  <span className="mono" style={{ color: "var(--muted)" }}>−${planAnualCosto.toLocaleString("es-CL")}</span>
                </div>
              </div>
            </div>
            <div style={{ position: "absolute", bottom: -24, right: -18, transform: "rotate(6deg)", pointerEvents: "none", opacity: 0.9 }}>
              <Mascot pose="clap" size={120}/>
            </div>
          </div>
        </Reveal>
      </div>
    );
  }

  // Docs stepper — increments/decrements between plan tiers
  // Tiers map to plan limits (Mini 10 → Growth 500 → Full 1500 → Unlimited 5000)
  const DOCS_TIERS = [10, 500, 1500, 5000];

  function DocsStepper({ value, onChange }) {
    // Find current tier index (first tier value >= current value)
    const currentIdx = DOCS_TIERS.findIndex(t => value <= t);
    const idx = currentIdx === -1 ? DOCS_TIERS.length - 1 : currentIdx;

    const canDecrement = idx > 0;
    const canIncrement = idx < DOCS_TIERS.length - 1;

    // Label shown on the chip: "Menos de 10" / "Menos de 500" / "Más de 1.500", etc.
    const tierLabel = (i) => {
      if (i === DOCS_TIERS.length - 1) return `Más de ${DOCS_TIERS[i - 1].toLocaleString("es-CL")}`;
      return `Menos de ${DOCS_TIERS[i].toLocaleString("es-CL")}`;
    };

    function decrement() {
      if (canDecrement) onChange(DOCS_TIERS[idx - 1]);
    }
    function increment() {
      if (canIncrement) onChange(DOCS_TIERS[idx + 1]);
    }

    return (
      <div className="docs-stepper">
        <div className="docs-stepper-head">
          <span className="caption">Documentos tributarios al mes</span>
          <span className="docs-stepper-tag">{tierLabel(idx)}</span>
        </div>
        <div className="docs-stepper-controls">
          <button
            className="docs-stepper-btn"
            onClick={decrement}
            disabled={!canDecrement}
            aria-label="Menos documentos"
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
              <path d="M5 12h14" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
            </svg>
          </button>
          <div className="docs-stepper-value">
            <span className="docs-stepper-number">{DOCS_TIERS[idx].toLocaleString("es-CL")}</span>
            <span className="docs-stepper-unit">docs/mes</span>
          </div>
          <button
            className="docs-stepper-btn"
            onClick={increment}
            disabled={!canIncrement}
            aria-label="Más documentos"
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
              <path d="M5 12h14M12 5v14" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
            </svg>
          </button>
        </div>
      </div>
    );
  }

  function CalcSlider({ label, min, max, step, value, onChange, formatValue, minLabel, maxLabel }) {
    const pct = ((value - min) / (max - min)) * 100;
    return (
      <div className="calc-slider">
        <div className="calc-slider-head">
          <span className="caption">{label}</span>
          <span className="calc-slider-value">{formatValue(value)}</span>
        </div>
        <div className="calc-slider-track-wrap">
          <div className="calc-slider-track" style={{ "--pct": `${pct}%` }}>
            <div className="calc-slider-fill" style={{ width: `${pct}%` }}/>
            <div className="calc-slider-thumb" style={{ left: `${pct}%` }}/>
          </div>
          <input
            type="range"
            min={min}
            max={max}
            step={step}
            value={value}
            onChange={e => onChange(+e.target.value)}
            className="calc-slider-input"
            aria-label={label}
          />
        </div>
        <div className="calc-slider-limits">
          <span>{minLabel}</span>
          <span>{maxLabel}</span>
        </div>
      </div>
    );
  }

  window.Calculator = Calculator;
  window.CalcSlider = CalcSlider;
})();