import type { Metadata } from "next";
import { Cormorant_Garamond, Figtree } from "next/font/google";
import { EVENT } from "@/lib/event";
import "./globals.css";

const display = Cormorant_Garamond({
  subsets: ["latin"],
  weight: ["500", "600", "700"],
  variable: "--font-display-loaded",
});

const body = Figtree({
  subsets: ["latin"],
  weight: ["400", "500", "600", "700"],
  variable: "--font-body-loaded",
});

export const metadata: Metadata = {
  title: `Admin · ${EVENT.nameEn} ${EVENT.year}`,
  description: `Admin panel for ${EVENT.nameEn} visitor registrations and reports.`,
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={`${display.variable} ${body.variable} antialiased`}>
        <style>{`
          :root {
            --font-display: var(--font-display-loaded), Georgia, serif;
            --font-body: var(--font-body-loaded), system-ui, sans-serif;
          }
        `}</style>
        {children}
      </body>
    </html>
  );
}
