import { connection } from "next/server";

import { LiveRefresh } from "@/components/live-refresh";
import { StructuredDirectory } from "@/components/public/structured-directory";
import { SiteHeader } from "@/components/public/site-header";
import { listGuideCards } from "@/lib/guides/queries";

export default async function HomePage() {
  await connection();
  const guides = await listGuideCards();
  return <div className="min-h-svh bg-background"><LiveRefresh endpoint="/api/events/directory" /><SiteHeader /><main className="mx-auto flex w-full max-w-7xl flex-col gap-8 px-4 py-10 sm:px-6 sm:py-14"><header className="max-w-3xl"><p className="text-sm font-medium text-primary">Genshin Impact Build Guides</p><h1 className="mt-2 font-heading text-4xl font-semibold">เลือกตัวละคร แล้วจัด Build และ Team ได้เลย</h1><p className="mt-3 text-lg leading-8 text-muted-foreground">คู่มือแบบภาพ-first สำหรับ Weapons, Artifacts, Constellations และ Team Calc</p></header><StructuredDirectory guides={guides} /></main></div>;
}