import type { Metadata } from "next";
import { Poppins } from "next/font/google";
import "./globals.css";
import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";
import { CartProvider } from "@/context/CartContext";
import CartDrawer from "@/components/cart/CartDrawer";

// The reference design uses Poppins for both headings and body copy (font-weight
// 900 on major headings). Loaded via next/font/google so it's self-hosted at
// build time (no runtime request to Google Fonts, no layout shift).
const poppins = Poppins({
  subsets: ["latin"],
  weight: ["400", "500", "600", "700", "800", "900"],
  variable: "--font-poppins",
  display: "swap"
});

export const metadata: Metadata = {
  title: "allBETs | The app where allBETs matter!",
  description:
    "allBETs is the social sports-picks app for everyone at the table. Shop allBETs Go merch, follow the blog, and check out the playbook.",
  metadataBase: new URL("https://allbetsgo.com")
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={poppins.variable}>
      <body>
        <CartProvider>
          <Header />
          <main>{children}</main>
          <Footer />
          <CartDrawer />
        </CartProvider>
      </body>
    </html>
  );
}
