import type { Metadata } from "next";
import { DM_Sans, Manrope } from "next/font/google";
import { SiteHeader } from "@/components/site-header";
import { SiteFooter } from "@/components/site-footer";
import "./globals.css";

const display = Manrope({
  variable: "--font-display",
  subsets: ["latin"],
});

const body = DM_Sans({
  variable: "--font-body",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  metadataBase: new URL("https://visionaidfoundation.org"),
  title: {
    default: "Vision Aid Foundation | Restoring Sight, Restoring Dignity",
    template: "%s | Vision Aid Foundation",
  },
  description:
    "A government-registered nonprofit working across eye health, livelihoods, protection and humanitarian assistance in Bangladesh.",
  icons: {
    icon: "/favicon.png",
    shortcut: "/favicon.png",
    apple: "/favicon.png",
  },
  openGraph: {
    title: "Vision Aid Foundation",
    description: "Restoring Sight, Restoring Dignity.",
    url: "https://visionaidfoundation.org",
    siteName: "Vision Aid Foundation",
    locale: "en_BD",
    type: "website",
    images: [{ url: "/hero/cataract-patients.jpg" }],
  },
};

export default function RootLayout({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  return (
    <html lang="en" data-scroll-behavior="smooth">
      <body className={`${display.variable} ${body.variable}`}>
        <SiteHeader />
        <main>{children}</main>
        <SiteFooter />
      </body>
    </html>
  );
}
