"use client";
import localFont from "next/font/local";
import Link from "next/link";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { TopBar } from "@/components/top-bar";
import { PlayDialog } from "@/components/play-dialog";

const makeSans = localFont({ src: "../../public/font/makesans.ttf" });

export default function Page() {
  const [playOpen, setPlayOpen] = useState(false);
  return (
    <main className="min-h-screen bg-background text-foreground flex flex-col font-mona">
      <TopBar />
      <div className="flex-1 flex items-center justify-center px-6 py-16">
        <div className="text-center space-y-4 max-w-lg">
          <h1 className={`${makeSans.className} text-4xl md:text-5xl font-extrabold lowercase text-primary tracking-tight leading-none`}>FRG Network</h1>
          <p className="text-sm leading-relaxed text-muted-foreground max-w-md mx-auto">A small and fun Minecraft server and surrounding community.</p>
          <div className="pt-1 flex justify-center gap-3">
            <Button size="lg" onClick={() => setPlayOpen(true)}>Play</Button>
            <Button size="lg" variant="outline" asChild><Link href="/donate">Support</Link></Button>
          </div>
          <p className="text-xs text-muted-foreground/70">Java &amp; Bedrock · frg.network</p>
        </div>
      </div>
      <PlayDialog open={playOpen} onOpenChange={setPlayOpen} />
    </main>
  );
}