/* Coin demand — denominating rent in your own coin turns rental demand into coin demand */

function TokenDemand() {
  const steps = [
    {
      k:'01', h:'Rent in your coin',
      b:'The asset issuer sets the payment CoinType at integrate time — your coin, not SUI, not a protocol coin.',
    },
    {
      k:'02', h:'Competing means buying',
      b:'Every asset payer bidding for the asset must first acquire your coin. Each bid is a buy.',
    },
    {
      k:'03', h:'Demand tracks usage',
      b:'Circulation comes from people who want to use the asset — driven by participation, not speculation.',
    },
  ];

  return (
    <section id="token-demand" className="section">
      <div className="container">
        <SectionDivider n={6} title="COIN DEMAND"/>
        <div className="section__inner">

          <div style={{maxWidth:880, marginBottom:56}}>
            <Eyebrow style={{marginBottom:24}}>FOR COIN ISSUERS<span style={{color:'var(--signal)'}}>  ·  How does it drive my coin?</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',
            }}>
              If they want your assets,<br/>
              <span style={{color:'var(--signal)'}}>they need your coin.</span>
            </h2>
            <p style={{
              fontFamily:'var(--font-sans)', fontSize:21, lineHeight:1.55,
              color:'var(--fg-1)', marginTop:24, maxWidth:620, textWrap:'pretty',
            }}>
              Build assets people want to rent and denominate them in your own coin. To compete
              to rent them, every asset payer must hold your coin first — so demand for your assets
              converts directly into demand for your coin. A buy-side that tracks real usage, not narrative.
            </p>
          </div>

          {/* Circuit — three steps */}
          <div style={{
            display:'grid', gridTemplateColumns:'1fr auto 1fr auto 1fr', alignItems:'stretch', gap:0,
          }}>
            {steps.map((s, i) => (
              <React.Fragment key={s.k}>
                <div style={{
                  border:'1px solid var(--line-1)', background:'var(--bg-1)',
                  padding:'28px 24px 32px 24px', display:'flex', flexDirection:'column', gap:12,
                }}>
                  <span style={{
                    fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'0.18em', color:'var(--signal)',
                  }}>§ {s.k}</span>
                  <h3 style={{
                    fontFamily:'var(--font-sans)', fontWeight:500, fontSize:25, lineHeight:1.15,
                    letterSpacing:'-0.01em', color:'var(--fg-0)', margin:0,
                  }}>{s.h}</h3>
                  <p style={{
                    fontFamily:'var(--font-sans)', fontSize:16, lineHeight:1.55, color:'var(--fg-1)', margin:0,
                  }}>{s.b}</p>
                </div>
                {i < steps.length - 1 && (
                  <div style={{
                    display:'flex', alignItems:'center', justifyContent:'center',
                    padding:'0 16px', color:'var(--signal)',
                    fontFamily:'var(--font-mono)', fontSize:22, fontWeight:400,
                  }}>→</div>
                )}
              </React.Fragment>
            ))}
          </div>

          <p style={{
            fontFamily:'var(--font-sans)', fontSize:19, lineHeight:1.6,
            color:'var(--fg-2)', marginTop:40, maxWidth:720, textWrap:'pretty',
          }}>
            No emissions, no incentives program, no wrapper coin. The demand is organic —
            it comes from people who actually want to use what you built.
          </p>

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

window.TokenDemand = TokenDemand;