import type { Metadata } from "next";
import { Inter, Outfit } from "next/font/google";
import "./globals.css";
import { getNavigationData } from "@/app/api/navigation/route";
import { Header } from "@/components/layout/Header/Header";
import { Footer } from "@/components/layout/Footer/Footer";
import { MobileBottomBar } from "@/components/layout/Header/MobileBottomBar";
import { MobileWhatsAppButton } from "@/components/layout/Header/MobileWhatsAppButton";

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
  display: "swap",
});

const outfit = Outfit({
  subsets: ["latin"],
  variable: "--font-outfit",
  display: "swap",
});

const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || "https://www.globalassignmenthelp.com";
const siteName = process.env.NEXT_PUBLIC_SITE_NAME || "Global Assignment Help";

export const metadata: Metadata = {
  title: `${siteName}: Best Assignment Help UK, USA & Canada`,
  description:
    "Avail the best assignment help from a trusted academic partner across UK, USA & Canada. 4500+ professional writers, free plagiarism report, and a 100% money back guarantee.",
  keywords: [
    "Assignment help",
    "Assignment writing service",
    "Online Assignment Help",
    "Essay writing service",
    "Dissertation help",
  ],
  authors: [{ name: siteName, url: siteUrl }],
  openGraph: {
    title: `${siteName}: Best Assignment Help UK, USA & Canada`,
    description: "Avail the best assignment help from a trusted academic partner across UK, USA & Canada.",
    url: siteUrl,
    siteName,
    locale: "en_GB",
    type: "website",
  },
};

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  // Fetch dynamic navigation data at server layout level
  const navigationData = await getNavigationData();

  return (
    <html lang="en" className={`${inter.variable} ${outfit.variable}`}>
      {/* Shortens the render-blocking-CSS critical path (confirmed via
          Lighthouse's network-dependency-tree): without this, the browser
          only discovers these two `@font-face` files (globals.css) after
          parsing the CSS that references them, adding ~260-280ms of
          sequential font-fetch time on top of the CSS itself. Preloading
          lets them start downloading in parallel instead. Only these two —
          not robotolight, which wasn't on the flagged critical path and
          isn't needed for first paint on most pages. React 19 hoists
          `<link>` elements into the real `<head>` regardless of where in
          the tree they're rendered, so this doesn't need an explicit
          `<head>` wrapper (which Next's App Router metadata system was
          silently dropping here). */}
      <link rel="preload" href="/fonts/roboto-regular-webfont.woff2" as="font" type="font/woff2" crossOrigin="anonymous" />
      <link rel="preload" href="/fonts/roboto-medium-webfont.woff2" as="font" type="font/woff2" crossOrigin="anonymous" />
      <body className="font-sans antialiased bg-slate-50 text-slate-900 min-h-screen flex flex-col selection:bg-[#5C7A36] selection:text-white pb-14 lg:pb-0">
        <Header data={navigationData.header} />
        {/* No `overflow-x: hidden` here — it was added specifically to avoid
            reaching the sticky header `Navbar` (a `main` sibling, not its
            ancestor), but it carries the exact same CSS-spec cost already
            documented on `body`, above: a non-visible `overflow-x` forces
            `overflow-y` to compute to `auto`, turning `main` into its own
            scroll container distinct from the real one (`html`). Confirmed:
            on pages whose content is a little taller than `main`'s own
            flex-sized box (e.g. `/our-services`), that showed up as a
            visible second, nested scrollbar — "main" scrolling internally
            instead of the page just being that tall. `html`'s own
            `overflow-x: hidden` (`globals.css`) already catches the same
            stray horizontal bleed this was guarding against, since `html` is
            the real root scroller — same reasoning that already applied to
            removing `body`'s copy of this rule. */}
        <main className="flex-1">{children}</main>
        <Footer data={navigationData.footer} />
        <MobileBottomBar topBarData={navigationData.header.topBar} ctaData={navigationData.header.cta} />
        <MobileWhatsAppButton whatsappUrl={navigationData.header.topBar.whatsappUrl} />
      </body>
    </html>
  );
}