// Savings Calc V1 — interactive "what this means in orders" calculator.
const SavingsCalcV1 = () => {
  const [isMobile, setIsMobile] = React.useState(false);
  React.useEffect(() => {
    const mq = () => setIsMobile(window.innerWidth < 760);
    mq();
    window.addEventListener("resize", mq);
    return () => window.removeEventListener("resize", mq);
  }, []);

  const [orders, setOrders] = React.useState(3000);
  const [aov, setAov] = React.useState(150);

  const COST_PER_CONFIRM = 1.4; // matches the site's own "Cost mediu/confirmare" stat
  const CONFIRM_RATE = 85; // locked — matches the site's own confirmation-rate stat

  const confirmed = Math.round(orders * (CONFIRM_RATE / 100));
  const value = confirmed * aov;
  const cost = confirmed * COST_PER_CONFIRM;
  const costPct = value > 0 ? (cost / value) * 100 : 0;
  const roas = cost > 0 ? value / cost : 0;

  const fmt = (n) => Math.round(n).toLocaleString("ro-RO");
  const mono = "ui-monospace, SFMono-Regular, Menlo, monospace";
  const eyebrow = { fontFamily: mono, fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--fg-3)" };

  const ROWS = [
    { key: "orders", label: "Comenzi confirmate / lună", value: orders, set: setOrders, min: 500, max: 10000, step: 100, fmt: (v) => v.toLocaleString("ro-RO") },
    { key: "aov", label: "Valoare medie comandă", value: aov, set: setAov, min: 50, max: 500, step: 10, fmt: (v) => `${v} lei` },
  ];

  return (
    <div className="ev-stage" style={{ width: "100%", height: "100%", padding: isMobile ? "56px 18px" : "96px 80px", display: "flex", justifyContent: "center" }}>
      <div style={{
        borderRadius: 22,
        border: "1px solid var(--glass-border-2)",
        background: "linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015))",
        padding: isMobile ? "26px 22px" : "36px 40px",
        maxWidth: 640, width: "100%",
      }}>
        <h2 style={{ fontSize: isMobile ? 26 : 32, fontWeight: 800, color: "var(--neon-purple)", letterSpacing: "-0.02em", textAlign: "center", margin: 0 }}>
          Uite de ce să colaborezi cu noi.
        </h2>

        <div style={{ display: "flex", flexDirection: "column", gap: 20, margin: "22px 0 26px" }}>
          {ROWS.map((row) => {
            const fillPct = ((row.value - row.min) / (row.max - row.min)) * 100;
            return (
              <div key={row.key}>
                <label htmlFor={`sc1-${row.key}`} style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 12, marginBottom: 9, fontSize: 13, color: "var(--fg-2)", cursor: "pointer" }}>
                  {row.label}
                  <b style={{ fontFamily: mono, fontSize: 13.5, fontWeight: 600, color: "#fff", whiteSpace: "nowrap" }}>{row.fmt(row.value)}</b>
                </label>
                <input
                  id={`sc1-${row.key}`}
                  type="range"
                  className="sc1-range"
                  min={row.min} max={row.max} step={row.step} value={row.value}
                  onChange={(e) => row.set(Number(e.target.value))}
                  style={{ "--fill": `${fillPct}%` }}
                />
              </div>
            );
          })}

          <div>
            <label style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 12, marginBottom: 9, fontSize: 13, color: "var(--fg-2)" }}>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                Rată de confirmare
                <window.Icon name="lock" size={11} color="var(--fg-3)" strokeWidth={2.2} />
              </span>
              <b style={{ fontFamily: mono, fontSize: 13.5, fontWeight: 600, color: "#fff", whiteSpace: "nowrap" }}>{CONFIRM_RATE}%</b>
            </label>
            <input
              type="range"
              className="sc1-range sc1-range--locked"
              min={0} max={100} step={1} value={CONFIRM_RATE}
              disabled
              readOnly
              style={{ "--fill": `${CONFIRM_RATE}%` }}
            />
          </div>
        </div>

        <div style={{ borderRadius: 16, overflow: "hidden", border: "1px solid rgba(9,169,85,0.24)", background: "linear-gradient(150deg, rgba(9,169,85,0.14), rgba(9,169,85,0.05))" }}>
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 14, padding: "14px 18px", borderBottom: "1px solid rgba(9,169,85,0.16)" }}>
            <span style={eyebrow}>Comenzi confirmate</span>
            <b style={{ fontSize: 24, fontWeight: 700, letterSpacing: "-0.04em", color: "#fff", lineHeight: 1 }}>{fmt(confirmed)}</b>
          </div>
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 14, padding: "16px 18px 18px", borderBottom: "1px solid rgba(9,169,85,0.16)" }}>
            <span style={eyebrow}>Valoarea totală a comenzilor</span>
            <b style={{ display: "flex", alignItems: "baseline", gap: 6, fontSize: "clamp(28px, 4vw, 40px)", fontWeight: 700, letterSpacing: "-0.04em", color: "var(--neon-purple-2)", lineHeight: 1 }}>
              {fmt(value)}<em style={{ fontStyle: "normal", fontFamily: mono, fontSize: 12, color: "var(--neon-purple-2)" }}>lei</em>
            </b>
          </div>
          <div style={{ padding: "18px", background: "rgba(0,0,0,0.3)" }}>
            <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 12, marginBottom: 10 }}>
              <span style={{ fontSize: 14, fontWeight: 800, color: "#fff", letterSpacing: "-0.01em" }}>Cost mediu confirmari 1,4 RON</span>
              {!isMobile && <span style={eyebrow}>ROAS</span>}
            </div>
            <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 12, flexWrap: "wrap" }}>
              <div style={{ display: "flex", alignItems: "baseline", gap: 9, flexWrap: "wrap" }}>
                <b style={{ fontFamily: mono, fontSize: "clamp(24px, 3vw, 32px)", fontWeight: 800, letterSpacing: "-0.03em", color: "#fff", lineHeight: 1 }}>{fmt(cost)} lei</b>
                <span style={{
                  fontSize: 13, fontWeight: 700, color: "var(--neon-purple-2)",
                  padding: "4px 10px", borderRadius: 999,
                  background: "rgba(9,169,85,0.16)", border: "1px solid rgba(9,169,85,0.35)",
                }}>{costPct.toFixed(1)}% din valoarea comenzilor</span>
              </div>
              {!isMobile && (
                <div style={{ fontFamily: mono, fontSize: "clamp(24px, 3vw, 32px)", fontWeight: 800, letterSpacing: "-0.03em", color: "var(--neon-purple-2)", lineHeight: 1 }}>{roas.toFixed(0)}x</div>
              )}
            </div>
            {isMobile && (
              <div style={{ display: "flex", alignItems: "baseline", gap: 10, marginTop: 14, paddingTop: 14, borderTop: "1px solid rgba(9,169,85,0.16)" }}>
                <span style={eyebrow}>ROAS</span>
                <b style={{ fontFamily: mono, fontSize: "clamp(22px, 5vw, 28px)", fontWeight: 800, letterSpacing: "-0.03em", color: "var(--neon-purple-2)", lineHeight: 1 }}>{roas.toFixed(0)}x</b>
              </div>
            )}
            <div style={{ marginTop: 18, paddingTop: 18, borderTop: "1px solid rgba(9,169,85,0.16)", fontSize: isMobile ? 26 : 32, fontWeight: 800, color: "#fff", letterSpacing: "-0.02em", lineHeight: 1.15, textAlign: "center" }}>
              Generezi <b style={{ color: "var(--neon-purple-2)" }}>{fmt(value)} lei</b> cu un cost de doar <b style={{ color: "var(--neon-purple-2)" }}>{fmt(cost)} lei</b>.
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .sc1-range {
          appearance: none; -webkit-appearance: none;
          width: 100%; height: 5px; border-radius: 99px; outline: none; cursor: pointer;
          background: linear-gradient(90deg, var(--neon-purple) var(--fill, 50%), rgba(255,255,255,0.09) var(--fill, 50%));
        }
        .sc1-range::-webkit-slider-thumb {
          appearance: none; -webkit-appearance: none;
          width: 17px; height: 17px; border-radius: 50%;
          background: #fff; border: 4px solid var(--neon-purple);
          cursor: grab; box-shadow: 0 3px 12px -3px rgba(9,169,85,0.9);
          transition: transform .2s ease;
        }
        .sc1-range::-webkit-slider-thumb:hover { transform: scale(1.15); }
        .sc1-range::-moz-range-thumb {
          width: 17px; height: 17px; border-radius: 50%;
          background: #fff; border: 4px solid var(--neon-purple);
          cursor: grab; box-shadow: 0 3px 12px -3px rgba(9,169,85,0.9);
        }
        .sc1-range::-moz-range-track { height: 5px; border-radius: 99px; background: rgba(255,255,255,0.09); }
        .sc1-range--locked { cursor: not-allowed; opacity: 0.55; }
        .sc1-range--locked::-webkit-slider-thumb { cursor: not-allowed; }
        .sc1-range--locked::-moz-range-thumb { cursor: not-allowed; }
      `}</style>
    </div>
  );
};

window.SavingsCalcV1 = SavingsCalcV1;