/* global React, window */

const PortalView = () => (
  <div style={{background:'var(--bg-canvas)'}}>
    <div className="hero">
      <Pill kind="amber" dot>Base L2 · The Sovereign Gateway</Pill>
      <h1>
        Institutional infrastructure for <em>digital securities.</em>
      </h1>
      <p>
        Modular, multi-jurisdictional rails for asset issuance, automated governance, and global capital
        distribution. Domestic civil-law structures — Fideicomiso (MX), Patrimonio Autónomo (CO) —
        bridged to an always-on ledger and identity-gated settlement.
      </p>
      <div className="row" style={{gap:10}}>
        <button className="btn btn--amber" style={{height:42, padding:'0 18px', fontSize:14}}>
          Initialize institutional session <Icon name="arrow" size={13}/>
        </button>
        <button className="btn" style={{height:42, padding:'0 18px', fontSize:14}}>
          Access portfolio & registry
        </button>
      </div>
      <div className="row" style={{gap:32, marginTop:48, flexWrap:'wrap'}}>
        {[
          ['$47.2M', 'AUM across 4 cells'],
          ['5', 'active SPV cells'],
          ['3-of-3', 'oracle signatory model'],
          ['Base L2', 'primary settlement'],
        ].map(([v,l]) => (
          <div key={l} style={{borderLeft:'1px solid var(--border)', paddingLeft:16}}>
            <div className="display-2" style={{fontSize:28}}>{v}</div>
            <div className="muted text-sm">{l}</div>
          </div>
        ))}
      </div>
    </div>

    <div className="canvas">
      <div className="eyebrow" style={{marginBottom:12}}>Three professional pathways</div>
      <h2 className="display-1" style={{fontSize:26, marginBottom:24}}>Routed by intent, mandate, and fiduciary role.</h2>
      <div className="grid grid--3" style={{marginBottom:32}}>
        {[
          ['A · Issuance & Underwriting', 'The Underwriting Room', 'Isolated SPV cells, civil-law wrappers, automated structuring desk that drafts your Management Briefing Pack.', 'Initialize session'],
          ['B · Capital Management',      'Portfolio & Registry',   'Fractional ownership of physically-backed securities with automated compliance and programmatic distributions.', 'Access portfolio'],
          ['C · Boardroom & Audit',       'Fiduciary Oversight',    'Three-signature ratification for milestones. Dispute windows. Seniority units visible on-ledger.', 'Enter boardroom'],
        ].map(([e,h,b,c],i) => (
          <div key={h} className="card" style={{padding:24, minHeight:260, display:'flex', flexDirection:'column'}}>
            <div className="eyebrow" style={{color:'var(--amber)'}}>{e}</div>
            <h3 className="display-2" style={{marginTop:12, fontSize:20}}>{h}</h3>
            <p className="muted" style={{marginTop:8, fontSize:13, flex:1}}>{b}</p>
            <button className="btn btn--amber" style={{alignSelf:'flex-start', marginTop:12}}>{c} <Icon name="arrow" size={12}/></button>
          </div>
        ))}
      </div>

      <div className="card">
        <div className="row row--sb" style={{marginBottom:18}}>
          <div>
            <div className="eyebrow" style={{color:'var(--amber)'}}>Trust architecture</div>
            <h2 className="display-2" style={{marginTop:6}}>The operating-system view.</h2>
          </div>
          <span className="muted text-sm" style={{maxWidth:'48ch'}}>
            Five production mechanisms back every mandate. Each corresponds to an institutional control
            you already recognize — the ledger is the high-efficiency back office.
          </span>
        </div>
        <table className="tbl">
          <thead><tr><th>Layer</th><th>Traditional name</th><th>Back-end reality</th></tr></thead>
          <tbody>
            {[
              ['Board Resolutions','Digital Operating Agreement','Aragon OSx v1.4.6 — 75% Reserved Matters, three-tier thresholds enforced on-chain.'],
              ['Milestone Attestations','Multi-Sig Oracle (3-of-3)','Legal + Treasury + Tech. No single override. Evidence auto-posted to the audit trail.'],
              ['Verified Participant Registry','ERC-3643 (T-REX)','ZK-KYC required for every transfer of securities or voting rights.'],
              ['Partner Compensation','Modified Lockstep','50% USDC immediate + 50% deferred equity units. 4yr vesting, 1yr cliff.'],
              ['Petition Integrity','Utility-fee gate','Proposal submission stakes utility token. Returned on adoption, slashed on failed motion.'],
            ].map(r => (
              <tr key={r[0]}>
                <td className="bold">{r[0]}</td>
                <td className="text-sm">{r[1]}</td>
                <td className="muted text-sm">{r[2]}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  </div>
);

window.PortalView = PortalView;