function Roadmap() {
  const missions = [
    {
      phase: 'Phase 0',
      title: 'Contracts',
      status: 'complete',
      items: [
        'OlimpusAsteroidToken (OAM) with configurable pair taxes',
        'OamStakingLocked with multi-tier fixed APR',
        'Hardhat deploy script for Ethereum mainnet',
      ],
    },
    {
      phase: 'Phase 1',
      title: 'Launch',
      status: 'active',
      items: [
        'Deploy token + staking to mainnet',
        'Create WETH pair and seed liquidity',
        'Fund reward reserve before public staking',
      ],
    },
    {
      phase: 'Phase 2',
      title: 'Dapp',
      status: 'active',
      items: [
        'This static site: connect wallet, stake, exit, fund',
        'Mainnet addresses wired in frontend/config.js',
        'Public RPC read path for pool telemetry',
      ],
    },
    {
      phase: 'Phase 3',
      title: 'Integrations',
      status: 'upcoming',
      items: [
        'Analytics dashboards and verified links',
        'Treasury multisig for owner operations',
        'Optional L2 or bridge strategy',
      ],
    },
    {
      phase: 'Beyond',
      title: 'Community',
      status: 'upcoming',
      items: [
        'Education content and security reviews',
        'Partner LP programs if aligned with token design',
        'Iterate parameters based on real usage',
      ],
    },
  ];

  const statusMap = {
    complete: { label: 'COMPLETE', color: 'var(--success)' },
    active: { label: 'IN ORBIT', color: 'var(--gold)' },
    upcoming: { label: 'AWAITING LAUNCH', color: 'var(--ink-3)' },
  };

  return (
    <section id="dao" style={{ padding: '120px 0', position: 'relative' }}>
      <div className="container">
        <div style={{ marginBottom: 80, maxWidth: 720 }}>
          <div className="font-mono" style={{ fontSize: 12, color: 'var(--gold)', letterSpacing: '0.15em', marginBottom: 16 }}>
            ∇ FLIGHT PLAN · 04
          </div>
          <h2 className="font-display" style={{ fontSize: 'clamp(40px, 5vw, 64px)', fontWeight: 500, lineHeight: 1, letterSpacing: '-0.02em' }}>
            A sober <span style={{ color: 'var(--gold)', fontStyle: 'italic', fontWeight: 400 }}>flight plan</span> for $OAM.
          </h2>
          <p style={{ fontSize: 15, color: 'var(--ink-1)', marginTop: 16, maxWidth: 560, lineHeight: 1.5 }}>
            No fictional TVL milestones — just deployment, liquidity, and tooling you can ship with the contracts in this repo.
          </p>
        </div>

        <div style={{ position: 'relative' }}>
          <div style={{
            position: 'absolute',
            left: 0, right: 0,
            top: 86,
            height: 1,
            background: 'linear-gradient(90deg, transparent 0%, var(--line-strong) 10%, var(--line-strong) 90%, transparent 100%)',
          }}></div>

          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(5, 1fr)',
            gap: 20,
            position: 'relative',
          }}
          className="oam-roadmap-grid"
          >
            <style>{`
              @media (max-width: 1200px) {
                .oam-roadmap-grid { grid-template-columns: 1fr 1fr !important; }
              }
              @media (max-width: 640px) {
                .oam-roadmap-grid { grid-template-columns: 1fr !important; }
              }
            `}</style>
            {missions.map((m, i) => {
              const st = statusMap[m.status];
              return (
                <div key={i}>
                  <div className="font-mono" style={{ fontSize: 11, color: 'var(--ink-2)', letterSpacing: '0.12em', marginBottom: 10 }}>
                    {m.phase}
                  </div>

                  <div style={{ position: 'relative', marginBottom: 20 }}>
                    <div style={{
                      width: 20, height: 20,
                      borderRadius: '50%',
                      background: m.status === 'upcoming' ? 'var(--bg-1)' : st.color,
                      border: `2px solid ${m.status === 'upcoming' ? 'var(--line-strong)' : st.color}`,
                      boxShadow: m.status === 'active' ? `0 0 20px ${st.color}` : 'none',
                      position: 'relative',
                      zIndex: 2,
                    }}>
                      {m.status === 'active' && (
                        <div style={{
                          position: 'absolute',
                          inset: -6,
                          borderRadius: '50%',
                          border: `2px solid ${st.color}`,
                          opacity: 0.4,
                          animation: 'pulse-glow 2s ease-in-out infinite',
                        }}></div>
                      )}
                    </div>
                  </div>

                  <div style={{
                    padding: 24,
                    background: m.status === 'active' ? 'linear-gradient(180deg, rgba(255, 190, 110, 0.08) 0%, rgba(18, 19, 31, 0.6) 100%)' : 'rgba(18, 19, 31, 0.6)',
                    border: m.status === 'active' ? '1px solid var(--line-strong)' : '1px solid var(--line)',
                    borderRadius: 16,
                    backdropFilter: 'blur(20px)',
                    minHeight: 280,
                  }}>
                    <div className="font-mono" style={{ fontSize: 9, color: st.color, letterSpacing: '0.12em', marginBottom: 8 }}>
                      ● {st.label}
                    </div>
                    <h3 className="font-display" style={{ fontSize: 22, fontWeight: 500, marginBottom: 18, letterSpacing: '-0.01em' }}>
                      {m.title}
                    </h3>
                    <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
                      {m.items.map((it, j) => (
                        <li key={j} style={{
                          fontSize: 12.5,
                          color: m.status === 'upcoming' ? 'var(--ink-2)' : 'var(--ink-1)',
                          lineHeight: 1.5,
                          paddingLeft: 14,
                          position: 'relative',
                        }}>
                          <span style={{
                            position: 'absolute',
                            left: 0, top: 8,
                            width: 4, height: 4,
                            borderRadius: '50%',
                            background: m.status === 'complete' ? 'var(--success)' : m.status === 'active' ? 'var(--gold)' : 'var(--ink-3)',
                          }}></span>
                          {it}
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Roadmap });