import type { Metadata } from "next";
import { Urbanist } from "next/font/google";
import AnalyticsGate from "@/components/cookies/AnalyticsGate";
import LinkedInInsightGate from "@/components/cookies/LinkedInInsightGate";
import "./globals.css";

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

const basePath = process.env.NEXT_PUBLIC_BASE_PATH || "";

export const metadata: Metadata = {
  title: "MBHS - Behavioral Health Screenings",
  description: "Access clinically validated behavioral health screenings",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html className={`${urbanist.variable} overflow-x-hidden`} suppressHydrationWarning>
      <head>
        <link rel="icon" href={`${basePath}/favicon.ico?v=2`} sizes="48x48" type="image/x-icon" />
        <link rel="icon" href={`${basePath}/icon.png?v=2`} sizes="192x192" type="image/png" />
        <link rel="shortcut icon" href={`${basePath}/favicon.ico?v=2`} type="image/x-icon" />
        <link rel="apple-touch-icon" href={`${basePath}/apple-icon.png?v=2`} sizes="180x180" />
      </head>
      <body className={`${urbanist.className} antialiased overflow-x-hidden`}>
        {children}
        <AnalyticsGate />
        <LinkedInInsightGate />
      </body>
    </html>
  );
}
