// bridge-page.jsx — the earnings-bridge calculator.
// Free: everything on screen. Paid (Deal Pack / Complete): one-page PDF (print) + Excel with live formulas.
// 🔴 Nothing the user types leaves the browser: state lives in localStorage only, no network calls with user data.

const BRIDGE_KEY = 'vc_bridge_v1';
const CLASSES = ['Defensible', 'Partly defensible', 'Not defensible'];
const CATEGORIES = ['A · Owner', 'B · Family', 'C · Personal', 'D · Related party', 'E · One-off', 'F · Other'];
const HINTS = {
  'A · Owner': 'What the owner takes, minus what it would cost to hire someone to do the same work. Underpaid owners give a negative number.',
  'B · Family': 'What family members are paid, minus the market value of the work they actually do.',
  'C · Personal': 'The personal share of the car, travel and card costs run through the company. Usually a positive add-back.',
  'D · Related party': 'Rent (or royalties) paid to the owner, minus the market rate. Below-market rent gives a negative number.',
  'E · One-off': 'One-off costs are added back (+). One-off income is taken out (−). Apply it both ways.',
  'F · Other': 'Anything else that will not continue under a new owner.',
};

const blankLine = (cat = 'A · Owner') => ({ id: Math.random().toString(36).slice(2, 9), item: '', cat, cls: 'Defensible', amount: '', reason: '' });
const EMPTY = () => ({ business: '', period: '', preparer: '', reported: '', lines: [blankLine('A · Owner'), blankLine('B · Family'), blankLine('C · Personal'), blankLine('D · Related party')], low: '', high: '', asking: '' });
const CASE047 = () => ({
  business: 'Teaching case №047 (illustrative)', period: 'FY', preparer: '', reported: '1200000',
  lines: [
    { id: 'a', item: 'Owner remuneration vs replacement cost', cat: 'A · Owner', cls: 'Defensible', amount: '-180000', reason: 'The two founders paid themselves well below the market cost of the roles they fill; a buyer has to pay for that work.' },
    { id: 'b', item: 'Family members on payroll', cat: 'B · Family', cls: 'Partly defensible', amount: '-220000', reason: 'Work done by family at below-market pay will cost more under a new owner.' },
    { id: 'c', item: 'Personal expenses through the company', cat: 'C · Personal', cls: 'Defensible', amount: '-95000', reason: 'Range Rover lease $34k, personal travel $18.6k, family medical $42.1k (figures as published in the case).' },
    { id: 'd', item: 'Below-market related-party rent', cat: 'D · Related party', cls: 'Defensible', amount: '-225000', reason: 'The owner owns the building; a new owner pays a market lease.' },
  ],
  low: '2.1', high: '4.5', asking: '5400000',
});

const num = (s) => { const n = parseFloat(String(s).replace(/[^0-9.\-]/g, '')); return isFinite(n) ? n : 0; };
const money = (n) => (n < 0 ? '−' : '') + '$' + Math.round(Math.abs(n)).toLocaleString('en-NZ');
const signed = (n) => (n > 0 ? '+' : n < 0 ? '−' : '') + Math.round(Math.abs(n)).toLocaleString('en-NZ');
const mult = (n) => (isFinite(n) && n > 0 ? n.toFixed(2) + '×' : '—');

function computeBridge(d) {
  const reported = num(d.reported);
  const lines = d.lines.map(l => ({ ...l, value: num(l.amount), counted: l.cls === 'Not defensible' ? 0 : num(l.amount) }));
  const counted = lines.reduce((a, l) => a + l.counted, 0);
  const transferable = reported + counted;
  const low = num(d.low), high = num(d.high), asking = num(d.asking);
  return { reported, lines, counted, transferable, low, high, asking,
    valueLow: transferable * low, valueHigh: transferable * high,
    reportedLow: reported * low, reportedHigh: reported * high,
    impliedReported: asking > 0 && reported > 0 ? asking / reported : NaN,
    impliedTransferable: asking > 0 && transferable > 0 ? asking / transferable : NaN };
}

function Field({ label, children, hint }) {
  const v4 = window.v4;
  return (
    <label style={{ display: 'block', marginBottom: 14 }}>
      <div style={{ fontFamily: v4.mono, fontSize: 11, letterSpacing: 1.5, textTransform: 'uppercase', color: v4.inkMuted, marginBottom: 6 }}>{label}</div>
      {children}
      {hint ? <div style={{ fontSize: 12.5, color: v4.inkMuted, marginTop: 6, lineHeight: 1.45 }}>{hint}</div> : null}
    </label>
  );
}

const inputStyle = (extra) => ({ width: '100%', boxSizing: 'border-box', padding: '11px 12px', fontSize: 16, fontFamily: window.v4.sans, border: `1.5px solid ${window.v4.ink}`, background: '#fff', color: window.v4.ink, outline: 'none', borderRadius: 0, ...extra });

function V4Bridge() {
  const v4 = window.v4;
  const accent = v4.yellow;
  const accent2 = v4.red;
  const access = window.useVCAccess();
  const [d, setD] = React.useState(() => {
    try { const s = localStorage.getItem(BRIDGE_KEY); if (s) return JSON.parse(s); } catch (e) {}
    return EMPTY();
  });
  const [busy, setBusy] = React.useState('');
  const [err, setErr] = React.useState('');
  React.useEffect(() => { try { localStorage.setItem(BRIDGE_KEY, JSON.stringify(d)); } catch (e) {} }, [d]);

  const r = computeBridge(d);
  const set = (k, v) => setD(x => ({ ...x, [k]: v }));
  const setLine = (id, k, v) => setD(x => ({ ...x, lines: x.lines.map(l => (l.id === id ? { ...l, [k]: v } : l)) }));
  const addLine = () => setD(x => ({ ...x, lines: [...x.lines, blankLine('F · Other')] }));
  const removeLine = (id) => setD(x => ({ ...x, lines: x.lines.filter(l => l.id !== id) }));
  const hasNumbers = r.reported !== 0;

  const exportExcel = async () => {
    setErr(''); setBusy('excel');
    try {
      await window.VCWorkbooks.download('bridge', {
        business: d.business, period: d.period, reported: r.reported, low: r.low || 3, high: r.high || 4, asking: r.asking,
        lines: r.lines.filter(l => l.item || l.value).map(l => ({ item: l.item, cat: l.cat, cls: l.cls, amount: l.value, reason: l.reason })),
        fileName: 'Earnings-Bridge' + (d.business ? '-' + d.business.replace(/[^A-Za-z0-9]+/g, '-').replace(/^-+|-+$/g, '').slice(0, 40) : '') + '.xlsx',
      });
    } catch (e) { setErr(e.message || 'Export failed.'); }
    setBusy('');
  };

  const card = { border: `1.5px solid ${v4.ink}`, background: v4.paper, padding: '22px 20px', marginBottom: 18 };
  const btn = (bg, color, extra) => ({ background: bg, color, border: `1.5px solid ${v4.ink}`, padding: '12px 16px', fontFamily: v4.mono, fontSize: 12, fontWeight: 700, letterSpacing: 1.5, textTransform: 'uppercase', cursor: 'pointer', ...extra });
  const maxBar = Math.max(1, Math.abs(r.reported), Math.abs(r.transferable), ...r.lines.map(l => Math.abs(l.counted)));

  return (
    <div style={{ width: '100%', background: v4.bg, color: v4.ink, fontFamily: v4.sans, fontSize: 15, lineHeight: 1.5 }}>
      <div className="vc-screen">
        <V4UtilityBar live="● FREE CALCULATOR · Your numbers stay in this browser" />
        <V4Nav current="Calculator" />

        <div style={{ padding: '56px 36px 40px', borderBottom: `4px solid ${v4.ink}` }}>
          <div style={{ fontFamily: v4.mono, fontSize: 12, letterSpacing: 3, color: v4.inkMuted, textTransform: 'uppercase', marginBottom: 18 }}>§ The earnings bridge · free</div>
          <h1 style={{ fontSize: 96, fontWeight: 800, letterSpacing: -4, lineHeight: 0.92, margin: 0 }}>
            Run your<br/><span style={{ background: accent, padding: '0 12px' }}>own numbers.</span>
          </h1>
          <p style={{ fontSize: 19, color: v4.inkSoft, maxWidth: 760, marginTop: 24, lineHeight: 1.5 }}>
            Start from the EBITDA in the accounts. Add or take out each line a new owner would see differently, and say why. The calculator turns it into transferable EBITDA and a value range. Nothing you type is sent anywhere — it is saved in this browser only.
          </p>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginTop: 22 }}>
            <button type="button" onClick={() => setD(CASE047())} style={btn(v4.ink, v4.bg)}>Load teaching case №047</button>
            <button type="button" onClick={() => { if (confirm('Clear every number on this page?')) setD(EMPTY()); }} style={btn('transparent', v4.ink)}>Start blank</button>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.15fr 1fr', alignItems: 'start' }}>
          {/* ── inputs ── */}
          <div style={{ padding: '36px 36px 48px', borderRight: `1.5px solid ${v4.ink}` }}>
            <div style={card}>
              <div style={{ fontFamily: v4.mono, fontSize: 12, letterSpacing: 2, fontWeight: 700, textTransform: 'uppercase', marginBottom: 16 }}>1 · The business</div>
              <Field label="Business name (optional)"><input value={d.business} onChange={e => set('business', e.target.value)} style={inputStyle()} placeholder="e.g. Harbour Trading Ltd" /></Field>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <Field label="Year (optional)"><input value={d.period} onChange={e => set('period', e.target.value)} style={inputStyle()} placeholder="FY2026" /></Field>
                <Field label="Prepared by (optional)"><input value={d.preparer} onChange={e => set('preparer', e.target.value)} style={inputStyle()} placeholder="Your name" /></Field>
              </div>
              <Field label="Reported EBITDA (NZD)" hint="From the accounts, before any adjustment.">
                <input inputMode="decimal" value={d.reported} onChange={e => set('reported', e.target.value)} style={inputStyle({ fontSize: 22, fontWeight: 700 })} placeholder="1,200,000" />
              </Field>
            </div>

            <div style={card}>
              <div style={{ fontFamily: v4.mono, fontSize: 12, letterSpacing: 2, fontWeight: 700, textTransform: 'uppercase', marginBottom: 6 }}>2 · Adjustments, line by line</div>
              <div style={{ fontSize: 13.5, color: v4.inkMuted, marginBottom: 16 }}>+ adds back to EBITDA, − takes off. Lines marked “Not defensible” are shown but not counted.</div>
              {d.lines.map((l, i) => (
                <div key={l.id} style={{ borderTop: `1px solid ${v4.lineSoft}`, paddingTop: 14, marginTop: i ? 14 : 0 }}>
                  <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 10 }}>
                    <Field label={`Line ${i + 1}`}><input value={l.item} onChange={e => setLine(l.id, 'item', e.target.value)} style={inputStyle()} placeholder="What is being adjusted" /></Field>
                    <Field label="Category">
                      <select value={l.cat} onChange={e => setLine(l.id, 'cat', e.target.value)} style={inputStyle({ appearance: 'auto' })}>{CATEGORIES.map(c => <option key={c}>{c}</option>)}</select>
                    </Field>
                  </div>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
                    <Field label="Amount (+ / −, NZD)"><input inputMode="decimal" value={l.amount} onChange={e => setLine(l.id, 'amount', e.target.value)} style={inputStyle({ fontWeight: 700 })} placeholder="-180,000" /></Field>
                    <Field label="Classification">
                      <select value={l.cls} onChange={e => setLine(l.id, 'cls', e.target.value)} style={inputStyle({ appearance: 'auto' })}>{CLASSES.map(c => <option key={c}>{c}</option>)}</select>
                    </Field>
                  </div>
                  <Field label="Why (this goes on the one-page export)" hint={HINTS[l.cat]}>
                    <textarea value={l.reason} onChange={e => setLine(l.id, 'reason', e.target.value)} rows={2} style={inputStyle({ fontSize: 15, resize: 'vertical' })} placeholder="The evidence that makes this line defensible" />
                  </Field>
                  <button type="button" onClick={() => removeLine(l.id)} style={{ background: 'none', border: 0, padding: 0, fontFamily: v4.mono, fontSize: 11, letterSpacing: 1.5, color: v4.inkMuted, textTransform: 'uppercase', cursor: 'pointer' }}>Remove line</button>
                </div>
              ))}
              <button type="button" onClick={addLine} style={btn('transparent', v4.ink, { marginTop: 18 })}>+ Add a line</button>
            </div>

            <div style={card}>
              <div style={{ fontFamily: v4.mono, fontSize: 12, letterSpacing: 2, fontWeight: 700, textTransform: 'uppercase', marginBottom: 16 }}>3 · Multiples</div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <Field label="Low (×)"><input inputMode="decimal" value={d.low} onChange={e => set('low', e.target.value)} style={inputStyle()} placeholder="3.0" /></Field>
                <Field label="High (×)"><input inputMode="decimal" value={d.high} onChange={e => set('high', e.target.value)} style={inputStyle()} placeholder="4.0" /></Field>
              </div>
              <Field label="Asking price (optional, NZD)" hint="To see what multiple the price implies on each number."><input inputMode="decimal" value={d.asking} onChange={e => set('asking', e.target.value)} style={inputStyle()} placeholder="5,400,000" /></Field>
            </div>
          </div>

          {/* ── results ── */}
          <div id="result" style={{ padding: '36px 36px 48px', position: 'sticky', top: 0, scrollMarginTop: 12 }}>
            <div style={{ background: v4.ink, color: v4.bg, padding: '26px 24px' }}>
              <div style={{ fontFamily: v4.mono, fontSize: 11, letterSpacing: 2, color: accent, textTransform: 'uppercase' }}>Transferable EBITDA</div>
              <div style={{ fontSize: 64, fontWeight: 800, letterSpacing: -2.5, lineHeight: 1, marginTop: 8, color: hasNumbers ? accent : '#5e5e5e' }}>{money(r.transferable)}</div>
              <div style={{ fontFamily: v4.mono, fontSize: 13, color: '#bdbdbd', marginTop: 10 }}>Reported {money(r.reported)} · adjustments {signed(r.counted)}</div>
              <div style={{ marginTop: 22, display: 'flex', flexDirection: 'column', gap: 7 }}>
                {[{ label: 'Reported', v: r.reported, base: true }, ...r.lines.filter(l => l.value).map(l => ({ label: l.item || l.cat, v: l.counted, off: l.cls === 'Not defensible', raw: l.value })), { label: 'Transferable', v: r.transferable, end: true }].map((row, i) => (
                  <div key={i} className="gc-row3" style={{ display: 'grid', gridTemplateColumns: '120px 1fr 92px', gap: 10, alignItems: 'center', fontSize: 12.5, opacity: row.off ? 0.45 : 1 }}>
                    <span style={{ display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden', lineHeight: 1.2, textDecoration: row.off ? 'line-through' : 'none' }}>{row.label}</span>
                    <span style={{ height: 12, background: '#2a2a2a', position: 'relative' }}>
                      <span style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: `${Math.min(100, Math.abs(row.off ? row.raw : row.v) / maxBar * 100)}%`, background: row.base ? v4.bg : row.end ? accent : (row.v < 0 ? accent2 : '#7ad9c5') }} />
                    </span>
                    <span style={{ fontFamily: v4.mono, textAlign: 'right' }}>{row.base || row.end ? money(row.v) : signed(row.off ? row.raw : row.v)}</span>
                  </div>
                ))}
              </div>
            </div>
            <div style={{ border: `1.5px solid ${v4.ink}`, borderTop: 0, background: v4.paper, padding: '20px 24px' }}>
              <div style={{ fontFamily: v4.mono, fontSize: 11, letterSpacing: 2, color: v4.inkMuted, textTransform: 'uppercase', marginBottom: 10 }}>Value range</div>
              <div style={{ fontSize: 30, fontWeight: 800, letterSpacing: -1 }}>{r.low && r.high ? `${money(r.valueLow)} – ${money(r.valueHigh)}` : 'Add a low and high multiple'}</div>
              {r.low && r.high ? <div style={{ fontSize: 13.5, color: v4.inkMuted, marginTop: 6 }}>Transferable EBITDA × {r.low}–{r.high}. The same multiples on reported EBITDA would give {money(r.reportedLow)} – {money(r.reportedHigh)}.</div> : null}
              {r.asking > 0 ? (
                <div style={{ marginTop: 14, paddingTop: 12, borderTop: `1px solid ${v4.lineSoft}`, fontSize: 14 }}>
                  Asking {money(r.asking)} is <b>{mult(r.impliedReported)}</b> reported EBITDA, and <b style={{ color: accent2 }}>{mult(r.impliedTransferable)}</b> transferable EBITDA.
                </div>
              ) : null}
            </div>

            {/* ── exports (paid) ── */}
            <div style={{ marginTop: 18, border: `1.5px solid ${v4.ink}`, padding: '20px 24px', background: access.export ? v4.bg : accent }}>
              <div style={{ fontFamily: v4.mono, fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', marginBottom: 8 }}>{access.export ? `● Unlocked · ${access.name}` : 'Take it with you · Deal Pack or Complete'}</div>
              <div style={{ fontSize: 20, fontWeight: 800, letterSpacing: -0.5, lineHeight: 1.2 }}>A one-page PDF with every line and its reason, and an Excel file with live formulas.</div>
              {access.export ? (
                <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginTop: 16 }}>
                  <button type="button" disabled={!hasNumbers} onClick={() => window.print()} style={btn(v4.ink, v4.bg, { opacity: hasNumbers ? 1 : 0.4 })}>↓ One-page PDF</button>
                  <button type="button" disabled={!hasNumbers || busy === 'excel'} onClick={exportExcel} style={btn('transparent', v4.ink, { opacity: hasNumbers ? 1 : 0.4 })}>{busy === 'excel' ? 'Building…' : '↓ Excel workbook'}</button>
                </div>
              ) : (
                <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginTop: 16, alignItems: 'center' }}>
                  <a href="pricing.html" style={{ ...btn(v4.ink, v4.bg), textDecoration: 'none' }}>See pricing · from NZD 249 →</a>
                  <a href="library.html#code" style={{ fontFamily: v4.mono, fontSize: 11, letterSpacing: 1.5, textTransform: 'uppercase', color: v4.ink }}>I have an access code</a>
                </div>
              )}
              {access.export && !hasNumbers ? <div style={{ fontSize: 12.5, marginTop: 10, color: v4.inkMuted }}>Enter a reported EBITDA first.</div> : null}
              {err ? <div style={{ fontSize: 13, marginTop: 10, color: accent2 }}>{err}</div> : null}
              {access.export ? <div style={{ fontSize: 12.5, marginTop: 10, color: v4.inkMuted }}>PDF: choose “Save as PDF” in the print dialog.</div> : null}
            </div>
            <div style={{ fontSize: 12, color: v4.inkMuted, marginTop: 14, lineHeight: 1.5 }}>
              An educational working paper, not a valuation report and not financial advice. Figures are yours and are not checked.
            </div>
          </div>
        </div>
        <V4Footer />
        {hasNumbers ? (
          <a href="#result" className="vc-mini" style={{ position: 'sticky', bottom: 0, zIndex: 5, justifyContent: 'space-between', alignItems: 'center', gap: 12, padding: '12px 16px', background: v4.ink, color: v4.bg, textDecoration: 'none', borderTop: `3px solid ${accent}` }}>
            <span style={{ fontFamily: v4.mono, fontSize: 11, letterSpacing: 1.5, textTransform: 'uppercase', color: accent }}>Transferable</span>
            <span style={{ fontSize: 20, fontWeight: 800 }}>{money(r.transferable)}</span>
            <span style={{ fontFamily: v4.mono, fontSize: 11, letterSpacing: 1.5, textTransform: 'uppercase' }}>Result ↓</span>
          </a>
        ) : null}
      </div>

      {/* ── print-only one-pager (paid: Deal Pack / Complete) ── */}
      {!access.export ? (
        <div className="vc-print" style={{ fontSize: 14, padding: '20mm 0' }}>
          The one-page export comes with the Keelvalue Deal Pack or Complete. See keelvalue.com/pricing.html
        </div>
      ) : (
      <div className="vc-print">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', borderBottom: '3px solid #0d0d0d', paddingBottom: 10 }}>
          <div>
            <div style={{ fontFamily: v4.mono, fontSize: 9, letterSpacing: 2, textTransform: 'uppercase', color: '#5e5e5e' }}>Earnings bridge · working paper</div>
            <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: -0.5 }}>{d.business || 'Unnamed business'}{d.period ? ` · ${d.period}` : ''}</div>
          </div>
          <div style={{ fontFamily: v4.mono, fontSize: 9, textAlign: 'right', color: '#5e5e5e' }}>
            {d.preparer ? <>Prepared by {d.preparer}<br/></> : null}
            {new Date().toLocaleDateString('en-NZ', { day: 'numeric', month: 'long', year: 'numeric' })}
          </div>
        </div>
        <table style={{ width: '100%', borderCollapse: 'collapse', marginTop: 12, fontSize: 10 }}>
          <thead>
            <tr style={{ textAlign: 'left', borderBottom: '1.5px solid #0d0d0d' }}>
              <th style={{ padding: '4px 4px', width: '26%' }}>Line</th><th style={{ width: '12%' }}>Category</th><th style={{ width: '13%' }}>Classification</th><th style={{ width: '12%', textAlign: 'right' }}>Amount</th><th style={{ width: '37%', paddingLeft: 10 }}>Reason</th>
            </tr>
          </thead>
          <tbody>
            <tr style={{ borderBottom: '1px solid #cbbfa9', fontWeight: 700 }}><td style={{ padding: '4px 4px' }}>Reported EBITDA</td><td /><td /><td style={{ textAlign: 'right' }}>{money(r.reported)}</td><td /></tr>
            {r.lines.filter(l => l.item || l.value).map(l => (
              <tr key={l.id} style={{ borderBottom: '1px solid #e2dccd', verticalAlign: 'top', color: l.cls === 'Not defensible' ? '#8a8a8a' : '#0d0d0d' }}>
                <td style={{ padding: '4px 4px' }}>{l.item || '—'}</td><td>{l.cat}</td><td>{l.cls}{l.cls === 'Not defensible' ? ' (not counted)' : ''}</td>
                <td style={{ textAlign: 'right' }}>{signed(l.value)}</td><td style={{ paddingLeft: 10 }}>{l.reason}</td>
              </tr>
            ))}
            <tr style={{ borderTop: '1.5px solid #0d0d0d', fontWeight: 700 }}><td style={{ padding: '5px 4px' }}>Adjustments counted</td><td /><td /><td style={{ textAlign: 'right' }}>{signed(r.counted)}</td><td /></tr>
            <tr style={{ fontWeight: 800, fontSize: 12 }}><td style={{ padding: '4px 4px' }}>Transferable EBITDA</td><td /><td /><td style={{ textAlign: 'right' }}>{money(r.transferable)}</td><td /></tr>
          </tbody>
        </table>
        {r.low && r.high ? (
          <div style={{ marginTop: 14, fontSize: 10.5, lineHeight: 1.5 }}>
            <b>Value range:</b> {money(r.valueLow)} – {money(r.valueHigh)} (transferable EBITDA × {r.low}–{r.high}). The same multiples on reported EBITDA: {money(r.reportedLow)} – {money(r.reportedHigh)}.
            {r.asking > 0 ? <> Asking price {money(r.asking)} = {mult(r.impliedReported)} reported, {mult(r.impliedTransferable)} transferable EBITDA.</> : null}
          </div>
        ) : null}
        <div style={{ marginTop: 18, paddingTop: 8, borderTop: '1px solid #cbbfa9', fontSize: 8.5, color: '#5e5e5e', lineHeight: 1.5 }}>
          Educational working paper prepared with Keelvalue (keelvalue.com). It is not a valuation report and not financial advice. All figures and reasons were entered by the preparer and have not been verified. Lines classified “Not defensible” are shown for completeness and excluded from the total.
        </div>
      </div>
      )}
    </div>
  );
}

window.V4Bridge = V4Bridge;