// @ts-nocheck
import * as React from 'react';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
export function GameplayPage() {
  const [activeTab, setActiveTab] = React.useState('loop');

  return (
    <div className="mx-auto max-w-content">
      <h1 style={{ marginBottom: '8px' }}>Gameplay Systems</h1>
      <p style={{ color: 'var(--fg-dim)', fontSize: '0.95rem', maxWidth: '680px' }}>
        The core loop: explore → trade → quest → <strong style={{ color: 'var(--accent)' }}>fight (FTL-style)</strong> → upgrade → sail deeper.
        Every system feeds into the others. Trade earns ISK for upgrades. Quests unlock faction influence. Combat protects trade routes.
        Exploration reveals new opportunities. Steps 1–8 work as a single-player adventure. Co-op is an optional future enhancement.
      </p>

      <div style={{ display: 'flex', gap: 'var(--sp-2)', marginBottom: 'var(--sp-6)', flexWrap: 'wrap' }}>
        {[
          { id: 'loop', label: 'Core Loop' },
          { id: 'security', label: 'Security Levels' },
          { id: 'pirates', label: 'NPC Pirates' },
          { id: 'concord', label: 'CONCORD' },
          { id: 'insurance', label: 'Insurance' },
          { id: 'missions', label: 'Quests & Factions' },
          { id: 'travel', label: 'Travel & Warp' },
          { id: 'events', label: 'World Events' },
          { id: 'balancer', label: 'Balancing Agent' },
        ].map(t => (
          <button key={t.id} className={`inline-flex cursor-pointer items-center gap-2 rounded-lg border border-border bg-surface-raised px-4 py-2 font-body text-[0.8rem] font-medium text-fg transition-all duration-150 hover:border-border-light hover:bg-surface-hover disabled:cursor-not-allowed disabled:opacity-55 px-3 py-1 text-[0.75rem]${activeTab === t.id ? ' border-accent bg-accent font-semibold text-bg hover:bg-accent-hover' : ''}`}
            onClick={() => setActiveTab(t.id)}>{t.label}</button>
        ))}
      </div>

      {activeTab === 'loop' && (<>
      {/* Loop steps */}
      <div style={{ marginTop: 'var(--sp-6)' }}>
        {[
          { step: 1, title: 'Spawn & Explore', desc: 'Player connects and spawns at a station in a procedurally generated sector. The map is hidden — fog of war covers unexplored regions. Nearby POIs are visible: stations, belts, signal sources. The urge to explore is immediate.', color: 'var(--cyan)' },
          { step: 2, title: 'Navigate (click & autopilot)', desc: 'Player clicks a point of interest — asteroid, station, anomaly, signal — and the ship automatically pilots there. No manual flight. The journey IS the experience: watch the stars scroll, spot distant objects, feel the void.', color: 'var(--green)' },
          { step: 3, title: 'Gather Resources', desc: 'Mine asteroids for ore. Salvage derelicts for components. Discover anomalies for rare materials. The decision is <em>what</em> to gather and <em>where</em> — different regions have different resources.', color: 'var(--accent)' },
          { step: 4, title: 'Trade Between Stations', desc: 'Buy low at one station, sell high at another. Prices vary by region and faction needs. Stations that need resources pay more. Trade routes emerge naturally from exploration.', color: 'var(--purple)' },
          { step: 5, title: 'Accept Quests', desc: 'Faction agents offer missions: deliver cargo, eliminate threats, explore sectors, escort convoys. Completing quests earns ISK, standing, and unlocks new opportunities. Helping one faction may hinder another.', color: 'var(--cyan)' },
          { step: 6, title: 'Combat (FTL-style)', desc: 'Click a hostile → ship auto-engages → manage reactor power between Weapons/Shields/Engines/Aux. No dogfighting. The skill is tactical resource allocation. PvE pirates, bounty targets, and hostile NPCs.', color: 'var(--red)' },
          { step: 7, title: 'Upgrade & Customize Ship', desc: 'Use ISK to buy bigger ships, fit modules, upgrade weapons and defenses. Build the ship that suits your style: nimble trader, tough warship, or versatile explorer.', color: 'var(--accent)' },
          { step: 8, title: 'Sail Deeper', desc: 'Venture into unexplored sectors with better resources but greater danger. Higher risk, higher reward. Faction territory, world events, and your actions shape the galaxy. Your adventure, your galaxy.', color: 'var(--green)' },
        ].map((s, i) => (
          <div key={i} className="mb-5 flex gap-4">
            <div className="flex min-w-10 flex-col items-center">
              <div className="size-3 rounded-full bg-accent shadow-[0_0_8px_rgba(240,160,48,0.3)]" style={{ background: s.color, boxShadow: `0 0 8px ${s.color}40` }} />
              {i < 7 && <div className="mt-1 w-0.5 flex-1 bg-border" />}
            </div>
            <div className="flex-1">
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 'var(--sp-3)', marginBottom: 'var(--sp-1)' }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: '0.7rem', color: s.color }}>STEP {s.step}</span>
                <h4 style={{ margin: 0 }}>{s.title}</h4>
              </div>
              <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0 }}>{s.desc}</p>
            </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]" 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">GP-UI</span>
        <h2 style={{ margin: 0 }}>Screen Specifications</h2>
      </div>

      <div className="grid grid-cols-2 gap-5 max-[900px]:grid-cols-1">
        {[
          { name: 'Login / Connect', color: 'var(--cyan)', items: ['Display current SpacetimeDB identity', 'Show connection status indicator', 'Enter/choose display name'] },
          { name: '3D Star Map', color: 'var(--accent)', items: ['Render ships, asteroids, station', 'Click-to-move navigation', 'Entity selection and info panel', 'Camera orbit/zoom controls'] },
          { name: 'Ship Status', color: 'var(--green)', items: ['Ship name, class, owner', 'Current status (idle/mining/warping)', 'Cargo capacity used/total', 'Active action timer'] },
          { name: 'Inventory', color: 'var(--purple)', items: ['Item type + quantity grid', 'Sell button (when docked)', 'Cargo capacity bar', 'Item value estimation'] },
          { name: 'Station Panel', color: 'var(--cyan)', items: ['Dock/undock controls', 'Quick-sell ore for ISK', 'View station market orders', 'Fit ship (when docked)'] },
          { name: 'Market', color: 'var(--accent)', items: ['Order book (buy/sell)', 'Price per unit + quantity', 'Place sell order from inventory', 'Station-filtered view'] },
          { name: 'Chat', color: 'var(--green)', items: ['Local/system channel (instant)', 'Private messages (delayed by range)', 'Sender name + timestamp', 'Auto-scroll to latest'] },
          { name: 'Combat HUD', color: 'var(--red)', items: ['Target selection + lock timer', 'Module activation buttons', 'Capacitor / shield / armor bars', 'Combat log / damage notifications'] },
          { name: 'Bounty Board', color: 'var(--accent)', items: ['Active bounties by tier', 'Place bounty on player', 'Kill feed (galaxy-wide)', 'Your bounty status'] },
          { name: 'Debug Panel', color: 'var(--muted)', items: ['Reducer call log with timestamps', 'Error display with stack trace', 'Connection metrics (latency, subscription count)', 'Entity count / state dump', 'SpacetimeDB table row counts', 'Agent tick scheduler status', 'Force-spawn NPC/entity controls (dev mode)', 'Game time display (tick counter, sim time)'] },
          { name: 'Galaxy Map', color: 'var(--accent)', items: ['Region/constellation/system hierarchy', 'Faction territory overlay', 'Active world events (icons)', 'Fauna migration routes', 'Anomaly locations and timers', 'Story log access'] },
          { name: 'World Event Panel', color: 'var(--green)', items: ['Active events in current region', 'Event countdown timers', 'Participation status', 'Story log for this event', 'Sensor alerts for nearby events'] },
        ].map((screen, i) => (
          <div key={i} className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4">
            <h4 style={{ color: screen.color, marginBottom: 'var(--sp-3)' }}>{screen.name}</h4>
            <ul style={{ color: 'var(--fg-dim)', fontSize: '0.82rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
              {screen.items.map((item, j) => <li key={j}>{item}</li>)}
            </ul>
          </div>
        ))}
      </div>

      {/* Combat Model */}
      <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">GP-COMBAT</span>
        <h2 style={{ margin: 0 }}>Combat Model</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>Combat style — FTL power management, not action.</strong> The player never directly controls the ship's movement or aiming.
        Instead, the player clicks a hostile target and the ship <strong>automatically navigates to engagement range and engages</strong>.
        The player's job is <strong>resource allocation</strong> — inspired by FTL: distribute reactor power between weapons, shields, engines,
        and auxiliary systems. Modules auto-cycle when powered. The skill is in <strong>when to reroute power</strong> (e.g. divert from engines
        to shields during a spike), <strong>which subsystem to target</strong> on the enemy, and <strong>fitting choices made before the fight</strong>.
        Combat exists to create economic consequences (ship loss, loot, insurance), not to be a reflex game.
      </div>

      <div className="grid grid-cols-2 gap-5 max-[900px]:grid-cols-1" style={{ marginBottom: 'var(--sp-5)' }}>
        <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)' }}>PvE Content</h4>
          <ul style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
            <li>NPC pirates spawn in belts and at gates</li>
            <li>Difficulty scales with system security level</li>
            <li>High-sec: weak frigates, easy kills</li>
            <li>Low-sec/null: cruiser+ NPCs, dangerous but rewarding</li>
            <li>Bounty payouts + module drops as loot</li>
            <li>NPC ratting is a primary ISK faucet</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(--accent)' }}>
          <h4 style={{ color: 'var(--accent)' }}>Player Pirating</h4>
          <ul style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
            <li>Players can attack other players in low-sec and null-sec</li>
            <li>High-sec has weaker NPC pirates — CONCORD presence keeps them at bay</li>
            <li>Pirates can loot cargo from destroyed ships</li>
            <li>Piracy lowers security status → eventually locked out of high-sec</li>
            <li>Bounty system creates natural consequences</li>
            <li>Creates risk/reward dynamics for haulers and miners</li>
          </ul>
        </div>
      </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">
        <h4 style={{ marginBottom: 'var(--sp-4)' }}>Combat Flow (FTL-style resource management)</h4>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.82rem', color: 'var(--fg-dim)', lineHeight: 2 }}>
          1. <span style={{ color: 'var(--cyan)' }}>Click hostile target</span> — ship auto-navigates to engagement range, no manual piloting<br/>
          2. <span style={{ color: 'var(--accent)' }}>Auto-lock & engage</span> — targeting computer locks on, weapons begin auto-cycling<br/>
          3. <span style={{ color: 'var(--red)' }}>Manage reactor power</span> — FTL-style: drag power between Weapons / Shields / Engines / Aux<br/>
          4. <span style={{ color: 'var(--green)' }}>Pick subsystem to attack</span> — target enemy shields, weapons, engines, or hull directly<br/>
          5. <span style={{ color: 'var(--purple)' }}>React to damage</span> — reroute power mid-fight: divert engines→shields when taking fire, shields→weapons to finish<br/>
          6. <span style={{ color: 'var(--fg)' }}>Monitor capacitor</span> — all systems drain energy; running dry = modules go offline<br/>
          7. <span style={{ color: 'var(--red)' }}>Destroy or flee</span> — hull reaches 0 → ship explodes, loot drops, economic consequences
        </div>
        <div style={{ marginTop: 'var(--sp-3)', padding: 'var(--sp-3)', background: 'rgba(34,211,238,0.06)', borderRadius: '6px', borderLeft: '3px solid var(--cyan)' }}>
          <span style={{ fontSize: '0.8rem', color: 'var(--cyan)', fontWeight: 600 }}>FTL DNA:</span>
          <span style={{ fontSize: '0.8rem', color: 'var(--fg-dim)' }}> The player's only input during combat is power allocation and subsystem targeting.
          The ship flies itself. Weapons fire themselves. The player is the <em>chief engineer</em> deciding where
          the reactor output goes — not the pilot or gunner.</span>
        </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-6)' }}>
          <span className="rounded-full bg-[rgba(240,160,48,0.08)] px-2 py-0.5 font-mono text-[0.7rem] text-accent">GP-FAIL</span>
          <h2 style={{ margin: 0 }}>Power Allocation Failure Modes</h2>
        </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" style={{ marginBottom: 'var(--sp-5)' }}>
          <strong>No free lunch.</strong> Every subsystem needs energy. When power is diverted away from a subsystem,
          it doesn't merely weaken — it fails. The reactor produces a fixed total output, and every allocation decision
          creates a vulnerability somewhere else. This is the core tension of the combat system.
        </div>

        <div style={{ overflowX: 'auto', marginBottom: 'var(--sp-6)' }}>
          <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>Subsystem</th><th>Powered Behavior</th><th>Unpowered Failure Mode</th><th>Reroute Time</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-red/25 bg-red/8 text-red">Weapons</span></td>
                <td style={{ color: 'var(--fg-dim)' }}>Turrets auto-cycle at full rate. Missile launchers reload. Damage output at fitted value.</td>
                <td style={{ color: 'var(--red)' }}><strong>No firing.</strong> Turrets cease fire. Missiles cannot launch. Active weapons go offline after 3s. Cannot deal damage.</td>
                <td className="font-mono tabular-nums">2s to full power</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">Shields</span></td>
                <td style={{ color: 'var(--fg-dim)' }}>Shield booster recharges shield HP. Passive regen active. Damage absorption at full.</td>
                <td style={{ color: 'var(--red)' }}><strong>No recharge.</strong> Shield HP stops regenerating. Existing shield HP decays at 2%/s. After 15s, shields at 0% and all damage hits armor directly.</td>
                <td className="font-mono tabular-nums">3s to full regen</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">Engines</span></td>
                <td style={{ color: 'var(--fg-dim)' }}>Ship maintains orbit speed. Can close distance or withdraw. Evasion against tracking.</td>
                <td style={{ color: 'var(--red)' }}><strong>Ship immobile.</strong> Speed drops to 0. No orbit, no approach, no withdrawal. Sitting duck — all hostile weapons have perfect tracking. Cannot flee.</td>
                <td className="font-mono tabular-nums">2s to full speed</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">Auxiliary</span></td>
                <td style={{ color: 'var(--fg-dim)' }}>Active modules cycle normally: ECM jamming, sensor boosters, cap boosters, warfare links.</td>
                <td style={{ color: 'var(--red)' }}><strong>No special abilities.</strong> All auxiliary modules go offline. ECM stops jamming. Sensors degrade. No capacitor boosting. Warfare links disconnect.</td>
                <td className="font-mono tabular-nums">1.5s to full power</td>
              </tr>
            </tbody>
          </table>
        </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(--red)' }}>
            <h4 style={{ color: 'var(--red)' }}>&#x26A0; Red Alert Mode</h4>
            <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: '0 0 var(--sp-3) 0' }}>
              When the ship takes shield-piercing damage (shields below 25% and taking armor hits), the HUD
              automatically enters <strong style={{ color: 'var(--red)' }}>Red Alert</strong>. Non-essential HUD elements collapse:
              chat minimizes, commodity ticker hides, overview panel shrinks to hostiles-only. The combat HUD
              expands to fill the viewport: shield/armor/hull bars enlarge, power allocation bars gain prominent markers,
              and a pulsing red border frames the screen. Audio alarm plays once.
            </p>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.72rem', color: 'var(--muted)' }}>
              Trigger: shields &lt; 25% AND armor damage incoming · Clears: shields restored above 50% · Cannot be disabled
            </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)' }}>Reroute Timing</h4>
            <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: '0 0 var(--sp-3) 0' }}>
              Power rerouting is not instant — there's a 1.5–3 second spool-up depending on the subsystem.
              This prevents instant reactive ping-pong between subsystems. The player must <em>commit</em>
              to a power distribution and accept the vulnerability window. Rerouting to shields (3s) is deliberately
              slower than rerouting to weapons (2s), creating a "damage race vs. survival" decision.
            </p>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.72rem', color: 'var(--muted)' }}>
              During spool-up: subsystem operates at 50% capacity · Visual: power bar fills with animation · Audio: reactor hum changes pitch
            </div>
          </div>
        </div>
      </div>

      <div className="mb-5 rounded-lg px-5 py-4 text-[0.85rem] leading-[1.5] border border-red/20 bg-red/8 text-red" style={{ marginTop: 'var(--sp-5)' }}>
        <strong>On death:</strong> Ship destroyed, cargo and modules partially lost (50% drop as loot, 50% destroyed).
        Player respawns at home station in a rookie frigate. Ship insurance partially reimburses the loss.
        See Ships & Fitting → DEATH (Ship Destruction) for full details.
      </div>

      {/* ═══ DYNAMIC WORLD ═══ */}
      <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">GP-WORLD</span>
        <h2 style={{ margin: 0 }}>Dynamic Galaxy — Living World Events</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 galaxy is alive.</strong> The server simulates a single persistent galaxy with hundreds of star systems, planets,
        moons, asteroid belts, space stations, wormholes, and anomalies. On top of this static geography runs a <strong>world simulation layer</strong>
        that spawns PvE events dynamically, creating a unique story for every server. No two servers ever tell the same tale.
      </div>

      <h3 style={{ marginBottom: 'var(--sp-4)' }}>Galaxy Structure</h3>
      <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(--accent)' }}>
          <h4 style={{ color: 'var(--accent)' }}>Single Galaxy, Many Systems</h4>
          <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: '0 0 var(--sp-2) 0' }}>
            All players share one galaxy. The galaxy contains multiple regions, each with dozens of star systems.
            Systems are connected by stargates forming a navigable graph. Travel between systems takes time,
            creating <strong style={{ color: 'var(--fg)' }}>geographic identity</strong> — the frontier feels different from the core.
          </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(--cyan)' }}>
          <h4 style={{ color: 'var(--cyan)' }}>Orbiting Objects & Celestials</h4>
          <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: '0 0 var(--sp-2) 0' }}>
            Each system has a star, planets, moons, asteroid belts, and stations. Planets orbit their star on slow cycles;
            moons orbit planets. This is not cosmetic — <strong style={{ color: 'var(--fg)' }}>orbital positions affect mining yields,
            travel times, and line-of-sight for sensors</strong>. The galaxy has real spatial rhythm.
          </p>
        </div>
      </div>

      <h3 style={{ marginBottom: 'var(--sp-4)' }}>World Event Categories</h3>
      <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(--red)' }}>
          <h4 style={{ color: 'var(--red)' }}>⚔ Faction Conflicts</h4>
          <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: '0 0 var(--sp-2) 0' }}>
            NPC factions have territory, resources, and grievances. The server tracks faction relations as a dynamic matrix.
            When tensions cross a threshold, war erupts — faction fleets clash in contested systems, trade routes are disrupted,
            and players can choose sides or profit from the chaos.
          </p>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem', color: 'var(--muted)' }}>
            Triggers: resource disputes, border skirmishes, diplomatic insults, player provocations
          </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)' }}>🌀 Space Anomalies</h4>
          <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: '0 0 var(--sp-2) 0' }}>
            The galaxy spawns temporary spatial phenomena — wormholes, nebulae, radiation storms, gravity wells, dark matter corridors.
            Anomalies appear unannounced and expire on their own schedule. Some are dangerous, some are lucrative,
            all create <strong style={{ color: 'var(--fg)' }}>time-limited opportunities</strong> that reward the first to arrive.
          </p>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem', color: 'var(--muted)' }}>
            Lifespan: 15 min – 48 hrs · Rarity scales with distance from trade hubs
          </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(--green)' }}>
          <h4 style={{ color: 'var(--green)' }}>🐋 Space Fauna Migrations</h4>
          <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: '0 0 var(--sp-2) 0' }}>
            Massive space creatures migrate across the galaxy on seasonal cycles — space whales, crystal leviathans, plasma mantas.
            Their migration routes cross player space, creating <strong style={{ color: 'var(--fg)' }}>temporary resource hotspots</strong>
            (biological materials, rare isotopes) and navigation hazards. Players can hunt, follow, or study them.
          </p>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem', color: 'var(--muted)' }}>
            Cycle: real-time weeks · Route shifts each migration · First contact is always a surprise
          </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)' }}>🏛 NPC Faction Events</h4>
          <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: '0 0 var(--sp-2) 0' }}>
            NPC factions expand, contract, build stations, abandon outposts, and respond to player activity.
            A mining rush in a remote system might attract NPC traders, who attract pirates, who attract bounty hunters.
            The world <strong style={{ color: 'var(--fg)' }}>reacts to player density and economic activity</strong> organically.
          </p>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem', color: 'var(--muted)' }}>
            Includes: station construction, pirate raids, convoy escorts, refugee crises, tech discoveries
          </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(--cyan)' }}>
          <h4 style={{ color: 'var(--cyan)' }}>🌑 Cosmic Catastrophes</h4>
          <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: '0 0 var(--sp-2) 0' }}>
            Rare galaxy-shaking events — a star going supernova, a rogue planet entering a system, a dormant wormhole network
            activating. These are the <strong style={{ color: 'var(--fg)' }}>server-defining moments</strong> that players talk about for months.
            "Were you online when the Rhea star collapsed?" becomes server legend.
          </p>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem', color: 'var(--muted)' }}>
            Frequency: ~1 per month · Permanently alters the galaxy map · Foreshadowed days in advance
          </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(--fg-dim)' }}>
          <h4 style={{ color: 'var(--fg-dim)' }}>📡 Signals & Mysteries</h4>
          <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: '0 0 var(--sp-2) 0' }}>
            Unknown signals appear at random — derelict stations, alien artifacts, encrypted transmissions. Players investigate,
            decode, and sometimes trigger chain events. Some mysteries are one-shot puzzles; others are the opening move
            of a multi-week server arc that the world simulation has been building toward.
          </p>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem', color: 'var(--muted)' }}>
            Discovery: player-initiated · Can trigger larger events · Some are red herrings
          </div>
        </div>
      </div>

      <h3 style={{ marginBottom: 'var(--sp-4)' }}>How the World Simulation Works</h3>
      <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)', marginBottom: 'var(--sp-5)' }}>
        <h4 style={{ marginBottom: 'var(--sp-4)' }}>World Simulation Pipeline</h4>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.82rem', color: 'var(--fg-dim)', lineHeight: 2.2 }}>
          <span style={{ color: 'var(--cyan)' }}>Galaxy State</span> — persistent topology: systems, gates, planets, stations, faction territories<br/>
          <span style={{ color: 'var(--accent)' }}>World Tick</span> — every 5 min, server evaluates galaxy state + player density + event cooldowns + faction matrix<br/>
          <span style={{ color: 'var(--green)' }}>Event Spawn</span> — world tick may spawn an event: choose type, location, duration, severity based on weighted probabilities<br/>
          <span style={{ color: 'var(--purple)' }}>Event Propagation</span> — nearby players get sensor readings; distant players hear through news feed with delay<br/>
          <span style={{ color: 'var(--red)' }}>Event Resolution</span> — events end by timer, player action, or cascading trigger; outcomes feed back into galaxy state<br/>
          <span style={{ color: 'var(--fg)' }}>Story Log</span> — every event is recorded in a server-wide story timeline; players can read "the history of this galaxy"
        </div>
      </div>

      <div className="grid grid-cols-2 gap-5 max-[900px]:grid-cols-1" style={{ marginBottom: 'var(--sp-5)' }}>
        <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(--accent)' }}>Player-Event Interaction</h4>
          <ul style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
            <li>Players can <strong style={{ color: 'var(--fg)' }}>participate</strong> in events (fight invaders, escort convoys, study anomalies)</li>
            <li>Player actions can <strong style={{ color: 'var(--fg)' }}>escalate or defuse</strong> events (kill the pirate boss → raid ends)</li>
            <li>Player density <strong style={{ color: 'var(--fg)' }}>attracts</strong> certain events (trade hubs get more NPC activity)</li>
            <li>Player inaction lets events <strong style={{ color: 'var(--fg)' }}>escalate naturally</strong> (uncontested raids grow larger)</li>
          </ul>
        </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)' }}>Server-Uniqueness</h4>
          <ul style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
            <li>Event seed is randomized per server — no two galaxies evolve the same way</li>
            <li>Faction relationships drift based on <strong style={{ color: 'var(--fg)' }}>what players actually do</strong></li>
            <li>A server where players are peaceful traders develops different world events than a server of pirates</li>
            <li>The story timeline is the server's unique identity — "this is the galaxy where the Kaalani wiped out the Vren homeworld"</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" style={{ marginTop: 'var(--sp-5)' }}>
        <strong>Design intent:</strong> The world simulation ensures that even when players are doing routine economic loops,
        <em>something</em> is always happening somewhere. The galaxy never feels static. A player who takes a week off returns
        to find the political map has shifted, a new anomaly appeared in their home system, or a migration route has changed.
        The world remembers, the world evolves, and the world tells a story that belongs to <strong>this server's</strong> players alone.
      </div>
      </>)}

      {/* ═══ SECURITY LEVELS ═══ */}
      {activeTab === 'security' && (<>
        <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">GP-SEC</span>
          <h2 style={{ margin: 0 }}>Security Level System</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>Security levels define the rules of engagement.</strong> Every star system has a security status from <strong>+1.0</strong> (safest) to <strong>−1.0</strong> (lawless).
          Security 0.0 is explicitly <strong>null-sec</strong> — there is no border case. Systems at exactly 0.0 have the same rules as systems at −0.4: no CONCORD, no gate guns, the most dangerous NPC pirates and anomalies.
          This single number controls CONCORD response, NPC pirate spawns, PvE difficulty, and the economic risk/reward balance.
          Inspired by EVE Online's sec-space but simplified for the prototype's scope.
        </div>

        <h3 style={{ marginBottom: 'var(--sp-4)' }}>Security Bands</h3>
        <div style={{ overflowX: 'auto', marginBottom: 'var(--sp-6)' }}>
          <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>Band</th><th>Sec Range</th><th>PvP Rules</th><th>CONCORD</th><th>NPC Pirates</th><th>Risk / Reward</th></tr>
            </thead>
            <tbody>
              {[
                { band: 'High-Sec', range: '+0.5 → +1.0', color: 'var(--green)', pvp: 'Safe zone. CONCORD protects. Co-op PvP punished.', concord: 'Immediate (3–8s). Lethal.', pirates: 'Weak frigates. Easy kills, low bounties.', risk: 'Very low risk. Baseline ore prices. Starter systems.' },
                { band: 'Low-Sec', range: '+0.1 → +0.4', color: 'var(--accent)', pvp: 'No CONCORD. Gate/station guns only. Co-op PvP unrestricted.', concord: 'None. Gate/station guns only.', pirates: 'Mixed frigates/destroyers. Moderate bounties.', risk: 'Medium risk. Better ore. Faction missions. Trade route choke points.' },
                { band: 'Null-Sec', range: '0.0 → −0.4', color: 'var(--red)', pvp: 'No rules. No guns. Anything goes.', concord: 'None.', pirates: 'Cruiser+ NPCs. Dangerous. High bounties + rare loot.', risk: 'High risk. Richest ore. Best anomalies. Faction conflict zones.' },
                { band: 'Deep Null', range: '−0.5 → −1.0', color: 'var(--purple)', pvp: 'No rules. Wormhole connections only.', concord: 'None.', pirates: 'Battlecruiser/battleship NPCs. Elite loot tables.', risk: 'Extreme risk. Unique resources. Story event spawning grounds.' },
              ].map((row, i) => (
                <tr key={i}>
                  <td><span style={{ color: row.color, fontWeight: 600 }}>{row.band}</span></td>
                  <td className="font-mono tabular-nums">{row.range}</td>
                  <td style={{ color: 'var(--fg-dim)', fontSize: '0.85rem' }}>{row.pvp}</td>
                  <td style={{ color: 'var(--fg-dim)', fontSize: '0.85rem' }}>{row.concord}</td>
                  <td style={{ color: 'var(--fg-dim)', fontSize: '0.85rem' }}>{row.pirates}</td>
                  <td style={{ color: 'var(--fg-dim)', fontSize: '0.85rem' }}>{row.risk}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <h3 style={{ marginBottom: 'var(--sp-4)' }}>Player Security Status</h3>
        <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)' }}>Gaining Status</h4>
            <ul style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
              <li>Destroying NPC pirates: +0.01 to +0.05 per kill (scaled by NPC tier)</li>
              <li>Completing NPC missions: +0.1 to +0.3 per mission</li>
              <li>Passive recovery: +0.01 per hour while clean (no hostile acts)</li>
              <li>Maximum: +5.0 ("exemplary citizen")</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(--red)' }}>
            <h4 style={{ color: 'var(--red)' }}>Losing Status</h4>
            <ul style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
              <li>Attacking a player in high-sec: −0.5 to −2.0 (scaled by victim's ship value)</li>
              <li>Destroying a player ship in high-sec: −2.0 to −5.0</li>
              <li>Podding (if applicable): −5.0 (extreme penalty)</li>
              <li>Below −2.0: barred from +0.8+ systems (CONCORD patrols eject) — co-op server feature</li>
              <li>Below −5.0: freely attackable anywhere ("outlaw")</li>
            </ul>
          </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">GP-SEC-DB</span>
          <h2 style={{ margin: 0 }}>Backend Impact</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">
          <h4 style={{ marginBottom: 'var(--sp-4)' }}>Schema Changes</h4>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.82rem', color: 'var(--fg-dim)', lineHeight: 2 }}>
            <span style={{ color: 'var(--accent)' }}>systems</span> — add column: <code>security_level</code> (Float, range −1.0 to +1.0, immutable at galaxy gen time)<br/>
            <span style={{ color: 'var(--cyan)' }}>players</span> — add column: <code>security_status</code> (Float, range −10.0 to +5.0, default 0.0)<br/>
            <span style={{ color: 'var(--green)' }}>ships</span> — add column: <code>combat_flag</code> (Enum: none / weaponstimer / suspect / criminal, with timestamp)<br/>
            <span style={{ color: 'var(--red)' }}>New reducer:</span> <code>adjust_security_status(player_id, delta, reason)</code> — server-side only, never client-callable
          </div>
        </div>
      </>)}

      {/* ═══ NPC PIRATES ═══ */}
      {activeTab === 'pirates' && (<>
        <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">GP-NPC</span>
          <h2 style={{ margin: 0 }}>NPC Pirate AI</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>NPC pirates are the primary PvE threat and a core ISK faucet.</strong>
          They spawn in asteroid belts, at stargates, and in combat anomalies.
          Their difficulty scales with system security level — easy frigates in high-sec,
          deadly battleships in deep null. The pirate AI uses simple behavior templates, not machine learning:
          deterministic state machines that create <em>believable</em> behavior without unpredictable edge cases.
        </div>

        <h3 style={{ marginBottom: 'var(--sp-4)' }}>Spawning Rules</h3>
        <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(--accent)' }}>
            <h4 style={{ color: 'var(--accent)' }}>Spawn Locations</h4>
            <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>Location</th><th>Spawn Rate</th><th>Trigger</th></tr></thead>
              <tbody>
                {[
                  { loc: 'Asteroid belt', rate: '1–3 NPCs per belt', trigger: 'Player enters belt or world tick' },
                  { loc: 'Stargate', rate: '0–2 NPCs per gate', trigger: 'World tick (low-sec/null only)' },
                  { loc: 'Combat anomaly', rate: '3–8 NPCs (waves)', trigger: 'Player warps to anomaly' },
                  { loc: 'Mission site', rate: 'Scripted per mission', trigger: 'Player accepts mission' },
                ].map((r, i) => (
                  <tr key={i}>
                    <td style={{ color: 'var(--fg)' }}>{r.loc}</td>
                    <td className="font-mono tabular-nums">{r.rate}</td>
                    <td style={{ color: 'var(--fg-dim)', fontSize: '0.82rem' }}>{r.trigger}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </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(--cyan)' }}>
            <h4 style={{ color: 'var(--cyan)' }}>Spawn Conditions</h4>
            <ul style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
              <li><strong style={{ color: 'var(--fg)' }}>Player proximity:</strong> NPCs spawn when a player enters a belt or anomaly ("pull" model). Gates spawn NPCs on world ticks only in low-sec/null.</li>
              <li><strong style={{ color: 'var(--fg)' }}>Density cap:</strong> max 10 active NPCs per system. If at cap, oldest idle NPCs despawn.</li>
              <li><strong style={{ color: 'var(--fg)' }}>Despawn:</strong> NPCs that have been idle (no aggro) for 5 minutes despawn. Combat NPCs persist until destroyed or player leaves system for 2+ minutes.</li>
              <li><strong style={{ color: 'var(--fg)' }}>No spawn zones:</strong> within 20km of stations (safe zone). On-grid with a station = no NPC spawn.</li>
              <li><strong style={{ color: 'var(--fg)' }}>World tick spawns:</strong> every 5 minutes, world tick may add NPCs to low-pop systems to keep them feeling dangerous.</li>
            </ul>
          </div>
        </div>

        <h3 style={{ marginBottom: 'var(--sp-4)' }}>Difficulty Tiers by Security Level</h3>
        <div style={{ overflowX: 'auto', marginBottom: 'var(--sp-6)' }}>
          <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>Sec Band</th><th>NPC Classes</th><th>Hull HP</th><th>Bounty</th><th>Behavior</th><th>Loot</th></tr>
            </thead>
            <tbody>
              {[
                { band: 'High-Sec', classes: 'Frigate (T1)', hp: '200–400', bounty: '500–2,000 ₢', behavior: 'Passive orbit. Low aggression. Flees below 30% HP.', loot: 'Basic modules, small ammo, common ore' },
                { band: 'Low-Sec', classes: 'Frigate (T2), Destroyer', hp: '400–800', bounty: '2,000–8,000 ₢', behavior: 'Aggressive orbit. Target priority (weakest ship). Kites if outgunned.', loot: 'T2 modules, blueprint fragments, mid-tier ore' },
                { band: 'Null-Sec', classes: 'Destroyer, Cruiser', hp: '800–2,500', bounty: '8,000–30,000 ₢', behavior: 'Coordinated packs. Spider tanking (remote reps). Escorts target jamming.', loot: 'Rare modules, full blueprints, rare minerals' },
                { band: 'Deep Null', classes: 'Cruiser, Battlecruiser, Boss', hp: '2,500–12,000', bounty: '30,000–200,000 ₢', behavior: 'Boss mechanics. Phase triggers. Spawns reinforcements. Requires careful power management and loadout.', loot: 'Officer modules, ship BPCs, unique cosmetics, story items' },
              ].map((row, i) => (
                <tr key={i}>
                  <td style={{ fontWeight: 600, color: ['var(--green)', 'var(--accent)', 'var(--red)', 'var(--purple)'][i] }}>{row.band}</td>
                  <td style={{ color: 'var(--fg-dim)' }}>{row.classes}</td>
                  <td className="font-mono tabular-nums">{row.hp}</td>
                  <td className="font-mono tabular-nums">{row.bounty}</td>
                  <td style={{ color: 'var(--fg-dim)', fontSize: '0.82rem' }}>{row.behavior}</td>
                  <td style={{ color: 'var(--fg-dim)', fontSize: '0.82rem' }}>{row.loot}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <h3 style={{ marginBottom: 'var(--sp-4)' }}>AI Behavior Templates</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-5)' }}>
          <strong>Deterministic state machines.</strong> Each NPC has a behavior template with a fixed set of states and transitions.
          No randomness in decision-making — the "intelligence" comes from the state machine's design, not from randomness.
          This makes NPC behavior predictable enough to learn but complex enough to be engaging.
        </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={{ marginBottom: 'var(--sp-5)' }}>
          <h4 style={{ marginBottom: 'var(--sp-4)' }}>NPC State Machine</h4>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.82rem', color: 'var(--fg-dim)', lineHeight: 2.2 }}>
            <span style={{ color: 'var(--muted)' }}>IDLE</span> → orbit spawn point, passive scan every 2s (aggro_scan agent)<br/>
            <span style={{ color: 'var(--accent)' }}>AGGRO</span> → target detected in aggro range (30km default) → transition to COMBAT<br/>
            <span style={{ color: 'var(--red)' }}>COMBAT</span> → execute behavior template (orbit/approach/kite) → fight to death or flee threshold<br/>
            <span style={{ color: 'var(--purple)' }}>FLEE</span> → HP below flee threshold (30% default) → MWD away from player, warp out if possible<br/>
            <span style={{ color: 'var(--green)' }}>DEAD</span> → generate loot, award bounty to damage contributor(s), schedule respawn
          </div>
        </div>

        <div className="grid grid-cols-2 gap-5 max-[900px]:grid-cols-1" style={{ marginBottom: 'var(--sp-6)' }}>
          {[
            {
              name: 'Orbit Kiter', color: 'var(--cyan)',
              desc: 'Maintains optimal range (15–20km). Orbits target at speed. Fires long-range weapons. If player closes distance, thrusts away. Good against slow ships.',
              stats: 'Preferred range: 15–20km · Speed bonus: +20% · Damage: low · Survivability: high',
            },
            {
              name: 'Brawler', color: 'var(--red)',
              desc: 'Burns directly toward target. Gets into close range (2–5km) and applies heavy short-range damage. Vulnerable to kiting but devastating if they close.',
              stats: 'Preferred range: 2–5km · Speed bonus: +10% · Damage: high · Survivability: medium',
            },
            {
              name: 'Shield Tank', color: 'var(--green)',
              desc: 'Prioritizes shield regeneration over damage. Self-reps during combat. Slow but durable. Good at outlasting opponents.',
              stats: 'Preferred range: 10–15km · Shield regen: +50% · Damage: medium · Survivability: very high',
            },
            {
              name: 'Support / EWAR', color: 'var(--purple)',
              desc: 'Stays at range, jams target locks, disrupts targeting. Weak in direct combat but makes the pack deadlier. Always spawns with escorts.',
              stats: 'Preferred range: 20–30km · EWAR strength: medium · Damage: very low · Survivability: low (prioritizes escape)',
            },
          ].map((tmpl, i) => (
            <div key={i} className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4" style={{ borderLeft: `3px solid ${tmpl.color}` }}>
              <h4 style={{ color: tmpl.color, marginBottom: 'var(--sp-2)' }}>{tmpl.name}</h4>
              <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: '0 0 var(--sp-3) 0' }}>{tmpl.desc}</p>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem', color: 'var(--muted)' }}>{tmpl.stats}</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">GP-NPC-DB</span>
          <h2 style={{ margin: 0 }}>Backend Impact</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">
          <h4 style={{ marginBottom: 'var(--sp-4)' }}>New Tables & Agents</h4>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.82rem', color: 'var(--fg-dim)', lineHeight: 2 }}>
            <span style={{ color: 'var(--red)' }}>npc_entities</span> — <code>npc_id, system_id, class_id, behavior_template, x/y/z, hull/armor/shield, target_id, state (idle/combat/flee/dead), spawn_location, spawn_time</code><br/>
            <span style={{ color: 'var(--accent)' }}>npc_class_templates</span> — <code>class_id, name, tier, hull_base, armor_base, shield_base, speed, damage, behavior, loot_table_id, bounty</code><br/>
            <span style={{ color: 'var(--green)' }}>loot_tables</span> — <code>table_id, entries (item_type, min_qty, max_qty, drop_chance), security_band</code><br/>
            <span style={{ color: 'var(--cyan)' }}>New agents:</span> <code>pirate_spawn</code> (conditional, 300s), <code>pirate_combat_tick</code> (fixed, 1s per engaged NPC), <code>pirate_loot_drop</code> (one-shot, 0s on death)
          </div>
        </div>
      </>)}

      {/* ═══ CONCORD ═══ */}
      {activeTab === 'concord' && (<>
        <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">GP-CONC</span>
          <h2 style={{ margin: 0 }}>CONCORD — Law Enforcement</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>CONCORD is the NPC police force in high-security space.</strong>
          In the core single-player game, CONCORD provides world flavor and protects the player in high-sec systems — NPC pirates spawn less frequently and CONCORD ships respond to attacks. In optional co-op servers, CONCORD also enforces rules between players, making high-sec aggression consequential.
        </div>

        <h3 style={{ marginBottom: 'var(--sp-4)' }}>Response Model</h3>
        <div style={{ overflowX: 'auto', marginBottom: 'var(--sp-6)' }}>
          <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>System Sec</th><th>Response Time</th><th>CONCORD Force</th><th>Outcome</th></tr>
            </thead>
            <tbody>
              {[
                { sec: '1.0', time: '3s', force: '2 Battleships + 2 Cruisers', outcome: 'Near-instant destruction. No time for a second volley.' },
                { sec: '0.9', time: '4s', force: '1 Battleship + 2 Cruisers', outcome: 'Quick destruction. Alpha-strike kills possible on soft targets.' },
                { sec: '0.8', time: '5s', force: '1 Battleship + 1 Cruiser', outcome: 'Brief window for damage. Tanky ships can survive one cycle.' },
                { sec: '0.7', time: '8s', force: '2 Cruisers', outcome: 'Meaningful attack window. Destroyers can kill frigates before CONCORD arrives.' },
                { sec: '0.6', time: '12s', force: '1 Cruiser', outcome: 'Extended window. Cruiser can kill a mining barge before response.' },
                { sec: '0.5', time: '15s', force: '2 Frigates', outcome: 'Longest high-sec response. Organized ganks are viable. The cost equation shifts toward attackers.' },
                { sec: '≤0.4', time: '∞ (no response)', force: 'None', outcome: 'No CONCORD. Gate/station guns fire in 0.1–0.4. Nothing in ≤0.0.' },
              ].map((row, i) => (
                <tr key={i}>
                  <td className="font-mono tabular-nums" style={{ fontWeight: 600, color: parseFloat(row.sec) >= 0.5 ? 'var(--green)' : parseFloat(row.sec) >= 0 ? 'var(--accent)' : 'var(--red)' }}>{row.sec}</td>
                  <td className="font-mono tabular-nums" style={{ color: 'var(--cyan)' }}>{row.time}</td>
                  <td style={{ color: 'var(--fg-dim)' }}>{row.force}</td>
                  <td style={{ color: 'var(--fg-dim)', fontSize: '0.85rem' }}>{row.outcome}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <h3 style={{ marginBottom: 'var(--sp-4)' }}>How CONCORD Works</h3>
        <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={{ marginBottom: 'var(--sp-6)' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.82rem', color: 'var(--fg-dim)', lineHeight: 2.2 }}>
            <span style={{ color: 'var(--red)' }}>1. Aggression</span> — NPC pirate or (on co-op servers) a hostile player attacks in high-sec. <code>combat_flag</code> set to <strong>criminal</strong>.<br/>
            <span style={{ color: 'var(--accent)' }}>2. CONCORD Spawn</span> — Server spawns CONCORD NPCs at attacker's location. Response time based on system sec.<br/>
            <span style={{ color: 'var(--cyan)' }}>3. Point + Web</span> — CONCORD warp-scrambles and stasis-webs the attacker. No escape.<br/>
            <span style={{ color: 'var(--red)' }}>4. Destruction</span> — CONCORD applies overwhelming damage. Attacker destroyed. No survival possible.<br/>
            <span style={{ color: 'var(--green)' }}>5. Status Penalty</span> — Attacker's security status reduced. Large bounty placed automatically at low status.<br/>
            <span style={{ color: 'var(--purple)' }}>6. Kill Log</span> — Event logged in kill feed. Galaxy-wide notification if bounty collected.
          </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(--red)' }}>
            <h4 style={{ color: 'var(--red)' }}>Anti-Exploit Rules</h4>
            <ul style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
              <li>CONCORD cannot be avoided, tanked, or outrun — response is guaranteed</li>
              <li>Warping away delays CONCORD by ≤2s; they follow and catch up</li>
              <li>CONCORD damage scales to always exceed attacker's EHP (no tanking)</li>
              <li>If a player exploits a bug to avoid CONCORD, server admin can force-destroy the ship</li>
              <li>"Criminal" flag persists through session — logging out doesn't clear it</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(--cyan)' }}>
            <h4 style={{ color: 'var(--cyan)' }}>Suspect vs. Criminal</h4>
            <ul style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
              <li><strong style={{ color: 'var(--accent)' }}>Suspect</strong> — stole loot from another player's wreck. Anyone can attack the suspect freely. No CONCORD response for attacking a suspect. 15-minute timer.</li>
              <li><strong style={{ color: 'var(--red)' }}>Criminal</strong> — attacked an innocent in high-sec. CONCORD responds. Ship will be destroyed. Security status penalty applied. 15-minute weapons timer.</li>
              <li><strong style={{ color: 'var(--green)' }}>Weapons Timer</strong> — 60s after any aggressive module activation. Cannot dock, gate-jump, or tether during timer. Prevents "dock games."</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>Design intent:</strong> CONCORD creates meaningful security bands in the galaxy. High-sec is safer for new players — NPC pirates are weaker, CONCORD provides backup. Lower-security space offers better rewards but greater danger. On optional co-op servers, CONCORD also enforces rules between players, making high-sec aggression a costly strategic choice rather than a griefing tool.
        </div>
      </>)}

      {/* ═══ INSURANCE ═══ */}
      {activeTab === 'insurance' && (<>
        <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">GP-INS</span>
          <h2 style={{ margin: 0 }}>Ship Insurance</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>Insurance is both an ISK sink (premiums) and an ISK faucet (payouts).</strong>
          It cushions ship loss without eliminating risk. A fully insured ship still costs the player money to replace —
          modules, cargo, and the deductible are never covered. Insurance makes the game playable for casual players
          while keeping ship loss meaningful for everyone.
        </div>

        <h3 style={{ marginBottom: 'var(--sp-4)' }}>Coverage Tiers</h3>
        <div style={{ overflowX: 'auto', marginBottom: 'var(--sp-6)' }}>
          <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>Tier</th><th>Premium</th><th>Payout (% of hull value)</th><th>Duration</th><th>Best For</th></tr>
            </thead>
            <tbody>
              {[
                { tier: 'None', premium: 'Free', payout: '0%', duration: '—', best: 'Rookie frigates (free replacement anyway)' },
                { tier: 'Basic', premium: '10% of hull value', payout: '40%', duration: '30 days', best: "Cheap ships you don't care about" },
                { tier: 'Standard', premium: '25% of hull value', payout: '70%', duration: '30 days', best: 'Default choice for most ships' },
                { tier: 'Platinum', premium: '50% of hull value', payout: '95%', duration: '30 days', best: 'Expensive ships, PvP main combat ships, mission runners' },
              ].map((row, i) => (
                <tr key={i}>
                  <td style={{ fontWeight: 600, color: ['var(--muted)', 'var(--green)', 'var(--cyan)', 'var(--accent)'][i] }}>{row.tier}</td>
                  <td className="font-mono tabular-nums">{row.premium}</td>
                  <td className="font-mono tabular-nums" style={{ fontWeight: 600 }}>{row.payout}</td>
                  <td className="font-mono tabular-nums">{row.duration}</td>
                  <td style={{ color: 'var(--fg-dim)', fontSize: '0.85rem' }}>{row.best}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </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(--accent)' }}>
            <h4 style={{ color: 'var(--accent)' }}>How Insurance Works</h4>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.82rem', color: 'var(--fg-dim)', lineHeight: 2 }}>
              1. Player buys insurance at station (deducted from wallet)<br/>
              2. Policy active for 30 days or until ship is destroyed<br/>
              3. On ship destruction, payout queued (30–120s delay via insurance_payout agent)<br/>
              4. Payout = hull value × coverage %<br/>
              5. ISK deposited to player wallet<br/>
              6. Policy consumed — must re-insure new ship
            </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(--red)' }}>
            <h4 style={{ color: 'var(--red)' }}>What Insurance Does NOT Cover</h4>
            <ul style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
              <li>Fitted modules (separate loss — 50% destroyed, 50% loot)</li>
              <li>Cargo (destroyed or looted — separate system)</li>
              <li>AI crew injuries / medical costs</li>
              <li>Rig slots (permanently destroyed on ship loss)</li>
              <li>Market value above base hull price</li>
            </ul>
          </div>
        </div>

        <h3 style={{ marginBottom: 'var(--sp-4)' }}>Economic Balance</h3>
        <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={{ marginBottom: 'var(--sp-5)' }}>
          <h4 style={{ marginBottom: 'var(--sp-4)' }}>Insurance as ISK Faucet/Sink</h4>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.82rem', color: 'var(--fg-dim)', lineHeight: 2.2 }}>
            <span style={{ color: 'var(--red)' }}>ISK sink:</span> Premium payments leave the economy (25% of hull value for Standard = net ISK destruction)<br/>
            <span style={{ color: 'var(--green)' }}>ISK faucet:</span> Payouts inject ISK (70% of hull value for Standard = net ISK creation when ship is destroyed)<br/>
            <span style={{ color: 'var(--accent)' }}>Net effect:</span> At Standard tier, each ship loss creates ISK equal to 70% − 25% = 45% of hull value. This is the "cost of dying" net ISK injection. Balanced by: ship replacement costs (minerals), module losses, and the fact that hulls are manufactured from player-mined resources (zero ISK creation).<br/>
            <span style={{ color: 'var(--cyan)' }}>Delay purpose:</span> The 30–120s payout delay prevents instant-rebuy combat loops. You can't die, collect insurance, and re-ship in the same fight.
          </div>
        </div>

        <div className="mb-5 rounded-lg px-5 py-4 text-[0.85rem] leading-[1.5] border border-red/20 bg-red/8 text-red">
          <strong>Anti-abuse:</strong> Self-destructing a ship for insurance payout is an exploit.
          Insurance payout never exceeds premium paid unless the ship was destroyed by a <em>different</em> player.
          NPC kills pay full insurance. Self-destruct pays 0%. Alt-character kills are tracked via IP/connection heuristics
          and flagged for review (bounty system uses the same check). For MVP: if killer and victim are the same player, payout = 0.
        </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-6)' }}>
          <span className="rounded-full bg-[rgba(240,160,48,0.08)] px-2 py-0.5 font-mono text-[0.7rem] text-accent">GP-INS-DB</span>
          <h2 style={{ margin: 0 }}>Backend Impact</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">
          <h4 style={{ marginBottom: 'var(--sp-4)' }}>New Tables & Reducers</h4>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.82rem', color: 'var(--fg-dim)', lineHeight: 2 }}>
            <span style={{ color: 'var(--accent)' }}>insurance_policies</span> — <code>policy_id, player_id, ship_id, tier, premium_paid, payout_value, purchased_at, expires_at, active (bool)</code><br/>
            <span style={{ color: 'var(--cyan)' }}>ship_type_base_values</span> — <code>ship_type_id, base_hull_value (ISK), insurance_premium_mult (per tier)</code><br/>
            <span style={{ color: 'var(--green)' }}>New reducer:</span> <code>purchase_insurance(ship_id, tier)</code> — validate docked + wallet, deduct premium, create policy<br/>
            <span style={{ color: 'var(--red)' }}>New reducer:</span> <code>process_insurance_payout(ship_id)</code> — called by insurance_payout agent, validate policy active + ship destroyed, credit ISK
          </div>
        </div>
      </>)}

      {/* ═══ MISSIONS ═══ */}
      {activeTab === 'missions' && (<>
        <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">GP-MIS</span>
          <h2 style={{ margin: 0 }}>Mission System</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>Missions are a core ISK faucet and the primary PvE progression path.</strong>
          NPC agents at stations offer missions that send players on scripted encounters — kill pirates, haul cargo,
          mine specific ores, survey anomalies, or escort convoys. Missions scale with security band, player standing,
          and skill level. They are repeatable but not grindable: each agent has a limited pool that refreshes on a timer.
          The mission system is the "guided content" that teaches new players the game loop and gives veteran players
          a reliable ISK income alongside market trading and PvP.
        </div>

        <h3 style={{ marginBottom: 'var(--sp-4)' }}>Mission Types</h3>
        <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(--red)' }}>
            <h4 style={{ color: 'var(--red)' }}>⚔ Kill Mission</h4>
            <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: '0 0 var(--sp-3) 0' }}>
              Warp to a deadspace pocket and destroy NPC hostiles. Difficulty scales with agent tier and system security.
              May include multiple waves, a boss NPC, or structure destruction. The bread-and-butter of PvE combat.
            </p>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem', color: 'var(--muted)' }}>
              Reward: Bounty + mission bonus · Time limit: 24h · Standing: +0.05 to +0.30 per completion
            </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(--cyan)' }}>
            <h4 style={{ color: 'var(--cyan)' }}>📦 Courier Mission</h4>
            <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: '0 0 var(--sp-3) 0' }}>
              Transport goods from one station to another. Cargo may be large (requiring a hauler) or valuable
              (attracting pirates). Low-sec courier missions pay more. Creates organic hauler traffic that pirates can hunt.
            </p>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem', color: 'var(--muted)' }}>
              Reward: Flat fee + time bonus · Time limit: 1–6h · Standing: +0.03 to +0.15 · Risk: low-sec route = ambush
            </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)' }}>⛏ Mining Mission</h4>
            <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: '0 0 var(--sp-3) 0' }}>
              Mine a specific quantity of a specific ore type and deliver it to the agent. May require traveling to a
              mission-only asteroid belt (deadspace). Sometimes includes NPC spawns in the belt for added risk.
            </p>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem', color: 'var(--muted)' }}>
              Reward: ISK + ore market value · Time limit: 24h · Standing: +0.03 to +0.10 · Dual income: sell excess ore
            </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(--green)' }}>
            <h4 style={{ color: 'var(--green)' }}>📡 Survey / Exploration Mission</h4>
            <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: '0 0 var(--sp-3) 0' }}>
              Travel to a specific system or anomaly and scan/interact with objects. May involve hacking, analyzing,
              or simply being at a location for a duration. Low combat risk, high travel time. Good for exploring the galaxy.
            </p>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem', color: 'var(--muted)' }}>
              Reward: Flat fee + loot from sites · Time limit: 6–24h · Standing: +0.02 to +0.10 · Unlocks exploration content
            </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)' }}>🚀 Escort Mission</h4>
            <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: '0 0 var(--sp-3) 0' }}>
              Protect an NPC convoy as it travels between systems. NPCs spawn ambushes along the route. The convoy must
              survive. Failure = no reward + standing loss. Success = high reward + standing bonus. Group content (post-MVP).
            </p>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem', color: 'var(--muted)' }}>
              Reward: High ISK + faction items · Time limit: 1–2h · Standing: +0.10 to +0.30 · Group recommended
            </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(--amber)' }}>
            <h4 style={{ color: '#f59e0b' }}>🔄 Trade Mission</h4>
            <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: '0 0 var(--sp-3) 0' }}>
              Buy a specific commodity at market price and deliver it to the agent. The agent reimburses cost + bonus.
              Risk: market price may have moved since you accepted. Teaches market awareness and trade route planning.
            </p>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem', color: 'var(--muted)' }}>
              Reward: Reimbursement + 10–30% bonus · Time limit: 2–6h · Standing: +0.02 to +0.08 · Market risk
            </div>
          </div>
        </div>

        <h3 style={{ marginBottom: 'var(--sp-4)' }}>NPC Agent Interaction</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-5)' }}>
          <strong>Every station has 1–3 NPC agents.</strong> Agents are persistent characters with names, factions,
          and specialties. A player's relationship with each agent is tracked via <strong>standing</strong> — a value from −10.0 to +10.0
          that determines what missions the agent offers and what rewards they give. Higher standing unlocks harder missions
          with better payouts.
        </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={{ marginBottom: 'var(--sp-5)' }}>
          <h4 style={{ marginBottom: 'var(--sp-4)' }}>Agent Interaction Flow</h4>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.82rem', color: 'var(--fg-dim)', lineHeight: 2.2 }}>
            <span style={{ color: 'var(--cyan)' }}>1. Dock at station</span> — Agent Panel shows available agents at this station (with name, faction icon, standing, available missions count)<br/>
            <span style={{ color: 'var(--accent)' }}>2. Select agent</span> — Agent portrait + dialogue box. Agent greets based on standing level (hostile/neutral/friendly/loyal). Lists available missions.<br/>
            <span style={{ color: 'var(--green)' }}>3. Browse missions</span> — Each mission shows: type, brief description, reward estimate, location hint, time limit, difficulty tier. Player picks one.<br/>
            <span style={{ color: 'var(--purple)' }}>4. Accept mission</span> — Mission added to active journal. Waypoint auto-created in navigation. Objective markers appear on overview and map.<br/>
            <span style={{ color: 'var(--red)' }}>5. Complete objectives</span> — Kill targets, deliver cargo, mine ore, scan sites. Journal tracks progress (0/5 pirates killed, etc.).<br/>
            <span style={{ color: 'var(--fg)' }}>6. Turn in</span> — Return to agent (or any agent of same faction for courier). Reward paid. Standing updated. New mission unlocked.<br/>
            <span style={{ color: 'var(--muted)' }}>Fail: Time expires or objective becomes impossible → standing loss (−0.05 to −0.50). Can be declined before accepting with no penalty.</span>
          </div>
        </div>

        <h3 style={{ marginBottom: 'var(--sp-4)' }}>Standing Mechanics</h3>
        <div style={{ overflowX: 'auto', marginBottom: 'var(--sp-6)' }}>
          <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>Standing Range</th><th>Agent Attitude</th><th>Mission Access</th><th>Reward Modifier</th></tr>
            </thead>
            <tbody>
              {[
                { range: '−10.0 → −2.0', attitude: 'Hostile', access: 'None — agent refuses to talk', reward: 'N/A' },
                { range: '−2.0 → +1.0', attitude: 'Neutral', access: 'Level 1 missions only (easy)', reward: 'Base reward ×0.8' },
                { range: '+1.0 → +3.0', attitude: 'Friendly', access: 'Level 1–2 missions', reward: 'Base reward ×1.0' },
                { range: '+3.0 → +6.0', attitude: 'Trusted', access: 'Level 1–3 missions (medium)', reward: 'Base reward ×1.2' },
                { range: '+6.0 → +8.0', attitude: 'Loyal', access: 'Level 1–4 missions (hard)', reward: 'Base reward ×1.5 + rare loot' },
                { range: '+8.0 → +10.0', attitude: 'Inner Circle', access: 'All levels + exclusive storyline arc', reward: 'Base reward ×2.0 + unique items + COSMOS missions' },
              ].map((row, i) => (
                <tr key={i}>
                  <td className="font-mono tabular-nums" style={{ fontWeight: 600, color: ['var(--red)', 'var(--red)', 'var(--fg-dim)', 'var(--green)', 'var(--cyan)', 'var(--accent)'][i] }}>{row.range}</td>
                  <td style={{ color: 'var(--fg)' }}>{row.attitude}</td>
                  <td style={{ color: 'var(--fg-dim)', fontSize: '0.85rem' }}>{row.access}</td>
                  <td className="font-mono tabular-nums">{row.reward}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </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)' }}>Gaining Standing</h4>
            <ul style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
              <li>Complete missions: +0.05 to +0.30 per mission (scaled by difficulty)</li>
              <li>Faction-wide: completing a mission for Agent A improves standing with Agent B of the same faction (at 50% rate)</li>
              <li>Storyline missions: every 16 missions of the same level triggers a storyline mission with large standing boost (+1.0 to +3.0)</li>
              <li>Derived standing: faction standing affects all agents in that faction. corp standing is agent-specific.</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(--red)' }}>
            <h4 style={{ color: 'var(--red)' }}>Losing Standing</h4>
            <ul style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
              <li>Fail a mission: −0.05 to −0.50 (scaled by mission level)</li>
              <li>Decline 2+ missions from same agent in 4h: −0.02 per decline after the first</li>
              <li>Attack NPC of a faction: −0.10 to −1.0 (scaled by NPC importance)</li>
              <li>Fail storyline mission: −1.0 to −3.0 (harsh penalty)</li>
              <li>Standing decays toward 0.0 at 1% per day (prevents permanent locks)</li>
            </ul>
          </div>
        </div>

        <h3 style={{ marginBottom: 'var(--sp-4)' }}>Reward Scaling</h3>
        <div style={{ overflowX: 'auto', marginBottom: 'var(--sp-6)' }}>
          <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>Level</th><th>Base Reward</th><th>Time Bonus</th><th>Loyalty Points</th><th>Skill Req.</th><th>Security Band</th></tr>
            </thead>
            <tbody>
              {[
                { level: '1', reward: '5,000 – 15,000 ₢', bonus: '+20% if &lt;30 min', lp: '50–150', skill: 'None', sec: 'High-sec' },
                { level: '2', reward: '15,000 – 40,000 ₢', bonus: '+25% if &lt;45 min', lp: '150–400', skill: 'Industry II or Gunnery II', sec: 'High/Low' },
                { level: '3', reward: '40,000 – 100,000 ₢', bonus: '+30% if &lt;60 min', lp: '400–1,000', skill: 'Industry III or Gunnery III', sec: 'Low/Null' },
                { level: '4', reward: '100,000 – 300,000 ₢', bonus: '+35% if &lt;90 min', lp: '1,000–3,000', skill: 'Industry IV or Gunnery IV + ship class skill', sec: 'Null/Deep' },
              ].map((row, i) => (
                <tr key={i}>
                  <td style={{ fontWeight: 600, color: ['var(--green)', 'var(--cyan)', 'var(--accent)', 'var(--red)'][i] }}>Level {row.level}</td>
                  <td className="font-mono tabular-nums">{row.reward}</td>
                  <td style={{ color: 'var(--fg-dim)', fontSize: '0.85rem' }}>{row.bonus}</td>
                  <td className="font-mono tabular-nums">{row.lp}</td>
                  <td style={{ color: 'var(--fg-dim)', fontSize: '0.85rem' }}>{row.skill}</td>
                  <td style={{ color: 'var(--fg-dim)', fontSize: '0.85rem' }}>{row.sec}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </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" style={{ marginBottom: 'var(--sp-5)' }}>
          <strong>Loyalty Points (LP):</strong> Completing missions earns LP with the agent's faction. LP can be spent at faction stations
          for faction-specific items (modules, ships, BPCs) at below-market prices. This creates a secondary currency that rewards
          mission runners and cannot be traded between players. LP stores are faction-specific — Caldari LP can't be spent at Gallente stations.
        </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">GP-MIS-DB</span>
          <h2 style={{ margin: 0 }}>Backend Impact</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={{ marginBottom: 'var(--sp-5)' }}>
          <h4 style={{ marginBottom: 'var(--sp-4)' }}>New Tables, Reducers & Agent Updates</h4>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.82rem', color: 'var(--fg-dim)', lineHeight: 2 }}>
            <span style={{ color: 'var(--accent)' }}>npc_agents</span> — <code>agent_id, name, faction_id, station_id, specialty (kill/courier/mining/survey/trade/escort), quality (u32), mission_levels_offered, dialogue_seed</code><br/>
            <span style={{ color: 'var(--cyan)' }}>mission_templates</span> — <code>template_id, type (enum), level (1–4), title, description_template, objectives_json, reward_base, time_limit_seconds, security_band_min, skill_requirements_json, faction_id</code><br/>
            <span style={{ color: 'var(--green)' }}>active_missions</span> — <code>mission_id, player_id, agent_id, template_id, objectives_state_json, status (active/completed/failed/expired), accepted_at, expires_at, completed_at</code><br/>
            <span style={{ color: 'var(--red)' }}>player_standing</span> — <code>player_id, entity_id (agent or faction), entity_type (agent/faction), standing (f64, −10 to +10), last_mission_at</code><br/>
            <span style={{ color: 'var(--purple)' }}>player_loyalty_points</span> — <code>player_id, faction_id, lp_balance (u64), lifetime_earned (u64)</code><br/>
            <span style={{ color: 'var(--fg)' }}>mission_offers</span> — <code>offer_id, agent_id, station_id, template_id, reward_modifier, expires_at, generated_at</code><br/>
            <br/>
            <span style={{ color: 'var(--cyan)' }}>Reducers:</span> <code>accept_mission(offer_id)</code>, <code>complete_mission_objective(mission_id, objective_idx)</code>, <code>turn_in_mission(mission_id)</code>, <code>decline_mission(offer_id)</code>, <code>fail_mission(mission_id)</code><br/>
            <span style={{ color: 'var(--accent)' }}>Agent update:</span> <code>npc_mission_refresh</code> (existing, 1800s) — generates 2–5 new offers per agent from template pool, weighted by faction state, player activity, and standing. Removes expired offers.
          </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">
          <strong>Mission journal UI:</strong> A docked-only panel showing all active missions with objective progress, time remaining,
          reward estimate, and a "set waypoint" button. In Flight Mode, active mission objectives appear as HUD indicators
          (e.g., "Pirates remaining: 3/5" in the top-right corner). Mission completion triggers a notification toast.
        </div>
      </>)}

      {/* ═══ TRAVEL & WARP ═══ */}
      {activeTab === 'travel' && (<>
        <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">GP-TRAVEL</span>
          <h2 style={{ margin: 0 }}>Travel & Warp Mechanics</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>Click to autopilot — the player sets intent, the ship executes.</strong>
          There is no manual flight control. The player clicks a destination (asteroid, station, stargate, bookmark,
          or any point in space) and the ship navigates there. Travel has three modes: sub-warp (slow, in-system),
          warp (fast, in-system), and gate jump (instant, inter-system). Each mode has different speed, acceleration,
          and interaction rules. Travel time is the primary "geography tax" that makes distant systems feel distant
          and creates real trade route logistics.
        </div>

        <h3 style={{ marginBottom: 'var(--sp-4)' }}>Travel Modes</h3>
        <div style={{ overflowX: 'auto', marginBottom: 'var(--sp-6)' }}>
          <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>Mode</th><th>Speed</th><th>Use Case</th><th>Player Input</th></tr>
            </thead>
            <tbody>
              {[
                { mode: 'Sub-Warp', speed: '150–300 m/s (ship speed stat)', use: 'Approach objects within 500km. Orbiting, mining range, docking approach.', input: 'Click target → “Approach.” Ship moves at base speed.' },
                { mode: 'Warp', speed: '3.0–6.0 AU/s (ship class dependent)', use: 'Travel within a system. Warp to station, belt, gate, bookmark, or any celestials.', input: 'Click target → “Warp To.” Ship aligns, then enters warp.' },
                { mode: 'Gate Jump', speed: 'Instant', use: 'Travel between star systems. Jump through a stargate to the paired gate in the destination system.', input: 'Click stargate → “Jump.” Must be within 2,500m of gate.' },
              ].map((row, i) => (
                <tr key={i}>
                  <td style={{ fontWeight: 600, color: ['var(--cyan)', 'var(--accent)', 'var(--green)'][i] }}>{row.mode}</td>
                  <td className="font-mono tabular-nums">{row.speed}</td>
                  <td style={{ color: 'var(--fg-dim)', fontSize: '0.85rem' }}>{row.use}</td>
                  <td style={{ color: 'var(--fg-dim)', fontSize: '0.85rem' }}>{row.input}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <h3 style={{ marginBottom: 'var(--sp-4)' }}>Warp Mechanics — Detailed</h3>
        <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(--accent)' }}>
            <h4 style={{ color: 'var(--accent)' }}>Warp Sequence</h4>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.82rem', color: 'var(--fg-dim)', lineHeight: 2 }}>
              <span style={{ color: 'var(--cyan)' }}>1. Align:</span> Ship turns toward destination. Align time = 2–8s by ship class (frigate fastest, battleship slowest).<br/>
              <span style={{ color: 'var(--accent)' }}>2. Accelerate:</span> Ship reaches 75% of max speed while aligned. ~1s for frigates, ~3s for battleships.<br/>
              <span style={{ color: 'var(--green)' }}>3. Enter Warp:</span> Ship enters warp tunnel. Speed ramps from 0 to max warp speed over 2s.<br/>
              <span style={{ color: 'var(--purple)' }}>4. Cruise:</span> Ship travels at warp speed (3–6 AU/s). Deceleration starts at 50% of remaining distance.<br/>
              <span style={{ color: 'var(--red)' }}>5. Exit Warp:</span> Ship decelerates from warp speed to 0 over 2s. Appears 0–50km from destination.
            </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(--cyan)' }}>
            <h4 style={{ color: 'var(--cyan)' }}>Warp Speed by Ship Class</h4>
            <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>Class</th><th>Warp Speed</th><th>Align Time</th><th>System Cross (30 AU)</th></tr></thead>
              <tbody>
                {[
                  { cls: 'Frigate', warp: '6.0 AU/s', align: '2s', cross: '~7s' },
                  { cls: 'Destroyer', warp: '5.0 AU/s', align: '3s', cross: '~9s' },
                  { cls: 'Cruiser', warp: '4.5 AU/s', align: '4s', cross: '~11s' },
                  { cls: 'Battlecruiser', warp: '3.5 AU/s', align: '6s', cross: '~14s' },
                  { cls: 'Battleship', warp: '3.0 AU/s', align: '8s', cross: '~18s' },
                ].map((r, i) => (
                  <tr key={i}>
                    <td style={{ fontWeight: 600, color: 'var(--accent)' }}>{r.cls}</td>
                    <td className="font-mono tabular-nums">{r.warp}</td>
                    <td className="font-mono tabular-nums">{r.align}</td>
                    <td className="font-mono tabular-nums" style={{ color: 'var(--fg-dim)' }}>{r.cross}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </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" style={{ marginBottom: 'var(--sp-5)' }}>
          <strong>Warp disruption:</strong> A warp scrambler module (medium slot, combat module) prevents the target ship from
          entering warp while the scrambler is active and the target is within scram range (10km). If a ship is scrambled
          while aligning, the warp is cancelled. If scrambled during warp exit, the next warp is blocked. This is the primary
          PvP tackle mechanic. NPCs do not use warp scramblers in MVP (Phase 3+ only).
        </div>

        <h3 style={{ marginBottom: 'var(--sp-4)' }}>Stargate Mechanics</h3>
        <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)' }}>Gate Jump Sequence</h4>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.82rem', color: 'var(--fg-dim)', lineHeight: 2 }}>
              1. Warp to stargate (arrive 0–20km from gate)<br/>
              2. Sub-warp approach to within <strong style={{ color: 'var(--fg)' }}>2,500m</strong> (activation range)<br/>
              3. Click <strong style={{ color: 'var(--accent)' }}>"Jump"</strong> — ship activates gate<br/>
              4. <strong style={{ color: 'var(--cyan)' }}>Jump delay:</strong> 5s (global cooldown per character, prevents rapid gate-hopping)<br/>
              5. Ship appears at paired gate in destination system<br/>
              6. <strong style={{ color: 'var(--purple)' }}>Gate cloak:</strong> 30s invulnerability after jump (ship is invisible to other players, cannot be targeted, cannot activate modules). Breaks early if you move or activate anything.<br/>
              7. Player must warp away from gate before cloak expires or risk being targeted
            </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(--red)' }}>
            <h4 style={{ color: 'var(--red)' }}>Gate Guns & Security</h4>
            <ul style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
              <li><strong style={{ color: 'var(--fg)' }}>High-sec gates:</strong> No gate guns needed — CONCORD handles aggression.</li>
              <li><strong style={{ color: 'var(--fg)' }}>Low-sec gates (+0.1 to +0.4):</strong> Gate guns fire on any aggressor within 150km. Moderate damage — can be tanked by battlecruiser+ for a short time. Guns do not prevent aggression, they punish it.</li>
              <li><strong style={{ color: 'var(--fg)' }}>Null-sec gates (0.0 and below):</strong> No gate guns. No rules. Anything goes. Gate camps are a primary PvP activity.</li>
              <li><strong style={{ color: 'var(--fg)' }}>Weapons timer:</strong> 60s after any aggressive module activation. Cannot jump gates during weapons timer. Prevents "shoot and jump" tactics ("gate games").</li>
            </ul>
          </div>
        </div>

        <h3 style={{ marginBottom: 'var(--sp-4)' }}>Docking & Undocking</h3>
        <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)' }}>Docking</h4>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.82rem', color: 'var(--fg-dim)', lineHeight: 2 }}>
              1. Warp to station (arrive 0–20km)<br/>
              2. Approach to within <strong style={{ color: 'var(--fg)' }}>500m</strong> (docking range)<br/>
              3. Click <strong style={{ color: 'var(--accent)' }}>"Dock"</strong><br/>
              4. Docking is instant — ship disappears from space, player enters Station Mode<br/>
              5. Cannot dock while weapons timer is active (60s after aggressive action)
            </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)' }}>Undocking</h4>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.82rem', color: 'var(--fg-dim)', lineHeight: 2 }}>
              1. Click <strong style={{ color: 'var(--accent)' }}>"Undock"</strong> in Station Mode<br/>
              2. Ship appears outside station, moving at base speed away from station<br/>
              3. <strong style={{ color: 'var(--green)' }}>Undock invulnerability:</strong> 20s. Cannot be targeted. Cannot activate modules. Breaks if you change direction or activate anything.<br/>
              4. Player has 20s to assess the situation and warp to a safe location<br/>
              5. No "station games" — you always get a safe undock window
            </div>
          </div>
        </div>

        <h3 style={{ marginBottom: 'var(--sp-4)' }}>Autopilot & Route Planning</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-5)' }}>
          <strong>Autopilot flies the route automatically, but at a cost.</strong> Players can set a multi-system route
          (via waypoints) and activate autopilot. The ship will warp to each gate, jump, warp to the next gate, and repeat.
          Autopilot is <em>slower</em> than manual piloting: it warps to 15km from each gate instead of 0km, requiring a
          sub-warp approach each time. Manual pilots who click precisely arrive faster. Autopilot is a convenience,
          not a replacement for active play.
        </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">
            <h4 style={{ color: 'var(--green)' }}>Manual Warp</h4>
            <ul style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
              <li>Click gate → "Warp To 0m" → arrive on grid</li>
              <li>Jump immediately (within activation range)</li>
              <li>Fastest possible travel</li>
              <li>Requires active player attention at each gate</li>
            </ul>
          </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(--accent)' }}>Autopilot</h4>
            <ul style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
              <li>Set route → activate autopilot</li>
              <li>Warps to 15km from each gate, approaches, jumps</li>
              <li>~30% slower than manual (extra approach time per gate)</li>
              <li>Vulnerable during gate approach (PvP risk in low/null)</li>
              <li>Can be cancelled at any time by clicking anywhere</li>
            </ul>
          </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-6)' }}>
          <span className="rounded-full bg-[rgba(240,160,48,0.08)] px-2 py-0.5 font-mono text-[0.7rem] text-accent">GP-TRAVEL-DB</span>
          <h2 style={{ margin: 0 }}>Backend Impact</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">
          <h4 style={{ marginBottom: 'var(--sp-4)' }}>Travel-Related State & Reducers</h4>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.82rem', color: 'var(--fg-dim)', lineHeight: 2 }}>
            <span style={{ color: 'var(--accent)' }}>ships</span> — add column: <code>travel_mode</code> (enum: idle / aligning / in_warp / gate_jump / sub_warp_approach / docked)<br/>
            <span style={{ color: 'var(--cyan)' }}>ships</span> — add column: <code>gate_cloak_until</code> (timestamp, null when not cloaked). 30s after gate jump.<br/>
            <span style={{ color: 'var(--green)' }}>ships</span> — add column: <code>undock_invuln_until</code> (timestamp, null when not active). 20s after undock.<br/>
            <span style={{ color: 'var(--purple)' }}>ships</span> — add column: <code>weapons_timer_until</code> (timestamp, null when not active). 60s after aggressive action.<br/>
            <span style={{ color: 'var(--red)' }}>ships</span> — add column: <code>jump_cooldown_until</code> (timestamp). 5s global per character after gate jump.<br/>
            <br/>
            <span style={{ color: 'var(--cyan)' }}>New reducer:</span> <code>warp_to(ship_id, target_system_entity_id, distance_km)</code> — validate not scrambled, begin align sequence.<br/>
            <span style={{ color: 'var(--green)' }}>New reducer:</span> <code>jump_gate(ship_id, gate_id)</code> — validate within 2,500m, validate no weapons timer, validate cooldown expired, execute jump.<br/>
            <span style={{ color: 'var(--accent)' }}>New reducer:</span> <code>dock(ship_id, station_id)</code> — validate within 500m, validate no weapons timer, set docked.<br/>
            <span style={{ color: 'var(--purple)' }}>New reducer:</span> <code>undock(ship_id)</code> — validate docked, place ship outside station, set 20s invulnerability.<br/>
            <span style={{ color: 'var(--fg)' }}>New reducer:</span> <code>set_autopilot(ship_id, route_id)</code> — begin automated route following.<br/>
            <span style={{ color: 'var(--red)' }}>New reducer:</span> <code>cancel_autopilot(ship_id)</code> — stop route following, resume idle.
          </div>
        </div>
      </>)}

      {/* ═══ WORLD EVENTS UX ═══ */}
      {activeTab === 'events' && (<>
        <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">GP-EVT</span>
          <h2 style={{ margin: 0 }}>World Event Player UX</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 player needs to see, understand, and act on world events without leaving their current activity.</strong>
          The backend pipeline (spawn → propagate → resolve → story log) is fully specified in the Dynamic Galaxy tab.
          This tab specifies the <em>player-facing surface</em>: how events appear, what information is shown, and how
          players interact with events in both Flight Mode and Station Mode.
        </div>

        <h3 style={{ marginBottom: 'var(--sp-4)' }}>Event Notification Tiers</h3>
        <p style={{ color: 'var(--fg-dim)', fontSize: '0.9rem', maxWidth: '680px', marginBottom: 'var(--sp-5)' }}>
          Not all events are equally urgent. The notification system uses three tiers that determine how aggressively
          the player is interrupted:
        </p>
        <div style={{ overflowX: 'auto', marginBottom: 'var(--sp-6)' }}>
          <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>Tier</th><th>Trigger</th><th>Flight Mode</th><th>Station Mode</th><th>Examples</th></tr>
            </thead>
            <tbody>
              {[
                { tier: '⚡ Critical', trigger: 'Event in current system, player directly affected', flight: 'HUD alert flash + audio ping + top-center banner. Pause-safe: combat continues but banner demands attention. Banner auto-dismisses after 10s or on click.', station: 'Modal dialog with event details + action buttons ("Warp to site"). Market panel may show price impact callout.', examples: 'Supernova warning, pirate raid on your station, faction invasion of your home system' },
                { tier: '📍 Nearby', trigger: 'Event in adjacent system or current region', flight: 'Side panel notification (slides in from right). No audio. Click to expand details. Dismisses when event resolves or player leaves region.', station: 'News feed sidebar item. Glowing dot on region map. Agent dialogue may reference it.', examples: 'Anomaly detected 2 jumps away, convoy departing nearby station, faction skirmish in adjacent constellation' },
                { tier: '📰 Background', trigger: 'Event anywhere in galaxy, not in player region', flight: 'Chat-style ticker in bottom-left corner. No interruption. Logged in story journal for later review.', station: 'Galaxy News tab in station UI. Story log entry. Price impact shown in market history charts.', examples: 'Distant faction war, migration route shift, station construction completed, cosmic catastrophe aftermath' },
              ].map((row, i) => (
                <tr key={i}>
                  <td style={{ fontWeight: 600, color: ['var(--red)', 'var(--accent)', 'var(--fg-dim)'][i] }}>{row.tier}</td>
                  <td style={{ color: 'var(--fg-dim)', fontSize: '0.82rem' }}>{row.trigger}</td>
                  <td style={{ color: 'var(--fg-dim)', fontSize: '0.82rem' }}>{row.flight}</td>
                  <td style={{ color: 'var(--fg-dim)', fontSize: '0.82rem' }}>{row.station}</td>
                  <td style={{ color: 'var(--fg-dim)', fontSize: '0.82rem' }}>{row.examples}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <h3 style={{ marginBottom: 'var(--sp-4)' }}>Event Detail Panel</h3>
        <p style={{ color: 'var(--fg-dim)', fontSize: '0.9rem', maxWidth: '680px', marginBottom: 'var(--sp-5)' }}>
          Clicking on any event notification opens the Event Detail Panel — a shared component used in both Flight and Station modes.
          The panel shows everything the player needs to decide whether and how to participate:
        </p>
        <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={{ marginBottom: 'var(--sp-5)' }}>
          <h4 style={{ marginBottom: 'var(--sp-4)' }}>Event Detail Panel Layout</h4>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.82rem', color: 'var(--fg-dim)', lineHeight: 2.2 }}>
            <span style={{ color: 'var(--red)' }}>Header:</span> Event icon + name + severity gauge (1–5 bar) + countdown timer to resolution/escalation<br/>
            <span style={{ color: 'var(--accent)' }}>Location:</span> System name + region + distance in jumps + security level of target system<br/>
            <span style={{ color: 'var(--cyan)' }}>Narrative:</span> 2–3 sentence in-universe description. "A Guristas raiding fleet has been spotted massing at the Ostingale gate. Local defense forces are overwhelmed."
            <br/>
            <span style={{ color: 'var(--green)' }}>Rewards:</span> Participation reward tier (bronze/silver/gold based on contribution). Expected ISK + LP. Special loot possibilities.<br/>
            <span style={{ color: 'var(--purple)' }}>Participants:</span> Live count of players at the event site. "12 pilots engaged" — signals competition or cooperation opportunity.<br/>
            <span style={{ color: 'var(--fg)' }}>Actions:</span> <code>[Warp to Site]</code> (if in-system) / <code>[Set Route]</code> (if distant) / <code>[Watch]</code> (track without participating) / <code>[Dismiss]</code><br/>
            <span style={{ color: 'var(--muted)' }}>History:</span> Collapsible log of event progression. "14:23 — First wave defeated. 14:31 — Boss spawned. 14:35 — CMDR Riker destroyed."
          </div>
        </div>

        <h3 style={{ marginBottom: 'var(--sp-4)' }}>Event Map Integration</h3>
        <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(--accent)' }}>
            <h4 style={{ color: 'var(--accent)' }}>System Map</h4>
            <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: '0 0 var(--sp-3) 0' }}>
              Events in the current system appear as pulsing icons at their location. Clicking an event icon on the map
              opens the Event Detail Panel. Active events have a glowing radius showing their area of effect.
              Resolved events fade to a dim marker for 5 minutes before disappearing.
            </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(--cyan)' }}>
            <h4 style={{ color: 'var(--cyan)' }}>Galaxy Map</h4>
            <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: '0 0 var(--sp-3) 0' }}>
              Events across all systems appear as icons on the galaxy map, sized by severity and colored by type.
              A filter sidebar lets players show/hide by type (faction conflict, anomaly, migration, catastrophe).
              Hover shows tooltip with event name + countdown. Click opens Event Detail Panel.
            </p>
          </div>
        </div>

        <h3 style={{ marginBottom: 'var(--sp-4)' }}>Event Participation & Contribution Tracking</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-5)' }}>
          <strong>Contribution determines reward.</strong> Players who arrive first and contribute most get the best rewards.
          This is tracked server-side and is resistant to AFK exploitation.
        </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)' }}>Contribution Metrics</h4>
            <ul style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
              <li><strong style={{ color: 'var(--fg)' }}>Damage dealt:</strong> to event NPCs (primary metric for combat events)</li>
              <li><strong style={{ color: 'var(--fg)' }}>Time on-site:</strong> must be present for ≥60s to qualify (anti-AFK)</li>
              <li><strong style={{ color: 'var(--fg)' }}>Logistics:</strong> remote repairs to other participants count at 80% of damage value</li>
              <li><strong style={{ color: 'var(--fg)' }}>Objective completion:</strong> hacking a can, mining a special asteroid, escorting the convoy</li>
              <li><strong style={{ color: 'var(--fg)' }}>Early arrival:</strong> first 5 participants get a 10% bonus (rewards information speed)</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(--accent)' }}>
            <h4 style={{ color: 'var(--accent)' }}>Reward Tiers</h4>
            <ul style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
              <li><span style={{ color: '#cd7f32' }}>Bronze:</span> Any contribution. 50% base reward. Common loot table.</li>
              <li><span style={{ color: '#c0c0c0' }}>Silver:</span> Top 50% contributors. 100% base reward + 100 LP. Uncommon loot table.</li>
              <li><span style={{ color: '#ffd700' }}>Gold:</span> Top 10% contributors. 200% base reward + 500 LP + rare loot. Name appears in story log.</li>
              <li><span style={{ color: 'var(--muted)' }}>AFK check:</span> If no client input for 90s while on event site, contribution pauses. Must take an action (module activate, move, target) to resume.</li>
            </ul>
          </div>
        </div>

        <h3 style={{ marginBottom: 'var(--sp-4)' }}>Story Log</h3>
        <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={{ marginBottom: 'var(--sp-5)' }}>
          <h4 style={{ marginBottom: 'var(--sp-4)' }}>Galaxy Story Log — The Server's History</h4>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.82rem', color: 'var(--fg-dim)', lineHeight: 2.2 }}>
            <span style={{ color: 'var(--cyan)' }}>Access:</span> Station Mode → Story Log tab. Also accessible from Galaxy Map sidebar.<br/>
            <span style={{ color: 'var(--accent)' }}>Format:</span> Chronological timeline of all events, filterable by region/type/era. Each entry has headline + body + timestamp + participants list.<br/>
            <span style={{ color: 'var(--green)' }}>Personal history:</span> A separate filter shows "Events I participated in" — the player's personal saga.<br/>
            <span style={{ color: 'var(--purple)' }}>Persistence:</span> Story log is permanent. Even years later, a player can look back at "the Battle of Jita" and see the full narrative.<br/>
            <span style={{ color: 'var(--fg)' }}>Search:</span> Full-text search across all entries. "What happened in Pure Blind last week?" → search results with highlighted entries.<br/>
            <span style={{ color: 'var(--muted)' }}>Export:</span> Copy link to any story log entry for sharing in chat. "Did you see [this]?" with a clickable link to the event.
          </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>Design intent:</strong> The event UX must feel like <em>news</em>, not like a quest log. Players should discover events naturally
          — through sensor alerts, chat rumors, price changes, or map icons — not through a mandatory event panel.
          The notification system provides <em>awareness</em>; the detail panel provides <em>information</em>; the decision to participate
          is always the player's choice. The best stories are the ones players tell each other: "You should have been at Jita yesterday —
          there was a massive Guristas raid and I scored a faction BPC from the gold tier."
        </div>
      </>)}

      {/* ═══ BALANCING AGENT ═══ */}
      {activeTab === 'balancer' && (<>
        <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">GP-BAL</span>
          <h2 style={{ margin: 0 }}>Balancing Agent — Adaptive Economy & PvE Control</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>This is at heart a PvE game.</strong> The environment has hostile elements — NPC pirates, faction raids,
          anomalies — that challenge players and drain resources. But a static PvE difficulty can't adapt to a changing player
          population or economy. The <strong>Balancing Agent</strong> is an automated system (similar to the world event agent) that
          monitors key economic and gameplay metrics and adjusts hostile encounter rates, ISK faucet rates, and difficulty
          to keep the game within healthy parameters. It is the invisible hand that keeps the galaxy challenging but fair.
        </div>

        <h3 style={{ marginBottom: 'var(--sp-4)' }}>Metrics Monitored</h3>
        <div style={{ overflowX: 'auto', marginBottom: 'var(--sp-6)' }}>
          <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>Metric</th><th>Source</th><th>Healthy Range</th><th>Tick Interval</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-green/25 bg-green/8 text-green">ISK Velocity</span></td>
                <td style={{ color: 'var(--fg-dim)' }}>Total ISK earned per player-hour (faucets)</td>
                <td className="font-mono tabular-nums">2,000–8,000 \u2262/hr</td>
                <td className="font-mono tabular-nums">15 min</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">Price Index</span></td>
                <td style={{ color: 'var(--fg-dim)' }}>Weighted basket of commodity prices vs. baseline</td>
                <td className="font-mono tabular-nums">0.85–1.15 (inflation-adjusted)</td>
                <td className="font-mono tabular-nums">30 min</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">Player Death Rate</span></td>
                <td style={{ color: 'var(--fg-dim)' }}>Ship destructions per active player per hour</td>
                <td className="font-mono tabular-nums">0.1–0.5 deaths/hr</td>
                <td className="font-mono tabular-nums">10 min</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">Faucet/Sink Ratio</span></td>
                <td style={{ color: 'var(--fg-dim)' }}>Total ISK created vs. destroyed per tick</td>
                <td className="font-mono tabular-nums">0.95–1.05 (near balance)</td>
                <td className="font-mono tabular-nums">30 min</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">Player Engagement</span></td>
                <td style={{ color: 'var(--fg-dim)' }}>Active players / total registered players</td>
                <td className="font-mono tabular-nums">&gt; 40%</td>
                <td className="font-mono tabular-nums">60 min</td>
              </tr>
            </tbody>
          </table>
        </div>

        <h3 style={{ marginBottom: 'var(--sp-4)' }}>Control Levers</h3>
        <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(--red)' }}>
            <h4 style={{ color: 'var(--red)' }}>NPC Spawn Rate Multiplier</h4>
            <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: '0 0 var(--sp-3) 0' }}>
              Adjusts the base spawn rate of NPC pirates across all security bands. If ISK velocity is too high
              (players are earning too fast), spawn rate increases to create more danger and ship losses.
              If players are dying too much, spawn rate decreases to ease pressure.
            </p>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem', color: 'var(--muted)' }}>
              Range: 0.5\u00d7–2.0\u00d7 · Applied per security band · Smooth transition (10% per tick)
            </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)' }}>NPC Difficulty Tier</h4>
            <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: '0 0 var(--sp-3) 0' }}>
              Shifts the NPC class distribution within each security band. Higher difficulty means more cruisers
              in low-sec instead of frigates. This affects bounty payouts (ISK faucet) and ship destruction rates (ISK sink via insurance).
            </p>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem', color: 'var(--muted)' }}>
              Range: \u22121 tier to +1 tier from baseline · Applied per region · Shifts over 6 ticks
            </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(--green)' }}>
            <h4 style={{ color: 'var(--green)' }}>ISK Faucet Multiplier</h4>
            <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: '0 0 var(--sp-3) 0' }}>
              Directly scales all ISK faucets: NPC bounties, mission rewards, insurance payouts.
              Used as a last resort when spawn rate and difficulty aren't enough. If the price index shows deflation
              (players can't afford ships), faucet multiplier increases. If inflating, it decreases.
            </p>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem', color: 'var(--muted)' }}>
              Range: 0.8\u00d7–1.2\u00d7 · Applied globally · Changed max once per 24h
            </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(--cyan)' }}>
            <h4 style={{ color: 'var(--cyan)' }}>World Event Frequency</h4>
            <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: '0 0 var(--sp-3) 0' }}>
              Controls how often world events spawn. More events = more ISK entering the economy (event rewards)
              and more engagement. Fewer events = calmer galaxy. Tied to engagement metric — if players are logging off,
              event frequency increases to create excitement.
            </p>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem', color: 'var(--muted)' }}>
              Range: 0.5\u00d7–1.5\u00d7 spawn weight · Applied per event type · Updated hourly
            </div>
          </div>
        </div>

        <h3 style={{ marginBottom: 'var(--sp-4)' }}>Agent Behavior</h3>
        <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={{ marginBottom: 'var(--sp-5)' }}>
          <h4 style={{ marginBottom: 'var(--sp-4)' }}>Balancing Agent Tick Pipeline</h4>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.82rem', color: 'var(--fg-dim)', lineHeight: 2.2 }}>
            <span style={{ color: 'var(--cyan)' }}>1. Collect metrics</span> — query ISK velocity, price index, death rate, faucet/sink ratio from SpacetimeDB aggregation tables<br/>
            <span style={{ color: 'var(--accent)' }}>2. Compare to thresholds</span> — each metric has a healthy range; deviations trigger adjustment signals<br/>
            <span style={{ color: 'var(--green)' }}>3. Weighted decision</span> — adjustments are weighted: spawn rate (40%), difficulty (30%), faucet multiplier (20%), events (10%)<br/>
            <span style={{ color: 'var(--purple)' }}>4. Smooth application</span> — changes apply gradually (10% per tick toward target) to avoid jarring player experience<br/>
            <span style={{ color: 'var(--red)' }}>5. Safety clamp</span> — all multipliers clamped to their ranges. If multiple metrics conflict, death rate takes priority (don't kill the newbies)<br/>
            <span style={{ color: 'var(--fg)' }}>6. Log intervention</span> — every adjustment is logged in a balance_audit table for developer review. No silent changes.
          </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" style={{ marginBottom: 'var(--sp-5)' }}>
          <strong>Visibility to players:</strong> The Balancing Agent is invisible by default. Players should never feel "the game
          is adjusting difficulty." However, observant players may notice that NPC spawns increase after a quiet period or that
          bounties are slightly lower during a gold rush. Zora may comment on market conditions ("NPC activity has been high
          in this region lately") without revealing the underlying mechanism. The agent is a safety net, not a theme park ride.
        </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">GP-BAL-DB</span>
          <h2 style={{ margin: 0 }}>Backend Impact</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">
          <h4 style={{ marginBottom: 'var(--sp-4)' }}>New Tables & Agent</h4>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.82rem', color: 'var(--fg-dim)', lineHeight: 2 }}>
            <span style={{ color: 'var(--accent)' }}>balance_metrics</span> — <code>metric_name, current_value, healthy_min, healthy_max, last_updated, trend (rising/falling/stable)</code><br/>
            <span style={{ color: 'var(--cyan)' }}>balance_levers</span> — <code>lever_name, current_multiplier, target_multiplier, clamp_min, clamp_max, last_adjusted_at</code><br/>
            <span style={{ color: 'var(--green)' }}>balance_audit</span> — <code>audit_id, tick_time, metrics_snapshot_json, adjustments_json, reason</code><br/>
            <br/>
            <span style={{ color: 'var(--red)' }}>New agent:</span> <code>balancing_tick</code> (fixed interval, 900s) — collects metrics, evaluates thresholds, adjusts levers, logs audit entry
          </div>
        </div>
      </>)}
    </div>
  );
}
