/* Digital assets — the key+store objects usufruct emits (GovernanceCap / EarningsInbox / usufructCap) */

function Assets() {
  const cards = [
    {
      img:'display-owner-cap.png',
      kind:'GovernanceCap',
      label:'GOVERNANCE',
      role:'Minted at integration — held by the asset issuer.',
      body:'Controls the escrow: retire the asset, update policies, govern terms. One GovernanceCap can govern multiple escrows — integrate into an existing portfolio and the cap extends its reach without minting again.',
      bg:'#F4F4F0', frame:'var(--line-1)',
      glow:'0 0 40px -16px rgba(255,255,255,0.35)',
      group:'owner',
    },
    {
      img:'display-earnings-inbox.png?v=3',
      kind:'EarningsInbox',
      label:'ASSET ISSUER EARNINGS',
      role:'Minted at integration — receives the asset issuer\'s share.',
      body:'After every settlement the asset issuer\'s cut is transferred directly here — never held in the escrow, mailed out. It carries key + store too: sell it, lend it, or route multiple escrows\' income into one inbox.',
      bg:'#0A1F0D', frame:'var(--good)',
      glow:'0 0 40px -16px var(--good)',
      group:'owner',
    },
    {
      img:'display-tenant-cap.png',
      kind:'usufructCap',
      label:'ACCESS',
      role:'Minted when someone rents — held by the asset payer.',
      body:'The right of use for the current tenure. Transfer it to delegate access, sell the time you\'re not using, or escrow it again to sublease. Carry it into a PTB to exercise the right alongside any other protocol.',
      bg:'#0A0A0D', frame:'var(--line-1)',
      glow:'0 0 40px -16px rgba(255,255,255,0.35)',
      group:'tenant',
    },
  ];

  const mono11 = {fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'0.18em', textTransform:'uppercase'};

  return (
    <section id="assets" className="section">
      <div className="container">
        <SectionDivider n={5} title="DIGITAL ASSETS"/>
        <div className="section__inner">

          <div style={{maxWidth:880, marginBottom:56}}>
            <Eyebrow style={{marginBottom:24}}>A NEW ASSET CLASS<span style={{color:'var(--signal)'}}>  ·  What objects does usufruct issue?</span></Eyebrow>
            <h2 style={{
              fontFamily:'var(--font-sans)', fontWeight:500,
              fontSize:'clamp(44px, 5vw, 64px)', lineHeight:1, letterSpacing:'-0.02em',
              margin:0, color:'var(--fg-0)', textWrap:'balance',
            }}>
              Every position is an asset.<br/>
              <span style={{color:'var(--signal)'}}>Tradable. Composable. Rentable.</span>
            </h2>
            <p style={{
              fontFamily:'var(--font-sans)', fontSize:21, lineHeight:1.55,
              color:'var(--fg-1)', marginTop:24, maxWidth:640, textWrap:'pretty',
            }}>
              Integrate an asset and usufruct mints a{' '}
              <strong style={{color:'var(--fg-0)', fontWeight:500}}>GovernanceCap</strong> and an{' '}
              <strong style={{color:'var(--fg-0)', fontWeight:500}}>EarningsInbox</strong>{' '}
              — your title to the escrow and your income address.
              When someone rents, they receive a{' '}
              <strong style={{color:'var(--fg-0)', fontWeight:500}}>usufructCap</strong>{' '}
              — the right of use for their tenure.
              All three are real Sui objects with
              <code style={{fontFamily:'var(--font-mono)', color:'var(--signal)'}}> key + store</code>: hold the object, hold the right.
            </p>
          </div>

          {/* Group labels row */}
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', columnGap:24, marginBottom:0}}>
            {/* Owner label spans 2 cols */}
            <div style={{
              gridColumn:'1 / 3',
              display:'flex', alignItems:'center', gap:12,
              padding:'8px 14px',
              border:'1px solid rgba(255,255,255,0.22)',
              borderBottom:'none',
            }}>
              <span style={{...mono11, color:'var(--fg-0)'}}>ASSET ISSUER</span>
              <span style={{color:'var(--fg-2)', fontSize:11}}>·</span>
              <span style={{...mono11, color:'var(--fg-2)', letterSpacing:'0.12em'}}>Minted at integration</span>
            </div>
            {/* Tenant label spans 1 col */}
            <div style={{
              gridColumn:'3 / 4',
              display:'flex', alignItems:'center', gap:12,
              padding:'8px 14px',
              border:'1px solid rgba(255,255,255,0.14)',
              borderBottom:'none',
            }}>
              <span style={{...mono11, color:'var(--fg-1)'}}>ASSET PAYER</span>
              <span style={{color:'var(--fg-2)', fontSize:11}}>·</span>
              <span style={{...mono11, color:'var(--fg-2)', letterSpacing:'0.12em'}}>Minted at rent</span>
            </div>
          </div>

          {/* Cards row — equal thirds */}
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', columnGap:24}}>
            {cards.map((c, i) => (
              <div key={c.kind} style={{
                border:'1px solid ' + c.frame,
                borderTop: i < 2 ? '1px solid rgba(255,255,255,0.10)' : '1px solid rgba(255,255,255,0.06)',
                background:'var(--bg-1)',
                display:'flex', flexDirection:'column',
                boxShadow: c.glow,
              }}>
                <div style={{
                  background:c.bg, aspectRatio:'1 / 1',
                  display:'flex', alignItems:'center', justifyContent:'center',
                  borderBottom:'1px solid ' + c.frame,
                }}>
                  <img src={'./assets/' + c.img} alt={c.kind}
                    style={{width:'100%', height:'100%', objectFit:'cover', display:'block'}}/>
                </div>
                <div style={{padding:'24px 24px 28px 24px', display:'flex', flexDirection:'column', gap:12}}>
                  <div style={{display:'flex', alignItems:'baseline', justifyContent:'space-between'}}>
                    <span style={{
                      fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'0.18em',
                      color: c.accent ? 'var(--good)' : 'var(--signal)',
                    }}>{c.label}</span>
                    <code style={{fontFamily:'var(--font-mono)', fontSize:11, color:'var(--fg-3)'}}>{c.kind}</code>
                  </div>
                  <div style={{
                    fontFamily:'var(--font-mono)', fontSize:11, lineHeight:1.5,
                    color:'var(--fg-2)', letterSpacing:'0.02em',
                    paddingBottom:12, borderBottom:'1px solid var(--line-1)',
                  }}>{c.role}</div>
                  <p style={{
                    fontFamily:'var(--font-sans)', fontSize:18, lineHeight:1.6,
                    color:'var(--fg-1)', margin:0, textWrap:'pretty',
                  }}>{c.body}</p>
                </div>
              </div>
            ))}
          </div>


        </div>
      </div>
    </section>
  );
}
window.Assets = Assets;