/* Archetypes — comparison matrix: columns are markets, rows are policy dimensions */

function Archetypes() {
  const dimensions = [
    'tenure_duration',
    'tenure_extend',
    'handover',
    'auction_window',
    'price_escalation',
    'credit_shape',
    'auction_shape',
    'commitment',
  ];

  const markets = [
    {
      title:'Pay-per-call', tag:'RATE-LIMITED APIS',
      note:'Bots hitting a metered endpoint.',
      p:{ tenure_duration:'50 ms', tenure_extend:'Single', handover:'Off',
          auction_window:'Off', price_escalation:'FixedDelta', credit_shape:'Linear',
          auction_shape:'Linear', commitment:'Immediate' },
    },
    {
      title:'Inference budget', tag:'AI MODEL ACCESS',
      note:'Agents renting time on a model.',
      p:{ tenure_duration:'60 s', tenure_extend:'Multi', handover:'Fixed · 5 s',
          auction_window:'Off', price_escalation:'CompoundDelta · 5%', credit_shape:'Exponential(2)',
          auction_shape:'Linear', commitment:'Immediate' },
    },
    {
      title:'Protected rental', tag:'USER SESSIONS', featured:true,
      note:'A person’s session with an asset.',
      p:{ tenure_duration:'24 h', tenure_extend:'Single', handover:'Fixed · 1 h',
          auction_window:'Fixed · 6 h', price_escalation:'CompoundDelta · 10%', credit_shape:'PowerLaw(1,2)',
          auction_shape:'Logistic', commitment:'Deferred · 24 h' },
    },
    {
      title:'Vote rental', tag:'GOVERNANCE · veTOKEN',
      note:'Borrowed weight for a governance vote.',
      p:{ tenure_duration:'48 h', tenure_extend:'Single', handover:'FullTenure',
          auction_window:'Fixed · 12 h', price_escalation:'FixedDelta', credit_shape:'Logistic',
          auction_shape:'Smoothstep', commitment:'Deferred · 7 d' },
    },
    {
      title:'Allowlist mint slot', tag:'NFT MINTS · IDO',
      note:'A seat on a mint or token sale.',
      p:{ tenure_duration:'30 min', tenure_extend:'Single', handover:'FullTenure',
          auction_window:'Fixed · 15 min', price_escalation:'FixedDelta', credit_shape:'Linear',
          auction_shape:'Exponential(−3)', commitment:'Immediate' },
    },
    {
      title:'Yield position', tag:'DEFI POSITIONS',
      note:'A yield-bearing position, rented out.',
      p:{ tenure_duration:'7 d', tenure_extend:'Multi', handover:'Fixed · 24 h',
          auction_window:'Fixed · 12 h', price_escalation:'CompoundDelta · 25%', credit_shape:'PowerLaw(2,1)',
          auction_shape:'Smoothstep', commitment:'Deferred · 30 d' },
    },
  ];

  const cols = `minmax(190px, 1.7fr) repeat(${dimensions.length}, minmax(92px, 1fr))`;

  return (
    <section id="policies" className="section">
      <div className="container">
        <SectionDivider n={7} title="MARKET ARCHETYPES"/>
        <div className="section__inner">
          <div style={{maxWidth:880, marginBottom:64}}>
            <Eyebrow style={{marginBottom:24}}>FROM MACHINES TO HUMANS<span style={{color:'var(--signal)'}}>  ·  What markets can I build?</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)'}}>Many markets.</span>
            </h2>
            <p style={{
              fontFamily:'var(--font-sans)', fontSize:20, lineHeight:1.5, color:'var(--fg-1)',
              maxWidth:600, marginTop:24, textWrap:'pretty',
            }}>
              Tune the same engine and the same asset behaves like a different market each time —
              from millisecond, machine-to-machine payments to protected, day-long human leases.
              The shape of the market is yours to choose — set once at integration, iterated after.
            </p>
          </div>

          {/* Comparison matrix — markets down the left, policy dimensions across the top */}
          <div style={{
            display:'grid', gridTemplateColumns:cols, gap:0,
            border:'1px solid var(--line-1)', overflow:'hidden',
          }}>
            {/* Header row: corner + policy dimensions */}
            <div style={{
              padding:'14px 18px', borderRight:'1px solid var(--line-1)', borderBottom:'1px solid var(--line-1)',
              background:'var(--bg-2)',
              fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'0.18em', color:'var(--fg-3)',
              display:'flex', alignItems:'flex-end',
            }}>MARKET</div>
            {dimensions.map((d, ci) => (
              <div key={d} style={{
                padding:'14px 12px',
                borderRight: ci < dimensions.length-1 ? '1px solid var(--line-1)' : 'none',
                borderBottom:'1px solid var(--line-1)',
                background:'var(--bg-2)',
                fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'0.06em', color:'var(--fg-3)',
                display:'flex', alignItems:'flex-end', lineHeight:1.3, wordBreak:'break-word',
              }}>{d}</div>
            ))}

            {/* Market rows */}
            {markets.map((m, ri) => (
              <React.Fragment key={m.title}>
                <div style={{
                  padding:'18px 18px', borderRight:'1px solid var(--line-1)',
                  borderBottom: ri < markets.length-1 ? '1px solid var(--line-2)' : 'none',
                  display:'flex', flexDirection:'column', gap:5,
                }}>
                  <span style={{fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'0.16em', color:'var(--signal)'}}>{m.tag}</span>
                  <span style={{fontFamily:'var(--font-sans)', fontWeight:500, fontSize:21, lineHeight:1.1, letterSpacing:'-0.01em', color:'var(--fg-0)'}}>{m.title}</span>
                  <span style={{fontFamily:'var(--font-sans)', fontSize:12, lineHeight:1.4, color:'var(--fg-2)', marginTop:2}}>{m.note}</span>
                </div>
                {dimensions.map((d, ci) => (
                  <div key={m.title+d} style={{
                    padding:'18px 12px',
                    borderRight: ci < dimensions.length-1 ? '1px solid var(--line-1)' : 'none',
                    borderBottom:'1px solid var(--line-2)',
                    fontFamily:'var(--font-mono)', fontSize:11, lineHeight:1.4,
                    color:'var(--fg-0)', wordBreak:'break-word',
                    display:'flex', alignItems:'center',
                  }}>{m.p[d]}</div>
                ))}
              </React.Fragment>
            ))}

            {/* Invitation row — full-width, breathing Build CTA */}
            <div style={{
              gridColumn:'1 / -1',
              background:'rgba(41,121,200,0.06)', borderTop:'1px solid var(--signal)',
              padding:'22px 18px',
              display:'flex', alignItems:'center', gap:24, flexWrap:'wrap',
            }}>
              <div style={{display:'flex', flexDirection:'column', gap:5, flex:'0 0 auto', minWidth:180}}>
                <span style={{fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'0.16em', color:'var(--signal)'}}>YOUR MARKET</span>
                <span style={{fontFamily:'var(--font-sans)', fontWeight:500, fontSize:21, lineHeight:1.1, letterSpacing:'-0.01em', color:'var(--fg-0)'}}>Not in this table — yet.</span>
              </div>
              <span style={{fontFamily:'var(--font-sans)', fontSize:19, lineHeight:1.5, color:'var(--fg-1)', flex:'1 1 280px'}}>
                The most innovative usufruct market is the one no one has imagined yet. Build your asset, launch your market.
              </span>
              <a href="https://sdk.usufruct.io" target="_blank" rel="noopener noreferrer" style={{
                fontFamily:'var(--font-mono)', fontSize:14, fontWeight:600, letterSpacing:'0.08em',
                textTransform:'uppercase', color:'var(--signal)', background:'transparent',
                border:'1px solid var(--signal)',
                textDecoration:'none', padding:'11px 19px', whiteSpace:'nowrap',
                display:'inline-flex', alignItems:'center', gap:8,
              }}>Build <span style={{fontSize:16, lineHeight:1, fontWeight:400}}>↗</span></a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Archetypes = Archetypes;