import type { Metadata } from "next";
import { Manrope, DM_Sans } from "next/font/google";
import "./globals.css";
import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";
import { getSiteSettings } from "@/lib/api";

// Matches the source design's exact typefaces (Manrope for display/headings,
// DM Sans for body) — see --font-display/--font-body in the original file.
const manrope = Manrope({
  subsets: ["latin"],
  weight: ["500", "700", "800"],
  variable: "--font-heading",
  display: "swap"
});
const dmSans = DM_Sans({
  subsets: ["latin"],
  variable: "--font-mono",
  display: "swap"
});

const FALLBACK_TITLE = "NSP Foundation | Never Stop Pushing";
const FALLBACK_DESCRIPTION =
  "NSP Foundation is a 501(c)(3) nonprofit venture studio and think tank dedicated to dismantling systemic economic barriers through fiscal sponsorship, entrepreneurial incubation, and community-centered programs.";

// Site-wide default title/description, driven by the CMS's site settings —
// individual pages (page.tsx, [slug]/page.tsx) override this via their own
// generateMetadata using the page's own metaTitle/metaDescription.
export async function generateMetadata(): Promise<Metadata> {
  const site = await getSiteSettings();
  return {
    title: {
      default: site.companyName && site.tagline ? `${site.companyName} | ${site.tagline}` : FALLBACK_TITLE,
      template: `%s | ${site.companyName || "NSP Foundation"}`
    },
    description: site.tagline || FALLBACK_DESCRIPTION,
    metadataBase: new URL("https://wensp.org")
  };
}

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