import { connection } from "next/server";
import { Suspense } from "react";

import { LiveRefresh } from "@/components/live-refresh";
import { GoogleAdsense } from "@/components/public/google-adsense";
import { SiteFooter } from "@/components/public/site-footer";
import { StructuredDirectory } from "@/components/public/structured-directory";
import { SiteHeader } from "@/components/public/site-header";
import { getCachedPublicGuideCards } from "@/lib/cache/public";

async function DirectoryContent() {
  await connection();
  const guides = await getCachedPublicGuideCards();
  return <StructuredDirectory guides={guides} />;
}

export default function HomePage() {
  return (
    <div className="flex min-h-svh flex-col bg-background">
      <GoogleAdsense />
      <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">
          <h1 className="mt-2 font-heading text-4xl font-semibold">
            เลือกตัวละครแล้วส่องดูได้เลย
          </h1>
          <p className="mt-3 text-lg leading-8 text-muted-foreground">
            ไกด์ตัวละคร อาวุธ อาร์ติแฟกต์ กลุ่มดาว และคำนวณทีม
          </p>
        </header>
        <Suspense fallback={<div className="min-h-svh" aria-hidden="true" />}>
          <DirectoryContent />
        </Suspense>
      </main>
      <SiteFooter />
    </div>
  );
}