import type { Metadata } from "next";
import { Cormorant_Garamond, Inter } from "next/font/google";
import "./globals.css";
import { Navigation } from "@/components/navigation";
import { Footer } from "@/components/footer";
import { CartProvider } from "@/context/cart-context";
import { CartDrawer } from "@/components/cart-drawer";

const cormorant = Cormorant_Garamond({
  variable: "--font-serif",
  subsets: ["latin"],
  weight: ["400", "500", "600"],
  display: "swap",
});

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

export const metadata: Metadata = {
  title: {
    default: "Katheryn Trenshaw | Artist & Creative Expression",
    template: "%s | Katheryn Trenshaw",
  },
  description: "Passionate Presence Center for Creative Expression. Fine art, workshops, and transformative experiences by Katheryn Trenshaw.",
  keywords: ["fine art", "artist", "paintings", "workshops", "creative expression", "Katheryn Trenshaw", "In Your Own Skin"],
  authors: [{ name: "Katheryn Trenshaw" }],
  openGraph: {
    type: "website",
    locale: "en_GB",
    siteName: "Katheryn Trenshaw",
  },
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" className={`${cormorant.variable} ${inter.variable}`}>
      <body className="flex min-h-screen flex-col bg-white antialiased">
        <CartProvider>
          <Navigation />
          <main className="flex-1">{children}</main>
          <Footer />
          <CartDrawer />
        </CartProvider>
      </body>
    </html>
  );
}
