/* The Mission — § 00 */

function Mission() {
  const rows = [
    ['Build any asset.',  'Opens it to rental.'],
    ['Define its value.', 'Creates its market.'],
    ['Ship once.',        'Runs forever.'],
  ];

  return (
    <section id="mission" className="section">
      <div className="container">
        <SectionDivider n={0} title="THE MISSION" arc="The Mission"/>
        <div className="section__inner" style={{paddingTop: 40}}>

          {/* Headline + image */}
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr',
            gap: 48, alignItems: 'center', marginBottom: 72,
          }}>
            <div>
              <h2 style={{
                fontFamily: 'var(--font-sans)', fontWeight: 500,
                fontSize: 'clamp(64px, 7.5vw, 112px)', lineHeight: 0.96,
                letterSpacing: '-0.025em', margin: '0 0 28px',
                color: 'var(--fg-0)',
              }}>
                Usufruct will make<br/>every Sui object<br/>
                <span style={{color: 'var(--signal)'}}>an asset.</span>
              </h2>
              <p style={{
                fontFamily: 'var(--font-sans)', fontSize: 23, lineHeight: 1.5,
                color: 'var(--fg-0)', margin: 0,
              }}>
                Every Sui object has a rental market. It just hasn't been built yet.
              </p>
            </div>
            <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16}}>
              <img
                src="./assets/usufruct_layer.png?v=6"
                alt="usufruct layer diagram"
                style={{width: '100%', maxWidth: 480, display: 'block', mixBlendMode: 'lighten'}}
              />
              <span style={{
                fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em',
                textTransform: 'uppercase', color: 'var(--fg-2)', textAlign: 'center',
              }}>
                Usufruct market layer for humans and AI agents
              </span>
            </div>
          </div>

          {/* Two-column split */}
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr',
            borderTop: '1px solid var(--line-1)',
          }}>
            <div style={{
              padding: '20px 32px 20px 0',
              borderBottom: '1px solid var(--line-1)',
              borderRight: '1px solid var(--line-1)',
              fontFamily: 'var(--font-mono)', fontSize: 11,
              letterSpacing: '0.18em', textTransform: 'uppercase',
              color: 'var(--fg-2)',
            }}>You</div>
            <div style={{
              padding: '20px 0 20px 32px',
              borderBottom: '1px solid var(--line-1)',
              fontFamily: 'var(--font-mono)', fontSize: 11,
              letterSpacing: '0.18em', textTransform: 'uppercase',
              color: 'var(--signal)',
            }}>usufruct</div>

            {rows.map(([left, right], i) => (
              <React.Fragment key={i}>
                <div style={{
                  padding: '28px 32px 28px 0',
                  borderBottom: i < rows.length - 1 ? '1px solid var(--line-1)' : 'none',
                  borderRight: '1px solid var(--line-1)',
                  fontFamily: 'var(--font-sans)', fontSize: 25, fontWeight: 500,
                  lineHeight: 1.2, color: 'var(--fg-1)',
                }}>{left}</div>
                <div style={{
                  padding: '28px 0 28px 32px',
                  borderBottom: i < rows.length - 1 ? '1px solid var(--line-1)' : 'none',
                  fontFamily: 'var(--font-sans)', fontSize: 25, fontWeight: 500,
                  lineHeight: 1.2, color: 'var(--fg-0)',
                }}>{right}</div>
              </React.Fragment>
            ))}
          </div>

          {/* Sub-chapter: The Primitive */}
          <div style={{marginTop: 72}}>
            <SectionDivider n={1} title="THE PRIMITIVE"/>

            <div style={{paddingTop:40}}>
              <h3 style={{
                fontFamily:'var(--font-sans)', fontWeight:500,
                fontSize:'clamp(34px, 3.5vw, 52px)', lineHeight:1.05,
                letterSpacing:'-0.025em', margin:'0 0 20px', color:'var(--fg-0)',
              }}>
                Any Sui object.<br/>
                <span style={{color:'var(--signal)'}}>Any coin.</span>
              </h3>

              <div style={{marginBottom:40}}>
                <p style={{
                  fontFamily:'var(--font-sans)', fontSize:23, lineHeight:1.5,
                  color:'var(--fg-0)', margin:0,
                }}>
                  At integration time, you bring the object and name the coin.
                </p>
                <p style={{
                  fontFamily:'var(--font-sans)', fontSize:23, lineHeight:1.5,
                  color:'var(--fg-0)', margin:'8px 0 0',
                }}>
                  Usufruct doesn't know — or care — what either one is.
                </p>
              </div>

              <div style={{display:'flex', flexDirection:'column', gap:0, borderTop:'1px solid var(--line-1)'}}>
                {[
                  {
                    label: 'Object',
                    body: 'Any Sui object with key + store. No adapter, no migration — if the object already exists on Sui, it\'s already compatible.',
                  },
                  {
                    label: 'Coin',
                    body: <React.Fragment>The asset issuer picks the CoinType at integration time — that's the coin renters pay in, and the coin earnings arrive in.<br/>No protocol coin, no conversion, no wrapping.</React.Fragment>,
                  },
                ].map(({label, body}) => (
                  <div key={label} style={{
                    display:'grid', gridTemplateColumns:'96px 1fr',
                    gap:24, padding:'24px 0',
                    borderBottom:'1px solid var(--line-1)',
                  }}>
                    <span style={{
                      fontFamily:'var(--font-mono)', fontSize:11,
                      letterSpacing:'0.18em', textTransform:'uppercase',
                      color:'var(--signal)', paddingTop:2,
                    }}>{label}</span>
                    <p style={{
                      fontFamily:'var(--font-sans)', fontSize:20, lineHeight:1.55,
                      color:'var(--fg-1)', margin:0,
                    }}>{body}</p>
                  </div>
                ))}
              </div>
            </div>

          </div>

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

window.Mission = Mission;