// calculator.jsx — interaktywny kalkulator utraconej sprzedaży
function Calculator() {
  const [revenue, setRevenue]   = React.useState(180000); // miesięczny obrót stacjonarny PLN
  const [avgTicket, setAvgTicket] = React.useState(420); // średnia wartość zamówienia
  const [callsAfterHours, setCallsAfterHours] = React.useState(45); // % zapytań poza godzinami

  // model
  const lossPct = Math.min(0.30, Math.max(0.08, 0.10 + (callsAfterHours/100)*0.35));
  const monthlyLoss = Math.round(revenue * lossPct);
  const annualLoss = monthlyLoss * 12;
  const ticketUp = avgTicket * 0.12; // 12% wzrost koszyka
  const recoveredMonthly = Math.round(monthlyLoss * 0.78 + (revenue / avgTicket) * ticketUp);
  const recoveredAnnual = recoveredMonthly * 12;
  const roi = Math.round((recoveredAnnual / 36000) * 10) / 10; // 36k zł / rok wdrożenia

  return (
    <section id="calculator" className="calc">
      <div className="container">
        <div className="section-head">
          <Eyebrow>Kalkulator</Eyebrow>
          <h2>Policz, ile <span className="hl">tracisz</span><br/>w tym miesiącu.</h2>
          <p>Wpisz trzy liczby. Zobaczysz, ile sprzedaży ucieka — i&nbsp;ile da się odzyskać. Bez maila, bez formularza.</p>
        </div>

        <div className="calc-grid">
          {/* Inputs */}
          <div className="calc-inputs">
            <CalcField
              label="Miesięczny obrót sklepu stacjonarnego"
              value={revenue} onChange={setRevenue}
              min={20000} max={1000000} step={5000}
              suffix=" zł"
              format={v => v.toLocaleString('pl-PL')}
            />
            <CalcField
              label="Średnia wartość zamówienia"
              value={avgTicket} onChange={setAvgTicket}
              min={50} max={5000} step={20}
              suffix=" zł"
              format={v => v.toLocaleString('pl-PL')}
            />
            <CalcField
              label="Jaki % zapytań przychodzi poza godzinami pracy?"
              value={callsAfterHours} onChange={setCallsAfterHours}
              min={5} max={80} step={1}
              suffix="%"
              hint="Wieczory, weekendy, niedziele, święta"
            />

            <div className="calc-meta">
              <span className="calc-meta-dot"/>
              Szacunki na podstawie danych z 120+ sklepów stacjonarnych z 7 branż
            </div>
          </div>

          {/* Output */}
          <div className="calc-output">
            <div className="calc-output-head">
              <span>Symulacja</span>
              <span className="calc-pulse"><span/>liczę w czasie rzeczywistym</span>
            </div>

            <div className="calc-big-loss">
              <div className="calc-big-label">Tracisz miesięcznie</div>
              <div className="calc-big-num">
                −{monthlyLoss.toLocaleString('pl-PL')} zł
              </div>
              <div className="calc-big-sub">
                ≈ {annualLoss.toLocaleString('pl-PL')} zł / rok · {Math.round(lossPct*100)}% obrotu
              </div>
            </div>

            <div className="calc-bars">
              <div className="calc-bar">
                <div className="calc-bar-label">
                  <span>Obrót obecny</span>
                  <strong>{revenue.toLocaleString('pl-PL')} zł</strong>
                </div>
                <div className="calc-bar-track">
                  <div className="calc-bar-fill base" style={{ width: '100%' }}/>
                </div>
              </div>
              <div className="calc-bar">
                <div className="calc-bar-label">
                  <span>Obrót po wdrożeniu Gorilla</span>
                  <strong className="brand">{(revenue + recoveredMonthly).toLocaleString('pl-PL')} zł</strong>
                </div>
                <div className="calc-bar-track">
                  <div className="calc-bar-fill new" style={{ width: `${Math.min(100, ((revenue+recoveredMonthly)/(revenue*1.5))*100)}%` }}/>
                </div>
              </div>
            </div>

            <div className="calc-kpis">
              <div className="calc-kpi">
                <div className="calc-kpi-label">Odzysk miesięczny</div>
                <div className="calc-kpi-val brand">+{recoveredMonthly.toLocaleString('pl-PL')} zł</div>
              </div>
              <div className="calc-kpi">
                <div className="calc-kpi-label">Odzysk rocznie</div>
                <div className="calc-kpi-val brand">+{recoveredAnnual.toLocaleString('pl-PL')} zł</div>
              </div>
              <div className="calc-kpi">
                <div className="calc-kpi-label">Zwrot z wdrożenia</div>
                <div className="calc-kpi-val">{roi}×</div>
              </div>
            </div>

            <a className="btn btn-primary btn-lg calc-cta" href="#contact">
              Pokaż mi to na moich danych <ArrowRight />
            </a>
          </div>
        </div>
      </div>

      <style>{`
        .calc{ background: var(--bg-2); }
        .calc .section-head h2 .hl{ color: var(--accent); }
        .calc-grid{
          display:grid; grid-template-columns: 1fr 1.2fr;
          gap: 24px;
        }
        .calc-inputs{
          background: var(--surface);
          border: 1px solid var(--line);
          border-radius: var(--radius-xl);
          padding: 32px;
          display:flex; flex-direction:column;
        }
        .calc-meta{
          margin-top: auto; padding-top: 20px;
          font-size: 12px; color: var(--ink-3);
          display:flex; align-items:center; gap:8px;
        }
        .calc-meta-dot{
          width:6px; height:6px; border-radius:50%; background: var(--brand);
        }
        .calc-output{
          background: var(--bg);
          border: 1px solid var(--line);
          border-radius: var(--radius-xl);
          padding: 32px;
          position: relative;
          overflow:hidden;
        }
        .calc-output::after{
          content:''; position:absolute; top:-100px; right:-100px;
          width: 320px; height: 320px;
          background: radial-gradient(circle, var(--accent), transparent 70%);
          opacity: 0.08; pointer-events:none;
        }
        .calc-output-head{
          display:flex; justify-content:space-between; align-items:center;
          font-size: 12.5px; color: var(--ink-3);
          padding-bottom: 18px; margin-bottom: 24px;
          border-bottom: 1px dashed var(--line);
        }
        .calc-pulse{
          display:inline-flex; align-items:center; gap:8px;
          font-family: var(--font-mono); font-size: 11px;
          text-transform: uppercase; letter-spacing: 0.06em;
        }
        .calc-pulse span{
          width:6px; height:6px; border-radius:50%; background: var(--brand);
          animation: pulse-dot 1.4s infinite;
        }

        .calc-big-loss{ margin-bottom: 24px; }
        .calc-big-label{ font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }
        .calc-big-num{
          font-family: var(--font-display);
          font-size: clamp(48px, 8vw, 92px);
          font-weight: 600;
          letter-spacing: -0.04em;
          line-height: 1;
          color: var(--accent);
          font-variant-numeric: tabular-nums;
        }
        .calc-big-sub{
          font-size: 13px; color: var(--ink-3);
          margin-top: 8px;
        }

        .calc-bars{ display:flex; flex-direction:column; gap: 14px; margin-bottom: 24px; }
        .calc-bar-label{
          display:flex; justify-content:space-between; align-items:baseline;
          font-size: 13px; color: var(--ink-2);
          margin-bottom: 6px;
        }
        .calc-bar-label strong{ font-family: var(--font-display); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
        .calc-bar-label .brand{ color: var(--brand); }
        .calc-bar-track{
          height: 12px; background: var(--surface-2);
          border-radius: 999px; overflow:hidden;
        }
        .calc-bar-fill{ height: 100%; border-radius: 999px; transition: width .5s var(--ease-out); }
        .calc-bar-fill.base{ background: var(--line-2); }
        .calc-bar-fill.new{ background: linear-gradient(90deg, var(--brand) 0%, #FFE600 100%); }

        .calc-kpis{
          display:grid; grid-template-columns: repeat(3, 1fr);
          gap: 12px;
          padding: 18px 0;
          border-top: 1px solid var(--line);
          margin-bottom: 24px;
        }
        .calc-kpi-label{ font-size: 11.5px; color: var(--ink-3); margin-bottom: 4px; }
        .calc-kpi-val{
          font-family: var(--font-display);
          font-size: clamp(20px, 2vw, 26px);
          font-weight: 600;
          font-variant-numeric: tabular-nums;
        }
        .calc-kpi-val.brand{ color: var(--brand); }

        .calc-cta{ width: 100%; }

        @media (max-width: 980px){
          .calc-grid{ grid-template-columns: 1fr; }
          .calc-kpis{ grid-template-columns: 1fr; gap: 8px; }
          .calc-kpi{ display:flex; justify-content:space-between; align-items:baseline; }
        }
      `}</style>
    </section>
  );
}

function CalcField({ label, value, onChange, min, max, step, suffix='', format=(v)=>v, hint }) {
  return (
    <div className="cf">
      <label className="cf-label">{label}</label>
      <div className="cf-row">
        <input
          type="range" min={min} max={max} step={step} value={value}
          onChange={(e) => onChange(Number(e.target.value))}
        />
        <div className="cf-readout">
          <input
            type="text"
            value={format(value)}
            onChange={(e) => {
              const num = Number(String(e.target.value).replace(/[^0-9]/g,''));
              if (!isNaN(num)) onChange(Math.max(min, Math.min(max, num)));
            }}
          />
          <span className="cf-suffix">{suffix}</span>
        </div>
      </div>
      {hint && <div className="cf-hint">{hint}</div>}
      <style>{`
        .cf{ display:flex; flex-direction:column; gap:8px; padding: 14px 0; border-bottom: 1px solid var(--line); }
        .cf:last-of-type{ border-bottom: 0; }
        .cf-label{ font-size: 13.5px; color: var(--ink); }
        .cf-row{ display:grid; grid-template-columns: 1fr auto; gap: 14px; align-items:center; }
        .cf-row input[type=range]{
          -webkit-appearance: none; appearance: none;
          width: 100%; height: 6px;
          background: var(--surface-2);
          border-radius: 999px;
          outline: none;
        }
        .cf-row input[type=range]::-webkit-slider-thumb{
          -webkit-appearance: none; appearance:none;
          width: 22px; height: 22px;
          border-radius: 50%;
          background: var(--brand);
          border: 2px solid var(--bg);
          box-shadow: 0 2px 8px rgba(0,0,0,.4), 0 0 0 6px rgba(200,255,0,.1);
          cursor: pointer;
          transition: transform .15s var(--ease-out);
        }
        .cf-row input[type=range]::-webkit-slider-thumb:hover{ transform: scale(1.1); }
        .cf-row input[type=range]::-moz-range-thumb{
          width: 22px; height: 22px;
          border-radius: 50%;
          background: var(--brand);
          border: 2px solid var(--bg);
          cursor: pointer;
        }
        .cf-readout{
          display:flex; align-items: baseline; gap: 4px;
          padding: 8px 12px;
          background: var(--bg-2);
          border: 1px solid var(--line);
          border-radius: 10px;
          min-width: 130px;
          justify-content: flex-end;
        }
        .cf-readout input{
          background: transparent; border: 0; outline: 0;
          color: var(--ink);
          font-family: var(--font-display);
          font-weight: 500;
          font-size: 18px;
          text-align: right;
          width: 100%;
          font-variant-numeric: tabular-nums;
        }
        .cf-suffix{ font-size: 13px; color: var(--ink-3); }
        .cf-hint{ font-size: 11.5px; color: var(--ink-3); }
      `}</style>
    </div>
  );
}

window.Calculator = Calculator;
