/* The Primitive — § 01 + § 02 */

function Primitive() {
  return (
    <section id="primitive" className="section">
      <div className="container">

        {/* § 01 — A protocol for protocols */}
        <SectionDivider n={1} title="BUILD ON TOP" arc="The Primitive"/>
        <div className="section__inner" style={{paddingTop: 40}}>

          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:64, alignItems:'start'}}>
            <div>
              <h2 style={{
                fontFamily:'var(--font-sans)', fontWeight:500,
                fontSize:'clamp(48px, 6vw, 88px)', lineHeight:1.0,
                letterSpacing:'-0.025em', margin:'0 0 32px', color:'var(--fg-0)',
              }}>
                The primitive.<br/>
                <span style={{color:'var(--signal)'}}>Permissionless by design.</span>
              </h2>
              <p style={{
                fontFamily:'var(--font-sans)', fontSize:21, lineHeight:1.5,
                color:'var(--fg-0)', margin:'0 0 16px',
              }}>
                Any Sui object with <code style={{fontFamily:'var(--font-mono)', color:'var(--signal)'}}>key + store</code> opens a usufruct market.
                No approval from the issuing protocol. No migration. No gatekeeping.
              </p>
              <p style={{
                fontFamily:'var(--font-sans)', fontSize:21, lineHeight:1.5,
                color:'var(--fg-0)', margin:'0 0 40px',
              }}>
                You own the object. You integrate. You govern. You collect.
                Any human or AI agent on Sui rents it directly — zero changes
                to the underlying contract.
              </p>

              {/* Layer annotations */}
              <div style={{borderTop:'1px solid var(--line-1)'}}>
                {[
                  {layer:'Asset Ecosystem', desc:'Defines the value of the asset.'},
                  {layer:'Asset',           desc:'The vehicle.'},
                  {layer:'Usufruct',        desc:'The engine that enforces your conditions and opens the market around the asset.'},
                ].map(({layer, desc}) => (
                  <div key={layer} style={{
                    display:'grid', gridTemplateColumns:'148px 1fr',
                    gap:20, padding:'18px 0',
                    borderBottom:'1px solid var(--line-1)',
                  }}>
                    <span style={{
                      fontFamily:'var(--font-mono)', fontSize:11,
                      letterSpacing:'0.14em', textTransform:'uppercase',
                      color:'var(--signal)', paddingTop:2,
                    }}>{layer}</span>
                    <span style={{
                      fontFamily:'var(--font-sans)', fontSize:17, lineHeight:1.5,
                      color:'var(--fg-2)',
                    }}>{desc}</span>
                  </div>
                ))}
              </div>
            </div>

            <div style={{display:'flex', flexDirection:'column', alignItems:'center', gap:16}}>
              <img
                src="./assets/usufruct_layer.png?v=6"
                alt="usufruct layer diagram"
                style={{width:'100%', maxWidth:480, display:'block', mixBlendMode:'lighten'}}
              />
              <span style={{
                fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'0.18em',
                textTransform:'uppercase', color:'var(--fg-2)', textAlign:'center',
              }}>
                Usufruct market layer for humans and AI agents
              </span>
            </div>
          </div>

        </div>

        {/* § 02 — Asset & Coin Agnostic */}
        <div style={{marginTop:96}}>
          <SectionDivider n={2} title="ASSET & COIN AGNOSTIC"/>
        </div>
        <div className="section__inner" style={{paddingTop: 40}}>

          <h2 style={{
            fontFamily:'var(--font-sans)', fontWeight:500,
            fontSize:'clamp(48px, 6vw, 88px)', lineHeight:1.0,
            letterSpacing:'-0.025em', margin:'0 0 28px', color:'var(--fg-0)',
          }}>
            Any Sui object.<br/>
            <span style={{color:'var(--signal)'}}>Any coin.</span>
          </h2>

          <div style={{marginBottom:48, maxWidth:680}}>
            <p style={{
              fontFamily:'var(--font-sans)', fontSize:21, lineHeight:1.5,
              color:'var(--fg-0)', margin:0,
            }}>
              Usufruct doesn't know — or care — what either one is.
            </p>
          </div>

          <div style={{display:'flex', flexDirection:'column', borderTop:'1px solid var(--line-1)'}}>
            {[
              {
                label: 'Object',
                body: 'Any Sui object with key + store. If it exists on Sui, it\'s already compatible.',
              },
              {
                label: 'Coin',
                body: <React.Fragment>You pick the CoinType. Renters pay in it. Earnings arrive in it.<br/>No protocol coin, no conversion, no wrapping.</React.Fragment>,
              },
            ].map(({label, body}) => (
              <div key={label} style={{
                display:'grid', gridTemplateColumns:'96px 1fr',
                gap:24, padding:'24px 0',
                borderBottom:'1px solid var(--line-1)',
              }}>
                <span style={{
                  fontFamily:'var(--font-mono)', fontSize:11,
                  letterSpacing:'0.18em', textTransform:'uppercase',
                  color:'var(--signal)', paddingTop:2,
                }}>{label}</span>
                <p style={{
                  fontFamily:'var(--font-sans)', fontSize:20, lineHeight:1.55,
                  color:'var(--fg-1)', margin:0,
                }}>{body}</p>
              </div>
            ))}
          </div>

        </div>

      </div>
    </section>
  );
}

window.Primitive = Primitive;