/* ===================================================================
   EMBED - compact "Powered by Perx · Covase" widget (LIGHT theme).
   Designed to drop into a neutral partner site (accountant, payroll
   bureau, broker, employer intranet) and read on a white background.
   =================================================================== */
const { useState: useStateE, useMemo: useMemoE } = React;

function EmbedWidget({ bare }) {
  const [evId, setEvId] = useStateE('tesla-model-3');
  const [band, setBand] = useStateE('higher');
  const ev = useMemoE(() => PX.EVS.find(e => e.id === evId) || PX.EVS[0], [evId]);
  const r = useMemoE(() => PX.calcEV(ev, band, 36), [ev, band]);

  return (
    <div className="embed">
      <div className="embed-top">
        <div className="wm"><div className="wm-mk">P</div>
          <div className="wm-tx"><span className="wm-nm">Perx</span><span className="wm-sub">EV salary sacrifice</span></div>
        </div>
        <span className="embed-tag">CALCULATOR</span>
      </div>
      <div className="embed-body">
        <label className="embed-lab">Choose an electric car</label>
        <select className="embed-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}</option>)}
        </select>
        <label className="embed-lab">Your tax band</label>
        <div className="embed-segl">
          {[['basic', 'Basic 20%'], ['higher', 'Higher 40%'], ['additional', 'Add. 45%']].map(([v, l]) => (
            <button key={v} className={band === v ? 'on' : ''} onClick={() => setBand(v)}>{l}</button>
          ))}
        </div>
      </div>
      <div className="embed-result">
        <div className="erk">{ev.make} {ev.model} — indicative net cost</div>
        <div className="ern">{PX.gbp(r.net)}<span style={{ fontSize: 18, color: '#aeb0d6' }}>/mo</span></div>
        <div className="erc">vs {PX.gbp(r.pcp)}/mo on personal PCP</div>
        <div className="erbik">Includes 2026/27 BIK at 4%</div>
      </div>
      <a className="embed-cta" href="https://apply.covase.co.uk" target="_blank" rel="noreferrer">See if you're eligible →</a>
      <div className="embed-caveat">Indicative only — not financial advice. Salary sacrifice reduces gross pay and may affect pension, mortgage affordability and state benefits.</div>
      <div className="embed-foot">
        <span className="pw"><span style={{ width: 16, height: 16, borderRadius: 5, background: '#A7EB52', color: '#0a1c03', display: 'grid', placeItems: 'center', fontWeight: 800, fontSize: 10 }}>P</span> Powered by Perx · Covase</span>
        <span>BVRLA #2181</span>
      </div>
    </div>
  );
}

function EmbedShowcase() {
  return (
    <div>
      <ToolHead eyebrow="Embeddable widget"
        title="Drop Perx into any partner site"
        sub="A compact, restrained widget that reads on a white background — for accountants, payroll bureaus, brokers and employer intranets. One line of iframe." />
      <div className="embed-context">
        <div className="embed-fake-nav"><span>Services</span><span>About</span><span>Resources</span><span>Contact</span></div>
        <div className="embed-fakehead" style={{ marginTop: 22 }}>
          <div className="lg">H&amp;P</div>
          <div><div className="ft">Harte &amp; Pryce</div><div className="fs">Chartered Accountants · Bristol</div></div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr .9fr', gap: 30, alignItems: 'center', marginTop: 6 }} className="embed-split">
          <div className="embed-fake-copy">
            <h3>Thinking about an electric company car?</h3>
            <p>Salary sacrifice is one of the most tax-efficient ways for our clients' employees to drive electric. Use the calculator to get an indicative monthly figure, then talk to our team about setting up a scheme.</p>
            <p style={{ marginTop: 12 }}>We partner with Covase to run the scheme end-to-end — eligibility, BIK, HMRC and payroll.</p>
          </div>
          <div><EmbedWidget /></div>
        </div>
      </div>
      <p className="note" style={{ maxWidth: '60ch' }}>The widget is theme-light by default and inherits a neutral container. Partners embed it with a single <code style={{ color: 'var(--violet)' }}>&lt;iframe&gt;</code>; the "Powered by Perx · Covase" footer and BVRLA membership stay fixed.</p>
    </div>
  );
}

window.EmbedShowcase = EmbedWidget && EmbedShowcase;
window.EmbedWidget = EmbedWidget;