/* Time-boxed liquidity — the flash-loan-with-horizon primitive (asset holds a balance) */

function TimeBoxedLiquidity() {
  return (
    <section id="liquidity" className="section">
      <div className="container">
        <SectionDivider n={8} title="TIME-BOXED LIQUIDITY"/>
        <div className="section__inner">

          <div style={{maxWidth:880, marginBottom:40}}>
            <Eyebrow style={{marginBottom:24}}>A NEW PRIMITIVE<span style={{color:'var(--signal)'}}>  ·  What couldn’t exist before?</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',
            }}>
              One asset.<br/>
              <span style={{color:'var(--signal)'}}>One new market.</span>
            </h2>
          </div>

          {/* The time horizon — text left, code right */}
          <div style={{
            display:'grid', gridTemplateColumns:'1fr 1.5fr', gap:56,
            alignItems:'flex-start', marginBottom:56,
          }}>
          <div>
            <p style={{
              fontFamily:'var(--font-sans)', fontSize:20, lineHeight:1.6,
              color:'var(--fg-1)', margin:0, textWrap:'pretty',
            }}>
              Wrap a balance in a <code style={{fontFamily:'var(--font-mono)', color:'var(--signal)'}}>key + store</code> vault,
              integrate in usufruct and the same engine makes it rentable.
            </p>
            <p style={{
              fontFamily:'var(--font-sans)', fontSize:20, lineHeight:1.6,
              color:'var(--fg-1)', marginTop:16, textWrap:'pretty',
            }}>
              Rent a <strong style={{color:'var(--fg-0)', fontWeight:500, whiteSpace:'nowrap'}}>1,000,000 SUI vault for a day</strong> —
              then flash-loan it across as many transactions as you like, each one atomic,
              the vault always returned whole.
            </p>
            <p style={{
              fontFamily:'var(--font-sans)', fontSize:20, lineHeight:1.6,
              color:'var(--fg-0)', marginTop:20, fontWeight:500,
            }}>
              Flash loans existed. Flash loans with a time horizon did not.
            </p>

            <Eyebrow style={{marginTop:36, marginBottom:18}}>THE TIME HORIZON</Eyebrow>
            <p style={{
              fontFamily:'var(--font-sans)', fontSize:20, lineHeight:1.6,
              color:'var(--fg-1)', margin:0, textWrap:'pretty',
            }}>
              A Move hot-potato is <strong style={{color:'var(--fg-0)', fontWeight:500}}>atomic</strong> — borrow and
              return inside one transaction, settled by the type system. That existed before usufruct.
            </p>
            <p style={{
              fontFamily:'var(--font-sans)', fontSize:20, lineHeight:1.6,
              color:'var(--fg-1)', marginTop:16, textWrap:'pretty',
            }}>
              usufruct adds two things on top: a <strong style={{color:'var(--fg-0)', fontWeight:500}}>time horizon</strong> and
              {' '}<strong style={{color:'var(--fg-0)', fontWeight:500}}>asset issuer-set terms</strong>. Rent the vault for a day and the
              right to borrow it reopens across the whole tenure — a fresh atomic transaction now, another two
              hours later, on terms the asset issuer fixed at integration.
            </p>
            <p style={{
              fontFamily:'var(--font-sans)', fontSize:20, lineHeight:1.5,
              color:'var(--fg-0)', marginTop:24, fontWeight:500,
            }}>
              Each transaction is atomic. The right to open the next one lasts the tenure.
            </p>

            {/* Note — emergent, not designed */}
            <div style={{
              marginTop:32, paddingLeft:18, borderLeft:'2px solid var(--line-1)',
            }}>
              <Eyebrow style={{marginBottom:10}}>NOTE — EMERGENT, NOT DESIGNED</Eyebrow>
              <p style={{
                fontFamily:'var(--font-sans)', fontSize:18, lineHeight:1.6,
                color:'var(--fg-2)', margin:0, textWrap:'pretty',
              }}>
                usufruct never set out to build this. Time-boxed liquidity falls out of Sui objects being
                composable — the same <code style={{fontFamily:'var(--font-mono)', color:'var(--fg-1)'}}>key + store</code> bound
                that makes anything rentable lets the borrowed asset nest inside other protocols within one
                transaction. The protocol provides the window; composability does the rest.
              </p>
              <p style={{
                fontFamily:'var(--font-sans)', fontSize:18, lineHeight:1.6,
                color:'var(--fg-2)', marginTop:14, textWrap:'pretty',
              }}>
                The vault here is just one shape. Each asset issuer designs their own wrapper — its balance, its terms,
                its own <code style={{fontFamily:'var(--font-mono)', color:'var(--fg-1)'}}>take</code> /
                {' '}<code style={{fontFamily:'var(--font-mono)', color:'var(--fg-1)'}}>put</code> hot-potato.
                usufruct shows the pattern; what flows through the window is yours to build.
              </p>
            </div>
          </div>

          <div style={{
            background:'var(--bg-1)', border:'1px solid var(--line-1)',
            overflow:'hidden',
          }}>
            {/* chrome */}
            <div style={{
              display:'flex', alignItems:'center', justifyContent:'space-between',
              padding:'12px 16px', borderBottom:'1px solid var(--line-1)', background:'var(--bg-2)',
              flexWrap:'wrap', gap:8,
            }}>
              <span style={{fontFamily:'var(--font-mono)', fontSize:11, color:'var(--fg-2)', letterSpacing:'0.10em'}}>
                one tenure · many transactions
              </span>
              <span 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
              </span>
            </div>
            <pre style={{
              margin:0, padding:'24px', fontFamily:'var(--font-mono)', fontSize:13, lineHeight:1.7,
              color:'var(--fg-0)', overflowX:'auto', background:'var(--bg-1)',
            }}>
{``}<span style={{color:'var(--fg-2)'}}>{`// rent the vault — 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 vault — asset_receipt forces its return.`}</span>{`
let (vault, asset_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 vault emits its OWN hot potato: VaultBorrow.`}</span>{`
let (coin, borrow_receipt) = vault::`}<span style={{color:'var(--signal)'}}>take</span>{`(&`}<span style={{color:'#c47a35'}}>mut</span>{` vault, 1_000_000, ctx);
let coin = deepbook::`}<span style={{color:'var(--signal)'}}>swap</span>{`(coin, ...);
let coin = cetus::`}<span style={{color:'var(--signal)'}}>swap</span>{`(coin, ...);
vault::`}<span style={{color:'var(--signal)'}}>put</span>{`(&`}<span style={{color:'#c47a35'}}>mut</span>{` vault, coin, borrow_receipt);

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


`}<span style={{color:'var(--signal)'}}>{`// ── two hours later ──────────────────`}</span>{`


`}<span style={{color:'var(--fg-2)'}}>{`// same tenure, a fresh transaction on the same vault.`}</span>{`
let (vault, asset_receipt) =
    usufruct::`}<span style={{color:'var(--signal)'}}>borrow_asset</span>{`(&`}<span style={{color:'#c47a35'}}>mut</span>{` escrow, &usufruct_cap, &clock, ctx);

let (coin, borrow_receipt) = vault::`}<span style={{color:'var(--signal)'}}>take</span>{`(&`}<span style={{color:'#c47a35'}}>mut</span>{` vault, 400_000, ctx);
let coin = lending::`}<span style={{color:'var(--signal)'}}>liquidate</span>{`(coin, ...);
vault::`}<span style={{color:'var(--signal)'}}>put</span>{`(&`}<span style={{color:'#c47a35'}}>mut</span>{` vault, coin, borrow_receipt);

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


`}<span style={{color:'var(--signal)'}}>{`// ── 30 minutes later ──────────────────`}</span>{`
`}<span style={{color:'var(--fg-3)'}}>{`// ... and again, until the tenure expires.`}</span>
            </pre>
          </div>
          </div>

        </div>
      </div>
    </section>
  );
}

window.TimeBoxedLiquidity = TimeBoxedLiquidity;
