// Opalus — Portfolio dashboard (INV-12/26/27), Wallet (INV-22/23/24/25), Documents (INV-28/29)
const DB = window.OpalusDesignSystem_1dce4b;

function useNow(active) {
  const [, force] = useState(0);
  useEffect(() => { if (!active) return; const id = setInterval(() => force((n) => n + 1), 1000); return () => clearInterval(id); }, [active]);
  return Date.now();
}

/* ===================== DASHBOARD (INV-12) ===================== */
function DashboardScreen() {
  const { state, go } = window.useOpalus();
  const { StatCard, Card, Button, Badge } = DB;
  const offers = state.holdings.filter((h) => h.status === 'offer');
  const awaiting = state.holdings.filter((h) => h.status === 'awaiting-signature');
  const now = useNow(offers.length > 0);
  const reserved = window.reservedTotal(state);
  const confirmedPending = window.confirmedPendingTotal(state);

  const proj = (id) => window.OPALUS_PROJECTS.find((p) => p.id === id) || window.OPALUS_PROJECTS[0];
  const active = state.holdings.filter((h) => h.status === 'active');
  const invested = active.reduce((n, h) => n + h.invested, 0);
  const value = active.reduce((n, h) => n + h.value, 0);
  const ret = value - invested;
  const retPct = invested ? (ret / invested) * 100 : 0;
  const income = state.wallet.transactions.filter((t) => t.type === 'Distribution').reduce((n, t) => n + t.amount, 0);
  const soph = state.investor.category === 'sophisticated';

  return (
    <div className="opx-container opx-fade opx-stack" style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
      {/* header */}
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap' }}>
        <div>
          <window.Eyebrow>Portfolio</window.Eyebrow>
          <h1 className="opx-section-title" style={{ marginTop: 8 }}>Hi, Welcome Back! {state.investor.name.split(' ')[0]}</h1>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <Badge tone={soph ? 'navy' : 'cream'} size="md">{soph ? 'Sophisticated' : 'Non-sophisticated'}</Badge>
          <Button variant="primary" onClick={() => go('browse')} trailingIcon={<DB.IconlyRegularLightArrowRight style={{ width: 18, height: 18 }} />}>Browse projects</Button>
        </div>
      </div>

      {/* awaiting-signature banner (INV-21) */}
      {awaiting.map((h) => (
        <div key={h.id} style={{ display: 'flex', alignItems: 'center', gap: 16, background: 'var(--success-50)', border: '1px solid #a8e3b6', borderRadius: 'var(--radius-lg)', padding: '16px 22px', flexWrap: 'wrap' }}>
          <DB.IconlyRegularLightEditSquare style={{ width: 24, height: 24, color: 'var(--success-600)', flex: '0 0 auto' }} />
          <div style={{ flex: 1, minWidth: 220, fontFamily: 'var(--font-body)', fontSize: 13.5, color: 'var(--text-strong)' }}>Your contract for <b>{proj(h.projectId).title}</b> is awaiting your signature.</div>
          <Button variant="primary" size="sm" onClick={() => go('confirmed', { hid: h.id })}>Sign now</Button>
        </div>
      ))}

      {/* reflection-period widget (INV-12 / INV-19) */}
      {offers.map((h) => {
        const remain = h.coolingEnds - now;
        return (
          <div key={h.id} style={{ display: 'flex', alignItems: 'center', gap: 18, background: 'var(--navy-950)', color: '#fff', borderRadius: 'var(--radius-lg)', padding: '18px 24px', flexWrap: 'wrap' }}>
            <DB.IconlyRegularOutlineCalendar style={{ width: 26, height: 26, color: 'var(--bronze-400)', flex: '0 0 auto' }} />
            <div style={{ flex: 1, minWidth: 220 }}>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, fontWeight: 600 }}>Offer in reflection period · {proj(h.projectId).title}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'rgba(255,255,255,0.6)' }}>{window.eur(h.invested)} · ends {window.opalusFmtDateTime(h.coolingEnds)}</div>
            </div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 20, color: 'var(--bronze-400)', fontVariantNumeric: 'tabular-nums' }}>{remain <= 0 ? 'Complete' : window.opalusCountdown(remain)}</div>
            <Button variant="outline" size="sm" onClick={() => go('reflection', { hid: h.id })} style={{ background: 'transparent', borderColor: 'rgba(255,255,255,0.4)', color: '#fff' }}>Manage</Button>
          </div>
        );
      })}

      {/* wallet + compliance row */}
      <div className="opx-grid-2 opx-stack">
        {/* wallet widget */}
        <Card padding="lg" radius="lg" shadow="sm">
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
            <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--fs-h4)', color: 'var(--ink)', margin: 0 }}>Wallet</h3>
            <span className="opx-link" style={{ fontSize: 13 }} onClick={() => go('wallet')}>Wallet →</span>
          </div>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <div style={{ flex: 1, minWidth: 150, background: 'var(--surface-inset)', borderRadius: 'var(--radius-md)', padding: '16px 18px' }}>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 11, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>Available</div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 26, color: 'var(--ink)', marginTop: 4 }}>{window.eurC(state.wallet.balance)}</div>
            </div>
            <div style={{ flex: 1, minWidth: 150, background: 'var(--cream-100)', borderRadius: 'var(--radius-md)', padding: '16px 18px' }}>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 11, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--bronze-700)' }}>Reserved in cooling-off</div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 26, color: 'var(--bronze-700)', marginTop: 4 }}>{window.eurC(reserved)}</div>
            </div>
            <div style={{ flex: 1, minWidth: 150, background: 'var(--surface-inset)', borderRadius: 'var(--radius-md)', padding: '16px 18px' }} title="Confirmed investments awaiting project close — committed, no longer withdrawable.">
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 11, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>Confirmed · pending close</div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 26, color: 'var(--ink)', marginTop: 4 }}>{window.eurC(confirmedPending)}</div>
            </div>
          </div>
        </Card>

        {/* compliance card (INV-12 / INV-08) */}
        <Card padding="lg" radius="lg" shadow="sm">
          <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--fs-h4)', color: 'var(--ink)', margin: '0 0 14px' }}>Compliance</h3>
          {(() => {
            const sa = state.investor.sophApplication;
            const sophValidUntil = sa?.validUntil ? window.opalusFmtDate(sa.validUntil) : '14 Mar 2028';
            const category = soph ? `Sophisticated, valid until ${sophValidUntil}`
              : sa?.status === 'review' ? 'Non-sophisticated · application under review'
              : sa?.status === 'rejected' ? 'Non-sophisticated · application not approved'
              : 'Non-sophisticated';
            return [
              ['Category', category, false],
              ['Knowledge assessment', 'due 12 Apr 2028', false],
              ['Loss simulation', 'due 27 Jun 2026', true],
            ].map(([k, v, due], i) => (
              <div key={k} onClick={() => due && go('interstitial', { kind: 'simulation' })} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, padding: '11px 0', borderTop: i ? '1px solid var(--border-faint)' : 'none', cursor: due ? 'pointer' : 'default' }}>
                <span style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-body)' }}>{k}</span>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                  <span style={{ fontFamily: 'var(--font-body)', fontSize: 13, fontWeight: 600, color: 'var(--ink)' }}>{v}</span>
                  {due && <Badge tone="risk" size="sm" dot>Refresh due soon</Badge>}
                </span>
              </div>
            ));
          })()}
          <div style={{ marginTop: 12, paddingTop: 10, borderTop: '1px solid var(--border-faint)', fontFamily: 'var(--font-body)', fontSize: 11.5, color: 'var(--text-muted)', lineHeight: 1.5 }}>If your circumstances change in a way that affects your status, tell us — we may need to re-verify.</div>
        </Card>
      </div>

      {/* KPIs */}
      <Card padding="sm" radius="lg" shadow="sm" style={{ padding: 16 }}>
        <div className="opx-kpi">
          <StatCard icon={<DB.IconlyRegularLightGraph style={{ width: '100%', height: '100%', color: 'var(--bronze-600)' }} />} label="Total Invested" value={window.eur(invested)} style={{ boxShadow: 'none', border: 'none', background: 'transparent' }} />
          <StatCard icon={<DB.IconlyRegularLightActivity style={{ width: '100%', height: '100%', color: 'var(--bronze-600)' }} />} label="Portfolio Value" value={window.eur(value)} delta={window.pct(retPct)} deltaTone="up" style={{ boxShadow: 'none', border: 'none', background: 'transparent' }} />
          <StatCard icon={<DB.IconlyRegularLightGraph style={{ width: '100%', height: '100%', color: 'var(--success-600)' }} />} iconTone="success" label="Total Return" value={window.eur(ret)} delta={window.pct(retPct)} deltaTone="up" style={{ boxShadow: 'none', border: 'none', background: 'transparent' }} />
          <StatCard icon={<DB.IconlyRegularLightActivity style={{ width: '100%', height: '100%', color: 'var(--info-600)' }} />} iconTone="blue" label="Distributions this year" value={window.eurC(income)} style={{ boxShadow: 'none', border: 'none', background: 'transparent' }} />
        </div>
      </Card>

      {/* holdings (INV-26) */}
      <Card padding="lg" radius="lg" shadow="sm" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
          <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--fs-h4)', color: 'var(--ink)', margin: 0 }}>Your investments</h3>
          {active.length > 0 && <span style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--text-muted)' }}>Total invested {window.eur(invested)} · Total distributions {window.eurC(income)} · {active.length} active</span>}
        </div>
        {active.length === 0 && <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-muted)', padding: '20px 0' }}>No investments yet. <span className="opx-link" onClick={() => go('browse')}>Browse projects →</span></div>}
        {active.length > 0 && <div style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-micro)', fontWeight: 600, letterSpacing: 'var(--ls-eyebrow)', textTransform: 'uppercase', color: 'var(--text-muted)', marginTop: -4 }}>Active</div>}
        {active.map((h) => {
          const p = proj(h.projectId);
          return (
            <div key={h.id} style={{ border: '1px solid var(--border-faint)', borderRadius: 'var(--radius-lg)', padding: 16, display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap', cursor: 'pointer' }} onClick={() => go('investment', { hid: h.id })}>
              <img src={p.image} alt="" style={{ width: 84, height: 84, borderRadius: 'var(--radius-md)', objectFit: 'cover', flex: '0 0 auto' }} />
              <div style={{ flex: 1, minWidth: 200, display: 'flex', flexDirection: 'column', gap: 10 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
                  <h4 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--fs-lg)', color: 'var(--ink)', margin: 0, marginRight: 'auto' }}>{p.title}</h4>
                  <Badge tone="bronzeSolid" size="sm">{p.assetType}</Badge>
                  <window.RiskBadge level={p.risk} />
                </div>
                <div style={{ background: 'var(--cream-100)', borderRadius: 'var(--radius-md)', padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 26, flexWrap: 'wrap' }}>
                  {[['Invested', window.eur(h.invested), 'var(--ink)'], ['Current value', window.eur(h.value), 'var(--ink)'], ['ROI', '+' + window.pct(h.roiPct), 'var(--success-600)'], ['Annual yield', window.pct(h.yieldPct), 'var(--bronze-600)']].map(([l, v, c]) => (
                    <div key={l} style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                      <span style={{ fontFamily: 'var(--font-body)', fontSize: 11, color: 'var(--text-muted)' }}>{l}</span>
                      <span style={{ fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 600, color: c }}>{v}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          );
        })}
      </Card>

      {/* allocation */}
      <div className="opx-grid-2 opx-stack">
        <Card padding="lg" radius="lg" shadow="sm">
          <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--fs-h4)', color: 'var(--ink)', margin: '0 0 16px' }}>Holdings by value</h3>
          <HoldingsBar holdings={active} proj={proj} />
        </Card>
        <Card padding="lg" radius="lg" shadow="sm">
          <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--fs-h4)', color: 'var(--ink)', margin: '0 0 16px' }}>Allocation by asset type</h3>
          <AllocDonut holdings={active} proj={proj} />
        </Card>
      </div>
    </div>
  );
}

function HoldingsBar({ holdings, proj }) {
  if (!holdings.length) return <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-muted)' }}>No data yet.</div>;
  const max = Math.max(...holdings.map((h) => h.value));
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      {holdings.map((h) => {
        const p = proj(h.projectId);
        return (
          <div key={h.id}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6, fontFamily: 'var(--font-body)', fontSize: 13 }}>
              <span style={{ color: 'var(--text-body)' }}>{p.title}</span>
              <span style={{ fontWeight: 600, color: 'var(--ink)' }}>{window.eur(h.value)}</span>
            </div>
            <div style={{ height: 10, borderRadius: 999, background: 'var(--gray-100)', overflow: 'hidden' }}>
              <div style={{ height: '100%', width: (h.value / max * 100) + '%', borderRadius: 999, background: 'linear-gradient(90deg, var(--bronze-500), var(--bronze-600))' }} />
            </div>
          </div>
        );
      })}
    </div>
  );
}

function AllocDonut({ holdings, proj }) {
  const colors = { Residential: 'var(--bronze-600)', Commercial: 'var(--navy-700)', 'Mixed Use': 'var(--bronze-400)', Land: 'var(--success-500)' };
  const byType = {};
  holdings.forEach((h) => { const t = proj(h.projectId).assetType; byType[t] = (byType[t] || 0) + h.value; });
  const total = Object.values(byType).reduce((a, b) => a + b, 0) || 1;
  const entries = Object.entries(byType);
  const R = 70, C = 2 * Math.PI * R; let off = 0;
  if (!entries.length) return <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-muted)' }}>No data yet.</div>;
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 24, flexWrap: 'wrap' }}>
      <svg viewBox="0 0 180 180" style={{ width: 168, height: 168, flex: '0 0 auto' }}>
        <g transform="translate(90,90) rotate(-90)">
          {entries.map(([t, v]) => { const len = v / total * C; const el = <circle key={t} r={R} fill="none" stroke={colors[t] || 'var(--gray-400)'} strokeWidth={22} strokeDasharray={`${len} ${C - len}`} strokeDashoffset={-off} />; off += len; return el; })}
        </g>
        <text x="90" y="86" textAnchor="middle" fontFamily="var(--font-display)" fontWeight="600" fontSize="22" fill="var(--ink)">{window.compact(total)}</text>
        <text x="90" y="104" textAnchor="middle" fontFamily="var(--font-body)" fontSize="11" fill="var(--text-muted)">invested</text>
      </svg>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {entries.map(([t, v]) => (
          <span key={t} style={{ display: 'inline-flex', alignItems: 'center', gap: 9, fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-body)' }}>
            <span style={{ width: 11, height: 11, borderRadius: '50%', background: colors[t] || 'var(--gray-400)' }} />
            <b style={{ color: 'var(--text-strong)', fontWeight: 600 }}>{Math.round(v / total * 100)}%</b> {t}
          </span>
        ))}
      </div>
    </div>
  );
}

/* ===================== WALLET (INV-22/23/24/25) ===================== */
const TXN_LABEL = { Deposit: '↓', Withdrawal: '↑', 'Investment reserved': '◴', 'Investment released': '↑', 'Investment refunded': '↺', Distribution: '↓', Fee: '•' };

function WalletScreen() {
  const { state, update } = window.useOpalus();
  const { Card, Button } = DB;
  const [pane, setPane] = useState(state.route.params.deposit ? 'deposit' : null); // null | deposit | withdraw
  const reserved = window.reservedTotal(state);
  const confirmedPending = window.confirmedPendingTotal(state);

  return (
    <div className="opx-container opx-fade opx-stack" style={{ display: 'flex', flexDirection: 'column', gap: 22, maxWidth: 920 }}>
      <div><window.Eyebrow>Wallet</window.Eyebrow><h1 className="opx-section-title" style={{ marginTop: 8 }}>Your funds</h1></div>

      {/* balance card */}
      <div style={{ background: 'var(--navy-950)', borderRadius: 'var(--radius-xl)', padding: 32, color: '#fff', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(100% 120% at 100% 0%, rgba(167,107,52,0.3), transparent 55%)' }} />
        <div style={{ position: 'relative', display: 'flex', gap: 40, flexWrap: 'wrap' }}>
          <div>
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-micro)', fontWeight: 600, letterSpacing: 'var(--ls-eyebrow)', textTransform: 'uppercase', color: 'var(--bronze-400)' }}>Available · EUR</div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 44, margin: '6px 0 0', letterSpacing: 'var(--ls-tight)' }}>{window.eurC(state.wallet.balance)}</div>
          </div>
          <div style={{ borderLeft: '1px solid rgba(255,255,255,0.14)', paddingLeft: 40 }} title="Funds backing offers in their 4-day reflection period. They return automatically if you withdraw an offer, or move to the project when the period ends.">
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-micro)', fontWeight: 600, letterSpacing: 'var(--ls-eyebrow)', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)' }}>Reserved in cooling-off</div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 44, margin: '6px 0 0', letterSpacing: 'var(--ls-tight)', color: 'rgba(255,255,255,0.92)' }}>{window.eurC(reserved)}</div>
          </div>
          <div style={{ borderLeft: '1px solid rgba(255,255,255,0.14)', paddingLeft: 40 }} title="Confirmed investments whose reflection period has ended but whose project has not yet closed. These funds are committed and can no longer be withdrawn; they release to the project when it closes.">
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-micro)', fontWeight: 600, letterSpacing: 'var(--ls-eyebrow)', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)' }}>Confirmed · pending close</div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 44, margin: '6px 0 0', letterSpacing: 'var(--ls-tight)', color: 'rgba(255,255,255,0.92)' }}>{window.eurC(confirmedPending)}</div>
          </div>
        </div>
        <div style={{ position: 'relative', display: 'flex', gap: 12, marginTop: 22 }}>
          <Button variant="primary" onClick={() => setPane(pane === 'deposit' ? null : 'deposit')} leadingIcon={<DB.IconlyRegularOutlineUpload style={{ width: 18, height: 18 }} />}>Deposit funds</Button>
          <Button variant="outline" onClick={() => setPane(pane === 'withdraw' ? null : 'withdraw')} style={{ background: 'transparent', borderColor: 'rgba(255,255,255,0.4)', color: '#fff' }}>Withdraw funds</Button>
        </div>
      </div>

      {pane === 'deposit' && <DepositPane state={state} update={update} onClose={() => setPane(null)} />}
      {pane === 'withdraw' && <WithdrawPane state={state} update={update} onClose={() => setPane(null)} />}

      {/* transactions */}
      <Card padding="lg" radius="lg" shadow="sm">
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
          <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--fs-h4)', color: 'var(--ink)', margin: 0 }}>Transactions</h3>
          <Button variant="soft" size="sm" leadingIcon={<DB.IconlyRegularLightDownload style={{ width: 16, height: 16, color: 'var(--bronze-700)' }} />}>Export CSV</Button>
        </div>
        {state.wallet.transactions.length === 0 && <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-muted)', padding: '16px 0' }}>No transactions yet.</div>}
        {state.wallet.transactions.map((t, i) => (
          <div key={t.id} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 0', borderTop: i ? '1px solid var(--border-faint)' : 'none' }}>
            <span style={{ width: 40, height: 40, borderRadius: 'var(--radius-md)', background: t.amount > 0 ? 'var(--success-50)' : 'var(--surface-inset)', color: t.amount > 0 ? 'var(--success-600)' : 'var(--text-body)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto', fontSize: 18, fontWeight: 700 }}>{TXN_LABEL[t.type] || (t.amount > 0 ? '↓' : '↑')}</span>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 500, color: 'var(--text-strong)' }}>{t.label}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--text-muted)' }}>{t.type || 'Transaction'} · {t.date} · {t.status || 'Completed'}</div>
            </div>
            {t.amount !== 0 && <span style={{ fontFamily: 'var(--font-body)', fontSize: 15, fontWeight: 600, color: t.amount > 0 ? 'var(--success-600)' : 'var(--ink)' }}>{t.amount > 0 ? '+' : '−'}{window.eurC(Math.abs(t.amount))}</span>}
            <button type="button" title="Download confirmation (PDF)" style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 4, display: 'inline-flex', flex: '0 0 auto' }}><DB.IconlyRegularLightDownload style={{ width: 17, height: 17, color: 'var(--bronze-600)' }} /></button>
          </div>
        ))}
      </Card>
    </div>
  );
}

/* ---------- INV-23 · Deposit ---------- */
function DepositPane({ state, update, onClose }) {
  const { Card, Button, Badge } = DB;
  const ref = 'OPL-' + (state.investor.email.split('@')[0].toUpperCase().slice(0, 4)) + '-7291';
  const first = state.wallet.balance === 0;
  const [copied, setCopied] = useState('');
  const copy = (txt, key) => { try { navigator.clipboard.writeText(txt); } catch (e) {} setCopied(key); setTimeout(() => setCopied(''), 1400); };
  const credit = () => { update((s) => { s.wallet.balance += 5000; s.wallet.transactions.unshift({ id: 'dep' + Date.now(), type: 'Deposit', label: 'Deposit · SEPA transfer', amount: 5000, date: 'Today', kind: 'in', status: 'Completed' }); }); onClose(); };
  return (
    <Card padding="lg" radius="xl" shadow="card" style={{ padding: 30 }}>
      <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 20, color: 'var(--ink)', margin: '0 0 6px' }}>Deposit funds</h3>
      <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-sm)', color: 'var(--text-body)', margin: '0 0 20px', lineHeight: 1.6 }}>{first ? 'Your wallet is empty. Make your first deposit to start investing. ' : ''}Send a SEPA transfer in euros from a bank account in your name. Funds usually arrive within 1 business day.</p>
      <div style={{ border: '1px solid var(--border-faint)', borderRadius: 'var(--radius-lg)', overflow: 'hidden', marginBottom: 16 }}>
        {[['Beneficiary', 'Opalus Capital UAB', null], ['IBAN', 'LT12 3250 0123 4567 8901', 'iban'], ['BIC', 'REVOLT21XXX', null], ['Your deposit reference', ref, 'ref']].map(([k, v, key], i) => (
          <div key={k} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, padding: '13px 18px', background: i % 2 ? 'var(--surface-inset)' : '#fff' }}>
            <div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 11, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{k}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 600, color: 'var(--ink)' }}>{v}</div>
            </div>
            {key && <button type="button" onClick={() => copy(v, key)} className="opx-link" style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: 12.5, fontWeight: 600 }}>{copied === key ? 'Copied ✓' : (key === 'iban' ? 'Copy IBAN' : 'Copy reference')}</button>}
          </div>
        ))}
      </div>
      <window.Note tone="warn" title="Include your reference" icon={<span style={{ fontWeight: 700 }}>!</span>} style={{ marginBottom: 14 }}>Include this reference with your transfer, or your deposit may be delayed.</window.Note>
      {/* Art 10(1) safekeeping / PSP-segregation disclosure */}
      <window.Art10Disclosure style={{ marginBottom: 14 }} />
      <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--text-muted)', lineHeight: 1.5, marginBottom: 18 }}>Once received, a deposit is being matched to your account. If it doesn't appear within 2 business days, contact support with your transfer details.</div>
      <div style={{ display: 'flex', gap: 12 }}>
        <Button variant="primary" onClick={credit}>I've sent the transfer (demo credit)</Button>
        <Button variant="ghost" onClick={onClose}>Close</Button>
      </div>
    </Card>
  );
}

/* ---------- INV-24/25 · Withdrawals ---------- */
function WithdrawPane({ state, update, onClose }) {
  const { Card, Button } = DB;
  const accounts = state.investor.bankAccounts || [];
  const verifiedAccounts = accounts.filter((a) => a.status === 'verified');
  const [amount, setAmount] = useState(Math.min(2000, state.wallet.balance));
  const [selectedId, setSelectedId] = useState(verifiedAccounts[0]?.id || null);
  const [addOpen, setAddOpen] = useState(false);
  const [done, setDone] = useState(null);
  const reserved = window.reservedTotal(state);
  const over = amount > state.wallet.balance;
  const ok = amount > 0 && !over && !!selectedId;

  const submit = () => {
    const refNo = 'WD-' + Math.floor(100000 + Math.random() * 899999);
    update((s) => { s.wallet.balance = Math.max(0, s.wallet.balance - amount); s.wallet.transactions.unshift({ id: 'w' + Date.now(), type: 'Withdrawal', label: 'Withdrawal · SEPA transfer', amount: -amount, date: 'Today', kind: 'out', status: 'Under review' }); });
    setDone({ ref: refNo });
  };

  if (done) {
    if (done.rejected) {
      return (
        <Card padding="lg" radius="xl" shadow="card" style={{ padding: 30 }}>
          <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 20, color: 'var(--ink)', margin: '0 0 8px' }}>Withdrawal rejected</h3>
          <window.Note tone="danger" title="Withdrawal rejected: destination unverified">Your funds remain in your available balance. <span className="opx-link">Contact support</span></window.Note>
          <Button variant="primary" style={{ marginTop: 18 }} onClick={onClose}>Done</Button>
        </Card>
      );
    }
    return (
      <Card padding="lg" radius="xl" shadow="card" style={{ padding: 30 }}>
        <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 20, color: 'var(--ink)', margin: '0 0 8px' }}>Withdrawal requested</h3>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-sm)', color: 'var(--text-body)', margin: '0 0 14px' }}>Reference {done.ref}. We'll notify you at each step. Your withdrawal is being reviewed — a routine check, usually completed within 1 business day.</p>
        <div style={{ display: 'flex', gap: 7, flexWrap: 'wrap', marginBottom: 18 }}>
          {['Requested', 'Under review', 'Processing', 'Completed', 'Rejected'].map((st, i) => <span key={st} style={{ fontFamily: 'var(--font-body)', fontSize: 11.5, fontWeight: 600, padding: '4px 10px', borderRadius: 999, background: i === 1 ? 'var(--info-50)' : 'var(--surface-inset)', color: i === 1 ? 'var(--info-600)' : 'var(--text-muted)' }}>{st}</span>)}
        </div>
        <div style={{ display: 'flex', gap: 12 }}>
          <Button variant="primary" onClick={onClose}>Done</Button>
          <Button variant="ghost" onClick={() => setDone({ ...done, rejected: true })}>Simulate rejection (demo)</Button>
        </div>
      </Card>
    );
  }
  return (
    <Card padding="lg" radius="xl" shadow="card" style={{ padding: 30 }}>
      <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 20, color: 'var(--ink)', margin: '0 0 16px' }}>Withdraw funds</h3>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 480 }}>
        <window.Field label={`Amount (up to ${window.eurC(state.wallet.balance)})`}>
          <input className="opx-amount" style={{ fontSize: 22 }} type="number" value={amount} min={0} step={100} onChange={(e) => setAmount(Math.max(0, +e.target.value || 0))} />
        </window.Field>
        {reserved > 0 && <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--text-muted)', marginTop: -6 }}>Funds reserved in cooling-off can't be withdrawn until the offer concludes.</div>}

        {/* Destination — choose a saved, verified own-name account (reuses the bank-account surface) */}
        <div>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginBottom: 8 }}>
            <span style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-micro)', fontWeight: 600, letterSpacing: 'var(--ls-eyebrow)', textTransform: 'uppercase', color: 'var(--gray-600)' }}>Destination account</span>
            {!addOpen && <button type="button" className="opx-link" style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: 12.5 }} onClick={() => setAddOpen(true)}>Add account</button>}
          </div>
          <window.BankAccountList selectable selectedId={selectedId} onSelect={setSelectedId} addOpen={addOpen} onCloseAdd={() => setAddOpen(false)} />
          {verifiedAccounts.length === 0 && !addOpen && <div style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--text-muted)', marginTop: 8 }}>Add and verify a bank account in your own name to withdraw. You can also manage accounts in <span className="opx-link" onClick={() => { window.scrollTo(0, 0); }}>Settings</span>.</div>}
        </div>

        <window.Note tone="info" title="Own-name accounts only">Withdrawals can only be sent to a verified account in your own name, matching your verified identity.</window.Note>
      </div>
      <div style={{ display: 'flex', gap: 12, marginTop: 20 }}>
        <Button variant="primary" disabled={!ok} onClick={submit}>Request withdrawal</Button>
        <Button variant="ghost" onClick={onClose}>Cancel</Button>
      </div>
    </Card>
  );
}

/* ===================== DOCUMENTS (INV-28/29) ===================== */
function DocumentsScreen() {
  const { Card, Badge, Button } = DB;
  const [filter, setFilter] = useState('All');
  const types = ['All', 'KIIS', 'Contracts', 'Statements', 'Tax documents', 'Payment confirmations', 'Translations'];
  const docs = [
    ['Monthly statement — May 2026', 'Statements', 'PDF · 1.1 MB', '2 Jun 2026'],
    ['Saint-Cloud Garden Villa — KIIS', 'KIIS', 'PDF · 480 KB', '18 Apr 2026'],
    ['Saint-Cloud Garden Villa — Investment contract', 'Contracts', 'PDF · 820 KB', '22 Apr 2026'],
    ['Le Marais Heritage — KIIS', 'KIIS', 'PDF · 470 KB', '3 Mar 2026'],
    ['Le Marais Heritage — Investment contract', 'Contracts', 'PDF · 790 KB', '7 Mar 2026'],
    ['Le Marais Heritage — KIIS (Deutsch)', 'Translations', 'PDF · 460 KB', '5 Mar 2026'],
    ['Payment confirmation — Distribution', 'Payment confirmations', 'PDF · 120 KB', '1 Jun 2026'],
    ['Annual tax document — 2025', 'Tax documents', 'PDF · 610 KB', '28 Feb 2026'],
  ];
  const list = docs.filter((d) => filter === 'All' || d[1] === filter);
  return (
    <div className="opx-container opx-fade" style={{ maxWidth: 920 }}>
      <window.Eyebrow>Documents</window.Eyebrow>
      <h1 className="opx-section-title" style={{ margin: '8px 0 18px' }}>Your document library</h1>

      {/* KIIS update banner (INV-27) */}
      <div style={{ display: 'flex', gap: 12, alignItems: 'center', background: 'var(--info-50)', border: '1px solid var(--info-400)', borderRadius: 'var(--radius-md)', padding: '13px 16px', marginBottom: 20 }}>
        <DB.IconlyRegularLightPaper style={{ width: 20, height: 20, color: 'var(--info-600)', flex: '0 0 auto' }} />
        <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-body)' }}>The KIIS for Saint-Cloud Garden Villa was updated on 14 May 2026. <span className="opx-link">See what changed</span>. Your acknowledged version remains on record.</div>
      </div>

      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 20 }}>
        {types.map((tp) => <button key={tp} type="button" onClick={() => setFilter(tp)} style={{ cursor: 'pointer', fontFamily: 'var(--font-body)', fontSize: 'var(--fs-xs)', fontWeight: filter === tp ? 600 : 400, padding: '8px 14px', borderRadius: 'var(--radius-pill)', border: `1px solid ${filter === tp ? 'var(--bronze-500)' : 'var(--border-subtle)'}`, background: filter === tp ? 'var(--bronze-600)' : '#fff', color: filter === tp ? '#fff' : 'var(--text-body)' }}>{tp}</button>)}
      </div>

      <Card padding="lg" radius="lg" shadow="sm">
        {list.length === 0 && <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-muted)', padding: '16px 4px' }}>Documents from your investments will be stored here, available at all times.</div>}
        {list.map(([t, cat, meta, date], i) => (
          <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 16, padding: '15px 4px', borderBottom: i < list.length - 1 ? '1px solid var(--border-faint)' : 'none' }}>
            <span style={{ width: 44, height: 44, borderRadius: 'var(--radius-md)', background: 'var(--cream-100)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto' }}><DB.IconlyRegularLightPaper style={{ width: 22, height: 22, color: 'var(--bronze-600)' }} /></span>
            <div style={{ flex: 1, minWidth: 0 }}><div style={{ fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 'var(--fs-sm)', color: 'var(--text-strong)' }}>{t}</div><div style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-2xs)', color: 'var(--text-muted)' }}>{meta} · {date}</div></div>
            <Badge tone={cat === 'KIIS' ? 'bronze' : 'neutral'} size="sm">{cat}</Badge>
            <Button variant="soft" size="sm" leadingIcon={<DB.IconlyRegularLightDownload style={{ width: 16, height: 16, color: 'var(--bronze-700)' }} />}>Download</Button>
          </div>
        ))}
      </Card>
    </div>
  );
}

/* ===================== INVESTMENT DETAIL (INV-27) ===================== */
function InvestmentDetailScreen() {
  const { state, update, go } = window.useOpalus();
  const { Card, Badge, Button } = DB;
  const h = state.holdings.find((x) => x.id === state.route.params.hid) || state.holdings[0];
  const [tab, setTab] = useState('Overview');
  const [revoke, setRevoke] = useState(false);
  const [revoked, setRevoked] = useState(false);
  if (!h) { go('dashboard'); return null; }
  const p = window.OPALUS_PROJECTS.find((x) => x.id === h.projectId);

  // Art 23(12) — investor revocation on a material KIIS defect. The mandatory notice cannot be
  // disabled; revoking records the defect ack and sets cancelled_cause, refunding the investment.
  const confirmRevoke = () => {
    update((s) => {
      const hh = s.holdings.find((x) => x.id === h.id);
      if (hh) { hh.status = 'cancelled'; hh.cancelledCause = 'investor_revocation_kiis_defect'; hh.art23_12_defect_notice = true; }
      s.wallet.balance += h.invested;
      s.wallet.transactions.unshift({ id: 'rev' + Date.now(), type: 'Investment refunded', label: `Investment refunded · ${p.title} (KIIS defect)`, amount: h.invested, date: 'Today', kind: 'in', status: 'Completed' });
    });
    setRevoked(true);
  };
  const tabs = ['Overview', 'Updates', 'Distributions', 'Documents'];
  const distributions = [
    ['1 Jun 2026', 'Dividend', '€128.40', '€5.90', '€122.50', 'Completed'],
    ['1 Mar 2026', 'Dividend', '€126.10', '€5.80', '€120.30', 'Completed'],
    ['1 Dec 2025', 'Dividend', '€124.00', '€5.70', '€118.30', 'Completed'],
  ];
  const updates = [
    ['12 May 2026', 'Works update', 'Foundations complete; the scheme is on schedule for the next milestone.'],
    ['2 Apr 2026', 'Drawdown', 'First construction drawdown released to the developer against verified works.'],
  ];

  return (
    <div className="opx-container opx-fade" style={{ maxWidth: 920 }}>
      <button type="button" onClick={() => go('dashboard')} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-body)', fontFamily: 'var(--font-body)', fontSize: 'var(--fs-sm)', marginBottom: 18, padding: 0 }}>
        <DB.IconlyRegularOutlineArrowLeft style={{ width: 18, height: 18 }} /> Portfolio
      </button>

      <div style={{ display: 'flex', gap: 18, alignItems: 'center', flexWrap: 'wrap', marginBottom: 20 }}>
        <img src={p.image} alt="" style={{ width: 96, height: 96, borderRadius: 'var(--radius-md)', objectFit: 'cover', flex: '0 0 auto' }} />
        <div style={{ flex: 1, minWidth: 200 }}>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--fs-h2)', color: 'var(--ink)', margin: 0, letterSpacing: 'var(--ls-tight)' }}>{p.title}</h1>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 6, color: 'var(--text-body)', fontFamily: 'var(--font-body)', fontSize: 'var(--fs-sm)' }}><DB.IconlyRegularLightLocation style={{ width: 15, height: 15 }} />{p.location}</div>
        </div>
        <Badge tone={revoked ? 'danger' : 'success'} size="md">{revoked ? 'Revoked' : 'Active'}</Badge>
      </div>

      {/* Art 23(12) · KIIS-defect revocation (mandatory notice — cannot be dismissed) */}
      {revoked ? (
        <div style={{ marginBottom: 22 }}>
          <window.Note tone="success" title="Offer revoked — refund issued">
            Your {window.eur(h.invested)} investment in {p.title} has been refunded to your available balance because the Key Investment Information Sheet contained a material defect. <span className="opx-link" onClick={() => go('dashboard')}>Back to portfolio</span>
          </window.Note>
        </div>
      ) : (
        <div style={{ marginBottom: 22 }}>
          <window.Note tone="warn" title="Important: a defect was identified in this project's KIIS" icon={<span style={{ fontWeight: 700 }}>!</span>}>
            A material omission or inaccuracy has been identified in the Key Investment Information Sheet for {p.title}. Under your statutory rights, you may revoke this investment and receive a full refund, at no cost.
            {!revoke ? (
              <div style={{ marginTop: 12 }}><Button variant="outline" size="sm" onClick={() => setRevoke(true)}>Revoke this investment</Button></div>
            ) : (
              <div style={{ marginTop: 12, display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
                <span style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, fontWeight: 600, color: 'var(--ink)' }}>Revoke and refund {window.eur(h.invested)}?</span>
                <Button variant="primary" size="sm" onClick={confirmRevoke}>Confirm revocation</Button>
                <Button variant="ghost" size="sm" onClick={() => setRevoke(false)}>Keep my investment</Button>
              </div>
            )}
          </window.Note>
        </div>
      )}

      <div style={{ display: 'flex', gap: 4, borderBottom: '1px solid var(--border-faint)', marginBottom: 22 }}>
        {tabs.map((t) => {
          const on = tab === t;
          return <button key={t} type="button" onClick={() => setTab(t)} style={{ background: 'none', border: 'none', cursor: 'pointer', fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: on ? 600 : 400, color: on ? 'var(--bronze-700)' : 'var(--text-body)', padding: '12px 14px', borderBottom: on ? '2px solid var(--bronze-600)' : '2px solid transparent', marginBottom: -1 }}>{t}</button>;
        })}
      </div>

      {tab === 'Overview' && (
        <Card padding="lg" radius="lg" shadow="sm">
          <div className="opx-kpi" style={{ gap: 18 }}>
            {[['Invested', window.eur(h.invested), 'var(--ink)'], ['Current value', window.eur(h.value), 'var(--ink)'], ['ROI to date', '+' + window.pct(h.roiPct), 'var(--success-600)'], ['Projected exit', `${p.term} mo term`, 'var(--ink)']].map(([l, v, c]) => (
              <div key={l} style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                <span style={{ fontFamily: 'var(--font-body)', fontSize: 11, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{l}</span>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600, color: c }}>{v}</span>
              </div>
            ))}
          </div>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-sm)', color: 'var(--text-body)', lineHeight: 1.7, margin: '20px 0 0', textWrap: 'pretty' }}>{p.summary}</p>
        </Card>
      )}

      {tab === 'Updates' && (
        <Card padding="lg" radius="lg" shadow="sm">
          {updates.map(([date, kind, body], i) => (
            <div key={i} style={{ display: 'flex', gap: 14, padding: '14px 0', borderTop: i ? '1px solid var(--border-faint)' : 'none' }}>
              <span style={{ width: 40, height: 40, borderRadius: 'var(--radius-md)', background: 'var(--cream-100)', color: 'var(--bronze-600)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto' }}><DB.IconlyRegularLightActivity style={{ width: 18, height: 18 }} /></span>
              <div><div style={{ fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 600, color: 'var(--ink)' }}>{kind}</div><div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-body)', lineHeight: 1.5 }}>{body}</div><div style={{ fontFamily: 'var(--font-body)', fontSize: 11.5, color: 'var(--text-muted)', marginTop: 3 }}>{date}</div></div>
            </div>
          ))}
        </Card>
      )}

      {tab === 'Distributions' && (
        <Card padding="lg" radius="lg" shadow="sm" style={{ padding: 0, overflow: 'hidden' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr 1fr 0.9fr 1fr 1fr', background: 'var(--surface-inset)', padding: '12px 18px' }}>
            {['Date', 'Type', 'Gross', 'Fees', 'Net', 'Status'].map((c) => <span key={c} style={{ fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{c}</span>)}
          </div>
          {distributions.map((row, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr 1fr 0.9fr 1fr 1fr', padding: '13px 18px', borderTop: '1px solid var(--border-faint)', alignItems: 'center' }}>
              {row.map((cell, ci) => ci === 5
                ? <Badge key={ci} tone="success" size="sm">{cell}</Badge>
                : <span key={ci} style={{ fontFamily: 'var(--font-body)', fontSize: 13, fontWeight: ci === 4 ? 600 : 400, color: ci === 4 ? 'var(--success-600)' : 'var(--text-body)' }}>{cell}</span>)}
            </div>
          ))}
        </Card>
      )}

      {tab === 'Documents' && (
        <>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center', background: 'var(--info-50)', border: '1px solid var(--info-400)', borderRadius: 'var(--radius-md)', padding: '13px 16px', marginBottom: 16 }}>
            <DB.IconlyRegularLightPaper style={{ width: 20, height: 20, color: 'var(--info-600)', flex: '0 0 auto' }} />
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-body)' }}>The KIIS for this project was updated on 14 May 2026. <span className="opx-link">See what changed</span>. Your acknowledged version (v{h.kiisVersion}) remains on record.</div>
          </div>
          <Card padding="lg" radius="lg" shadow="sm">
            {[[`${p.title} — KIIS`, 'KIIS'], [`${p.title} — Investment contract`, 'Contracts'], ['Payment confirmation', 'Payment confirmations']].map(([t2, cat], i) => (
              <div key={t2} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 4px', borderTop: i ? '1px solid var(--border-faint)' : 'none' }}>
                <span style={{ width: 40, height: 40, borderRadius: 'var(--radius-md)', background: 'var(--cream-100)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto' }}><DB.IconlyRegularLightPaper style={{ width: 20, height: 20, color: 'var(--bronze-600)' }} /></span>
                <div style={{ flex: 1, fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 500, color: 'var(--text-strong)' }}>{t2}</div>
                <Badge tone={cat === 'KIIS' ? 'bronze' : 'neutral'} size="sm">{cat}</Badge>
                <Button variant="soft" size="sm" leadingIcon={<DB.IconlyRegularLightDownload style={{ width: 16, height: 16, color: 'var(--bronze-700)' }} />}>Download</Button>
              </div>
            ))}
          </Card>
        </>
      )}
    </div>
  );
}

Object.assign(window, { DashboardScreen, WalletScreen, DocumentsScreen, InvestmentDetailScreen });