const WalletsScreen = ({ openModal }) => (
  <>
    <div className="page-header">
      <div>
        <h1 className="page-title">Wallets</h1>
        <p className="page-sub">Every wallet is bound to an identity. Chain is expressed at call-time, not owned by the wallet.</p>
      </div>
      <div className="page-actions">
        <Btn variant="secondary" icon={<IDownload size={13}/>}>Export</Btn>
        <Btn variant="primary" icon={<IPlus size={13}/>}>Create wallet</Btn>
      </div>
    </div>

    <div className="grid-3" style={{ marginBottom: 20 }}>
      {[
        { label: "Total wallets", v: "14,208", d: "+214 this week" },
        { label: "Signing volume (24h)", v: "1,842 sigs", d: "avg latency 412ms" },
        { label: "Policy violations", v: "3", d: "all blocked · see audit" },
      ].map(s => (
        <Card key={s.label}>
          <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.06em", textTransform: "uppercase" }}>{s.label}</div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 28, fontWeight: 600, letterSpacing: "-0.025em", marginTop: 6 }}>{s.v}</div>
          <div style={{ fontSize: 12, color: "var(--ink-3)", marginTop: 2 }}>{s.d}</div>
        </Card>
      ))}
    </div>

    <Card bodyClass="pad-0">
      <table className="table">
        <thead>
          <tr>
            <th>Wallet</th>
            <th>Owner</th>
            <th>Chain</th>
            <th>Address</th>
            <th>Balance</th>
            <th>Created</th>
            <th>Status</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {WALLETS.map(w => (
            <tr key={w.id}>
              <td><MonoId>{w.id}</MonoId></td>
              <td className="mono" style={{ fontSize: 12, color: "var(--ink-2)" }}>{w.owner}</td>
              <td><Chain chain={w.chain}/></td>
              <td><MonoId full={w.address}>{w.address}</MonoId></td>
              <td className="mono" style={{ fontSize: 12.5 }}>{w.balance}</td>
              <td style={{ fontSize: 12, color: "var(--ink-3)" }}>{w.created}</td>
              <td><Status kind={w.status}/></td>
              <td><button className="icon-btn" onClick={() => openModal("sign")}><IFingerprint size={14}/></button></td>
            </tr>
          ))}
        </tbody>
      </table>
    </Card>
  </>
);

Object.assign(window, { WalletsScreen });