// @ts-nocheck
import * as React from 'react';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
export function SocialPage() {
  const [activeSection, setActiveSection] = React.useState('progression');

  const skillCategories = [
    {
      name: 'Combat',
      color: 'var(--red)',
      skills: ['Gunnery', 'Missiles', 'Shield Operation', 'Armor Tanking', 'Electronic Warfare'],
      xpSource: 'Dealing damage, destroying NPCs, completing combat missions',
    },
    {
      name: 'Industry',
      color: 'var(--accent)',
      skills: ['Mining', 'Refining', 'Manufacturing', 'Blueprint Research', 'Resource Processing'],
      xpSource: 'Mining cycles, refining batches, manufactured items, research jobs',
    },
    {
      name: 'Navigation',
      color: 'var(--cyan)',
      skills: ['Warp Drive Operation', 'Afterburner', 'Evasive Maneuvering', 'Capital Navigation'],
      xpSource: 'Distance warped, systems visited, successful evasion from combat',
    },
    {
      name: 'Trade',
      color: 'var(--green)',
      skills: ['Market Analysis', 'Broker Relations', 'Hauling', 'Contracting', 'Regional Trading'],
      xpSource: 'Completed trades, market orders filled, cargo hauled between systems',
    },
    {
      name: 'Leadership',
      color: 'var(--purple)',
      skills: ['Leadership', 'Navigation Mastery', 'AI Coordination', 'Crew Management'],
      xpSource: 'Solo exploration, AI crew task completions, challenging encounters',
    },
  ];

  const chatChannels = [
    { name: 'Local', range: 'Current system', delay: 'Instant', description: 'Everyone in the same star system sees messages immediately. Core social channel.', color: 'var(--fg-bright)' },
    { name: 'Private Message', range: 'Based on distance', delay: 'Light-speed delayed', description: 'Direct messages to another player. Messages arrive after a delay proportional to light-years between systems. Across the galaxy = minutes of delay.', color: 'var(--cyan)' },
    { name: 'Trade', range: 'Station / Region', delay: 'Instant at station, delayed region-wide', description: 'Buy/sell offers, price checks, trade negotiations. Station-local is instant; regional relay has a 30s delay.', color: 'var(--green)' },
  ];

  const bountyTiers = [
    { tier: 'Petty', threshold: '500 ISK', reward: '10% of bounty', visibility: 'Current system only', color: 'var(--muted)' },
    { tier: 'Standard', threshold: '5,000 ISK', reward: '15% of bounty', visibility: 'Current region (constellation cluster)', color: 'var(--cyan)' },
    { tier: 'Dangerous', threshold: '50,000 ISK', reward: '20% of bounty + kill bonus', visibility: 'All regions (galaxy-wide board)', color: 'var(--accent)' },
    { tier: 'Most Wanted', threshold: '500,000 ISK', reward: '25% + unique cosmetic reward', visibility: 'Galaxy-wide + leaderboard', color: 'var(--red)' },
  ];

  return (
    <div className="mx-auto max-w-content">
      <h1 style={{ marginBottom: '8px' }}>Progression & World</h1>
      <p style={{ color: 'var(--fg-dim)', fontSize: '0.95rem', maxWidth: '680px' }}>
        XP-based progression across five skill categories gives your captain measurable growth. Chat, bounty, and corporation features are designed for optional co-op servers — they enrich the multiplayer experience but are not part of the core solo adventure. Designed for ~3-hour play sessions with meaningful progression per session.
      </p>

      {/* Tab navigation */}
      <div style={{ display: 'flex', gap: 'var(--sp-2)', marginBottom: 'var(--sp-6)' }}>
        {[
          { id: 'progression', label: 'XP & Skills' },
          { id: 'chat', label: 'Chat (Co-op)' },
          { id: 'bounty', label: 'Bounty (Co-op)' },
          { id: 'waypoints', label: 'Waypoints' },
          { id: 'corps', label: 'Crews (Co-op)' },
        ].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]${activeSection === t.id ? ' border-accent bg-accent font-semibold text-bg hover:bg-accent-hover' : ''}`}
            onClick={() => setActiveSection(t.id)}>{t.label}</button>
        ))}
      </div>

      {/* PROGRESSION */}
      {activeSection === 'progression' && (
        <>
          <div className="mb-6 grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-4">
            <div className="rounded-xl border border-border bg-surface p-5 max-md:rounded-lg max-md:p-4">
              <div className="font-mono text-[1.6rem] font-bold tabular-nums text-fg-bright" style={{ color: 'var(--accent)' }}>Action-based</div>
              <div className="mt-1 text-[0.75rem] uppercase tracking-[0.05em] text-muted">XP Model</div>
            </div>
            <div className="rounded-xl border border-border bg-surface p-5 max-md:rounded-lg max-md:p-4">
              <div className="font-mono text-[1.6rem] font-bold tabular-nums text-fg-bright" style={{ color: 'var(--cyan)' }}>5 Categories</div>
              <div className="mt-1 text-[0.75rem] uppercase tracking-[0.05em] text-muted">Skill Trees</div>
            </div>
            <div className="rounded-xl border border-border bg-surface p-5 max-md:rounded-lg max-md:p-4">
              <div className="font-mono text-[1.6rem] font-bold tabular-nums text-fg-bright" style={{ color: 'var(--green)' }}>~3 hours</div>
              <div className="mt-1 text-[0.75rem] uppercase tracking-[0.05em] text-muted">Session Target</div>
            </div>
            <div className="rounded-xl border border-border bg-surface p-5 max-md:rounded-lg max-md:p-4">
              <div className="font-mono text-[1.6rem] font-bold tabular-nums text-fg-bright" style={{ color: 'var(--purple)' }}>V Levels</div>
              <div className="mt-1 text-[0.75rem] uppercase tracking-[0.05em] text-muted">Per Skill</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-5)' }}>
            <strong>Design intent:</strong> XP comes from doing things, not waiting. A 3-hour mining session
            should unlock at least one meaningful skill upgrade. Combat and trade have comparable XP rates
            so no playstyle feels punished.
          </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">SOC-SKL</span>
            <h2 style={{ margin: 0 }}>Skill Categories</h2>
          </div>

          {skillCategories.map((cat, 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 ${cat.color}`, marginBottom: 'var(--sp-4)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--sp-3)', marginBottom: 'var(--sp-3)' }}>
                <h4 style={{ color: cat.color, margin: 0 }}>{cat.name}</h4>
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--sp-1)', marginBottom: 'var(--sp-3)' }}>
                {cat.skills.map((s, j) => (
                  <span key={j} className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem]" style={{ background: 'var(--surface-raised)', color: cat.color, border: `1px solid ${cat.color}40`, fontSize: '0.7rem' }}>
                    {s}
                  </span>
                ))}
              </div>
              <div style={{ fontSize: '0.82rem', color: 'var(--fg-dim)' }}>
                <strong style={{ color: 'var(--muted)' }}>XP source:</strong> {cat.xpSource}
              </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">SOC-LVL</span>
            <h2 style={{ margin: 0 }}>Level Progression</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)' }}>XP Curve (per skill)</h4>
            <div style={{ overflowX: 'auto' }}>
              <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>Cumulative XP</th>
                    <th>Approx. Active Play</th>
                    <th>Typical Unlock</th>
                  </tr>
                </thead>
                <tbody>
                  <tr><td style={{ color: 'var(--muted)' }}>I</td><td className="font-mono tabular-nums">100</td><td className="font-mono tabular-nums">~15 min</td><td style={{ color: 'var(--fg-dim)' }}>Basic modules, rookie ships</td></tr>
                  <tr><td style={{ color: 'var(--green)' }}>II</td><td className="font-mono tabular-nums">500</td><td className="font-mono tabular-nums">~1 hour</td><td style={{ color: 'var(--fg-dim)' }}>Standard modules, refining</td></tr>
                  <tr><td style={{ color: 'var(--cyan)' }}>III</td><td className="font-mono tabular-nums">2,000</td><td className="font-mono tabular-nums">~3 hours</td><td style={{ color: 'var(--fg-dim)' }}>T2 modules, cruisers, manufacturing</td></tr>
                  <tr><td style={{ color: 'var(--purple)' }}>IV</td><td className="font-mono tabular-nums">8,000</td><td className="font-mono tabular-nums">~8 hours</td><td style={{ color: 'var(--fg-dim)' }}>Advanced fittings, battlecruisers</td></tr>
                  <tr><td style={{ color: 'var(--accent)' }}>V</td><td className="font-mono tabular-nums">32,000</td><td className="font-mono tabular-nums">~20 hours</td><td style={{ color: 'var(--fg-dim)' }}>Battleships, T2 ships, mastery</td></tr>
                </tbody>
              </table>
            </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">SOC-RESPEC</span>
            <h2 style={{ margin: 0 }}>Respec (Skill Reallocation)</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>Mistakes should be fixable, but not free.</strong> Players can reallocate (respec) their skill points,
            returning XP from one skill and applying it to another. This prevents permanent lock-in from early uninformed
            decisions while making frequent respeccing uneconomical.
          </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)' }}>Respec Mechanics</h4>
              <ul style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
                <li><strong style={{ color: 'var(--fg)' }}>Cost:</strong> 20% XP penalty on reallocated points. Respeccing 1,000 XP returns 800 XP to redistribute.</li>
                <li><strong style={{ color: 'var(--fg)' }}>Cooldown:</strong> 7 real-world days between respeccs. Cannot be bypassed.</li>
                <li><strong style={{ color: 'var(--fg)' }}>Scope:</strong> Full respec (all skills) or single-skill respec. Full respec costs 30% instead of 20%.</li>
                <li><strong style={{ color: 'var(--fg)' }}>Location:</strong> Must be docked at a station with a "Neural Remapping" facility (not all stations have this).</li>
                <li><strong style={{ color: 'var(--fg)' }}>Preview:</strong> Before confirming, the respec UI shows the exact XP loss and resulting skill levels. No surprises.</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)' }}>Design Rationale</h4>
              <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: '0 0 var(--sp-3) 0' }}>
                The 20% cost ensures that respeccing is a meaningful decision, not a free toggle. A player who respeccs
                from Mining to Gunnery loses 200 of their 1,000 mining XP — they can try combat, but they've paid for the
                privilege. The cooldown prevents rapid role-switching and preserves the value of specialization.
                Players who plan their skill progression carefully are rewarded with more total XP than those who respec frequently.
              </p>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.72rem', color: 'var(--muted)' }}>
                Example: Mining III (2,000 XP) \u2192 respec \u2192 receive 1,600 XP \u2192 invest in Gunnery (now Gunnery II at 500 XP + 1,100 banked)
              </div>
            </div>
          </div>
        </>
      )}

      {/* CHAT & COMMS */}
      {activeSection === 'chat' && (
        <>
          <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">SOC-COM</span>
            <h2 style={{ margin: 0 }}>Communication System</h2>
          </div>

          <p style={{ color: 'var(--fg-dim)', fontSize: '0.9rem', maxWidth: '680px', marginBottom: 'var(--sp-5)' }}>
            Communication range is physical — messages travel at light speed. Local chat in the same system
            is instant. Private messages to someone across the galaxy are delayed by minutes. This creates
            meaningful tactical information asymmetry and makes relay networks valuable.
          </p>

          {chatChannels.map((ch, 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 ${ch.color}`, marginBottom: 'var(--sp-4)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--sp-3)', marginBottom: 'var(--sp-3)' }}>
                <h4 style={{ color: ch.color, margin: 0 }}>{ch.name}</h4>
                <span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem]" style={{ background: 'var(--surface-raised)', color: 'var(--fg-dim)', border: '1px solid var(--border)', fontSize: '0.7rem' }}>
                  {ch.range}
                </span>
              </div>
              <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: '0 0 var(--sp-2) 0' }}>{ch.description}</p>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem', color: 'var(--muted)' }}>
                Delay: {ch.delay}
              </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">SOC-PHYS</span>
            <h2 style={{ margin: 0 }}>Light-Speed Delay Mechanics</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)' }}>Message Travel Time</h4>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.82rem', color: 'var(--fg-dim)', lineHeight: 2 }}>
              <strong style={{ color: 'var(--fg)' }}>Same system:</strong> 0s (quantum relay)<br/>
              <strong style={{ color: 'var(--fg)' }}>Adjacent system (1 gate):</strong> ~2s<br/>
              <strong style={{ color: 'var(--fg)' }}>5 jumps:</strong> ~10s<br/>
              <strong style={{ color: 'var(--fg)' }}>20 jumps:</strong> ~45s<br/>
              <strong style={{ color: 'var(--fg)' }}>Across galaxy:</strong> ~2–3 minutes<br/>
              <br/>
              <span style={{ color: 'var(--muted)' }}>Formula: baseDelay × sqrt(gateDistance) × 2s</span>
            </div>
          </div>

          <div className="grid grid-cols-2 gap-5 max-[900px]:grid-cols-1" style={{ marginTop: '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)' }}>Strategic implications</h4>
              <ul style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
                <li>Fleet commanders near the front have better intel</li>
                <li>Market data is delayed — arbitrage exists between regions</li>
                <li>Distress calls from deep null-sec arrive minutes late</li>
                <li>Players can set up communication relay networks</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)' }}>Post-MVP channels</h4>
              <ul style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
                <li><strong>Corporation</strong> — instant for corp members (post-MVP)</li>
                <li><strong>Fleet</strong> — instant for fleet members (post-MVP)</li>
                <li><strong>Relay Beacons</strong> — player-placed structures that boost range</li>
                <li><strong>Alliance</strong> — meta-corp channels (far future)</li>
              </ul>
            </div>
          </div>
        </>
      )}

      {/* BOUNTY SYSTEM */}
      {activeSection === 'bounty' && (
        <>
          <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">SOC-BNT</span>
            <h2 style={{ margin: 0 }}>Bounty 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>Co-op server feature.</strong> The bounty system adds emergent player-driven dynamics when playing on shared servers. Not part of the solo adventure.
          </div>

          <p style={{ color: 'var(--fg-dim)', fontSize: '0.9rem', maxWidth: '680px', marginBottom: 'var(--sp-5)' }}>
            On co-op servers, any player can place a bounty on another player. Bounties create consequences for piracy
            and emergent "space justice" dynamics. Higher bounties attract more bounty hunters and
            increase visibility across the galaxy.
          </p>

          <div style={{ overflowX: 'auto' }}>
            <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>Bounty Threshold</th><th>Hunter Reward</th><th>Visibility (Sector-Specific)</th></tr>
              </thead>
              <tbody>
                {bountyTiers.map((tier, i) => (
                  <tr key={i}>
                    <td><span className={`inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] ${i === 0 ? 'border border-green/25 bg-green/8 text-green' : i === 1 ? 'border border-cyan/25 bg-cyan/8 text-cyan' : i === 2 ? 'border border-[rgba(240,160,48,0.25)] bg-[rgba(240,160,48,0.08)] text-accent' : 'border border-red/25 bg-red/8 text-red'}`}>
                      {tier.tier}
                    </span></td>
                    <td className="font-mono tabular-nums">{tier.threshold}</td>
                    <td style={{ color: 'var(--fg-dim)' }}>{tier.reward}</td>
                    <td style={{ color: tier.color }}>{tier.visibility}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <div className="grid grid-cols-2 gap-5 max-[900px]:grid-cols-1" style={{ marginTop: '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)' }}>How bounties work</h4>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.82rem', color: 'var(--fg-dim)', lineHeight: 2 }}>
                1. Player A places bounty on Player B (ISK deducted immediately)<br/>
                2. Bounty pool accumulates — multiple players can contribute<br/>
                3. When Player B's ship is destroyed, bounty pays out<br/>
                4. Payout = percentage of bounty pool based on tier<br/>
                5. Killer gets the reward; remaining pool stays active<br/>
                6. If Player B stays clean for 30 days, bounty decays 10%/week
              </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)' }}>Anti-abuse rules</h4>
              <ul style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
                <li>You cannot claim your own bounty (alt check)</li>
                <li>Bounty payout never exceeds ship loss value</li>
                <li>Minimum bounty placement: 500 ISK (prevents spam)</li>
                <li>Bounty target must have negative security status or have committed a hostile act in the last 24h (<em>see Gameplay → Security Levels</em>)</li>
                <li>Kill feed shows bounty collected, not total pool</li>
              </ul>
            </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={{ marginTop: 'var(--sp-5)' }}>
            <strong>Sector-specific bounties:</strong> Bounty visibility is sector-based, not galaxy-wide by default. A petty bounty
            in Jita is invisible in Amarr. This means a pirate can be hunted in one region while operating freely in another.
            Only Dangerous and Most Wanted bounties propagate galaxy-wide. This creates regional justice ecosystems and
            makes bounty hunting a localized profession rather than a galaxy-wide pursuit.
          </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-4)' }}>
            <strong>Kill feed:</strong> A galaxy-wide feed shows ship destruction events with pilot names,
            ship types, system, and bounty collected. This creates reputation dynamics and emergent
            storylines — "CMDR Worf has been destroyed in O-WAMW, 45,000 ISK bounty collected."
          </div>
        </>
      )}

      {/* WAYPOINTS */}
      {activeSection === 'waypoints' && (
        <>
          <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">SOC-NAV</span>
            <h2 style={{ margin: 0 }}>Waypoints & Bookmarks</h2>
          </div>

          <p style={{ color: 'var(--fg-dim)', fontSize: '0.9rem', maxWidth: '680px', marginBottom: 'var(--sp-5)' }}>
            Players can bookmark arbitrary locations in space and create waypoint routes for navigation.
            Bookmarks are personal; waypoints can be shared. Fleet beacons are visible to all fleet members
            and create tactical rally points.
          </p>

          <div className="grid grid-cols-2 gap-5 max-[900px]:grid-cols-1">
            <div className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4" style={{ borderLeft: '3px solid var(--accent)' }}>
              <h4 style={{ color: 'var(--accent)' }}>Bookmarks</h4>
              <ul style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
                <li>Save any point in space as a named bookmark</li>
                <li>Personal — only you see them</li>
                <li>Can warp to any bookmark (if in range)</li>
                <li>Used for: safe spots, mining positions, ambush points, salvage sites</li>
                <li>Storage limit: 100 bookmarks per player (MVP)</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)' }}>Waypoints & Routes</h4>
              <ul style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
                <li>Create multi-stop routes through star systems</li>
                <li>Autopilot follows route automatically (slower than manual)</li>
                <li>Route avoids low-sec if preference set</li>
                <li>Share routes with other players (trade routes, patrol paths)</li>
                <li>Optimize for: shortest, safest, or most profitable</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)' }}>Fleet Beacons</h4>
              <ul style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
                <li>Visible to all fleet members on star map</li>
                <li>Create rally points and tactical positions</li>
                <li>Any fleet member can create a beacon</li>
                <li>Beacons expire after 1 hour or when creator leaves fleet</li>
                <li>Post-MVP feature — designed into data model now</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)' }}>Map Annotations</h4>
              <ul style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
                <li>Mark systems with notes ("pirate camp", "good mining", "friendly station")</li>
                <li>Notes visible on star map hover</li>
                <li>Statistics overlay: jumps/hour, ship kills, pod kills</li>
                <li>Color-code systems by danger level or personal preference</li>
                <li>Export/import annotations for sharing</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">SOC-DB</span>
            <h2 style={{ margin: 0 }}>Backend Tables (New)</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)', fontSize: '0.82rem' }}>
            <strong>Canonical location:</strong> These tables are also listed in the <em>Backend → Tables</em> tab, which serves as the master schema reference. The definitions here include Social-specific context.
          </div>

          <div style={{ overflowX: 'auto' }}>
            <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>Table</th><th>Purpose</th><th>Key Fields</th></tr></thead>
              <tbody>
                <tr>
                  <td><code>bookmarks</code></td>
                  <td style={{ color: 'var(--fg-dim)' }}>Player-saved locations</td>
                  <td style={{ fontSize: '0.75rem', color: 'var(--muted)' }}>bookmark_id, player_id, system_id, x/y/z, name, created_at</td>
                </tr>
                <tr>
                  <td><code>waypoints</code></td>
                  <td style={{ color: 'var(--fg-dim)' }}>Multi-stop routes</td>
                  <td style={{ fontSize: '0.75rem', color: 'var(--muted)' }}>route_id, player_id, stops (ordered system list), name, shared</td>
                </tr>
                <tr>
                  <td><code>bounties</code></td>
                  <td style={{ color: 'var(--fg-dim)' }}>Bounty pool per target</td>
                  <td style={{ fontSize: '0.75rem', color: 'var(--muted)' }}>target_player_id, total_pool, tier, last_hostile_act</td>
                </tr>
                <tr>
                  <td><code>bounty_contributions</code></td>
                  <td style={{ color: 'var(--fg-dim)' }}>Individual bounty payments</td>
                  <td style={{ fontSize: '0.75rem', color: 'var(--muted)' }}>contribution_id, target_id, contributor_id, amount, timestamp</td>
                </tr>
                <tr>
                  <td><code>kill_feed</code></td>
                  <td style={{ color: 'var(--fg-dim)' }}>Ship destruction events</td>
                  <td style={{ fontSize: '0.75rem', color: 'var(--muted)' }}>kill_id, victim_id, killer_id, ship_type, system_id, bounty_collected, timestamp</td>
                </tr>
                <tr>
                  <td><code>player_skills</code></td>
                  <td style={{ color: 'var(--fg-dim)' }}>XP and levels per skill</td>
                  <td style={{ fontSize: '0.75rem', color: 'var(--muted)' }}>player_id, skill_name, xp, level, last_action_at</td>
                </tr>
                <tr>
                  <td><code>fleet_beacons</code></td>
                  <td style={{ color: 'var(--fg-dim)' }}>Temporary fleet rally points</td>
                  <td style={{ fontSize: '0.75rem', color: 'var(--muted)' }}>beacon_id, fleet_id, creator_id, system_id, x/y/z, expires_at</td>
                </tr>
              </tbody>
            </table>
          </div>
        </>
      )}
      {/* CORPORATIONS & TERRITORY */}
      {activeSection === 'corps' && (<>
        <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">SOC-CORP</span>
          <h2 style={{ margin: 0 }}>Crews & Shared Progress</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>Optional co-op feature — designed now, implemented if co-op servers are added.</strong>
          Corporations ("corps") are player organizations: persistent groups with shared wallets, hangars, roles,
          and territory claims. They are the endgame social structure — the reason players stay for years. This spec
          establishes the design direction so the backend schema can accommodate it without breaking changes.
          Implementation details may evolve, but the core model is fixed.
        </div>

        <h3 style={{ marginBottom: 'var(--sp-4)' }}>Corporation Lifecycle</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(--cyan)' }}>1. Found</span> — Any player pays 1,000,000 ₢ founding fee. Chooses name + ticker (3–5 chars). Becomes CEO. Minimum 1 member.
            <br/>
            <span style={{ color: 'var(--green)' }}>2. Recruit</span> — CEO (or Director) sends invite. Player accepts. Member appears on corp roster. Corp chat channel auto-created.
            <br/>
            <span style={{ color: 'var(--accent)' }}>3. Operate</span> — Members contribute to corp wallet (ISK tax on bounties/missions, optional). Shared hangar at corp HQ station. Roles control access.
            <br/>
            <span style={{ color: 'var(--purple)' }}>4. Claim</span> — Corp anchors a structure in a null-sec system. Structure asserts sovereignty. System shows on sov map as corp territory.
            <br/>
            <span style={{ color: 'var(--red)' }}>5. Defend</span> — Rival corps can contest sovereignty. Structure has a vulnerability window (CEO-configured, 4h/day). During vulnerability, structure can be attacked.
            <br/>
            <span style={{ color: 'var(--fg)' }}>6. Dissolve</span> — If CEO disbands or corp drops below 3 members for 14 days, corp dissolves. Assets liquidated to CEO wallet. Territory unclaimed.
          </div>
        </div>

        <h3 style={{ marginBottom: 'var(--sp-4)' }}>Corporation Roles</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>Role</th><th>Permissions</th><th>Assignment</th></tr>
            </thead>
            <tbody>
              {[
                { role: 'CEO', perms: 'All permissions. Can disband corp. Can transfer CEO role. Cannot be kicked.', assignment: 'Founder (auto). Transferable.' },
                { role: 'Director', perms: 'Invite/kick members, manage roles, corp wallet full access, anchor/destroy structures, set tax rate, configure vulnerability window.', assignment: 'Appointed by CEO or other Directors.' },
                { role: 'Accountant', perms: 'View corp wallet history. Pay bills. Set market orders from corp funds. Cannot withdraw ISK.', assignment: 'Appointed by Director+.' },
                { role: 'Pilot', perms: 'Access corp hangar (configured per station). Use corp fittings. Join corp fleet.', assignment: 'Default role for new members.' },
                { role: 'Recruit', perms: 'Corp chat access. View roster. No hangar access. No wallet access.', assignment: 'Probationary role (optional, 7-day default). Auto-promotes to Pilot.' },
              ].map((row, i) => (
                <tr key={i}>
                  <td style={{ fontWeight: 600, color: ['var(--accent)', 'var(--cyan)', 'var(--green)', 'var(--purple)', 'var(--fg-dim)'][i] }}>{row.role}</td>
                  <td style={{ color: 'var(--fg-dim)', fontSize: '0.82rem' }}>{row.perms}</td>
                  <td style={{ color: 'var(--fg-dim)', fontSize: '0.82rem' }}>{row.assignment}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <h3 style={{ marginBottom: 'var(--sp-4)' }}>Corporation Wallet & Tax</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)' }}>Corp Wallet</h4>
            <ul style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
              <li>Shared ISK balance separate from all member wallets</li>
              <li>Funded by: tax on member income, voluntary donations, structure taxes, corp market orders</li>
              <li>Spent on: structure fuel, alliance dues, SRP (ship replacement program), member bonuses</li>
              <li>Full transaction log visible to Accountant+ roles</li>
              <li>Withdrawal requires Director+ approval (or CEO)</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)' }}>Tax System</h4>
            <ul style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
              <li><strong style={{ color: 'var(--fg)' }}>Bounty tax:</strong> CEO sets % (0–100%). Deducted from NPC bounties and mission rewards. Default 10%.</li>
              <li><strong style={{ color: 'var(--fg)' }}>Market tax:</strong> Optional tax on market orders placed in corp-controlled stations. 0–5%. Set per station.</li>
              <li><strong style={{ color: 'var(--fg)' }}>Refining tax:</strong> Optional tax on refining at corp-controlled facilities. 0–5%.</li>
              <li>Tax revenue goes to corp wallet automatically</li>
              <li>Members see their personal tax contribution in wallet history</li>
            </ul>
          </div>
        </div>

        <h3 style={{ marginBottom: 'var(--sp-4)' }}>Territory & Sovereignty</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>Null-sec only.</strong> Territory claims are only possible in null-sec (security ≤ 0.0). High-sec and low-sec systems
          cannot be claimed. This preserves the "wild west" nature of null-sec as the player-driven frontier while keeping
          NPC-controlled space as the shared commons.
        </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)' }}>Corporation Structures</h4>
            <ul style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
              <li><strong style={{ color: 'var(--fg)' }}>Starbase (Medium):</strong> Claims sovereignty in 1 system. Provides: refining bonus (+10%), market access, hangar, clone bay. Cost: 50M ₢ + fuel.</li>
              <li><strong style={{ color: 'var(--fg)' }}>Citadel (Large):</strong> Claims constellation-wide influence. Provides: all Starbase bonuses + manufacturing slots + insurance desk. Cost: 500M ₢ + fuel.</li>
              <li><strong style={{ color: 'var(--fg)' }}>Keepstar (XL):</strong> Regional capital. Provides: all Citadel bonuses + capital ship construction + super-capital docking. Cost: 5B ₢ + fuel. One per region.</li>
              <li>Structures have shields, armor, and hull — they can be destroyed during vulnerability windows</li>
              <li>Structure destruction = loss of territory claim. System becomes unclaimed.</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)' }}>Sovereignty Mechanics</h4>
            <ul style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
              <li><strong style={{ color: 'var(--fg)' }}>Anchoring:</strong> Corp anchors structure in unclaimed null-sec system. 24-hour onlining timer. During onlining, structure is invulnerable.</li>
              <li><strong style={{ color: 'var(--fg)' }}>Vulnerability window:</strong> CEO picks a 4-hour daily window (must overlap with corp prime time). Structure can only be attacked during this window.</li>
              <li><strong style={{ color: 'var(--fg)' }}>Reinforcement:</strong> When structure shields reach 0%, it enters reinforcement (18h timer). Armor becomes targetable after timer expires.</li>
              <li><strong style={{ color: 'var(--fg)' }}>Destruction:</strong> When structure hull reaches 0%, it explodes. Corp loses sovereignty. All items in corp hangar drop as loot (50%) or are destroyed (50%).</li>
              <li><strong style={{ color: 'var(--fg)' }}>Strategic index:</strong> The longer a corp holds a system, the higher the strategic index (0–5). Higher index = longer reinforcement timer, stronger structure shields. Rewards long-term ownership.</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={{ marginBottom: 'var(--sp-5)' }}>
          <strong>Design intent:</strong> Territory warfare is the endgame that keeps players engaged for years. A corp's home system
          is its identity — losing it is a major event, conquering one is a major achievement. The vulnerability window ensures
          battles happen when both sides can participate (no 3 AM structure kills). The strategic index rewards corps that invest
          in their territory rather than nomadic expansion. The goal is <em>meaningful conflict</em>, not meaningless destruction.
        </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">SOC-CORP-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 (co-op phase)</h4>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.82rem', color: 'var(--fg-dim)', lineHeight: 2 }}>
            <span style={{ color: 'var(--accent)' }}>corporations</span> — <code>corp_id, name, ticker, ceo_player_id, founded_at, wallet_balance, tax_rate_bounty, tax_rate_market, tax_rate_refining, member_count, hq_station_id, vulnerability_window_start, vulnerability_window_hours, dissolved_at</code><br/>
            <span style={{ color: 'var(--cyan)' }}>corp_members</span> — <code>corp_id, player_id, role (enum), joined_at, tax_contribution_lifetime</code><br/>
            <span style={{ color: 'var(--green)' }}>corp_wallet_journal</span> — <code>entry_id, corp_id, entry_type (tax/donation/withdrawal/expense), amount, player_id, timestamp, description</code><br/>
            <span style={{ color: 'var(--red)' }}>corp_structures</span> — <code>structure_id, corp_id, system_id, structure_type (starbase/citadel/keepstar), shield/armor/hull, state (onlining/online/reinforced/vulnerable/destroyed), reinforced_at, vulnerability_start, strategic_index</code><br/>
            <span style={{ color: 'var(--purple)' }}>corp_hangar</span> — <code>hangar_id, corp_id, station_id, item_type, quantity, access_role_min</code><br/>
            <span style={{ color: 'var(--fg)' }}>corp_fittings</span> — <code>fitting_id, corp_id, name, ship_type, modules_json, created_by, access_role_min</code><br/>
            <br/>
            <span style={{ color: 'var(--cyan)' }}>Reducers:</span> <code>found_corp(name, ticker)</code>, <code>invite_member(player_id)</code>, <code>kick_member(player_id)</code>, <code>set_role(player_id, role)</code>, <code>anchor_structure(system_id, type)</code>, <code>attack_structure(structure_id)</code>, <code>reinforce_structure(structure_id)</code>, <code>destroy_structure(structure_id)</code>, <code>set_tax_rate(type, rate)</code>, <code>deposit_corp_wallet(amount)</code>, <code>withdraw_corp_wallet(amount, reason)</code>
          </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>Corp hangar integration:</strong> When a player is docked at a station with a corp hangar, they see a
          "Corp Hangar" tab in the Inventory panel. Access is gated by role. Items in corp hangar can be used for corp
          manufacturing jobs, corp market orders, or distributed to members. The hangar respects the same item/inventory
          system as personal hangars — it's just owned by the corp entity rather than a player entity.
        </div>
      </>)}
    </div>
  );
}
