// @ts-nocheck
import * as React from 'react';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
export function ArchitecturePage() {
  return (
    <div className="mx-auto max-w-content">
      <h1 style={{ marginBottom: '8px' }}>Architecture Overview</h1>
      <p style={{ color: 'var(--fg-dim)', fontSize: '0.95rem', maxWidth: '680px' }}>
        <strong>Key principle:</strong> Local-first architecture for single-player narrative experience.
        The game client manages all state locally with persistent storage. Your story lives on your machine —
        no cloud required, no always-online, no subscriptions.
      </p>

      {/* Architecture diagram */}
      <div className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4" style={{ padding: 0, overflow: 'hidden', marginBottom: 'var(--sp-6)' }}>
        <div style={{ padding: 'var(--sp-3) var(--sp-4)', background: 'var(--surface-raised)', borderBottom: '1px solid var(--border)' }}>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: '0.7rem', color: 'var(--accent)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
            Layer Architecture
          </span>
        </div>
        <div style={{ padding: 'var(--sp-5)' }}>
          {[
            { name: 'React UI', color: 'var(--cyan)', desc: 'Inventory, market, station screens, ship status, debug panel. Owns UI layout and user workflow.' },
            { name: 'Local Stores', color: 'var(--green)', desc: 'Selected entity, active panels, camera preferences, filters, sorting. Zustand/React state.' },
            { name: 'Renderer Adapter', color: 'var(--purple)', desc: 'Receives view models and emits events: select, move, mine, dock. Boundary that keeps R3F replaceable.' },
            { name: 'R3F Scene', color: 'var(--accent)', desc: 'Ships, stations, asteroids, anomalies, camera, targeting lines. Visual layer only.' },
            { name: 'AI Story Director', color: 'var(--purple)', desc: 'Narrative engine that tracks player actions and generates story events. Weaves choices into saga.' },
            { name: 'Ship AI (Zora)', color: 'var(--purple)', desc: 'Companion AI system with soul state, module gates, and autonomous behavior. See Ship AI page.' },
            { name: 'Game Client', color: 'var(--red)', desc: 'Core game logic, state management, and local persistence. Source of truth.' },
            { name: 'Local Storage', color: 'var(--cyan)', desc: 'Persistent state survives restart. Ships, inventory, story log, faction relations.' },
          ].map((layer, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'stretch', gap: 'var(--sp-3)', marginBottom: i < 6 ? '2px' : 0 }}>
              <div style={{ width: '3px', background: layer.color, borderRadius: '2px', flexShrink: 0 }} />
              <div style={{ padding: 'var(--sp-2) 0', flex: 1, display: 'flex', gap: 'var(--sp-4)', alignItems: 'baseline' }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: '0.8rem', color: layer.color, minWidth: '140px', fontWeight: 600 }}>
                  {layer.name}
                </span>
                <span style={{ fontSize: '0.82rem', color: 'var(--fg-dim)' }}>{layer.desc}</span>
              </div>
            </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">ARCH-1</span>
        <h2 style={{ margin: 0 }}>Client Architecture</h2>
      </div>

      <h3>React UI Responsibilities</h3>
      <ul style={{ color: 'var(--fg-dim)', fontSize: '0.9rem', marginBottom: 'var(--sp-5)' }}>
        <li>Global shell, HUD layout, docking/station screens, and route-like page states.</li>
        <li>Inventory table, market orders table, selected target panel, ship status, system overview.</li>
        <li>User commands that trigger game actions: mine, dock, sell, place order.</li>
        <li>Local-only concerns: panel layout, sorting, filters, tabs, keyboard shortcuts, tooltips.</li>
      </ul>

      <h3>R3F Responsibilities</h3>
      <ul style={{ color: 'var(--fg-dim)', fontSize: '0.9rem', marginBottom: 'var(--sp-5)' }}>
        <li>Render star-system scene with ships, stations, asteroids, anomalies, and waypoints.</li>
        <li>Camera controls, entity picking, hover states, click-to-move command creation.</li>
        <li>Interpolated movement between state updates.</li>
        <li>Expose renderer events upward — never push game logic downward into the renderer.</li>
      </ul>

      <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">ARCH-2</span>
        <h2 style={{ margin: 0 }}>State Management Model</h2>
      </div>

      <table className="w-full border-collapse text-[0.85rem] max-md:block max-md:overflow-x-auto max-md:rounded-lg max-md:border max-md:border-border max-md:[&_thead]:table max-md:[&_tbody]:table max-md:[&_thead]:min-w-[680px] max-md:[&_tbody]:min-w-[680px] [&_th]:whitespace-nowrap [&_th]:border-b [&_th]:border-border [&_th]:px-4 [&_th]:py-3 [&_th]:text-left [&_th]:font-mono [&_th]:text-[0.7rem] [&_th]:uppercase [&_th]:tracking-[0.06em] [&_th]:text-muted [&_td]:border-b [&_td]:border-border [&_td]:px-4 [&_td]:py-3 [&_td]:font-mono [&_td]:text-[0.8rem] [&_td]:text-fg [&_tr:hover_td]:bg-surface-raised">
        <thead>
          <tr><th>State Type</th><th>Lives Where</th><th>Examples</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">Persistent</span></td>
            <td>Local storage</td>
            <td>Ship position, inventory, market orders, story log, faction relations.</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">Derived view</span></td>
            <td>Client game store</td>
            <td>Selected ship details, rendered position, distance to target.</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">Local UI</span></td>
            <td>Zustand/React state</td>
            <td>Open panels, sort order, camera zoom, modal visibility.</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">Transient visual</span></td>
            <td>Renderer internals</td>
            <td>Hover glow, particle lifetime, temporary path line.</td>
          </tr>
        </tbody>
      </table>

      <div className="mb-5 flex items-center gap-3 border-b border-border pb-3 max-md:flex-col max-md:items-start max-md:gap-2 max-md:[&_h1]:text-[1.35rem] max-md:[&_h2]:text-[1.35rem]'" style={{ marginTop: 'var(--sp-8)' }}>
        <span className="rounded-full bg-[rgba(240,160,48,0.08)] px-2 py-0.5 font-mono text-[0.7rem] text-accent">ARCH-3</span>
        <h2 style={{ margin: 0 }}>Session Persistence & Save/Load</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>There is no save button and no manual save/load.</strong>
        The game client persists state continuously — every action, position change, and story event is saved locally.
        "Saving" is not a player action; it's the natural consequence of playing the game.
        Closing the game and returning tomorrow restores you to exactly where you left off.
      </div>

      <h3 style={{ marginBottom: 'var(--sp-4)' }}>What Gets Persisted</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>Category</th><th>Data</th><th>Persistence Guarantee</th></tr>
          </thead>
          <tbody>
            {[
              { cat: 'Player Identity', tables: 'Captain name, skills, standing, story progress', guarantee: 'Permanent. Never lost.' },
              { cat: 'Ship State', tables: 'Position, fitting, AI companion state, cargo', guarantee: 'Permanent. If destroyed, death state persists until respawn.' },
              { cat: 'Economy', tables: 'Inventory items, market orders, manufacturing jobs', guarantee: 'Permanent. Items and orders survive restart.' },
              { cat: 'Navigation', tables: 'Bookmarks, waypoints', guarantee: 'Permanent. Saved locations survive indefinitely.' },
              { cat: 'Story Log', tables: 'AI Story events, discoveries, choices, faction relations', guarantee: 'Permanent. Your saga is preserved.' },
              { cat: 'World State', tables: 'Factions, world events, galaxy state', guarantee: 'Saved with your campaign. Continues where you left off.' },
            ].map((row, i) => (
              <tr key={i}>
                <td style={{ fontWeight: 600, color: 'var(--fg)' }}>{row.cat}</td>
                <td style={{ fontSize: '0.8rem', color: 'var(--cyan)', fontFamily: 'var(--font-mono)' }}>{row.tables}</td>
                <td style={{ color: 'var(--fg-dim)', fontSize: '0.82rem' }}>{row.guarantee}</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)' }}>What Does NOT Persist</h4>
          <ul style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
            <li><strong style={{ color: 'var(--fg)' }}>UI layout:</strong> Panel positions, sorting preferences, open tabs. These reset on reload.</li>
            <li><strong style={{ color: 'var(--fg)' }}>Camera state:</strong> Zoom level, orbit angle. Reset to default on load.</li>
            <li><strong style={{ color: 'var(--fg)' }}>In-progress inputs:</strong> Half-typed messages, unfinalized orders. Lost on exit.</li>
            <li><strong style={{ color: 'var(--fg)' }}>Transient effects:</strong> Active weapon animations, explosion particles. Visual only.</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(--purple)' }}>
          <h4 style={{ color: 'var(--purple)' }}>Story-Driven Persistence</h4>
          <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: '0 0 var(--sp-3) 0' }}>
            Every choice you make feeds the AI Story Director. Your discoveries, alliances, conflicts, and triumphs
            are woven into an ongoing narrative that persists across sessions. The story log is your personal
            chronicle — preserved locally, always accessible, never lost.
          </p>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.72rem', color: 'var(--muted)' }}>
            "Come back tomorrow" continues your story where you left off.
          </div>
        </div>
      </div>

      <div className="mb-5 rounded-lg px-5 py-4 text-[0.85rem] leading-[1.5] border border-cyan/20 bg-cyan/8 text-cyan" style={{ marginBottom: 'var(--sp-6)' }}>
        <strong>Future multiplayer considerations:</strong> If multiplayer servers are added post-V1, the architecture will
        extend to support remote state synchronization. The single-player foundation ensures all systems work locally first —
        multiplayer would be an optional enhancement, not a requirement.
      </div>

      {/* ═══ SOUND & AUDIO ═══ */}

      <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">ARCH-4</span>
        <h2 style={{ margin: 0 }}>Sound & Audio Design</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>Audio reinforces the narrative.</strong> Sound design serves three purposes: (1) information delivery — alerts,
        status changes, notifications; (2) atmosphere — ambient space sounds that make the galaxy feel alive;
        (3) feedback — clicks, confirmations, and sounds that make actions feel satisfying. Audio is always optional.
      </div>

      <h3 style={{ marginBottom: 'var(--sp-4)' }}>Audio Categories</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>Category</th><th>Purpose</th><th>Examples</th></tr>
          </thead>
          <tbody>
            {[
              { cat: 'Alerts', purpose: 'Critical state changes', examples: 'Shields low, target lock, incoming damage, story event notification' },
              { cat: 'UI Feedback', purpose: 'Confirm player actions', examples: 'Order placed, module fitted, skill leveled, ISK received' },
              { cat: 'Ambient', purpose: 'Atmosphere and immersion', examples: 'Station hum (docked), solar wind, mining laser, warp tunnel' },
              { cat: 'Combat', purpose: 'Combat state feedback', examples: 'Weapon firing, shield hit, armor hit, capacitor warning' },
              { cat: 'Story Events', purpose: 'Narrative moments', examples: 'Discovery ping, faction broadcast, AI Story Director narration' },
              { cat: 'Voice', purpose: 'Character dialogue', examples: 'Zora responses, NPC agent dialogue, story narration' },
            ].map((row, i) => (
              <tr key={i}>
                <td style={{ fontWeight: 600, color: 'var(--fg)' }}>{row.cat}</td>
                <td style={{ color: 'var(--fg-dim)', fontSize: '0.82rem' }}>{row.purpose}</td>
                <td style={{ color: 'var(--fg-dim)', fontSize: '0.82rem' }}>{row.examples}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* ═══ LOCALIZATION ═══ */}

      <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">ARCH-5</span>
        <h2 style={{ margin: 0 }}>Localization & Internationalization</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>MVP is English-only with day-one i18n architecture.</strong> Adding languages post-launch should require translators
        and asset work, not code changes. All user-facing strings flow through a lookup layer from day one.
      </div>

      <div className="grid grid-cols-2 gap-5 max-[900px]:grid-cols-1" style={{ marginBottom: 'var(--sp-6)' }}>
        <div className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4" style={{ borderLeft: '3px solid var(--cyan)' }}>
          <h4 style={{ color: 'var(--cyan)' }}>i18n Architecture</h4>
          <ul style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
            <li><strong style={{ color: 'var(--fg)' }}>String keys:</strong> All user-facing text uses lookup keys: <code>t("market.order.placed")</code></li>
            <li><strong style={{ color: 'var(--fg)' }}>Number formatting:</strong> ISK values use <code>Intl.NumberFormat</code></li>
            <li><strong style={{ color: 'var(--fg)' }}>Date/time:</strong> Timestamps use <code>Intl.DateTimeFormat</code></li>
            <li><strong style={{ color: 'var(--fg)' }}>Pluralization:</strong> ICU message format for count-aware strings</li>
            <li><strong style={{ color: 'var(--fg)' }}>Layout:</strong> CSS flexbox/grid with logical properties for RTL readiness</li>
          </ul>
        </div>
        <div className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4" style={{ borderLeft: '3px solid var(--green)' }}>
          <h4 style={{ color: 'var(--green)' }}>Post-MVP Priority</h4>
          <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: '0 0 var(--sp-3) 0' }}>
            First languages after English determined by player population. Estimated effort per language:
            1–2 weeks for translation + 2–3 days for QA with RTL layout testing if applicable.
          </p>
        </div>
      </div>

      {/* ═══ ACCESSIBILITY ═══ */}

      <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">ARCH-6</span>
        <h2 style={{ margin: 0 }}>Accessibility</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>A narrative-driven game should be the most accessible genre.</strong>
        Reading tables, managing numbers, and clicking buttons — activities browsers excel at supporting.
        The following accessibility targets are baseline requirements.
      </div>

      <h3 style={{ marginBottom: 'var(--sp-4)' }}>Accessibility Requirements</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>Area</th><th>Requirement</th></tr>
          </thead>
          <tbody>
            {[
              { area: 'Color Blindness', req: 'All color-coded information has secondary indicator (icon, label, shape)' },
              { area: 'Keyboard Navigation', req: 'Every action reachable by keyboard. Tab order, Enter, Escape, arrow keys' },
              { area: 'Screen Reader', req: 'All panels and data tables announce state changes. ARIA labels on interactive elements' },
              { area: 'Text Scaling', req: 'UI remains usable at 200% browser zoom. All layouts use responsive sizing' },
              { area: 'Reduced Motion', req: 'Respect prefers-reduced-motion. Disable animations when requested' },
              { area: 'Contrast', req: 'All text meets WCAG AA contrast ratio (4.5:1 for normal text)' },
              { area: 'Cognitive Load', req: 'Collapsible panels. Summary vs detail view. Tutorial hints can be disabled' },
            ].map((row, i) => (
              <tr key={i}>
                <td style={{ fontWeight: 600, color: 'var(--fg)' }}>{row.area}</td>
                <td style={{ color: 'var(--fg-dim)', fontSize: '0.82rem' }}>{row.req}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* ═══ MOVEMENT & COLLISION ═══ */}

      <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">ARCH-7</span>
        <h2 style={{ margin: 0 }}>Movement & Collision (No Physics Engine)</h2>
      </div>

      <div className="mb-5 rounded-lg px-5 py-4 text-[0.85rem] leading-[1.5] border border-cyan/20 bg-cyan/8 text-cyan" style={{ marginBottom: 'var(--sp-5)' }}>
        <strong>Decision:</strong> The Bevy game client uses hand-rolled kinematic movement and distance-based collision.
        We do <strong>not</strong> use a physics engine — movement is point-and-shoot, not rigid bodies.
      </div>

      <div className="grid grid-cols-2 gap-5 max-[900px]:grid-cols-1" style={{ marginBottom: 'var(--sp-6)' }}>
        <div className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4" style={{ borderLeft: '3px solid var(--cyan)' }}>
          <h4 style={{ color: 'var(--cyan)' }}>Why No Physics Engine</h4>
          <ul style={{ color: 'var(--fg-dim)', fontSize: '0.82rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
            <li>Native to FTL/Windward style — point-and-shoot, not rigid bodies</li>
            <li>Arcade feel — drag, snap turns, no unwanted inertia</li>
            <li>Zero compile time and binary size overhead</li>
            <li>Trivial determinism — linear math, no solver iterations</li>
            <li>Smaller bug surface — ~50 lines you wrote vs tens of thousands you didn't</li>
          </ul>
        </div>
        <div className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4" style={{ borderLeft: '3px solid var(--green)' }}>
          <h4 style={{ color: 'var(--green)' }}>What Physics Means Here</h4>
          <ul style={{ color: 'var(--fg-dim)', fontSize: '0.82rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
            <li>Ship traversal: <code>pos += velocity * dt</code></li>
            <li>Projectiles vs ships: Distance check <code>‖a − b‖ &lt; r_a + r_b</code></li>
            <li>Targeting: Ray-circle intersection</li>
            <li>Separation: Push apart by overlap distance</li>
            <li>Triggers: Distance check for docking/proximity</li>
          </ul>
        </div>
      </div>

    </div>
  );
}
