import type { Metadata } from "next";
import { Lexend, Noto_Sans } from "next/font/google";
import { AppProvider } from "@/components/app-provider";
import { Toaster } from "@/components/ui/toast";
import "./globals.css";
import "leaflet/dist/leaflet.css";

const lexend = Lexend({
  subsets: ["latin"],
  weight: ["300", "400", "500", "600", "700", "800", "900"],
  variable: "--font-lexend",
});

const notoSans = Noto_Sans({
  subsets: ["latin"],
  weight: ["400", "500", "700"],
  variable: "--font-noto",
});

export const metadata: Metadata = {
  title: "rooSports | Community Sports Matches & Practice",
  description: "Same-day practice & match play for youth and adults. Play on local school and council grounds with zero long-term commitments.",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html
      lang="en"
      suppressHydrationWarning
      data-scroll-behavior="smooth"
      className={`${lexend.variable} ${notoSans.variable} h-full scroll-smooth antialiased`}
    >
      <head>
        <title>rooSports | Community Sports Matches & Practice</title>
        {/* eslint-disable-next-line @next/next/no-page-custom-font */}
        <link
          rel="stylesheet"
          href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap"
        />
        
      </head>
      <body
        suppressHydrationWarning
        className="min-h-screen w-full flex flex-col bg-transparent text-[#0B0F12] font-sans m-0 p-0 overflow-x-hidden"
      >
        <AppProvider>
          {children}
          <Toaster />
        </AppProvider>
      </body>
    </html>
  );
}
