/* eslint-disable @next/next/no-css-tags */
import type { Metadata } from "next";
import { Manrope, Space_Grotesk, Syne, DM_Sans, Inter } from "next/font/google";
import "./globals.css";
import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";
import BodyClasses from "@/components/layout/BodyClasses";
import BodyOverlay from "@/components/layout/BodyOverlay";
import { HeaderUIProvider } from "@/components/layout/HeaderUIProvider";
import { SHARED_BODY_CLASSES } from "@/lib/bodyClasses";
import AnimationProvider from "@/animations/AnimationProvider";
import SmoothScroll from "@/animations/SmoothScroll";
import LoadingScreen from "@/components/layout/LoadingScreen";

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

const spaceGrotesk = Space_Grotesk({
  subsets: ["latin"],
  variable: "--font-space-grotesk",
  weight: ["400", "500", "600", "700"],
});

// Fonts for the Solutions industry section (Syne headings, DM Sans body).
const syne = Syne({
  subsets: ["latin"],
  variable: "--font-syne",
  weight: ["600", "700", "800"],
});

const dmSans = DM_Sans({
  subsets: ["latin"],
  variable: "--font-dm-sans",
  weight: ["400", "500"],
});

// Body font for the Solutions stacked industry sections.
const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
  weight: ["400", "500", "600"],
});

export const metadata: Metadata = {
  title: "Doormile — Delivering Trust. Beyond Boundaries",
  description: "Doormile powers last-mile logistics with MileTruth™ AI, providing connected miles, SLA protection, and carrier management.",
  icons: {
    icon: "/images/cropped-image-2.png",
    shortcut: "/images/cropped-image-2.png",
    apple: "/images/cropped-image-2.png",
  },
  robots: {
    index: true,
    follow: true,
  },
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en-US" data-scroll-behavior="smooth" className={`${manrope.variable} ${spaceGrotesk.variable} ${syne.variable} ${dmSans.variable} ${inter.variable}`}>
      <head>
        {/* FontAwesome icons */}
        <link
          rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
        />
        {/*
          Consolidated site styles. Generated by `npm run build:css`
          (scripts/build-css.sh): the legacy WordPress/Elementor vendor CSS is
          concatenated in cascade order and purged of unused selectors via
          purgecss.config.cjs. ~2.86 MB of vendor CSS -> ~560 KB, one request.
        */}
        <link rel="stylesheet" href="/css/site.css" />
      </head>
      {/*
        Production DOM (index.php + header.php):
          body
            ├─ body-overlay              (direct child of body — index.php line 6 / header.php line 5)
            ├─ body-container            (header.php line 14)
            │    └─ #page.hfeed.site     (header.php line 15)
            │         ├─ header#masthead
            │         ├─ content-wrapper (children)
            │         └─ footer
        SSR ships body with shared WP/Elementor classes; BodyClasses (client) refines per route.
      */}
      <body className={SHARED_BODY_CLASSES} suppressHydrationWarning>
        <BodyClasses />
        <LoadingScreen />
        <AnimationProvider>
          <SmoothScroll />
          <HeaderUIProvider>
            <BodyOverlay />
            <div className="body-container">
              <div id="page" className="hfeed site">
                <Header />
                {children}
                <Footer />
              </div>
            </div>
          </HeaderUIProvider>
        </AnimationProvider>
      </body>
    </html>
  );
}
