/* ===================================================================
   TOOL B - EV salary-sacrifice & company-car-tax (BIK) calculator
   Employee-facing. Shows the 2026/27 BIK rate (4%) explicitly and an
   indicative net monthly cost vs PCP/cash. Compliance-safe copy.
   =================================================================== */
const { useState: useStateB, useMemo: useMemoB } = React;

const POPULAR = ['tesla-model-3', 'byd-atto-2', 'kia-ev3', 'polestar-2'];

function ToolB() {
  const [evId, setEvId] = useStateB('tesla-model-3');
  const [band, setBand] = useStateB('higher');
  const [term, setTerm] = useStateB(36);
  const [mileage, setMileage] = useStateB(10000);
  const [unlocked, setUnlocked] = useStateB(false);
  const [share, setShare] = useStateB(false);
  const ref = useMemoB(() => PX.shortRef(), []);

  const ev = useMemoB(() => PX.EVS.find(e => e.id === evId) || PX.EVS[0], [evId]);
  const r = useMemoB(() => PX.calcEV(ev, band, term), [ev, band, term]);
  const name = ev.make + ' ' + ev.model;
  const popular = POPULAR.map(id => PX.EVS.find(e => e.id === id)).filter(Boolean);

  return (
    <div>
      <ToolHead eyebrow="Covase EV salary sacrifice"
        title="What does an EV really cost through salary sacrifice?"
        sub="Pick a car and your tax band. We'll show an indicative net monthly cost after income tax, NI and the 2026/27 company-car (BIK) tax — and how it compares to PCP." />

      <div className="grid2">
        {/* INPUTS */}
        <div className="card card-pad">
          <div className="card-title"><span className="n">1</span>Choose your EV</div>
          <div className="field">
            <div className="flabel"><b>Popular choices</b><span className="hint">Tap to pick</span></div>
            <div className="prodgrid">
              {popular.map(e => {
                const on = ev.id === e.id;
                return (
                  <button key={e.id} className={'prodchip' + (on ? ' on' : '')} onClick={() => setEvId(e.id)} style={{ minHeight: 92 }}>
                    <span className="chk">{UIICON.check}</span>
                    <div style={{ marginTop: 'auto' }}>
                      <div className="pname" style={{ fontSize: 13 }}>{e.make}</div>
                      <div className="pname" style={{ fontSize: 14, marginTop: 1 }}>{e.model}</div>
                      <div className="pcost">{PX.gbp(e.lease)}/mo</div>
                    </div>
                  </button>
                );
              })}
            </div>
          </div>
          <div className="field">
            <div className="flabel"><b>All models</b><span className="hint">{PX.EVS.length} curated EVs</span></div>
            <select className="sel" value={evId} onChange={e => setEvId(e.target.value)}>
              {PX.EVS.map(e => (
                <option key={e.id} value={e.id}>{e.make} {e.model} — {e.variant} · {PX.gbp(e.p11d)}</option>
              ))}
            </select>
          </div>
          <div className="divider"></div>
          <div className="field">
            <div className="flabel"><b>Your tax band</b></div>
            <Seg value={band} onChange={setBand} options={[
              { value: 'basic', label: 'Basic', sub: '20%' },
              { value: 'higher', label: 'Higher', sub: '40%' },
              { value: 'additional', label: 'Additional', sub: '45%' },
            ]} />
          </div>
          <div className="field">
            <div className="flabel"><b>Contract term</b></div>
            <Seg value={term} onChange={setTerm} options={[
              { value: 24, label: '24 mo' }, { value: 36, label: '36 mo' }, { value: 48, label: '48 mo' },
            ]} />
          </div>
          <div className="field">
            <div className="flabel"><b>Annual mileage</b><span className="val">{mileage.toLocaleString()} mi</span></div>
            <Seg value={mileage} onChange={setMileage} options={[
              { value: 8000, label: '8k' }, { value: 10000, label: '10k' },
              { value: 12000, label: '12k' }, { value: 15000, label: '15k' },
            ]} />
          </div>
        </div>

        {/* RESULT */}
        <div className="sticky">
          <div className="hero fade-in">
            <div className="hero-kick">{UIICON.spark} {name} · {ev.variant}</div>
            <div className="hero-num">{PX.gbp(r.net)}<span className="per">/mo</span></div>
            <div className="hero-cap">A <b>{name}</b> costs you about <b>{PX.gbp(r.net)}/mo</b> through salary sacrifice —
              from a {PX.gbp(r.gross)}/mo gross rental, after {Math.round(r.band.rate * 100)}% tax and {Math.round(r.band.nic * 100)}% NI relief, including BIK.</div>
            <div className="pill-row" style={{ marginTop: 16 }}>
              <span className="pill tag-bik">BIK {r.bikYear} · {Math.round(r.bikRate * 100)}%</span>
              <span className="pill">{ev.range} mi range</span>
              <span className="pill">P11D {PX.gbp(ev.p11d)}</span>
            </div>

            {/* comparison */}
            <div className="metrics" style={{ marginTop: 18 }}>
              <div className="metric"><div className="ml">Salary sacrifice</div><div className="mv g">{PX.gbp(r.net)}</div></div>
              <div className="metric"><div className="ml">Personal PCP</div><div className="mv dim">{PX.gbp(r.pcp)}</div></div>
              <div className="metric"><div className="ml">Net difference / mo</div><div className="mv">{PX.gbp(r.savingVsPcpM)}</div></div>
            </div>

            {/* rising BIK schedule (HMRC, confirmed to 2029/30) */}
            <div className="bik-sched">
              <span className="bsl">Company-car (BIK) rate rises each year:</span>
              {r.bikSchedule.map(s => (
                <span key={s.year} className={'bsp' + (s.year === r.bikYear ? ' on' : '')}>
                  {s.year.replace('20', '').replace('/', '/')} · {Math.round(s.rate * 100)}%
                </span>
              ))}
            </div>

            <div style={{ marginTop: 18 }}>
              <EmailGate unlocked={unlocked} onUnlock={() => setUnlocked(true)}
                headline="See if you're eligible"
                blurb="Enter your email to unlock the full BIK and relief breakdown, and check whether your employer can offer Covase EV salary sacrifice."
                lead={() => ({
                  _subject: 'Covase EV salary sacrifice — new lead',
                  tool: 'EV salary sacrifice',
                  vehicle: name + ' — ' + ev.variant,
                  'tax band': r.band.label,
                  term: term + ' months',
                  'annual mileage': mileage.toLocaleString() + ' mi',
                  'indicative net monthly cost': PX.gbp2(r.net),
                  'gross monthly rental': PX.gbp2(r.gross),
                  'vs personal PCP': PX.gbp(r.pcp) + '/mo',
                  ref: ref,
                })}>
                <div className="bd">
                  <div className="bd-row"><span className="l">Gross monthly rental</span><span className="v">{PX.gbp2(r.gross)}</span></div>
                  <div className="bd-row"><span className="l">Income tax relief ({Math.round(r.band.rate * 100)}%)</span><span className="v pos">−{PX.gbp2(r.taxSaving)}</span></div>
                  <div className="bd-row"><span className="l">NI relief ({Math.round(r.band.nic * 100)}%)</span><span className="v pos">−{PX.gbp2(r.nicSaving)}</span></div>
                  <div className="bd-row"><span className="l">Company-car tax (BIK)<small>{Math.round(r.bikRate * 100)}% of {PX.gbp(ev.p11d)} P11D ({r.bikYear}), income tax at {Math.round(r.band.rate * 100)}%</small></span><span className="v neg">+{PX.gbp2(r.bikTax)}</span></div>
                  <div className="bd-row"><span className="l">BIK NI on benefit ({Math.round(r.band.nic * 100)}%)</span><span className="v neg">+{PX.gbp2(r.bikNi)}</span></div>
                  <div className="bd-row tot"><span className="l">Indicative net monthly cost</span><span className="v">{PX.gbp2(r.net)}</span></div>
                  <div className="bd-row"><span className="l">vs personal PCP ({PX.gbp(r.pcp)}/mo)<small>indicative consumer PCP: ratebook rental + VAT</small></span><span className="v pos">{PX.gbp(r.savingVsPcpM)}/mo lower</span></div>
                  <div className="bd-row"><span className="l">Over {term}-month term, vs PCP</span><span className="v pos">{PX.gbp(r.savingVsPcp)}</span></div>
                </div>
                <div style={{ display: 'flex', gap: 10, marginTop: 18 }}>
                  <a className="cta" href="https://apply.covase.co.uk" target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }}>{UIICON.spark} See if you're eligible</a>
                  <button className="cta ghost" onClick={() => setShare(true)} style={{ width: 'auto', padding: '15px 18px' }}>{UIICON.share}</button>
                </div>
              </EmailGate>
            </div>
            <Caveat />
            <TrustStrip />
          </div>
          <ShareModal open={share} onClose={() => setShare(false)} refCode={ref}
            big={PX.gbp(r.net)} bigEm="/mo"
            sub={`A ${name} for an indicative ${PX.gbp(r.net)}/mo through Covase EV salary sacrifice.`} />
        </div>
      </div>
    </div>
  );
}

window.ToolB = ToolB;