// Finance Company / Lender journey
// 2 layout variants: 'split' (classic portal) and 'workflow' (top-down checklist)

const LenderJourney = ({ layout = 'split', onBack }) => {
  const [step, setStep] = useState(0);
  const [hin, setHin] = useState('');
  const [vesselId, setVesselId] = useState('');
  const [valuation, setValuation] = useState('');
  const [loanAmount, setLoanAmount] = useState('');
  const [term, setTerm] = useState('60');
  const [searching, setSearching] = useState(false);
  const [registering, setRegistering] = useState(false);
  const [chargeRef, setChargeRef] = useState('');

  const steps = ['Application received', 'Vessel details', 'Pre-lend search', 'Review results', 'Register charge'];
  const boat = BOATS.find(b => b.id === vesselId);

  const goSearch = () => {
    setSearching(true);
    setStep(2);
    setTimeout(() => { setSearching(false); setStep(3); }, 1900);
  };
  const goRegister = () => {
    setRegistering(true);
    setTimeout(() => {
      const ref = 'CHG-' + new Date().getFullYear() + '-' + Math.floor(100000 + Math.random() * 899999);
      setChargeRef(ref);
      setRegistering(false);
      setStep(5);
    }, 1400);
  };
  const reset = () => {
    setStep(0); setHin(''); setVesselId(''); setValuation(''); setLoanAmount(''); setTerm('60');
    setSearching(false); setRegistering(false); setChargeRef('');
  };

  // ----- Screens -----
  const ScreenApplication = () => (
    <div className="fade-up" style={{ display: 'grid', gridTemplateColumns: layout === 'workflow' ? '1fr' : '2fr 1fr', gap: 20 }}>
      <div className="card">
        <CardHeader title="New finance application — inbound" sub="Auto-routed from origination system · 2 minutes ago" icon="bell" right={<span className="pill pill-info"><span className="dot" />Awaiting checks</span>} />
        <div style={{ padding: 18 }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
            <KVStack label="Applicant" value="Avalon Maritime Ltd" sub="Company · CRN 09824421" />
            <KVStack label="Vessel (declared)" value="Princess V58" sub="2019 · HIN supplied" mono />
            <KVStack label="Loan requested" value="£312,000" sub="Term 60 months · 7.4% APR" />
            <KVStack label="Origin" value="Coastline portal" sub="Submitted by broker 14:08" />
          </div>
          <div style={{ marginTop: 18, padding: 14, background: 'var(--paper-2)', borderRadius: 8, borderLeft: '3px solid var(--accent)', fontSize: 13, color: 'var(--ink-2)' }}>
            Standard pre-lend procedure: confirm no prior charge against the vessel, verify insurance is in force,
            confirm declared owner matches the register. Estimated check time: under 2 minutes.
          </div>
        </div>
        <div style={{ padding: '14px 18px', borderTop: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>Session: 2FA verified · A. Mortimer · Coastline Capital</div>
          <button className="btn btn-primary" onClick={() => setStep(1)}>
            Begin vessel check
            <Icon name="arrowRight" />
          </button>
        </div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <Stat label="Open applications" value="14" sub="3 awaiting checks" />
        <Stat label="Avg. check time" value="1m 47s" sub="Last 30 days" />
        <Stat label="Charges registered (MTD)" value="38" sub="£4.2m total advance" />
      </div>
    </div>
  );

  const ScreenVesselDetails = () => (
    <div className="fade-up" style={{ display: 'grid', gridTemplateColumns: layout === 'workflow' ? '1fr' : '2fr 1fr', gap: 20 }}>
      <div className="card">
        <CardHeader title="Vessel details" sub="Step 2 · From the finance application" icon="boat" />
        <div style={{ padding: 18, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          <div style={{ gridColumn: '1 / -1' }}>
            <label className="input-label">Hull Identification Number (HIN)</label>
            <BoatSelect value={vesselId} onChange={(id) => { setVesselId(id); const b = BOATS.find(x => x.id === id); if (b) { setHin(b.hin); setValuation(b.value); setLoanAmount(Math.round(b.value * 0.4)); }}} />
          </div>
          <div>
            <label className="input-label">Estimated value</label>
            <input className="input mono" placeholder="£" value={valuation ? '£' + Number(valuation).toLocaleString('en-GB') : ''} onChange={(e) => setValuation(e.target.value.replace(/[^0-9]/g, ''))} />
          </div>
          <div>
            <label className="input-label">Loan amount</label>
            <input className="input mono" placeholder="£" value={loanAmount ? '£' + Number(loanAmount).toLocaleString('en-GB') : ''} onChange={(e) => setLoanAmount(e.target.value.replace(/[^0-9]/g, ''))} />
          </div>
          <div>
            <label className="input-label">Term (months)</label>
            <select className="select" value={term} onChange={(e) => setTerm(e.target.value)}>
              <option value="36">36 months</option>
              <option value="60">60 months</option>
              <option value="84">84 months</option>
              <option value="120">120 months</option>
            </select>
          </div>
          <div>
            <label className="input-label">Product</label>
            <select className="select"><option>Marine mortgage — fixed</option><option>Marine mortgage — variable</option><option>Asset-backed lease</option></select>
          </div>
        </div>
        <div style={{ padding: '14px 18px', borderTop: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between' }}>
          <button className="btn btn-ghost" onClick={() => setStep(0)}><Icon name="arrowLeft" />Back</button>
          <button className="btn btn-primary" disabled={!vesselId} onClick={goSearch} style={{ opacity: vesselId ? 1 : 0.5 }}>
            Run pre-lend check
            <Icon name="search" color="white" />
          </button>
        </div>
      </div>
      <div className="card card-pad">
        <div style={{ fontSize: 11.5, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.04em', fontWeight: 500, marginBottom: 10 }}>What we check</div>
        {[
          { i: 'history', t: 'Outstanding charges', d: 'Mortgages, leases, beneficial interests across all participating lenders.' },
          { i: 'shield', t: 'Insurance in force', d: 'Confirms a valid policy exists and isn\'t about to lapse.' },
          { i: 'alert', t: 'Fraud & stolen flags', d: 'Cross-market alerts, hull identity disputes, theft reports.' },
          { i: 'user', t: 'Owner match', d: 'Declared owner reconciles with the register.' },
        ].map((c, i) => (
          <div key={i} style={{ display: 'flex', gap: 11, padding: '10px 0', borderBottom: i < 3 ? '1px solid var(--line)' : 'none' }}>
            <div style={{ color: 'var(--accent)', paddingTop: 1 }}><Icon name={c.i} size={15} /></div>
            <div>
              <div style={{ fontWeight: 500, fontSize: 13 }}>{c.t}</div>
              <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 1 }}>{c.d}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );

  const ScreenSearching = () => (
    <div className="fade-up card" style={{ padding: 48, textAlign: 'center' }}>
      <div style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 56, height: 56, borderRadius: 12, background: 'var(--accent-soft)', color: 'var(--accent)', marginBottom: 20 }}>
        <LoadRing size={22} />
      </div>
      <div style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.015em' }}>Querying the register…</div>
      <div style={{ fontSize: 13.5, color: 'var(--ink-3)', marginTop: 6, marginBottom: 24 }}>HIN <span className="mono">{boat?.hin}</span> — checking charges, insurance, claims, fraud flags.</div>
      <div style={{ maxWidth: 480, margin: '0 auto', textAlign: 'left' }}>
        {['Resolving vessel by HIN', 'Cross-referencing charge register', 'Reading insurance bindings', 'Scanning fraud/stolen feeds', 'Compiling result'].map((t, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '6px 0' }}>
            <div style={{ width: 14, height: 14 }}>
              {i < 3 ? <Icon name="check" color="var(--clean)" /> : i === 3 ? <LoadRing size={12} /> : <span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: '50%', background: 'var(--line-2)' }} />}
            </div>
            <div style={{ fontSize: 13, color: i <= 3 ? 'var(--ink)' : 'var(--ink-3)' }}>{t}</div>
          </div>
        ))}
      </div>
    </div>
  );

  const ScreenResults = () => {
    if (!boat) return null;
    const hasCharge = !!boat.finance;
    const hasFlag = boat.flags.length > 0;

    if (layout === 'workflow') {
      // Layout B: top-down checklist view
      return (
        <div className="fade-up" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div className="card" style={{ background: hasFlag ? 'var(--flag-soft)' : 'var(--clean-soft)', borderColor: hasFlag ? 'oklch(0.85 0.1 60)' : 'oklch(0.85 0.07 165)' }}>
            <div style={{ padding: 20, display: 'flex', alignItems: 'center', gap: 16 }}>
              <div style={{ width: 44, height: 44, borderRadius: 10, background: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', color: hasFlag ? 'var(--flag)' : 'var(--clean)' }}>
                <Icon name={hasFlag ? 'alert' : 'check'} size={22} strokeWidth={2} />
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.015em', color: 'var(--ink)' }}>
                  {hasFlag ? `${boat.flags.length} ${boat.flags.length > 1 ? 'flags' : 'flag'} detected — review required` : 'Clean result — proceed with funding'}
                </div>
                <div style={{ fontSize: 13, color: 'var(--ink-2)', marginTop: 2 }}>
                  Report generated 14:11 BST · ref MC-{boat.id} · pre-lend search complete in 1.7s
                </div>
              </div>
              <span className="mono" style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>{boat.hin}</span>
            </div>
          </div>

          {boat.flags.map((f, i) => <FlagCard key={i} flag={f} />)}

          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 16 }}>
            <div className="card">
              <CardHeader title="Vessel" icon="boat" />
              <div style={{ padding: '12px 18px 18px' }}>
                <div style={{ display: 'flex', gap: 14, marginBottom: 12 }}>
                  <VesselThumb boat={boat} w={96} h={68} radius={8} />
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 16 }}>{boat.name}</div>
                    <div style={{ color: 'var(--ink-3)', fontSize: 13 }}>{boat.make} {boat.model} · {boat.year}</div>
                    <div className="mono" style={{ color: 'var(--ink-3)', fontSize: 11.5, marginTop: 4 }}>{boat.hin}</div>
                  </div>
                </div>
                <KV label="Length" value={boat.length} />
                <KV label="Type" value={boat.type} />
                <KV label="Moorings" value={boat.moorings} />
                <KV label="Declared value" value={formatGBP(boat.value)} mono />
              </div>
            </div>
            <div className="card">
              <CardHeader title="Registered owner" icon="user" />
              <div style={{ padding: '12px 18px 18px' }}>
                <KV label="Name" value={boat.owner.name} />
                <KV label="Kind" value={boat.owner.kind} />
                <KV label="Registered since" value={formatDate(boat.owner.since)} />
                <KV label="Applicant match" value="Confirmed" status="clean" />
              </div>
            </div>
          </div>

          <div className="card">
            <CardHeader title="Existing finance & charges" icon="pound" right={hasCharge ? <StatusPill state="flag" label={`${1} active charge`} /> : <StatusPill state="clean" label="No charges" />} />
            <div style={{ padding: 0 }}>
              {hasCharge ? (
                <table className="data-table">
                  <thead><tr><th>Lender</th><th>Type</th><th>Balance</th><th>Term ends</th><th>Status</th></tr></thead>
                  <tbody><tr>
                    <td>{boat.finance.lender}</td>
                    <td>Marine mortgage</td>
                    <td className="mono">{formatGBP(boat.finance.balance)}</td>
                    <td>{boat.finance.term}</td>
                    <td><StatusPill state="info" label={boat.finance.status} /></td>
                  </tr></tbody>
                </table>
              ) : (
                <div style={{ padding: 16, color: 'var(--ink-3)', fontSize: 13.5 }}>No active charges registered against this vessel.</div>
              )}
            </div>
          </div>

          <div className="card">
            <CardHeader title="Insurance in force" icon="shield" right={<StatusPill state="clean" label={boat.insurance.status} />} />
            <div style={{ padding: '12px 18px 18px', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
              <KVStack label="Insurer" value={boat.insurance.insurer} />
              <KVStack label="Policy" value={boat.insurance.policy} mono />
              <KVStack label="Expires" value={formatDate(boat.insurance.expires)} />
              <KVStack label="Premium" value={formatGBP(boat.insurance.premium)} />
            </div>
          </div>

          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <button className="btn btn-ghost" onClick={() => setStep(1)}><Icon name="arrowLeft" />Amend details</button>
            <div style={{ display: 'flex', gap: 10 }}>
              <button className="btn btn-secondary" onClick={reset}><Icon name="x" />Halt — contact applicant</button>
              <button className="btn btn-primary" onClick={() => setStep(4)} disabled={boat.state === 'alert'} style={{ opacity: boat.state === 'alert' ? 0.5 : 1 }}>
                {hasCharge ? 'Proceed despite charge' : 'Proceed to register charge'}<Icon name="arrowRight" color="white" />
              </button>
            </div>
          </div>
        </div>
      );
    }

    // Layout A: classic split (sidebar + main)
    return (
      <div className="fade-up" style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 20 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div className="card">
            <div style={{ padding: 18, display: 'flex', alignItems: 'center', gap: 16, borderBottom: '1px solid var(--line)' }}>
              <VesselThumb boat={boat} w={84} h={60} radius={8} />
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 17, fontWeight: 600, letterSpacing: '-0.015em' }}>{boat.name}</div>
                <div style={{ color: 'var(--ink-3)', fontSize: 13 }}>{boat.make} {boat.model} · {boat.year} · {boat.type}</div>
                <div className="mono" style={{ color: 'var(--ink-3)', fontSize: 11.5, marginTop: 3 }}>{boat.hin}</div>
              </div>
              <StatusPill state={boat.state} size="lg" label={boat.state === 'clean' ? 'Clean' : boat.state === 'alert' ? 'Alert — do not proceed' : 'Charge detected'} />
            </div>
            {boat.flags.length > 0 && (
              <div style={{ padding: 18, display: 'flex', flexDirection: 'column', gap: 10, background: 'var(--paper-2)', borderBottom: '1px solid var(--line)' }}>
                {boat.flags.map((f, i) => <FlagCard key={i} flag={f} />)}
              </div>
            )}
            <div style={{ padding: 18 }}>
              <div style={{ fontWeight: 600, marginBottom: 10, fontSize: 13.5 }}>Existing charges</div>
              {hasCharge ? (
                <table className="data-table" style={{ border: '1px solid var(--line)', borderRadius: 6, overflow: 'hidden' }}>
                  <thead><tr><th>Lender</th><th>Type</th><th>Balance</th><th>Term</th><th>Status</th></tr></thead>
                  <tbody><tr>
                    <td>{boat.finance.lender}</td>
                    <td>Marine mortgage</td>
                    <td className="mono">{formatGBP(boat.finance.balance)}</td>
                    <td>{boat.finance.term}</td>
                    <td><StatusPill state="info" label={boat.finance.status} /></td>
                  </tr></tbody>
                </table>
              ) : (
                <div style={{ padding: 14, borderRadius: 6, background: 'var(--clean-soft)', color: 'var(--clean)', fontSize: 13, display: 'flex', alignItems: 'center', gap: 8 }}>
                  <Icon name="check" /> No active charges registered against this vessel.
                </div>
              )}
            </div>
            <div style={{ padding: 18, borderTop: '1px solid var(--line)' }}>
              <div style={{ fontWeight: 600, marginBottom: 10, fontSize: 13.5 }}>Insurance in force</div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
                <KVStack label="Insurer" value={boat.insurance.insurer} />
                <KVStack label="Policy" value={boat.insurance.policy} mono />
                <KVStack label="Expires" value={formatDate(boat.insurance.expires)} />
                <KVStack label="Status" value={<StatusPill state="clean" label={boat.insurance.status} />} />
              </div>
            </div>
            <div style={{ padding: 18, borderTop: '1px solid var(--line)' }}>
              <div style={{ fontWeight: 600, marginBottom: 10, fontSize: 13.5 }}>Claims history</div>
              {boat.claims.length === 0 ? (
                <div style={{ fontSize: 13, color: 'var(--ink-3)' }}>No claims recorded.</div>
              ) : (
                <table className="data-table">
                  <thead><tr><th>Date</th><th>Type</th><th>Settlement</th><th>Status</th></tr></thead>
                  <tbody>{boat.claims.map((c, i) => (
                    <tr key={i}><td>{formatDate(c.date)}</td><td>{c.type}</td><td className="mono">{c.settled ? formatGBP(c.settled) : '—'}</td><td><StatusPill state={c.status === 'Open' ? 'alert' : 'neutral'} label={c.status} /></td></tr>
                  ))}</tbody>
                </table>
              )}
            </div>
          </div>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div className="card card-pad">
            <div style={{ fontSize: 11.5, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.04em', fontWeight: 500, marginBottom: 10 }}>Underwriter actions</div>
            {boat.state === 'alert' ? (
              <button className="btn btn-danger" style={{ width: '100%', justifyContent: 'center', marginBottom: 8 }}><Icon name="alert" color="white" />Halt — flagged for fraud</button>
            ) : (
              <button className="btn btn-primary" style={{ width: '100%', justifyContent: 'center', marginBottom: 8 }} onClick={() => setStep(4)}>
                {hasCharge ? 'Proceed with second charge' : 'Proceed to register'}<Icon name="arrowRight" color="white" />
              </button>
            )}
            <button className="btn btn-secondary" style={{ width: '100%', justifyContent: 'center', marginBottom: 8 }} onClick={reset}><Icon name="x" />Halt — contact applicant</button>
            <button className="btn btn-ghost" style={{ width: '100%', justifyContent: 'center' }}><Icon name="download" />Export full report</button>
          </div>

          <div className="card card-pad">
            <div style={{ fontSize: 11.5, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.04em', fontWeight: 500, marginBottom: 10 }}>Risk summary</div>
            <KVStack label="LTV (declared)" value={loanAmount && valuation ? `${Math.round((Number(loanAmount) / Number(valuation)) * 100)}%` : '—'} />
            <div style={{ height: 12 }} />
            <KVStack label="Charge result" value={hasCharge ? 'Prior charge' : 'No prior charges'} />
            <div style={{ height: 12 }} />
            <KVStack label="Insurance" value="In force" />
            <div style={{ height: 12 }} />
            <KVStack label="Stolen / fraud" value={boat.state === 'alert' ? 'Match — alert' : 'No match'} />
          </div>

          <div className="card card-pad" style={{ background: 'var(--paper-2)' }}>
            <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
              <Icon name="lock" color="var(--ink-3)" />
              <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>FCA audit trail retained. All searches timestamped to your operator ID. Report ref MC-{boat.id}.</div>
            </div>
          </div>
        </div>
      </div>
    );
  };

  const ScreenRegister = () => (
    <div className="fade-up" style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 20 }}>
      <div className="card">
        <CardHeader title="Register new charge" sub={`Against ${boat?.name} · ${boat?.hin}`} icon="plus" />
        <div style={{ padding: 18, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          <KVStack label="Lender (you)" value="Coastline Capital" />
          <KVStack label="Charge type" value="Marine mortgage — first" />
          <KVStack label="Principal" value={loanAmount ? formatGBP(Number(loanAmount)) : '—'} mono />
          <KVStack label="Term" value={`${term} months`} />
          <KVStack label="Rate" value="7.4% fixed APR" />
          <KVStack label="Insurance condition" value="Pantaenius UK — verified" />
          <div style={{ gridColumn: '1 / -1' }}>
            <label className="input-label">Conditions / endorsements</label>
            <textarea className="input" rows="2" defaultValue="Vessel to remain UK-flagged. Insurance to be maintained continuously throughout term. Beneficial interest lodged with MarineCheck."></textarea>
          </div>
        </div>
        <div style={{ padding: '14px 18px', borderTop: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12.5, color: 'var(--ink-2)' }}>
            <input type="checkbox" defaultChecked /> I confirm the loan agreement is signed and funds will release on registration.
          </label>
          <button className="btn btn-primary" onClick={goRegister} disabled={registering}>
            {registering ? <><LoadRing /> Registering…</> : <>Register charge<Icon name="check" color="white" /></>}
          </button>
        </div>
      </div>
      <div className="card card-pad">
        <div style={{ fontSize: 11.5, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.04em', fontWeight: 500, marginBottom: 10 }}>What happens next</div>
        <ol style={{ paddingLeft: 18, margin: 0, fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.7 }}>
          <li>Charge timestamped & lodged on the public register.</li>
          <li>Digital certificate (PDF) issued to your case file.</li>
          <li>Borrower & broker notified by email.</li>
          <li>Insurance lapse alerts auto-enabled for the loan term.</li>
        </ol>
      </div>
    </div>
  );

  const ScreenDone = () => (
    <div className="fade-up" style={{ maxWidth: 720, margin: '0 auto' }}>
      <div className="card" style={{ overflow: 'hidden' }}>
        <div style={{ padding: 28, background: 'linear-gradient(180deg, var(--clean-soft), white)', borderBottom: '1px solid var(--line)', textAlign: 'center' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 56, height: 56, borderRadius: 14, background: 'var(--clean)', color: 'white', marginBottom: 14 }}>
            <Icon name="check" size={28} strokeWidth={2.4} color="white" />
          </div>
          <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em' }}>Charge registered</div>
          <div style={{ fontSize: 13.5, color: 'var(--ink-2)', marginTop: 4 }}>
            Coastline Capital · marine mortgage · {boat && formatGBP(Number(loanAmount) || boat.value * 0.4)}
          </div>
        </div>
        <div style={{ padding: 22 }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14 }}>
            <KVStack label="Charge reference" value={chargeRef} mono />
            <KVStack label="Registered" value={new Date().toLocaleString('en-GB', { day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' })} />
            <KVStack label="Vessel" value={`${boat?.name} (${boat?.hin})`} />
            <KVStack label="Registered by" value="A. Mortimer · Coastline Capital" />
          </div>
          <div style={{ marginTop: 18, padding: 14, background: 'var(--paper-2)', borderRadius: 8, fontSize: 12.5, color: 'var(--ink-2)', display: 'flex', alignItems: 'center', gap: 10 }}>
            <Icon name="bell" />
            Insurance-lapse alerts enabled for the loan term. You'll be notified if cover changes.
          </div>
        </div>
        <div style={{ padding: '14px 18px', borderTop: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between' }}>
          <button className="btn btn-secondary" onClick={reset}><Icon name="plus" />New application</button>
          <div style={{ display: 'flex', gap: 8 }}>
            <button className="btn btn-secondary"><Icon name="print" />Print</button>
            <button className="btn btn-primary"><Icon name="download" color="white" />Download certificate</button>
          </div>
        </div>
      </div>
    </div>
  );

  // Compose
  return (
    <PersonaShell
      persona={PERSONAS.find(p => p.id === 'lender')}
      steps={steps}
      currentStep={step}
      onStep={(i) => setStep(i)}
      onBack={onBack}
      hint="Try vessels: Solent Voyager (clean) · Northumbria (existing charge) · Black Mamba (stolen alert)"
    >
      {step === 0 && ScreenApplication()}
      {step === 1 && ScreenVesselDetails()}
      {step === 2 && (searching ? ScreenSearching() : ScreenResults())}
      {step === 3 && ScreenResults()}
      {step === 4 && ScreenRegister()}
      {step === 5 && ScreenDone()}
    </PersonaShell>
  );
};

// Small KV helper specific to dashboards
const KVStack = ({ label, value, sub, mono }) => (
  <div>
    <div style={{ fontSize: 11.5, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.04em', fontWeight: 500, marginBottom: 4 }}>{label}</div>
    <div className={mono ? 'mono' : ''} style={{ fontSize: 14, fontWeight: 500, color: 'var(--ink)' }}>{value}</div>
    {sub && <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 2 }}>{sub}</div>}
  </div>
);

Object.assign(window, { LenderJourney, KVStack });