/* "Why usufruct is different?" — 4 insights, hinge into Market / Engine arcs */

function Pillars() {
  const points = [
    {
      title: "There is always a price.",
      body: "Normal rentals lock an asset to one asset payer for a fixed term. Here the right of use is always for sale — at rest, descending through an auction, or escalated while occupied. Money buys access. No permission, no waiting list, no landlord.",
    },
    {
      title: "Every position is a liquid asset.",
      body: "When you integrate, usufruct mints a GovernanceCap — your title to the escrow — and an EarningsInbox that collects your earnings after every settlement, automatically. The asset payer receives a usufructCap — the right of use. All three carry key + store: sell the governance rights, transfer the income address, or trade the access you're not using.",
    },
    {
      title: "No moving parts.",
      body: "No keeper, no oracle, no dependencies. Most on-chain markets lean on bots, cron jobs, price oracles, or other protocols to stay alive. Usufruct needs none — state advances lazily on the next transaction that touches it, and the package imports only Sui’s standard library.",
    },
    {
      title: "Bugs don’t compile.",
      body: "Most contracts defend against bad states with runtime checks. Here they are unrepresentable — a functional design that pushes Sui Move 2024 to the frontier of what the type system can express. Pure transitions over sum types, one state machine that never branches on your policies, financial state that cannot exist outside renting, immutable once deployed.",
    },
  ];

  return (
    <section id="protocol" className="section">
      <div className="container">
        <SectionDivider n={3} title="WHY USUFRUCT IS DIFFERENT"/>
        <div className="section__inner">
          <div style={{maxWidth: 980, marginBottom: 56}}>
            <Eyebrow style={{marginBottom:24}}>THE TAKEAWAYS<span style={{color:'var(--signal)'}}>  ·  Why does it matter?</span></Eyebrow>
            <h2 style={{
              fontFamily:'var(--font-sans)', fontWeight:500,
              fontSize:'clamp(50px, 6vw, 80px)', lineHeight:1.0,
              letterSpacing:'-0.02em', margin:0, color:'var(--fg-0)',
              textWrap:'balance',
            }}>
              Why usufruct<br/>
              <span style={{color:'var(--fg-0)'}}>is </span>
              <span style={{color:'var(--signal)'}}>different.</span>
            </h2>
            <p style={{
              fontFamily:'var(--font-sans)', fontSize:21, lineHeight:1.55,
              color:'var(--fg-1)', marginTop:24, maxWidth:560, textWrap:'pretty',
            }}>
              Four ways usufruct breaks from how rentals and on-chain markets normally work.
            </p>
          </div>

          <div style={{
            display:'grid',
            gridTemplateColumns:'repeat(2, 1fr)',
            gap:0,
            borderTop:'1px solid var(--fg-0)',
            borderBottom:'1px solid var(--line-1)',
          }}>
            {points.map((p, i) => {
              const col = i % 2;
              const row = Math.floor(i / 2);
              return (
                <div key={p.title} style={{
                  padding:'36px 36px 44px 36px',
                  borderRight: col < 1 ? '1px solid var(--line-1)' : 'none',
                  borderTop:  row > 0 ? '1px solid var(--line-1)' : 'none',
                  display:'flex', flexDirection:'column', gap:16,
                  minHeight: 240,
                }}>
                  <h3 style={{
                    fontFamily:'var(--font-sans)', fontWeight:500,
                    fontSize:33, lineHeight:1.1, letterSpacing:'-0.01em',
                    color:'var(--fg-0)', margin:0,
                  }}>{p.title}</h3>
                  <p style={{
                    fontFamily:'var(--font-sans)', fontSize:19, lineHeight:1.6,
                    color:'var(--fg-1)', margin:0, textWrap:'pretty',
                  }}>{p.body}</p>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

window.Pillars = Pillars;
