import { Button, Panel } from "@void-nav/ui";

const docsUrl = import.meta.env.VITE_DOCS_URL ?? "http://localhost:5173/docs";
const gameUrl = import.meta.env.VITE_GAME_URL ?? "http://localhost:5175";

export function LandingPage() {
  return (
    <main className="min-h-screen overflow-y-auto bg-[radial-gradient(circle_at_20%_10%,rgba(34,211,238,0.14),transparent_26rem),linear-gradient(180deg,#070b12_0%,#080c14_72%,#10151f_100%)] px-6 py-8 text-fg md:px-10">
      <section className="mx-auto grid min-h-[calc(100vh-4rem)] max-w-6xl content-center gap-10 pb-12 lg:grid-cols-[1.05fr_0.95fr] lg:items-center">
        <div>
          <p className="mb-3 font-mono text-xs uppercase tracking-[0.12em] text-accent">Persistent browser space game</p>
          <h1 className="m-0 font-display text-5xl font-bold leading-none text-fg-bright md:text-7xl">VOID::NAV</h1>
          <p className="mt-6 max-w-2xl text-lg leading-8 text-fg-dim">
            A multiplayer industrial space game built around pilot identity, station life, ship fitting,
            market pressure, and a persistent galaxy backend.
          </p>
          <div className="mt-8 flex flex-wrap gap-3">
            <Button href={gameUrl} tone="primary">Open Game</Button>
            <Button href={docsUrl}>Read Docs</Button>
          </div>
        </div>

        <Panel className="grid gap-5">
          <div>
            <p className="m-0 font-mono text-xs uppercase tracking-[0.12em] text-cyan">Current build focus</p>
            <h2 className="m-0 mt-2 text-2xl text-fg-bright">From prototype hub to live game shell</h2>
          </div>
          <div className="grid gap-3 text-sm text-fg-dim">
            <StatusLine label="Backend" value="SpacetimeDB TypeScript module" />
            <StatusLine label="Client" value="Standalone game shell" />
            <StatusLine label="Docs" value="Living design docs and demos" />
            <StatusLine label="Next" value="Connect shell state, then migrate gameplay systems" />
          </div>
        </Panel>
      </section>
    </main>
  );
}

function StatusLine({ label, value }: { label: string; value: string }) {
  return (
    <div className="grid grid-cols-[7.5rem_1fr] gap-3 border-t border-border pt-3">
      <span className="font-mono text-xs uppercase tracking-[0.08em] text-muted">{label}</span>
      <span>{value}</span>
    </div>
  );
}
