import type { Metadata } from "next";
import localFont from "next/font/local";
import "@/app/globals.css";
import { ClientProviders } from "../components/ClientProviders";

// Satoshi = body text, Clash Display = headings (both variable fonts).
const satoshi = localFont({
  variable: "--font-satoshi",
  display: "swap",
  src: [
    { path: "./fonts/Satoshi-Variable.ttf", weight: "300 900", style: "normal" },
    { path: "./fonts/Satoshi-VariableItalic.ttf", weight: "300 900", style: "italic" },
  ],
});

const clashDisplay = localFont({
  variable: "--font-clash",
  display: "swap",
  src: [{ path: "./fonts/ClashDisplay-Variable.ttf", weight: "200 700", style: "normal" }],
});

export const metadata: Metadata = {
  title: "Paul W. — Portfolio",
  description:
    "Full-stack developer & open-source author. Building server infrastructure, developer tools, and web applications.",
  icons: {
    icon: "/favicon.png",
  },
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" className={`${satoshi.variable} ${clashDisplay.variable}`}>
      <body className="antialiased">
        <ClientProviders>
          <div className="relative min-h-screen bg-[#0a0a0a] text-white selection:bg-white/20 overflow-x-hidden">
            {children}
          </div>
        </ClientProviders>
      </body>
    </html>
  );
}


