import type { Metadata } from "next";
import { Space_Grotesk, JetBrains_Mono } from "next/font/google";
import "./globals.css";
import { Navbar } from "@/components/layout/navbar";
import { cn } from "@/lib/utils";
import { PreferencesProvider } from "@/contexts/preferences-context";
import { AuthProvider } from "@/contexts/auth-context";
import { VerticalProvider } from "@/contexts/vertical-context";
import { ThemeProvider } from "@/components/theme-provider";
import { Footer } from "@/components/layout/footer";
import { Toaster } from "@/components/ui/toaster";
import Script from "next/script";

const spaceGrotesk = Space_Grotesk({
  subsets: ["latin"],
  variable: "--font-sans",
});

const jetbrainsMono = JetBrains_Mono({
  subsets: ["latin"],
  variable: "--font-mono",
});

export const metadata: Metadata = {
  title: {
    default: "Fediversion",
    template: "%s | Fediversion",
  },
  description: "The definitive archive for the modern jam era. Track setlists, find sit-ins, and build your profile.",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body suppressHydrationWarning className={cn(
        spaceGrotesk.variable,
        jetbrainsMono.variable,
        "min-h-screen bg-background font-sans antialiased flex flex-col"
      )}>
        {/* <Script
          defer
          src="https://stats.elmeg.xyz/stats"
          data-website-id="4338bbf0-fe74-4256-8973-8cdc0cffe08c"
        /> */}
        <ThemeProvider
          attribute="class"
          defaultTheme="dark"
          enableSystem
          disableTransitionOnChange
        >
          <AuthProvider>
            <VerticalProvider>
              <PreferencesProvider>
                <Navbar />
                <main className="flex-1 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
                  {children}
                </main>
                <Footer />
                <Toaster />
              </PreferencesProvider>
            </VerticalProvider>
          </AuthProvider>
        </ThemeProvider>
      </body>
    </html>
  );
}
