/* Economics — value flow (90/10 split) + protocol/owner incentive alignment */

function Economics() {
  return (
    <section id="economics" className="section">
      <div className="container">
        <SectionDivider n={4} title="ECONOMICS" arc="The Market"/>
        <div className="section__inner">

          <div style={{maxWidth:880, marginBottom:56}}>
            <Eyebrow style={{marginBottom:24}}>ASSET ISSUERS AND USUFRUCT ARE ALIGNED<span style={{color:'var(--signal)'}}>  ·  How does value flow?</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',
            }}>
              The asset issuer earns<br/>
              <span style={{color:'var(--signal)'}}>the market rate.</span>
            </h2>
            <p style={{
              fontFamily:'var(--font-sans)', fontSize:21, lineHeight:1.55,
              color:'var(--fg-1)', marginTop:24, maxWidth:560, textWrap:'pretty',
            }}>
              Every asset payer bids against the next, so the price is whatever the market
              will pay to hold the asset — set by competition, never by a fixed list price.
              The asset issuer simply collects it.
            </p>
          </div>

          <div style={{
            border:'1px solid var(--line-1)', background:'var(--bg-1)',
            padding:'40px 40px 8px 40px',
          }}>
            <Eyebrow>PROTOCOL INCENTIVES</Eyebrow>
            <h3 style={{
              fontFamily:'var(--font-sans)', fontWeight:500,
              fontSize:'clamp(30px, 3vw, 38px)', lineHeight:1.12, letterSpacing:'-0.018em',
              color:'var(--fg-0)', margin:'16px 0 0 0', textWrap:'balance',
            }}>
              usufruct earns only when the <span style={{color:'var(--signal)'}}>asset issuer earns</span>.
            </h3>

            {/* Horizontal 90/10 split — the 10% reads as a sliver */}
            <div style={{marginTop:24}}>
              <div style={{display:'flex', height:44, border:'1px solid var(--line-1)'}}>
                <div style={{
                  flex:'90 1 0', background:'var(--good)',
                  display:'flex', alignItems:'center', justifyContent:'flex-end', padding:'0 16px',
                }}>
                  <span style={{fontFamily:'var(--font-sans)', fontWeight:600, fontSize:16, color:'#fff'}}>90%</span>
                </div>
                <div style={{
                  flex:'10 1 0', background:'var(--signal)', color:'var(--signal-fg)',
                  display:'flex', alignItems:'center', justifyContent:'center', minWidth:48,
                }}>
                  <span style={{fontFamily:'var(--font-sans)', fontWeight:500, fontSize:14}}>10%</span>
                </div>
              </div>
              <div style={{
                display:'flex', justifyContent:'space-between', marginTop:8,
                fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'0.04em', color:'var(--fg-3)',
              }}>
                <span>ASSET ISSUER EARNINGS</span>
                <span>PROTOCOL FEE</span>
              </div>
              <p style={{
                fontFamily:'var(--font-sans)', fontSize:16, lineHeight:1.55, color:'var(--fg-2)',
                margin:'14px 0 0 0', maxWidth:680, textWrap:'pretty',
              }}>
                Charged on consumed asset payer stake only — never on locked stake or gross payment.
              </p>
            </div>

            <div style={{
              display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:0,
              borderTop:'1px solid var(--line-1)', marginTop:32,
            }}>
              {[
                ['Same moment', 'The fee settles together with the asset issuer’s earnings, on credit already consumed. There is no separate toll, no upfront cut.'],
                ['Same coin', 'Whatever CoinType the asset issuer picks is exactly what usufruct receives. No protocol coin, no conversion, no wrapping.'],
                ['No middleman', 'Earnings are withdrawable any time by the GovernanceCap holder. No quorum, no governance, no lockup.'],
              ].map(([h,b],i) => (
                <div key={h} style={{
                  padding:'24px 24px 28px 24px',
                  borderRight: i<2 ? '1px solid var(--line-1)' : 'none',
                  display:'flex', flexDirection:'column', gap:8,
                }}>
                  <div style={{
                    fontFamily:'var(--font-mono)', fontSize:11, color:'var(--signal)',
                    letterSpacing:'0.16em', textTransform:'uppercase',
                  }}>{h}</div>
                  <div style={{fontFamily:'var(--font-sans)', fontSize:14, color:'var(--fg-1)', lineHeight:1.55}}>{b}</div>
                </div>
              ))}
            </div>
          </div>

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

window.Economics = Economics;