// Calculator.jsx — interactive ROAS/CPL/leads/pipeline estimator
// User drags sliders, numbers tick.

const calcStyles = {
  section: { padding: '96px 0' },
  container: { maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--container-pad)' },
  eyebrow: { fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg-muted)', fontWeight: 500, marginBottom: 8 },
  h: { fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(36px, 5vw, 60px)', lineHeight: 0.92, letterSpacing: '-0.015em', textTransform: 'uppercase', margin: '0 0 16px', maxWidth: '18ch' },
  sub: { fontFamily: 'var(--font-sans)', fontSize: 16, lineHeight: 1.5, color: 'var(--fg-muted)', maxWidth: '60ch', marginBottom: 40 },
  wrap: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, alignItems: 'start' },
  panel: { background: 'var(--bg-elevated)', border: '1px solid var(--border)', borderRadius: 'var(--r-md)', padding: '28px 30px' },
  fld: { display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 22 },
  fldHead: { display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' },
  label: { fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg-muted)', fontWeight: 500 },
  value: { fontFamily: 'var(--font-mono)', fontVariantNumeric: 'tabular-nums', fontSize: 18, color: 'var(--fg)' },
  slider: { width: '100%', accentColor: 'var(--ink-1000)' },
  output: { background: 'var(--ink-1000)', color: 'var(--ink-0)', borderRadius: 'var(--r-md)', padding: '28px 30px' },
  outTile: { padding: '14px 0', borderTop: '1px solid rgba(246,242,231,0.12)' },
  outLabel: { fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(246,242,231,0.55)', fontWeight: 500, marginBottom: 6 },
  outValue: (highlight) => ({
    fontFamily: 'var(--font-mono)', fontVariantNumeric: 'tabular-nums',
    fontSize: 36, letterSpacing: '-0.01em',
    color: highlight ? 'var(--powder-400)' : 'var(--ink-0)',
  }),
  outDelta: { fontFamily: 'var(--font-mono)', fontSize: 12, color: 'rgba(246,242,231,0.55)', marginTop: 2 },
};

function Calculator() {
  const [spend, setSpend] = React.useState(150000);   // ₹
  const [cpl,   setCpl]   = React.useState(1500);     // ₹
  const [closeRate, setCloseRate] = React.useState(18); // %
  const [ticket, setTicket] = React.useState(25000);  // ₹

  const leads = Math.round(spend / cpl);
  const customers = Math.round(leads * closeRate / 100);
  const revenue = customers * ticket;
  const roas = (revenue / spend);

  const fmtINR = (n) => '₹' + n.toLocaleString('en-IN');
  const fmtINRcompact = (n) => {
    if (n >= 1e7) return '₹' + (n/1e7).toFixed(2) + ' Cr';
    if (n >= 1e5) return '₹' + (n/1e5).toFixed(2) + ' L';
    return '₹' + n.toLocaleString('en-IN');
  };

  return (
    <section id="calc" style={calcStyles.section}>
      <div style={calcStyles.container}>
        <div style={calcStyles.eyebrow}>06 · Calculator</div>
        <h2 style={calcStyles.h}>What ₹1.5 lakh / month could do.</h2>
        <p style={calcStyles.sub}>
          Plug in your numbers. The output isn't a promise — it's the math we use
          before we agree to take a client on.
        </p>

        <div style={calcStyles.wrap}>
          <div style={calcStyles.panel}>
            <div style={calcStyles.fld}>
              <div style={calcStyles.fldHead}>
                <span style={calcStyles.label}>Monthly ad spend</span>
                <span style={calcStyles.value}>{fmtINR(spend)}</span>
              </div>
              <input type="range" min="50000" max="500000" step="10000"
                value={spend} onChange={e => setSpend(+e.target.value)} style={calcStyles.slider}/>
            </div>
            <div style={calcStyles.fld}>
              <div style={calcStyles.fldHead}>
                <span style={calcStyles.label}>Target CPL</span>
                <span style={calcStyles.value}>{fmtINR(cpl)}</span>
              </div>
              <input type="range" min="300" max="5000" step="50"
                value={cpl} onChange={e => setCpl(+e.target.value)} style={calcStyles.slider}/>
            </div>
            <div style={calcStyles.fld}>
              <div style={calcStyles.fldHead}>
                <span style={calcStyles.label}>Lead → customer close rate</span>
                <span style={calcStyles.value}>{closeRate}%</span>
              </div>
              <input type="range" min="2" max="40" step="1"
                value={closeRate} onChange={e => setCloseRate(+e.target.value)} style={calcStyles.slider}/>
            </div>
            <div style={{...calcStyles.fld, marginBottom: 0}}>
              <div style={calcStyles.fldHead}>
                <span style={calcStyles.label}>Avg ticket size</span>
                <span style={calcStyles.value}>{fmtINR(ticket)}</span>
              </div>
              <input type="range" min="2000" max="200000" step="1000"
                value={ticket} onChange={e => setTicket(+e.target.value)} style={calcStyles.slider}/>
            </div>
          </div>

          <div style={calcStyles.output}>
            <div style={{...calcStyles.outTile, borderTop: 'none', paddingTop: 0}}>
              <div style={calcStyles.outLabel}>Estimated qualified leads</div>
              <div style={calcStyles.outValue()}>{leads.toLocaleString('en-IN')}</div>
              <div style={calcStyles.outDelta}>per month at this CPL</div>
            </div>
            <div style={calcStyles.outTile}>
              <div style={calcStyles.outLabel}>New customers</div>
              <div style={calcStyles.outValue()}>{customers.toLocaleString('en-IN')}</div>
              <div style={calcStyles.outDelta}>at {closeRate}% close rate</div>
            </div>
            <div style={calcStyles.outTile}>
              <div style={calcStyles.outLabel}>Pipeline value</div>
              <div style={calcStyles.outValue(true)}>{fmtINRcompact(revenue)}</div>
              <div style={calcStyles.outDelta}>customers × avg ticket</div>
            </div>
            <div style={calcStyles.outTile}>
              <div style={calcStyles.outLabel}>Implied ROAS</div>
              <div style={calcStyles.outValue()}>{roas.toFixed(1)}×</div>
              <div style={calcStyles.outDelta}>revenue ÷ ad spend</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Calculator });