/* Matter Protocol — Section 06 "For builders" + Section 07 "Roadmap" */

function ForBuilders() {
  const t = window.matterTokens;
  const features = [
    {
      label: 'typed sdk',
      title: 'every primitive is a type.',
      desc: 'inputs, outputs, side effects — declared upfront. compositions that don\'t fit fail at the type checker, not at runtime.',
    },
    {
      label: 'local-first',
      title: 'runs on your machine.',
      desc: 'backtest, paper-trade, debug — all from the cli. no cloud account required to write your strategy.',
    },
    {
      label: 'composable',
      title: 'small pieces, shared interfaces.',
      desc: 'every primitive speaks the same protocol. swap an entry for a different entry; the rest of the strategy keeps working.',
    },
    {
      label: 'audited paths',
      title: 'the dangerous parts are shared.',
      desc: 'execution, custody handoff, accounting — written once, audited once. your strategy just decides what to do.',
    },
  ];

  return (
    <section id="for-builders-section" style={{ padding: '120px 80px', background: t.ink, color: t.bg, borderTop: `1px solid ${t.ink}` }}>
      <div style={{ maxWidth: 1440, margin: '0 auto' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '0.95fr 1.05fr', gap: 80,
          alignItems: 'flex-start',
        }}>
          <div>
            <div style={{
              fontFamily: "'Geist Mono', monospace",
              fontSize: 11.5, textTransform: 'uppercase', letterSpacing: '0.12em',
              color: 'rgba(244,241,234,0.5)',
              display: 'inline-flex', alignItems: 'center', gap: 10, marginBottom: 18,
            }}>
              <span style={{
                padding: '3px 7px', background: t.lime, color: t.ink, borderRadius: 4,
                letterSpacing: '0.06em', fontWeight: 500,
              }}>06</span>
              <span>for builders</span>
            </div>
            <h2 style={{
              margin: 0,
              fontSize: 52,
              lineHeight: 1.02,
              letterSpacing: '-0.025em',
              fontWeight: 500,
              color: t.bg,
              textTransform: 'lowercase',
            }}>read the types.<br/>write the strategy.</h2>
            <p style={{
              margin: '20px 0 0',
              fontSize: 17,
              lineHeight: 1.5,
              color: 'rgba(244,241,234,0.65)',
              maxWidth: 460,
            }}>matter is a typescript sdk. import primitives, compose them, export a strategy. that's it.</p>

            <div style={{
              marginTop: 28,
              display: 'flex', gap: 12, alignItems: 'center',
            }}>
              <a href="docs.html" style={{
                background: t.lime, color: t.ink, fontSize: 14.5, fontWeight: 500,
                padding: '12px 20px', borderRadius: 10, textDecoration: 'none',
                letterSpacing: '-0.005em',
              }}>read the docs</a>
              <a href="#" onClick={(e) => { e.preventDefault(); window.matterUI?.openNotice?.('github'); }} style={{
                background: 'transparent', color: t.bg, fontSize: 14.5, fontWeight: 500,
                padding: '12px 18px', borderRadius: 10, textDecoration: 'none',
                letterSpacing: '-0.005em',
                border: '1px solid rgba(244,241,234,0.2)',
                cursor: 'pointer',
              }}>github →</a>
            </div>
          </div>

          {/* Code window */}
          <div style={{
            background: '#0E0D0A',
            border: '1px solid rgba(244,241,234,0.12)',
            borderRadius: 14,
            overflow: 'hidden',
            fontFamily: "'Geist Mono', monospace",
            fontSize: 13.5,
            lineHeight: 1.65,
          }}>
            <div style={{
              padding: '10px 16px',
              borderBottom: '1px solid rgba(244,241,234,0.08)',
              display: 'flex', alignItems: 'center', gap: 10,
              fontSize: 11,
              color: 'rgba(244,241,234,0.45)',
            }}>
              <div style={{ display: 'flex', gap: 5 }}>
                <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'rgba(244,241,234,0.18)' }} />
                <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'rgba(244,241,234,0.18)' }} />
                <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'rgba(244,241,234,0.18)' }} />
              </div>
              <span style={{ marginLeft: 6 }}>mean-rev-eth.ts</span>
            </div>
            <div style={{ padding: '18px 22px', color: t.bg }}>
              <div><span style={{ color: '#8a8276' }}>import</span> <span style={{ color: t.bg }}>{'{'} matter, type Strategy {'}'}</span> <span style={{ color: '#8a8276' }}>from</span> <span style={{ color: t.lime }}>'@matter/sdk'</span></div>
              <div><span style={{ color: '#8a8276' }}>import</span> <span style={{ color: t.bg }}>{'{'} emaCross {'}'}</span> <span style={{ color: '#8a8276' }}>from</span> <span style={{ color: t.lime }}>'@matter/entries'</span></div>
              <div><span style={{ color: '#8a8276' }}>import</span> <span style={{ color: t.bg }}>{'{'} volTarget {'}'}</span> <span style={{ color: '#8a8276' }}>from</span> <span style={{ color: t.lime }}>'@matter/risk'</span></div>
              <div><span style={{ color: '#8a8276' }}>import</span> <span style={{ color: t.bg }}>{'{'} trailStop {'}'}</span> <span style={{ color: '#8a8276' }}>from</span> <span style={{ color: t.lime }}>'@matter/exits'</span></div>
              <div style={{ height: 14 }} />
              <div><span style={{ color: '#8a8276' }}>export const</span> meanRevEth<span style={{ color: '#8a8276' }}>:</span> <span style={{ color: '#9ec4ff' }}>Strategy</span> <span style={{ color: '#8a8276' }}>=</span> matter.compose([</div>
              <div style={{ paddingLeft: 18 }}><span style={{ color: '#C8EE2C' }}>emaCross</span><span style={{ color: '#8a8276' }}>({`{ fast: 12, slow: 26 }`}),</span></div>
              <div style={{ paddingLeft: 18 }}><span style={{ color: '#E07A3A' }}>volTarget</span><span style={{ color: '#8a8276' }}>({`{ sigma: 0.18 }`}),</span></div>
              <div style={{ paddingLeft: 18 }}><span style={{ color: t.bg }}>trailStop</span><span style={{ color: '#8a8276' }}>({`{ pct: 4.5 }`}),</span></div>
              <div><span style={{ color: '#8a8276' }}>])</span></div>
              <div style={{ height: 14 }} />
              <div><span style={{ color: '#5a554b' }}>// 6 lines. one strategy. typed end-to-end.</span></div>
            </div>
          </div>
        </div>

        <div style={{
          marginTop: 64,
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
          borderTop: '1px solid rgba(244,241,234,0.12)',
        }}>
          {features.map((f, i) => (
            <div key={f.label} style={{
              padding: '30px 28px 26px',
              borderRight: i < features.length - 1 ? '1px solid rgba(244,241,234,0.08)' : 'none',
              display: 'flex', flexDirection: 'column', gap: 10,
            }}>
              <div style={{
                fontFamily: "'Geist Mono', monospace",
                fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.1em',
                color: t.lime,
              }}>{f.label}</div>
              <h3 style={{
                margin: 0,
                fontSize: 19,
                lineHeight: 1.18,
                letterSpacing: '-0.015em',
                fontWeight: 500,
                color: t.bg,
                textTransform: 'lowercase',
              }}>{f.title}</h3>
              <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.55, color: 'rgba(244,241,234,0.55)' }}>{f.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Roadmap() {
  const t = window.matterTokens;
  // Current date: June 2026 → Q2 2026 (now/private alpha)
  const cols = [
    {
      q: 'Q2 2026', label: 'now',
      title: 'private alpha.',
      items: [
        'core sdk · 18 primitives',
        'composer (cli + studio)',
        'invite-only access',
        'local backtester',
      ],
      status: 'shipping',
    },
    {
      q: 'Q3 2026', label: 'next',
      title: 'solana primitives.',
      items: [
        'jupiter · drift · marginfi',
        'cross-chain venue routing',
        'on-chain execution receipts',
      ],
      status: 'building',
    },
    {
      q: 'Q4 2026', label: 'later',
      title: 'primitive marketplace.',
      items: [
        'third-party publishing',
        'royalty + versioning',
        'attestations & audits',
        'on-chain primitive registry',
      ],
      status: 'planned',
    },
    {
      q: 'Q1 2027', label: 'later',
      title: 'public composer.',
      items: [
        'open access',
        'browser-native studio',
        'shared strategy snapshots',
        '+12 primitives',
      ],
      status: 'planned',
    },
  ];

  return (
    <section id="roadmap-section" style={{ padding: '120px 80px', background: t.bg, borderTop: `1px solid ${t.line}` }}>
      <div style={{ maxWidth: 1440, margin: '0 auto' }}>
        <SectionHead
          num="07"
          eyebrow="roadmap"
          title="four quarters. honestly scoped."
          sub="dates slip in crypto; intent shouldn't. here's what's on the bench and what's queued behind it."
        />

        <div style={{
          marginTop: 56,
          position: 'relative',
          paddingTop: 28,
        }}>
          {/* Track line */}
          <div style={{
            position: 'absolute',
            left: '4%', right: '4%', top: 38,
            height: 2,
            background: t.line,
          }} />

          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14,
            position: 'relative',
          }}>
            {cols.map((c, i) => {
              const isNow = c.label === 'now';
              return (
                <div key={c.q} style={{ position: 'relative', paddingTop: 28 }}>
                  {/* Node */}
                  <div style={{
                    position: 'absolute',
                    top: 4, left: 0,
                    width: 18, height: 18, borderRadius: '50%',
                    background: isNow ? t.lime : t.paper,
                    border: `2px solid ${isNow ? t.limeDeep : t.line2}`,
                    boxShadow: isNow ? `0 0 0 5px ${t.limeWash}` : 'none',
                  }} />

                  <div style={{
                    fontFamily: "'Geist Mono', monospace",
                    fontSize: 11, color: t.muted,
                    letterSpacing: '0.08em', textTransform: 'uppercase',
                    marginBottom: 4,
                  }}>{c.q} <span style={{ color: t.soft, marginLeft: 6 }}>· {c.label}</span></div>

                  <div style={{
                    background: t.paper,
                    border: `1px solid ${isNow ? t.limeDeep : t.line}`,
                    borderRadius: 14,
                    padding: '22px 22px 18px',
                    boxShadow: isNow ? `0 0 0 4px ${t.limeWash}, 0 1px 0 ${t.line}` : `0 1px 0 ${t.line}`,
                    minHeight: 220,
                    display: 'flex', flexDirection: 'column', gap: 14,
                  }}>
                    <h3 style={{
                      margin: 0,
                      fontSize: 22,
                      lineHeight: 1.1,
                      letterSpacing: '-0.018em',
                      fontWeight: 500,
                      color: t.ink,
                      textTransform: 'lowercase',
                    }}>{c.title}</h3>
                    <ul style={{
                      margin: 0, padding: 0, listStyle: 'none',
                      display: 'flex', flexDirection: 'column', gap: 8,
                      fontFamily: "'Geist Mono', monospace",
                      fontSize: 12.5,
                      color: t.ink2,
                    }}>
                      {c.items.map(it => (
                        <li key={it} style={{
                          paddingLeft: 12, position: 'relative',
                        }}>
                          <span style={{
                            position: 'absolute', left: 0, top: 7,
                            width: 4, height: 4, background: isNow ? t.limeDeep : t.line3,
                          }} />
                          {it}
                        </li>
                      ))}
                    </ul>
                    <div style={{
                      marginTop: 'auto',
                      fontFamily: "'Geist Mono', monospace",
                      fontSize: 10.5,
                      textTransform: 'uppercase',
                      letterSpacing: '0.1em',
                      color: isNow ? t.limeDeep : t.muted,
                      paddingTop: 10,
                      borderTop: `1px dashed ${t.line}`,
                    }}>
                      <span style={{
                        display: 'inline-block',
                        width: 7, height: 7, borderRadius: '50%',
                        background: isNow ? t.limeDeep : t.line3,
                        marginRight: 7,
                        verticalAlign: 'baseline',
                      }} />
                      {c.status}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ForBuilders, Roadmap });