import { Navbar } from "@/components/Navbar";
import { StatusCard } from "@/components/StatusCard";
import { DownloadCard } from "@/components/DownloadCard";
import { ModList } from "@/components/ModList";
import { ClientOnly } from "@/components/ClientOnly";

export default function Home() {
  return (
    <>
      <Navbar />

      {/* Header */}
      <div className="border-b border-border bg-card py-8 sm:py-12 text-center px-4">
        <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight text-primary">
          HurkiCorgi MC
        </h1>
        <p className="mt-2 text-muted-foreground text-sm sm:text-base">
          Create & Engineering | Raids | Survival
        </p>
      </div>

      {/* Content */}
      <ClientOnly>
        <main id="main" className="max-w-5xl mx-auto px-3 py-4 sm:p-6 space-y-4 sm:space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
            <StatusCard />
            <DownloadCard />
          </div>
          <ModList />
        </main>
      </ClientOnly>

      <footer className="text-center py-6 sm:py-8 text-muted-foreground text-xs">
        HurkiCorgi MC — Forge 1.20.1
      </footer>
    </>
  );
}