/* Tenant runtime — big code block, terminal-style */

function Runtime() {
  return (
    <section id="runtime" className="section">
      <div className="container">
        <SectionDivider n={9} title="THE ASSET PAYER'S RUNTIME"/>
        <div className="section__inner">
          <div style={{
            display:'grid', gridTemplateColumns:'1fr 1.4fr', gap:64, alignItems:'flex-start',
          }}>
            <div>
              <Eyebrow style={{marginBottom:24}}>THE ASSET IS THE INTERFACE<span style={{color:'var(--signal)'}}>  ·  How do I use the asset?</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',
              }}>
                Borrow.<br/>
                Compose.<br/>
                <span style={{color:'var(--signal)'}}>Return — always.</span>
              </h2>
              <p style={{
                fontFamily:'var(--font-sans)', fontSize:20, lineHeight:1.5,
                color:'var(--fg-1)', marginTop:28, maxWidth:420, textWrap:'pretty',
              }}>
                <strong style={{color:'var(--fg-0)', fontWeight:500}}>The issuer changes nothing.</strong> Any protocol that already
                issues a <code style={{fontFamily:'var(--font-mono)', color:'var(--signal)'}}>key + store</code> object —
                a position, a capability, a license — is compatible the moment it ships. No adapter, no
                integration module, not one line of new contract code.
              </p>
              <p style={{
                fontFamily:'var(--font-sans)', fontSize:20, lineHeight:1.5,
                color:'var(--fg-1)', marginTop:16, maxWidth:420, textWrap:'pretty',
              }}>
                usufruct knows custody and economics. The issuing protocol knows what the object
                {' '}<em style={{fontStyle:'italic'}}>does</em>. The asset is the seam between them — usufruct holds it, the issuer's
                own API operates on it. Neither side knows the other exists.
              </p>

              <div style={{marginTop:40, paddingTop:28, borderTop:'1px solid var(--line-1)'}}>
                <Eyebrow style={{marginBottom:16}}>TWO EXAMPLES · SAME TWO FUNCTIONS</Eyebrow>
                <p style={{
                  fontFamily:'var(--font-sans)', fontSize:19, lineHeight:1.6,
                  color:'var(--fg-1)', margin:0, textWrap:'pretty',
                }}>
                  <strong style={{color:'var(--fg-0)', fontWeight:500}}>A DeFi position</strong> — the asset payer collects
                  fees and adds liquidity through the DEX's own API.
                </p>
                <p style={{
                  fontFamily:'var(--font-sans)', fontSize:19, lineHeight:1.6,
                  color:'var(--fg-1)', marginTop:12, textWrap:'pretty',
                }}>
                  <strong style={{color:'var(--fg-0)', fontWeight:500}}>An AI model cap</strong> — the asset payer queries
                  the model; it returns untouched.
                </p>
                <p style={{
                  fontFamily:'var(--font-sans)', fontSize:19, lineHeight:1.6,
                  color:'var(--fg-2)', marginTop:16, textWrap:'pretty',
                }}>
                  Different protocols, different objects — the same <code style={{fontFamily:'var(--font-mono)', color:'var(--signal)'}}>rent</code> →
                  {' '}<code style={{fontFamily:'var(--font-mono)', color:'var(--signal)'}}>borrow</code> →
                  {' '}<code style={{fontFamily:'var(--font-mono)', color:'var(--signal)'}}>return</code> bracket.
                </p>
              </div>

            </div>

            {/* Code column — two examples */}
            <div style={{display:'flex', flexDirection:'column', gap:24}}>
            {/* Code window — governance / fees */}
            <div style={{
              background:'var(--bg-1)', border:'1px solid var(--line-1)',
              overflow:'hidden',
            }}>
              {/* Window chrome */}
              <div style={{
                display:'flex', alignItems:'center', justifyContent:'space-between',
                padding:'12px 16px', borderBottom:'1px solid var(--line-1)',
                background:'var(--bg-2)',
              }}>
                <div style={{display:'flex', alignItems:'center', gap:10}}>
                  <span style={{fontFamily:'var(--font-mono)', fontSize:11, color:'var(--fg-2)', letterSpacing:'0.10em'}}>
                    defi_position.move
                  </span>
                </div>
                <div style={{display:'flex', alignItems:'center', gap:8, fontFamily:'var(--font-mono)', fontSize:10, color:'var(--fg-3)', letterSpacing:'0.12em'}}>
                  <Dot state="live"/> MOVE 2024
                </div>
              </div>

              {/* Code body */}
              <div style={{display:'grid', gridTemplateColumns:'auto 1fr'}}>
                <div style={{
                  borderRight:'1px solid var(--line-1)',
                  padding:'24px 14px', textAlign:'right',
                  fontFamily:'var(--font-mono)', fontSize:13, color:'var(--fg-3)',
                  lineHeight:1.65, userSelect:'none', background:'var(--bg-1)',
                }}>
                  {Array.from({length:12}).map((_,i)=>(
                    <div key={i}>{i+1}</div>
                  ))}
                </div>
                <pre style={{
                  margin:0, padding:'24px 24px',
                  fontFamily:'var(--font-mono)', fontSize:13, lineHeight:1.65,
                  color:'var(--fg-0)', overflowX:'auto', background:'var(--bg-1)',
                }}>
{``}<span style={{color:'var(--fg-2)'}}>{`// rent the asset — pay up front, receive a usufructCap.`}</span>{`
let usufruct_cap = usufruct::`}<span style={{color:'var(--signal)'}}>rent</span>{`(&`}<span style={{color:'#c47a35'}}>mut</span>{` escrow, payment, tenures, &clock, ctx);

`}<span style={{color:'var(--fg-2)'}}>{`// usufruct hands you the asset — its receipt forces return.`}</span>{`
let (position, receipt) =
    usufruct::`}<span style={{color:'var(--signal)'}}>borrow_asset</span>{`(&`}<span style={{color:'#c47a35'}}>mut</span>{` escrow, &usufruct_cap, &clock, ctx);

`}<span style={{color:'var(--fg-2)'}}>{`// the asset IS the interface — call the issuer's own API.`}</span>{`
let fees = dex::`}<span style={{color:'var(--signal)'}}>collect_fees</span>{`(&`}<span style={{color:'#c47a35'}}>mut</span>{` position, ctx);
dex::`}<span style={{color:'var(--signal)'}}>add_liquidity</span>{`(&`}<span style={{color:'#c47a35'}}>mut</span>{` position, fees, ctx);

usufruct::`}<span style={{color:'var(--signal)'}}>return_asset</span>{`(&`}<span style={{color:'#c47a35'}}>mut</span>{` escrow, position, receipt);`}
                </pre>
              </div>
            </div>

            {/* Code window — AI inference */}
            <div style={{
              background:'var(--bg-1)', border:'1px solid var(--line-1)',
              overflow:'hidden',
            }}>
              <div style={{
                display:'flex', alignItems:'center', justifyContent:'space-between',
                padding:'12px 16px', borderBottom:'1px solid var(--line-1)',
                background:'var(--bg-2)',
              }}>
                <span style={{fontFamily:'var(--font-mono)', fontSize:11, color:'var(--fg-2)', letterSpacing:'0.10em'}}>
                  ai_inference.move
                </span>
                <div style={{display:'flex', alignItems:'center', gap:8, fontFamily:'var(--font-mono)', fontSize:10, color:'var(--fg-3)', letterSpacing:'0.12em'}}>
                  <Dot state="live"/> MOVE 2024
                </div>
              </div>
              <div style={{display:'grid', gridTemplateColumns:'auto 1fr'}}>
                <div style={{
                  borderRight:'1px solid var(--line-1)',
                  padding:'24px 14px', textAlign:'right',
                  fontFamily:'var(--font-mono)', fontSize:13, color:'var(--fg-3)',
                  lineHeight:1.65, userSelect:'none', background:'var(--bg-1)',
                }}>
                  {Array.from({length:10}).map((_,i)=>(
                    <div key={i}>{i+1}</div>
                  ))}
                </div>
                <pre style={{
                  margin:0, padding:'24px 24px',
                  fontFamily:'var(--font-mono)', fontSize:13, lineHeight:1.65,
                  color:'var(--fg-0)', overflowX:'auto', background:'var(--bg-1)',
                }}>
{``}<span style={{color:'var(--fg-2)'}}>{`// rent the asset — pay up front, receive a usufructCap.`}</span>{`
let usufruct_cap = usufruct::`}<span style={{color:'var(--signal)'}}>rent</span>{`(&`}<span style={{color:'#c47a35'}}>mut</span>{` escrow, payment, tenures, &clock, ctx);

`}<span style={{color:'var(--fg-2)'}}>{`// borrow the inference cap — query the model, then return it.`}</span>{`
let (cap, receipt) =
    usufruct::`}<span style={{color:'var(--signal)'}}>borrow_asset</span>{`(&`}<span style={{color:'#c47a35'}}>mut</span>{` escrow, &usufruct_cap, &clock, ctx);

let answer = model::`}<span style={{color:'var(--signal)'}}>infer</span>{`(&cap, prompt, ctx);

usufruct::`}<span style={{color:'var(--signal)'}}>return_asset</span>{`(&`}<span style={{color:'#c47a35'}}>mut</span>{` escrow, cap, receipt);`}
                </pre>
              </div>
            </div>
            </div>
          </div>
        </div>

        {/* Closing separator */}
        <div style={{display:'flex', alignItems:'center', gap:18, marginTop:64, paddingBottom:8}}>
          <div style={{height:1, background:'var(--line-1)', flex:'1 1 auto'}}/>
          <span style={{fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'0.22em', color:'var(--fg-3)', textTransform:'uppercase', whiteSpace:'nowrap'}}>usufruct v1</span>
          <div style={{height:1, background:'var(--line-1)', flex:'1 1 auto'}}/>
        </div>

      </div>
    </section>
  );
}

window.Runtime = Runtime;
