import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Panel, PanelContent, PanelFooter, PanelHeader } from '@/components/ui/panel';
import pkg from '@/package.json';

export default function Home() {
  return (
    <main className="min-h-screen flex items-center justify-center p-6">
      <Panel className="w-full max-w-xl" notch="md">
        <PanelHeader>
          <Badge variant="ACTIVE">SYS:ONLINE</Badge>
          <span
            style={{
              marginLeft: 'auto',
              fontSize: '0.65rem',
              letterSpacing: '0.12em',
              textTransform: 'uppercase',
              color: 'var(--text-muted)',
            }}
          >
            v{pkg.version} — STACK PROOF
          </span>
        </PanelHeader>
        <PanelContent>
          <h1
            style={{
              fontSize: '1.6rem',
              fontWeight: 700,
              letterSpacing: '0.08em',
              textTransform: 'uppercase',
              color: 'var(--color-green)',
              textShadow: 'var(--text-glow-green)',
            }}
          >
            SpaceWanderer
          </h1>
          <p style={{ marginTop: '0.75rem', fontSize: '0.8rem', color: 'var(--text-secondary)' }}>
            Turn-based space adventure — build &amp; expand your ship from found parts, survive the void.
          </p>

          <Card className="mt-4">
            <CardHeader>
              <CardTitle>Ship status</CardTitle>
            </CardHeader>
            <CardContent>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '0.35rem' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.75rem' }}>
                  <span style={{ color: 'var(--text-muted)' }}>HULL</span>
                  <Badge variant="ACTIVE">NOMINAL</Badge>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.75rem' }}>
                  <span style={{ color: 'var(--text-muted)' }}>CREW</span>
                  <span style={{ color: 'var(--text-secondary)' }}>—</span>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.75rem' }}>
                  <span style={{ color: 'var(--text-muted)' }}>NEXT ENCOUNTER</span>
                  <Badge variant="SCANNING">SCANNING...</Badge>
                </div>
              </div>
            </CardContent>
          </Card>

          <Alert variant="STATUS" className="mt-4">
            <AlertTitle>Scaffold online</AlertTitle>
            <AlertDescription>
              Base stack + scificn-ui frontend integrated. No game systems yet — single player only, by design.
            </AlertDescription>
          </Alert>
        </PanelContent>
        <PanelFooter>
          <Button variant="EXEC" size="SM">INITIATE</Button>
          <span style={{ marginLeft: 'auto', fontSize: '0.65rem', color: 'var(--text-muted)', letterSpacing: '0.12em' }}>
            SCIFICN/UI v0.1.0 · SCI-FI THEME
          </span>
        </PanelFooter>
      </Panel>
    </main>
  );
}