Space-Game/apps/docs/src/pages/docs/OverviewPage.tsx

// @ts-nocheck
import * as React from 'react';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
export function OverviewPage() {
  return (
    <div className="mx-auto max-w-content">
      <h1 style={{ marginBottom: '8px' }}>EVE-Inspired Multiplayer Prototype</h1>
      <p style={{ color: 'var(--fg-dim)', fontSize: '1.1rem', maxWidth: '680px', marginBottom: 'var(--sp-6)' }}>
        A browser-based <strong style={{ color: 'var(--fg-bright)' }}>spreadsheet simulator</strong> in the EVE Online tradition,
        set inside a <strong style={{ color: 'var(--fg-bright)' }}>single persistent galaxy</strong> that the server simulates as a living world.
        The game is played through UI panels, market tables, inventory grids, and chat channels — not by flying a ship.
        Movement and combat are deliberately rudimentary; the depth lives in the economy, information diffusion,
        strategic decisions, and a galaxy that evolves around you through <strong style={{ color: 'var(--fg-bright)' }}>dynamic PvE events and emergent world story</strong>.
      </p>

      <div className="mb-6 grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-4">
        <div className="rounded-xl border border-border bg-surface p-5 max-md:rounded-lg max-md:p-4">
          <div className="font-mono text-[1.6rem] font-bold tabular-nums text-fg-bright" style={{ color: 'var(--accent)' }}>UI-first</div>
          <div className="mt-1 text-[0.75rem] uppercase tracking-[0.05em] text-muted">Design Pillar</div>
        </div>
        <div className="rounded-xl border border-border bg-surface p-5 max-md:rounded-lg max-md:p-4">
          <div className="font-mono text-[1.6rem] font-bold tabular-nums text-fg-bright" style={{ color: 'var(--cyan)' }}>SpacetimeDB</div>
          <div className="mt-1 text-[0.75rem] uppercase tracking-[0.05em] text-muted">Backend</div>
        </div>
        <div className="rounded-xl border border-border bg-surface p-5 max-md:rounded-lg max-md:p-4">
          <div className="font-mono text-[1.6rem] font-bold tabular-nums text-fg-bright" style={{ color: 'var(--green)' }}>~3 hrs</div>
          <div className="mt-1 text-[0.75rem] uppercase tracking-[0.05em] text-muted">Session Target</div>
        </div>
        <div className="rounded-xl border border-border bg-surface p-5 max-md:rounded-lg max-md:p-4">
          <div className="font-mono text-[1.6rem] font-bold tabular-nums text-fg-bright" style={{ color: 'var(--purple)' }}>Player-led</div>
          <div className="mt-1 text-[0.75rem] uppercase tracking-[0.05em] text-muted">Economy Model</div>
        </div>
        <div className="rounded-xl border border-border bg-surface p-5 max-md:rounded-lg max-md:p-4">
          <div className="font-mono text-[1.6rem] font-bold tabular-nums text-fg-bright" style={{ color: 'var(--red)' }}>Living Galaxy</div>
          <div className="mt-1 text-[0.75rem] uppercase tracking-[0.05em] text-muted">World Model</div>
        </div>
      </div>

      <div className="mb-5 flex items-center gap-3 border-b border-border pb-3 max-md:flex-col max-md:items-start max-md:gap-2 max-md:[&_h1]:text-[1.35rem] max-md:[&_h2]:text-[1.35rem]">
        <span className="rounded-full bg-[rgba(240,160,48,0.08)] px-2 py-0.5 font-mono text-[0.7rem] text-accent">OV-01</span>
        <h2 style={{ margin: 0 }}>Product Vision</h2>
      </div>

      <div className="mb-5 rounded-lg px-5 py-4 text-[0.85rem] leading-[1.5] border border-cyan/20 bg-cyan/8 text-cyan">
        <strong>Primary recommendation:</strong> Build the MVP as a UI-heavy browser game — a <em>spreadsheet simulator</em>.
        The 3D scene is a strategic map layer for context, not the game itself. Players spend 90% of their time
        in tables, charts, and panels: market depth, order books, cargo manifests, fitting spreadsheets,
        route planners, and chat. The 3D viewport exists to give spatial awareness, not twitch gameplay.
      </div>

      <h3>Core Pillars</h3>
      <table className="w-full border-collapse text-[0.85rem] max-md:block max-md:overflow-x-auto max-md:rounded-lg max-md:border max-md:border-border max-md:[&_thead]:table max-md:[&_tbody]:table max-md:[&_thead]:min-w-[680px] max-md:[&_tbody]:min-w-[680px] [&_th]:whitespace-nowrap [&_th]:border-b [&_th]:border-border [&_th]:px-4 [&_th]:py-3 [&_th]:text-left [&_th]:font-mono [&_th]:text-[0.7rem] [&_th]:uppercase [&_th]:tracking-[0.06em] [&_th]:text-muted [&_td]:border-b [&_td]:border-border [&_td]:px-4 [&_td]:py-3 [&_td]:font-mono [&_td]:text-[0.8rem] [&_td]:text-fg [&_tr:hover_td]:bg-surface-raised">
        <thead>
          <tr>
            <th>Pillar</th>
            <th>Prototype Interpretation</th>
            <th>MVP Scope</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-[rgba(240,160,48,0.25)] bg-[rgba(240,160,48,0.08)] text-accent">Economy &amp; markets</span></td>
            <td style={{ color: 'var(--fg-dim)' }}>Player-led economy with NPC support. Mining → refining → manufacturing → trade. Geographic price differences, contract markets, order books, and <strong style={{ color: 'var(--accent)' }}>information asymmetry between systems</strong> create emergent trade routes and speculative opportunities. <strong style={{ color: 'var(--accent)' }}>This IS the game.</strong></td>
            <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-green/25 bg-green/8 text-green">Era 1</span> <span style={{ fontSize: '0.75rem', color: 'var(--fg-dim)' }}>NPC economy, single-player mining/refining/manufacturing</span><br/><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-cyan/25 bg-cyan/8 text-cyan" style={{ fontSize: '0.65rem' }}>Era 2</span> <span style={{ fontSize: '0.75rem', color: 'var(--fg-dim)' }}>Player-to-player market, info diffusion</span></td>
          </tr>
          <tr>
            <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-cyan/25 bg-cyan/8 text-cyan">Social & multiplayer</span></td>
            <td style={{ color: 'var(--fg-dim)' }}>Local chat, delayed PMs, bounty system, emergent player-driven justice. Communication is range-based. <strong style={{ color: 'var(--accent)' }}>Priority pillar.</strong></td>
            <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-cyan/25 bg-cyan/8 text-cyan" style={{ fontSize: '0.65rem' }}>Era 2</span> <span style={{ fontSize: '0.75rem', color: 'var(--fg-dim)' }}>All social features require multiplayer</span></td>
          </tr>
          <tr>
            <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-green/25 bg-green/8 text-green">Command-based (not action)</span></td>
            <td style={{ color: 'var(--fg-dim)' }}>Players issue high-level intentions — click a point of interest and the ship autopilots there. Click a hostile and the ship auto-engages. During combat the player manages <strong style={{ color: 'var(--fg)' }}>reactor power allocation</strong> (FTL-style) between systems. No manual flight, no aiming, no skill shots. The skill is in <strong style={{ color: 'var(--fg)' }}>what</strong> you power, not <strong style={{ color: 'var(--fg)' }}>how fast</strong> you click.</td>
            <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-green/25 bg-green/8 text-green">Era 1</span> <span style={{ fontSize: '0.75rem', color: 'var(--fg-dim)' }}>Core combat & movement loop</span></td>
          </tr>
          <tr>
            <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-purple/25 bg-purple/8 text-purple">Ship fitting</span></td>
            <td style={{ color: 'var(--fg-dim)' }}>CPU/Power Grid slot system. High/Med/Low slots with meaningful fitting tradeoffs. Multiple ships, AI crew (post-MVP).</td>
            <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-green/25 bg-green/8 text-green">Era 1</span> <span style={{ fontSize: '0.75rem', color: 'var(--fg-dim)' }}>Basic fitting, single ship class</span></td>
          </tr>
          <tr>
            <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-[rgba(240,160,48,0.25)] bg-[rgba(240,160,48,0.08)] text-accent">Emergent lore</span></td>
            <td style={{ color: 'var(--fg-dim)' }}>No server has the same lore as another. The galaxy is a <strong style={{ color: 'var(--fg)' }}>single persistent world</strong> with systems, planets, anomalies, and orbiting objects. A world simulation layer spawns PvE events dynamically — faction wars, space anomalies, migrations, raids — that create a <strong style={{ color: 'var(--fg)' }}>living story unique to every server</strong>. Lore evolves through both player actions and server-driven world events.</td>
            <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-cyan/25 bg-cyan/8 text-cyan" style={{ fontSize: '0.65rem' }}>Era 2</span> <span style={{ fontSize: '0.75rem', color: 'var(--fg-dim)' }}>Living galaxy requires world agents</span></td>
          </tr>
        </tbody>
      </table>

      <div className="mb-5 flex items-center gap-3 border-b border-border pb-3 max-md:flex-col max-md:items-start max-md:gap-2 max-md:[&_h1]:text-[1.35rem] max-md:[&_h2]:text-[1.35rem]" style={{ marginTop: 'var(--sp-8)' }}>
        <span className="rounded-full bg-[rgba(240,160,48,0.08)] px-2 py-0.5 font-mono text-[0.7rem] text-accent">OV-02</span>
        <h2 style={{ margin: 0 }}>Design Principles</h2>
      </div>

      <div className="grid grid-cols-2 gap-5 max-[900px]:grid-cols-1">
        <div className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4" style={{ borderLeft: '3px solid var(--accent)' }}>
          <h4 style={{ color: 'var(--accent)' }}>Spreadsheet simulator, not flight sim</h4>
          <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0 }}>
            90% of gameplay happens in tables, charts, and panels: market order books, cargo manifests, fitting spreadsheets,
            route planners, ship AI logs, and chat channels. The 3D viewport gives spatial awareness, not twitch gameplay.
            Movement is click-to-autopilot. Combat is click-to-engage with FTL-style power management. <strong style={{ color: 'var(--fg)' }}>The depth is in the economy and information.</strong>
          </p>
        </div>
        <div className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4">
          <h4 style={{ color: 'var(--cyan)' }}>Authoritative backend</h4>
          <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0 }}>
            SpacetimeDB owns authoritative game state. The browser renders state and sends player
            intentions. The renderer should never become the source of truth.
          </p>
        </div>
        <div className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4">
          <h4 style={{ color: 'var(--green)' }}>Information is the real currency</h4>
          <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0 }}>
            Market data propagates at the speed of player travel, not the speed of light. Knowing a price discrepancy exists
            before other traders — that's the skill. The ship AI (Zora) is a living market intelligence tool. See the
            <em> Economy → 📡 Info Diffusion</em> tab for the full model.
          </p>
        </div>
        <div className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4">
          <h4 style={{ color: 'var(--purple)' }}>Movement & combat are not action</h4>
          <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0 }}>
            The player never pilots the ship directly. Click a destination → ship autopilots. Click a hostile → ship auto-engages.
            During combat, the player manages <strong style={{ color: 'var(--fg)' }}>reactor power allocation</strong> (FTL-style: weapons/shields/engines/aux)
            and <strong style={{ color: 'var(--fg)' }}>subsystem targeting</strong>. That's it. Ship destruction
            is an economic event (ISK sink, insurance payout, loot drop), not a competitive action moment. ISK (symbol ₢) is the canonical in-game currency.
          </p>
        </div>
      </div>

      <div className="mb-5 flex items-center gap-3 border-b border-border pb-3 max-md:flex-col max-md:items-start max-md:gap-2 max-md:[&_h1]:text-[1.35rem] max-md:[&_h2]:text-[1.35rem]" style={{ marginTop: 'var(--sp-8)' }}>
        <span className="rounded-full bg-[rgba(240,160,48,0.08)] px-2 py-0.5 font-mono text-[0.7rem] text-accent">OV-03</span>
        <h2 style={{ margin: 0 }}>Core MVP Loop</h2>
      </div>

      <div className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4 border-l-[3px] border-l-accent" style={{ padding: 'var(--sp-6) var(--sp-8)' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.85rem', color: 'var(--fg-dim)', lineHeight: 2 }}>
          <span style={{ color: 'var(--cyan)' }}>Connect</span> → <span style={{ color: 'var(--accent)' }}>Spawn Ship</span> →{' '}
          <span style={{ color: 'var(--green)' }}>Navigate</span> →{' '}
          <span style={{ color: 'var(--purple)' }}>Mine</span> →{' '}
          <span style={{ color: 'var(--fg-bright)' }}>Inventory</span> →{' '}
          <span style={{ color: 'var(--cyan)' }}>Station</span> →{' '}
          <span style={{ color: 'var(--accent)' }}>Sell Ore</span> →{' '}
          <span style={{ color: 'var(--green)' }}>Chat</span>
        </div>
      </div>

      <div className="mb-5 rounded-lg px-5 py-4 text-[0.85rem] leading-[1.5] border border-cyan/20 bg-cyan/8 text-cyan" style={{ marginBottom: 'var(--sp-5)' }}>
        <strong>The real loop is economic.</strong> Connect → gather information → identify opportunity → act on it → profit.
        The "mine → sell" cycle is the entry point. The endgame is inter-regional arbitrage, supply chain management,
        manufacturing empires, and market manipulation — all driven by <strong>information diffusion between systems</strong>.
      </div>

      <h3 style={{ marginTop: 'var(--sp-6)' }}>Minimum Viable Screens</h3>

      <div className="mb-5 rounded-lg px-5 py-4 text-[0.85rem] leading-[1.5] border border-cyan/20 bg-cyan/8 text-cyan" style={{ marginBottom: 'var(--sp-4)' }}>
        <strong>Era 1 screens</strong> ship in the single-player proof of concept (Roadmap phases 0–7). These are the minimum screens needed to validate the core loop is fun.
      </div>
      <table className="w-full border-collapse text-[0.85rem] max-md:block max-md:overflow-x-auto max-md:rounded-lg max-md:border max-md:border-border max-md:[&_thead]:table max-md:[&_tbody]:table max-md:[&_thead]:min-w-[680px] max-md:[&_tbody]:min-w-[680px] [&_th]:whitespace-nowrap [&_th]:border-b [&_th]:border-border [&_th]:px-4 [&_th]:py-3 [&_th]:text-left [&_th]:font-mono [&_th]:text-[0.7rem] [&_th]:uppercase [&_th]:tracking-[0.06em] [&_th]:text-muted [&_td]:border-b [&_td]:border-border [&_td]:px-4 [&_td]:py-3 [&_td]:font-mono [&_td]:text-[0.8rem] [&_td]:text-fg [&_tr:hover_td]:bg-surface-raised">
        <thead>
          <tr><th>Screen / Panel</th><th>Minimum Functionality</th></tr>
        </thead>
        <tbody>
          <tr><td>Login / Connect</td><td>Display current identity and connection status.</td></tr>
          <tr><td>3D Star-System Map</td><td>Strategic overview — ships, asteroids, station, click-to-set-waypoint. <strong>Not a flight sim.</strong></td></tr>
          <tr><td>Ship Status Panel</td><td>Name, owner, status, cargo, current action, location.</td></tr>
          <tr><td>Inventory Panel</td><td>Item type + quantity grid. Sell button when docked. Cargo capacity bar.</td></tr>
          <tr><td>Station Panel</td><td>Dock/undock state, sell ore, view market, refit ship.</td></tr>
          <tr><td>Market Panel</td><td>Order book, price per unit, place sell order from inventory. NPC-only economy in Era 1.</td></tr>
          <tr><td>Combat HUD</td><td>Target selection, module activation, reactor power allocation bars (FTL-style).</td></tr>
          <tr><td>Debug Panel</td><td>Reducer call log, error display, connection metrics, entity count.</td></tr>
        </tbody>
      </table>

      <div className="mb-5 rounded-lg px-5 py-4 text-[0.85rem] leading-[1.5] border border-cyan/20 bg-cyan/8 text-cyan" style={{ marginTop: 'var(--sp-6)', marginBottom: 'var(--sp-4)' }}>
        <strong>Era 2 screens</strong> require SpacetimeDB multiplayer infrastructure (Roadmap phases 8–15).
      </div>
      <table className="w-full border-collapse text-[0.85rem] max-md:block max-md:overflow-x-auto max-md:rounded-lg max-md:border max-md:border-border max-md:[&_thead]:table max-md:[&_tbody]:table max-md:[&_thead]:min-w-[680px] max-md:[&_tbody]:min-w-[680px] [&_th]:whitespace-nowrap [&_th]:border-b [&_th]:border-border [&_th]:px-4 [&_th]:py-3 [&_th]:text-left [&_th]:font-mono [&_th]:text-[0.7rem] [&_th]:uppercase [&_th]:tracking-[0.06em] [&_th]:text-muted [&_td]:border-b [&_td]:border-border [&_td]:px-4 [&_td]:py-3 [&_td]:font-mono [&_td]:text-[0.8rem] [&_td]:text-fg [&_tr:hover_td]:bg-surface-raised">
        <thead>
          <tr><th>Screen / Panel</th><th>Minimum Functionality</th></tr>
        </thead>
        <tbody>
          <tr><td style={{ fontWeight: 600, color: 'var(--accent)' }}>Market Panel ★</td><td><strong>Primary game surface.</strong> Order book with depth, price history charts, contract specifications, bid/ask spread, long/short positions, margin account, place orders (market/limit/stop). See the Interactive Demos → Market demo.</td></tr>
          <tr><td style={{ fontWeight: 600, color: 'var(--cyan)' }}>Commodity Ticker</td><td>Scrolling price ticker across all contracts. Real-time price updates. Category filters. Sparkline charts.</td></tr>
          <tr><td>Chat Panel</td><td>Send and receive local/system messages. Range-based propagation.</td></tr>
          <tr><td>Bounty Board</td><td>Active bounties by tier, place bounty on player, kill feed.</td></tr>
          <tr><td>Galaxy Map</td><td>Region/constellation/system hierarchy, faction territory overlay, active world events.</td></tr>
          <tr><td>World Event Panel</td><td>Active events in current region, countdown timers, story log access.</td></tr>
        </tbody>
      </table>

      <div className="mb-5 flex items-center gap-3 border-b border-border pb-3 max-md:flex-col max-md:items-start max-md:gap-2 max-md:[&_h1]:text-[1.35rem] max-md:[&_h2]:text-[1.35rem]" style={{ marginTop: 'var(--sp-8)' }}>
        <span className="rounded-full bg-[rgba(240,160,48,0.08)] px-2 py-0.5 font-mono text-[0.7rem] text-accent">OV-04</span>
        <h2 style={{ margin: 0 }}>HUD & View Mode Architecture</h2>
      </div>

      <div className="mb-5 rounded-lg px-5 py-4 text-[0.85rem] leading-[1.5] border border-cyan/20 bg-cyan/8 text-cyan" style={{ marginBottom: 'var(--sp-5)' }}>
        <strong>Decision: Hybrid diegetic + panel approach.</strong>
        The game uses <strong>two distinct view modes</strong> depending on the player's state. This resolves the ambiguity
        between the gamehud demo (which renders diegetic overlays on a 3D viewport) and the spec's description of traditional panels.
        Both are correct — they apply to different contexts.
      </div>

      <div className="grid grid-cols-2 gap-5 max-[900px]:grid-cols-1" style={{ marginBottom: 'var(--sp-6)' }}>
        <div className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4" style={{ borderLeft: '3px solid var(--cyan)' }}>
          <h4 style={{ color: 'var(--cyan)' }}>🚀 Flight Mode (Undocked)</h4>
          <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: '0 0 var(--sp-3) 0' }}>
            When the player's ship is in space (undocked), the primary view is a <strong style={{ color: 'var(--fg)' }}>3D viewport
            with diegetic HUD overlays</strong>. This is what the Game HUD demo validates. The 3D scene shows the ship's
            surroundings (asteroids, stations, other ships, celestials) while the HUD overlays provide:
          </p>
          <ul style={{ color: 'var(--fg-dim)', fontSize: '0.82rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
            <li><strong style={{ color: 'var(--fg)' }}>Shield/armor/hull bars</strong> — curved around the viewport center, not flat rectangles</li>
            <li><strong style={{ color: 'var(--fg)' }}>Module activation buttons</strong> — arranged in a bottom rack, grouped by slot type</li>
            <li><strong style={{ color: 'var(--fg)' }}>Overview panel</strong> — collapsible sidebar listing all on-grid entities with type, distance, and hostile/friendly status</li>
            <li><strong style={{ color: 'var(--fg)' }}>Target lock indicator</strong> — centered targeting reticle with lock timer</li>
            <li><strong style={{ color: 'var(--fg)' }}>Capacitor gauge</strong> — circular arc display</li>
            <li><strong style={{ color: 'var(--fg)' }}>Speed/distance HUD</strong> — current speed, target distance, ETA</li>
            <li><strong style={{ color: 'var(--fg)' }}>Chat stub</strong> — minimized chat bubble, expands to full chat on click</li>
          </ul>
          <div style={{ marginTop: 'var(--sp-3)', fontFamily: 'var(--font-mono)', fontSize: '0.72rem', color: 'var(--muted)' }}>
            Validated by: Game HUD demo · Covers: movement, combat, mining interactions
          </div>
        </div>
        <div className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4" style={{ borderLeft: '3px solid var(--accent)' }}>
          <h4 style={{ color: 'var(--accent)' }}>🏢 Station Mode (Docked)</h4>
          <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: '0 0 var(--sp-3) 0' }}>
            When the player is docked at a station, the 3D viewport is replaced by a <strong style={{ color: 'var(--fg)' }}>traditional
            panel-based UI</strong> — the "spreadsheet simulator" surface. This is the Overview spec's "tables, charts, and panels"
            description. Station mode panels include:
          </p>
          <ul style={{ color: 'var(--fg-dim)', fontSize: '0.82rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
            <li><strong style={{ color: 'var(--fg)' }}>Market Panel</strong> — order book, price history charts, contract specifications</li>
            <li><strong style={{ color: 'var(--fg)' }}>Inventory Panel</strong> — item grid with quantity, type, value estimation</li>
            <li><strong style={{ color: 'var(--fg)' }}>Fitting Screen</strong> — ship slot layout with drag-and-drop module fitting</li>
            <li><strong style={{ color: 'var(--fg)' }}>Refining Interface</strong> — batch processing with yield preview</li>
            <li><strong style={{ color: 'var(--fg)' }}>Manufacturing Tab</strong> — blueprint selection, job queue, material requirements</li>
            <li><strong style={{ color: 'var(--fg)' }}>Insurance Panel</strong> — coverage tiers, premium calculator, active policies</li>
            <li><strong style={{ color: 'var(--fg)' }}>Agent/Mission Panel</strong> — NPC agent list, available missions, standings</li>
          </ul>
          <div style={{ marginTop: 'var(--sp-3)', fontFamily: 'var(--font-mono)', fontSize: '0.72rem', color: 'var(--muted)' }}>
            Validated by: Market, Fitting, Refining demos · Covers: all station-based gameplay
          </div>
        </div>
      </div>

      <div className="grid grid-cols-2 gap-5 max-[900px]:grid-cols-1" style={{ marginBottom: 'var(--sp-6)' }}>
        <div className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4" style={{ borderLeft: '3px solid var(--green)' }}>
          <h4 style={{ color: 'var(--green)' }}>🗺 Map Mode (Both)</h4>
          <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: '0 0 var(--sp-3) 0' }}>
            Accessible from either view mode, the map replaces the main viewport with a full-screen 3D strategic map.
            <strong style={{ color: 'var(--fg)' }}>Era 1</strong> shows the current star system (single system with celestials, belts, stations).
            <strong style={{ color: 'var(--fg)' }}>Era 2</strong> adds the Galaxy Map (multi-system with region/constellation hierarchy, faction overlay, world events).
          </p>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.72rem', color: 'var(--muted)' }}>
            Era 1: System Map needed · Era 2: Validated by Star Map demo
          </div>
        </div>
        <div className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4" style={{ borderLeft: '3px solid var(--purple)' }}>
          <h4 style={{ color: 'var(--purple)' }}>Transition Rules</h4>
          <ul style={{ color: 'var(--fg-dim)', fontSize: '0.82rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
            <li><strong style={{ color: 'var(--fg)' }}>Undock:</strong> Flight Mode fades in with 3D viewport. HUD elements animate in sequence (shields → modules → overview).</li>
            <li><strong style={{ color: 'var(--fg)' }}>Dock:</strong> 3D viewport zooms toward station. Fades to Station Mode panel layout.</li>
            <li><strong style={{ color: 'var(--fg)' }}>Open Map:</strong> Current viewport shrinks into a corner (minimap). Full map overlay fades in.</li>
            <li><strong style={{ color: 'var(--fg)' }}>Close Map:</strong> Map fades out. Previous viewport mode restores.</li>
            <li><strong style={{ color: 'var(--fg)' }}>Combat ambush:</strong> If attacked while docked, player auto-undocks into Flight Mode (no safe space abuse).</li>
          </ul>
        </div>
      </div>

      <div className="mb-5 rounded-lg px-5 py-4 text-[0.85rem] leading-[1.5] border border-[rgba(240,160,48,0.25)] bg-[rgba(240,160,48,0.08)] text-accent">
        <strong>Why not all-diegetic or all-panel?</strong>
        A fully diegetic HUD (Dead Space style) works for immersion but is terrible for spreadsheet gameplay — you can't read
        an order book through a holographic visor. A fully panel UI (traditional MMO) loses the spatial awareness that makes
        space feel like space. The hybrid approach keeps the best of both: diegetic immersion during the action, panel efficiency
        during the economy game. The key insight is that <strong>the game alternates between two distinct cognitive modes</strong> —
        reactive (in-space, monitoring health/modules/overview) and analytical (docked, reading tables/planning routes).
        Each view mode is optimized for its cognitive mode.
      </div>

      <div className="mb-5 flex items-center gap-3 border-b border-border pb-3 max-md:flex-col max-md:items-start max-md:gap-2 max-md:[&_h1]:text-[1.35rem] max-md:[&_h2]:text-[1.35rem]" style={{ marginTop: 'var(--sp-8)' }}>
        <span className="rounded-full bg-[rgba(240,160,48,0.08)] px-2 py-0.5 font-mono text-[0.7rem] text-accent">OV-05</span>
        <h2 style={{ margin: 0 }}>Onboarding & Tutorial</h2>
      </div>

      <div className="mb-5 rounded-lg px-5 py-4 text-[0.85rem] leading-[1.5] border border-cyan/20 bg-cyan/8 text-cyan" style={{ marginBottom: 'var(--sp-5)' }}>
        <strong>The first 30 minutes teach the game through doing, not reading.</strong> New players learn by playing a guided
        mission sequence that introduces each system naturally. There is no separate "tutorial mode" \u2014 the tutorial IS the game.
        See Economy \u2192 First 30 Minutes tab for the full moment-by-moment walkthrough.
      </div>

      <div className="grid grid-cols-2 gap-5 max-[900px]:grid-cols-1" style={{ marginBottom: 'var(--sp-6)' }}>
        <div className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4" style={{ borderLeft: '3px solid var(--cyan)' }}>
          <h4 style={{ color: 'var(--cyan)' }}>Guided Mission Sequence</h4>
          <ul style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
            <li><strong style={{ color: 'var(--fg)' }}>Mission 1:</strong> "Welcome, Pilot" \u2014 undock, warp to belt, mine 100 ore, dock, sell. Teaches: navigation, mining, market.</li>
            <li><strong style={{ color: 'var(--fg)' }}>Mission 2:</strong> "Armed and Ready" \u2014 accept kill mission, engage NPC frigate, manage power allocation, collect bounty. Teaches: combat, insurance.</li>
            <li><strong style={{ color: 'var(--fg)' }}>Mission 3:</strong> "Supply Chain" \u2014 refine ore, manufacture a module, fit it to ship. Teaches: industry, fitting.</li>
            <li><strong style={{ color: 'var(--fg)' }}>Mission 4:</strong> "Price Watcher" \u2014 fly to second station, compare prices, sell at the better one. Teaches: price discovery, trade routes.</li>
            <li><strong style={{ color: 'var(--fg)' }}>Mission 5:</strong> "Your AI Companion" \u2014 Zora introduces herself, explains her modules, offers first market tip. Teaches: Zora, AI modules.</li>
          </ul>
        </div>
        <div className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4" style={{ borderLeft: '3px solid var(--green)' }}>
          <h4 style={{ color: 'var(--green)' }}>Tutorial Principles</h4>
          <ul style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
            <li><strong style={{ color: 'var(--fg)' }}>Teach by doing:</strong> Every tutorial element is an actual game action, not a text popup.</li>
            <li><strong style={{ color: 'var(--fg)' }}>Earn while learning:</strong> Tutorial missions pay real ISK and XP. No wasted time.</li>
            <li><strong style={{ color: 'var(--fg)' }}>Skip allowed:</strong> Veterans can skip the tutorial sequence. No forced hand-holding.</li>
            <li><strong style={{ color: 'var(--fg)' }}>Zora as guide:</strong> Zora delivers tutorial hints in-character. "I notice you haven't opened the fitting screen yet. Want me to walk you through it?"</li>
            <li><strong style={{ color: 'var(--fg)' }}>No dead ends:</strong> If a player gets stuck, Zora proactively offers help after 60s of inactivity.</li>
          </ul>
        </div>
      </div>
    </div>
  );
}