import Link from "next/link";
import { Trophy, ArrowRight, CalendarDays } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { YaltopiaFooter } from "@/components/layout/YaltopiaFooter";

export default function HomePage() {
  return (
    <div className="retro-grid flex min-h-screen flex-col items-center justify-center px-4 py-12">
      <div className="w-full max-w-lg">
        <div className="mb-8 flex flex-col items-center text-center">
          <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-primary shadow-[0_0_32px_-8px_var(--neon)]">
            <Trophy className="h-7 w-7 text-primary-foreground" />
          </div>
          <p className="font-display text-[10px] font-bold uppercase tracking-[0.25em] text-neon">
            Yaltopia · FIFA
          </p>
          <h1 className="font-display mt-2 text-4xl font-black uppercase tracking-tight">
            Tournament OS
          </h1>
          <p className="mt-3 max-w-sm text-sm text-muted-foreground">
            Retro-grade fixtures, standings, and squad tools — built for team
            managers who want the hype without the clutter.
          </p>
        </div>

        <Card className="retro-card border-border/80">
          <CardHeader>
            <CardTitle className="font-display text-lg font-bold uppercase tracking-wide">
              Team Manager
            </CardTitle>
            <CardDescription>
              Sign in to view leagues, cups, your match calendar, and submit
              issues.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <Button asChild variant="neon" className="w-full" size="lg">
              <Link href="/login/manager">
                Sign in
                <ArrowRight className="h-4 w-4" />
              </Link>
            </Button>
            <p className="text-center text-sm text-muted-foreground">
              New manager?{" "}
              <Link
                href="/signup/manager"
                className="font-medium text-neon underline-offset-4 hover:underline"
              >
                Create account
              </Link>
            </p>
          </CardContent>
        </Card>

        <div className="mt-4 flex items-center justify-center gap-2 text-xs text-muted-foreground">
          <CalendarDays className="h-3.5 w-3.5 text-neon-muted" />
          <span>Match calendar inside the manager portal</span>
        </div>
      </div>

      <div className="mt-10 w-full max-w-lg">
        <YaltopiaFooter />
      </div>
    </div>
  );
}