import { Card, Pill } from '@kerbal-rt/ui';

export default function HomePage() {
  return (
    <main style={{ maxWidth: 960, margin: '0 auto', padding: '2rem 1rem' }}>
      <header
        style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '1.5rem' }}
      >
        <h1 style={{ fontSize: '1.75rem', margin: 0 }}>Kerbal RT</h1>
        <Pill tone="success">Phase 0 — skeleton</Pill>
      </header>

      <Card title="Status">
        <p>Monorepo skeleton is up. The hub, live-map, and API apps all build and dev-serve.</p>
        <p>
          Edit <code>src/app/page.tsx</code> in <code>apps/hub</code> and refresh.
        </p>
      </Card>

      <div style={{ height: '1rem' }} />

      <Card title="Quick links">
        <ul>
          <li>
            <a href="/live-map">Live map</a> (scaffolded in the same Vite app)
          </li>
          <li>
            <a href="http://localhost:4000/health" target="_blank" rel="noreferrer">
              API health
            </a>
          </li>
          <li>
            <a href="https://github.com" target="_blank" rel="noreferrer">
              Repo
            </a>
          </li>
        </ul>
      </Card>

      <div style={{ height: '1rem' }} />

      <Card title="Phases">
        <ol>
          <li>
            <strong>Phase 0 (this):</strong> monorepo, skeletons, docker-compose, CI.
          </li>
          <li>
            <strong>Phase 1:</strong> KSP telemetry bridge + ingest pipeline.
          </li>
          <li>
            <strong>Phase 2:</strong> Live map 3D scene with time controls.
          </li>
          <li>
            <strong>Phase 3:</strong> Mission calendar, media, crew, YouTube/Twitch embeds.
          </li>
          <li>
            <strong>Phase 4:</strong> Spacenomicon tools.
          </li>
        </ol>
      </Card>
    </main>
  );
}