import type React from "react"
import type { Metadata } from "next"
import localFont from "next/font/local"
import { Analytics } from "@vercel/analytics/next"
import { Suspense } from "react"
import { ThemeProvider } from "@/components/theme-provider"
import { ToastProvider } from "@/components/ui/toast"
import { AuthProvider } from "@/hooks/use-auth"
import { BookingProvider } from "@/contexts/booking-context"
import "./globals.css"

// Primary font - Rockabilly (for headings and serif text)
const rockabilly = localFont({
  src: [
    {
      path: "../public/Rockabilly Regular.otf",
      weight: "400",
      style: "normal",
    },
    {
      path: "../public/Rockabilly Bold.otf", 
      weight: "700",
      style: "normal",
    }
  ],
  display: "swap",
  variable: "--font-rockabilly",
})

// Secondary font - Montserrat (for body text and sans-serif)
const montserrat = localFont({
  src: [
    {
      path: "../public/Montserrat-Black.ttf",
      weight: "900",
      style: "normal",
    },
    {
      path: "../public/Montserrat-BlackItalic.ttf",
      weight: "900", 
      style: "italic",
    },
    {
      path: "../public/Montserrat-Bold.ttf",
      weight: "700",
      style: "normal",
    },
    {
      path: "../public/Montserrat-BoldItalic.ttf",
      weight: "700",
      style: "italic",
    },
    {
      path: "../public/Montserrat-ExtraBold.ttf",
      weight: "800",
      style: "normal",
    },
    {
      path: "../public/Montserrat-ExtraBoldItalic.ttf",
      weight: "800",
      style: "italic",
    },
    {
      path: "../public/Montserrat-ExtraLight.ttf",
      weight: "200",
      style: "normal",
    },
    {
      path: "../public/Montserrat-ExtraLightItalic.ttf",
      weight: "200",
      style: "italic",
    },
    {
      path: "../public/Montserrat-Italic.ttf",
      weight: "400",
      style: "italic",
    },
    {
      path: "../public/Montserrat-Light.ttf",
      weight: "300",
      style: "normal",
    },
    {
      path: "../public/Montserrat-LightItalic.ttf",
      weight: "300",
      style: "italic",
    },
    {
      path: "../public/Montserrat-Medium.ttf",
      weight: "500",
      style: "normal",
    },
    {
      path: "../public/Montserrat-MediumItalic.ttf",
      weight: "500",
      style: "italic",
    },
    {
      path: "../public/Montserrat-Regular.ttf",
      weight: "400",
      style: "normal",
    },
    {
      path: "../public/Montserrat-SemiBold.ttf",
      weight: "600",
      style: "normal",
    },
    {
      path: "../public/Montserrat-SemiBoldItalic.ttf",
      weight: "600",
      style: "italic",
    },
    {
      path: "../public/Montserrat-Thin.ttf",
      weight: "100",
      style: "normal",
    },
    {
      path: "../public/Montserrat-ThinItalic.ttf",
      weight: "100",
      style: "italic",
    }
  ],
  display: "swap",
  variable: "--font-montserrat",
})

export const metadata: Metadata = {
  title: "Geezer Guide - Find Senior Care Facilities",
  description:
    "Discover trusted senior care facilities with transparency and independence. Search, compare, and explore senior living options without pressure.",
  generator: "Geezer Guide",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <link rel="preload" href="/Rockabilly Bold.otf" as="font" type="font/otf" crossOrigin="" />
        <link rel="preload" href="/Rockabilly Regular.otf" as="font" type="font/otf" crossOrigin="" />
        <link rel="preload" href="/Montserrat-Regular.ttf" as="font" type="font/ttf" crossOrigin="" />
        <link rel="preload" href="/Montserrat-Bold.ttf" as="font" type="font/ttf" crossOrigin="" />
        <link rel="preload" href="/Montserrat-SemiBold.ttf" as="font" type="font/ttf" crossOrigin="" />
      </head>
      <body className={`font-secondary ${montserrat.variable} ${rockabilly.variable} antialiased`} suppressHydrationWarning>
        <ThemeProvider
          attribute="class"
          defaultTheme="light"
          forcedTheme="light"
          enableSystem={false}
          disableTransitionOnChange
        >
          <AuthProvider>
            <BookingProvider>
              <ToastProvider>
                <Suspense fallback={null}>{children}</Suspense>
                <Analytics debug={process.env.NODE_ENV === 'development'} />
              </ToastProvider>
            </BookingProvider>
          </AuthProvider>
        </ThemeProvider>
      </body>
    </html>
  )
}
