/* global React, Button, Badge */
const { useState: useStateCalc } = React;

const VOORDEEL_PCT = 0.668; // vaste aanname — gemiddeld financieel voordeel bij onze klanten
const VOORDEEL_LABEL = "66,8%";

function fmtInt(n) {
  return Math.round(n).toLocaleString("nl-NL");
}
function fmtEUR(n) {
  return "€ " + Math.round(n).toLocaleString("nl-NL");
}

function CalcSlider({ label, value, min, max, step, onChange, suffix, format }) {
  const pct = ((value - min) / (max - min)) * 100;
  return (
    <div style={{ marginBottom: 28 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 12, gap: 12 }}>
        <label style={{ fontFamily: "Inter, system-ui, sans-serif", fontSize: 14, fontWeight: 500, color: "rgba(255,255,255,0.82)" }}>{label}</label>
        <span style={{ fontFamily: "Inter, system-ui, sans-serif", fontSize: 18, fontWeight: 600, color: "#fff", fontVariantNumeric: "tabular-nums", whiteSpace: "nowrap" }}>
          {format ? format(value) : value}{suffix || ""}
        </span>
      </div>
      <input
        type="range"
        min={min} max={max} step={step} value={value}
        onChange={(e) => onChange(parseFloat(e.target.value))}
        className="calc-range"
        style={{
          width: "100%",
          background: `linear-gradient(90deg, #18E299 0%, #18E299 ${pct}%, rgba(255,255,255,0.14) ${pct}%, rgba(255,255,255,0.14) 100%)`,
        }}
      />
    </div>
  );
}

function SavingsCalculator() {
  const [dossiers, setDossiers] = useStateCalc(50);   // per maand
  const [urenPer, setUrenPer] = useStateCalc(4);       // uren per dossier nu
  const [uurtarief, setUurtarief] = useStateCalc(95);  // € per uur

  // guard: clamp to sane, non-negative values
  const d = Math.max(0, dossiers || 0);
  const u = Math.max(0, urenPer || 0);
  const t = Math.max(0, uurtarief || 0);

  const kostenPerDossier = u * t;
  const huidigeKostenPerJaar = d * 12 * kostenPerDossier;
  const voordeelPerJaar = huidigeKostenPerJaar * VOORDEEL_PCT;

  return (
    <section className="section-pad savings-stat" style={{
      background: "#0d0d0d",
      color: "#fff",
    }}>
      <div style={{ maxWidth: 1080, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 48 }}>
          <div style={{ display: "inline-flex", marginBottom: 20 }}>
            <span className="badge-pill" style={{
              display: "inline-flex", alignItems: "center", gap: 6,
              fontFamily: "Geist Mono, ui-monospace, monospace",
              fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.6px",
              padding: "5px 12px", borderRadius: 9999,
              background: "rgba(24,226,153,0.16)", color: "#18E299", border: "1px solid rgba(24,226,153,0.24)",
            }}>Rekentool</span>
          </div>
          <h2 style={{
            fontFamily: "Inter, system-ui, sans-serif",
            fontSize: "clamp(34px, 5vw, 52px)", fontWeight: 600,
            lineHeight: 1.08, letterSpacing: "-1.04px", color: "#fff", margin: 0, textWrap: "balance",
          }}>
            Bereken uw potentiële besparing.
          </h2>
          <p style={{
            fontFamily: "Inter, system-ui, sans-serif", fontSize: 17, lineHeight: 1.55,
            color: "rgba(255,255,255,0.62)", margin: "18px auto 0", maxWidth: 560, textWrap: "pretty",
          }}>
            Schat in welk financieel voordeel u jaarlijks kunt realiseren door uw dossiervoorwerk uit te besteden.
          </p>
        </div>

        <div className="calc-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, alignItems: "stretch" }}>
          {/* INPUT PANEL */}
          <div style={{
            background: "rgba(255,255,255,0.04)",
            border: "1px solid rgba(255,255,255,0.08)",
            borderRadius: 24, padding: 32,
          }}>
            <CalcSlider label="Aantal dossiers per maand" value={dossiers} min={1} max={500} step={1} onChange={setDossiers} format={fmtInt} />
            <CalcSlider label="Tijd per dossier nu" value={urenPer} min={0.5} max={24} step={0.5} onChange={setUrenPer} suffix=" uur" format={(v) => v.toLocaleString("nl-NL")} />
            <CalcSlider label="Uw kosten per uur" value={uurtarief} min={20} max={300} step={5} onChange={setUurtarief} format={fmtEUR} />

            <div style={{
              marginTop: 8, padding: "14px 16px",
              background: "rgba(24,226,153,0.08)", border: "1px solid rgba(24,226,153,0.20)",
              borderRadius: 12, display: "flex", gap: 10, alignItems: "flex-start",
            }}>
              <span style={{ flexShrink: 0, marginTop: 1, color: "#18E299", display: "inline-flex" }}>
                <Icon name="sparkles" size={15} stroke={2} />
              </span>
              <span style={{ fontFamily: "Inter, system-ui, sans-serif", fontSize: 13, lineHeight: 1.5, color: "rgba(255,255,255,0.72)" }}>
                Wij rekenen met een gemiddeld financieel voordeel van <strong style={{ color: "#18E299", fontWeight: 600 }}>{VOORDEEL_LABEL}</strong>, gebaseerd op het gemiddelde resultaat bij onze klanten.
              </span>
            </div>
          </div>

          {/* RESULT PANEL */}
          <div style={{
            background: "linear-gradient(160deg, rgba(24,226,153,0.10), rgba(255,255,255,0.02))",
            border: "1px solid rgba(255,255,255,0.10)",
            borderRadius: 24, padding: 32,
            display: "flex", flexDirection: "column",
          }}>
            <div style={{ fontFamily: "Geist Mono, ui-monospace, monospace", fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.7px", color: "#18E299", marginBottom: 14 }}>
              Geïndiceerd financieel voordeel per jaar
            </div>
            <div className="calc-result" style={{
              fontFamily: "Inter, system-ui, sans-serif",
              fontSize: "clamp(48px, 7vw, 76px)", fontWeight: 600, lineHeight: 1,
              letterSpacing: "-2.5px", color: "#fff", fontVariantNumeric: "tabular-nums",
            }}>
              {fmtEUR(voordeelPerJaar)}
            </div>

            <div style={{ marginTop: 24, paddingTop: 20, borderTop: "1px solid rgba(255,255,255,0.10)", display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 12 }}>
              <span style={{ fontFamily: "Inter, system-ui, sans-serif", fontSize: 14, color: "rgba(255,255,255,0.62)" }}>Uw huidige kosten per jaar</span>
              <span style={{ fontFamily: "Inter, system-ui, sans-serif", fontSize: 22, fontWeight: 600, color: "#fff", fontVariantNumeric: "tabular-nums" }}>{fmtEUR(huidigeKostenPerJaar)}</span>
            </div>

            <p style={{ fontFamily: "Inter, system-ui, sans-serif", fontSize: 13, lineHeight: 1.55, color: "rgba(255,255,255,0.55)", margin: "24px 0 0", textWrap: "pretty" }}>
              Dit is een schatting op basis van uw invoer. Uw netto voordeel hangt af van ons per-dossier tarief. Neem contact op voor een offerte.
            </p>

            <div style={{ marginTop: "auto", paddingTop: 24 }}>
              <Button variant="brand" size="lg" fullWidth href="/contact" icon="arrow-right">Vraag een demo aan</Button>
            </div>
          </div>
        </div>

        {/* METHODOLOGIE — uitleg waar de besparing op gebaseerd is */}
        <div style={{
          marginTop: 24,
          padding: "30px 32px",
          background: "rgba(255,255,255,0.04)",
          border: "1px solid rgba(255,255,255,0.08)",
          borderRadius: 24,
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 14 }}>
            <span style={{ color: "#18E299", display: "inline-flex" }}><Icon name="check-circle" size={16} stroke={2} /></span>
            <span style={{ fontFamily: "Geist Mono, ui-monospace, monospace", fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.7px", color: "rgba(255,255,255,0.62)" }}>Hoe berekenen we dit?</span>
          </div>
          <p style={{ fontFamily: "Inter, system-ui, sans-serif", fontSize: 14.5, lineHeight: 1.65, color: "rgba(255,255,255,0.72)", margin: 0, maxWidth: 760 }}>
            De <strong style={{ color: "#fff", fontWeight: 600 }}>{VOORDEEL_LABEL}</strong> is het gemiddelde financiële voordeel dat onze klanten realiseren wanneer zij het dossiervoorwerk aan ons uitbesteden. We passen dit toe op uw huidige kosten voor dit werk. Zo ziet u welk bedrag u per jaar kunt vrijspelen. De uitkomst is een indicatie; uw netto voordeel hangt af van ons per-dossier tarief.
          </p>
        </div>
      </div>

      <style>{`
        .calc-range {
          -webkit-appearance: none; appearance: none;
          height: 6px; border-radius: 9999px; outline: none; cursor: pointer;
        }
        .calc-range::-webkit-slider-thumb {
          -webkit-appearance: none; appearance: none;
          width: 22px; height: 22px; border-radius: 9999px;
          background: #fff; border: 3px solid #18E299; cursor: pointer;
          box-shadow: 0 2px 6px rgba(0,0,0,0.35);
          transition: transform 120ms ease;
        }
        .calc-range::-webkit-slider-thumb:hover { transform: scale(1.12); }
        .calc-range::-moz-range-thumb {
          width: 22px; height: 22px; border-radius: 9999px;
          background: #fff; border: 3px solid #18E299; cursor: pointer;
          box-shadow: 0 2px 6px rgba(0,0,0,0.35);
        }
        @media (max-width: 800px) {
          .calc-grid { grid-template-columns: 1fr !important; }
          .calc-steps { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

window.SavingsCalculator = SavingsCalculator;