// @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' }}>Narrative-Driven Space Exploration Saga</h1>
      <p style={{ color: 'var(--fg-dim)', fontSize: '1.1rem', maxWidth: '680px', marginBottom: 'var(--sp-6)' }}>
        Every player becomes the author of their own space opera mini-series. A <strong style={{ color: 'var(--fg-bright)' }}>single-player narrative experience</strong>
        inspired by the open-world freedom of <strong style={{ color: 'var(--fg-bright)' }}>Windward</strong>, the strategic depth of <strong style={{ color: 'var(--fg-bright)' }}>Stellaris</strong>,
        and AI-generated storytelling reminiscent of <strong style={{ color: 'var(--fg-bright)' }}>The Templin Institute</strong>. Explore procedurally generated galaxies,
        engage in diplomacy and commerce, wage wars or broker peace — and watch as the AI Story Director weaves your choices
        into an evolving narrative. V1 focuses on emergent storytelling, with future updates generating episodic mini-series
        from your campaign history.
      </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(--purple)' }}>Story</div>
          <div className="mt-1 text-[0.75rem] uppercase tracking-[0.05em] text-muted">AI Director</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(--accent)' }}>Explore</div>
          <div className="mt-1 text-[0.75rem] uppercase tracking-[0.05em] text-muted">Core 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)' }}>Diplomacy</div>
          <div className="mt-1 text-[0.75rem] uppercase tracking-[0.05em] text-muted">Trade & Talk</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)' }}>Dynamic</div>
          <div className="mt-1 text-[0.75rem] uppercase tracking-[0.05em] text-muted">Living Galaxy</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)' }}>Solo</div>
          <div className="mt-1 text-[0.75rem] uppercase tracking-[0.05em] text-muted">Your Saga</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 inspirations:</strong> Windward's open-world freedom, Stellaris's strategic diplomacy and commerce depth, and The Templin Institute's narrative-driven storytelling style.
        The game is a <em>story-driven exploration saga</em> where the player authors their own mini-series — trader, diplomat, warmaker, or explorer.
        The 3D scene is the primary viewport for spatial immersion. Panels and UI overlays handle station services, fitting, and market.
        Combat, when it occurs, uses FTL-style power management — no dogfighting. The galaxy is procedurally generated each campaign.
        The <strong>AI Story Director</strong> weaves your choices into an ongoing narrative.
      </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-purple/25 bg-purple/8 text-purple">AI Story Director</span></td>
            <td style={{ color: 'var(--fg-dim)' }}>NEW PRIMARY — Emergent narrative generation tracks your choices, alliances, conflicts, and discoveries. The AI weaves your actions into an ongoing saga. <strong style={{ color: 'var(--accent)' }}>In V1: real-time emergent storytelling. Future: episodic mini-series generation from campaign history.</strong> Every decision feeds the narrative engine.</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">Core</span> <span style={{ fontSize: '0.75rem', color: 'var(--fg-dim)' }}>Basic event tracking + narrative synthesis</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">Exploration & Discovery</span></td>
            <td style={{ color: 'var(--fg-dim)' }}>Procedurally generated galaxy with fog of war. Discover anomalies, derelicts, new factions. <strong style={{ color: 'var(--accent)' }}>Every discovery becomes part of your story.</strong> The map reveals as you travel — fog of war drives the urge to see what's out there.</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">Core</span> <span style={{ fontSize: '0.75rem', color: 'var(--fg-dim)' }}>POIs, procedural generation, discovery logging</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">Trade & Diplomacy</span></td>
            <td style={{ color: 'var(--fg-dim)' }}>Stellaris-inspired economic and political systems. Supply factions, broker alliances, negotiate borders. <strong style={{ color: 'var(--accent)' }}>Commerce and conversation are equally viable paths.</strong> Trade routes and diplomatic relations shape your narrative.</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">Core</span> <span style={{ fontSize: '0.75rem', color: 'var(--fg-dim)' }}>Regional prices, faction standings, basic diplomacy</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' }}>Future</span> <span style={{ fontSize: '0.75rem', color: 'var(--fg-dim)' }}>Optional player-to-player market on co-op servers</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 Customization</span></td>
            <td style={{ color: 'var(--fg-dim)' }}>Your ship is your narrative vessel. Customize for trade, exploration, or conflict. Swap modules to change role. <strong style={{ color: 'var(--fg)' }}>Multiple ship classes from nimble interceptors to powerful cruisers.</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">Core</span> <span style={{ fontSize: '0.75rem', color: 'var(--fg-dim)' }}>Basic fitting, multiple ship classes</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">Strategic Conflict</span></td>
            <td style={{ color: 'var(--fg-dim)' }}>Combat exists but is not the focus. When conflict occurs, it's FTL-style tactical resource management — a dramatic beat in your story, not the gameplay loop. Click hostile → ship auto-engages → manage <strong style={{ color: 'var(--fg)' }}>reactor power allocation</strong> (FTL-style) between Weapons/Shields/Engines/Aux. <strong style={{ color: 'var(--fg-dim)' }}>Secondary feature, not a core 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">Secondary</span> <span style={{ fontSize: '0.75rem', color: 'var(--fg-dim)' }}>Basic combat system, minimized emphasis</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">Dynamic Galaxy</span></td>
            <td style={{ color: 'var(--fg-dim)' }}>Your actions shape both the world AND the story. Stations and provinces need resources to grow. Faction leaders involve you in their agendas — helping one may hinder another. <strong style={{ color: 'var(--fg)' }}>Enough support can let a faction leader take control without a single shot fired.</strong> A living galaxy that evolves through player choices and 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-green/25 bg-green/8 text-green">Core</span> <span style={{ fontSize: '0.75rem', color: 'var(--fg-dim)' }}>Factions, NPC agents, quests, territory influence</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' }}>Future</span> <span style={{ fontSize: '0.75rem', color: 'var(--fg-dim)' }}>Living galaxy with world agents on co-op servers</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-red/25 bg-red/8 text-red">Solo Saga</span></td>
            <td style={{ color: 'var(--fg-dim)' }}>Your personal galaxy to explore at your own pace. The game is <strong style={{ color: 'var(--fg)' }}>designed as a solo adventure first</strong> — every system works for one captain. <strong style={{ color: 'var(--fg)' }}>Your story, your pace.</strong> Future multiplayer servers will be an optional enhancement, not the core.</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">Core</span> <span style={{ fontSize: '0.75rem', color: 'var(--fg-dim)' }}>Solo adventure with full narrative loop</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' }}>Future</span> <span style={{ fontSize: '0.75rem', color: 'var(--fg-dim)' }}>Optional co-op servers</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(--purple)' }}>
          <h4 style={{ color: 'var(--purple)' }}>Story-driven, not grind-driven</h4>
          <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0 }}>
            Progression creates narrative moments, not stat increases. Level ups unlock story branches,
            new ship classes open new narrative possibilities, and faction relationships shape your saga's plot.
            <strong style={{ color: 'var(--fg)' }}>Your choices generate your mini-series.</strong>
          </p>
        </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)' }}>Exploration-first, not spreadsheet-first</h4>
          <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0 }}>
            The 3D viewport IS the game. Players spend their time flying between points of interest, discovering new sectors,
            and engaging with the world. Station panels handle trading, fitting, and services — but the joy is in
            the journey, not the ledger. <strong style={{ color: 'var(--fg)' }}>Trade, negotiate, fight, or simply set sail and enjoy the ambiance.</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)' }}>Local-first architecture</h4>
          <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0 }}>
            The game client runs locally with local persistence for V1. Your story lives on your machine.
            Future multiplayer servers will be optional — the single-player experience is complete and standalone.
          </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)' }}>Every campaign is unique</h4>
          <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0 }}>
            Procedurally generated galaxy maps ensure no two games are alike. Fog of war hides unexplored sectors.
            Factions, resource distributions, and narrative arcs vary per seed. Replayability through discovery and storytelling, not grind.
          </p>
        </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(--orange)' }}>
          <h4 style={{ color: 'var(--orange)' }}>Diplomacy and trade are viable paths</h4>
          <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0 }}>
            Inspired by Stellaris, commerce and conversation are equally valid ways to shape your galaxy. Supply factions to gain influence,
            broker alliances between enemies, negotiate borders without firing a shot. <strong style={{ color: 'var(--fg)' }}>War is a choice, not the default.</strong>
          </p>
        </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(--red)' }}>
          <h4 style={{ color: 'var(--red)' }}>Conflict serves the story</h4>
          <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0 }}>
            Combat exists but is not the focus. When conflict occurs, it's FTL-style tactical resource management — a dramatic beat in your narrative.
            The player never directly flies or aims. Click a hostile → ship auto-engages. Manage reactor power allocation (weapons/shields/engines/aux).
            You are the captain making strategic decisions, not the pilot dodging fire.
          </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)' }}>Spawn</span> → <span style={{ color: 'var(--accent)' }}>Discover</span> →{' '}
          <span style={{ color: 'var(--green)' }}>Engage (Trade/Diplomacy/War)</span> →{' '}
          <span style={{ color: 'var(--purple)' }}>AI Story Event</span> →{' '}
          <span style={{ color: 'var(--fg-bright)' }}>Shape Galaxy</span> →{' '}
          <span style={{ color: 'var(--cyan)' }}>Next Chapter</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 your story.</strong> Spawn → explore the unknown → make choices that matter → watch the AI weave your actions into narrative threads →
        shape factions and territories → sail into deeper chapters. The "mine → sell" cycle is the entry point. The endgame is about your unique saga,
        faction influence shaped by your decisions, rare discoveries that become plot points, and commanding powerful ships as your narrative vessel.
        <strong>Whether by trade, combat, or diplomacy — your choices generate your mini-series.</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>Core screens</strong> are the single-player game. These are the minimum screens needed to validate the core adventure 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-driven economy with regional price differences.</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>Future screens</strong> would be needed if optional co-op servers are added later. These are not part of the core game.
      </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 immersive + panel approach.</strong>
        The game uses <strong>two distinct view modes</strong> depending on the player's state. When in space, the 3D viewport
        is the primary experience with diegetic HUD overlays. When docked at a station, traditional panel UI handles services.
        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)' }}>System Map</strong> shows the current star system (single system with celestials, belts, stations).
            The <strong style={{ color: 'var(--fg)' }}>Galaxy Map</strong> shows the full multi-system view with region/constellation hierarchy, faction overlay, and world events.
          </p>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.72rem', color: 'var(--muted)' }}>
            System Map needed (core) · Galaxy Map: 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 this hybrid approach?</strong>
        A fully diegetic HUD (Dead Space style) works for immersion but makes station services clunky — buying cargo through
        holographic menus is painful. A fully panel UI (traditional MMO) loses the spatial immersion that makes space feel
        like space. The hybrid keeps the best of both: immersive 3D exploration and combat, efficient panel-based station services.
        <strong>The game alternates between two modes</strong> —
        reactive (in-space, monitoring health/modules/threats) and analytical (docked, trading/fitting/planning).
        Each view mode is optimized for its 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 adventure, not reading.</strong> New players learn by playing a guided
        mission sequence that introduces each system naturally — undocking, navigating, mining, trading, and their first combat encounter.
        There is no separate "tutorial mode" — the tutorial IS the game.
      </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, Captain" — undock, navigate to asteroid belt, mine 100 ore, dock, sell. Teaches: navigation, mining, market.</li>
            <li><strong style={{ color: 'var(--fg)' }}>Mission 2:</strong> "First Contact" — encounter an NPC hostile, manage FTL-style power allocation, survive the fight. Teaches: combat, damage, repair.</li>
            <li><strong style={{ color: 'var(--fg)' }}>Mission 3:</strong> "Supply Run" — accept a trade quest from a faction agent, deliver goods to another station, earn ISK and standing. Teaches: trade routes, factions.</li>
            <li><strong style={{ color: 'var(--fg)' }}>Mission 4:</strong> "The Bigger Ship" — earn enough ISK to buy a new ship class, fit it with modules. Teaches: ship acquisition, fitting.</li>
            <li><strong style={{ color: 'var(--fg)' }}>Mission 5:</strong> "Into the Unknown" — explore an uncharted sector, discover a hidden anomaly, encounter a world event. Teaches: exploration, discovery, the wider galaxy.</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>
  );
}
