import type { Metadata, Viewport } from "next";
import { Lato, Oswald } from "next/font/google";
import "./globals.css";

const lato = Lato({
  variable: "--font-lato",
  subsets: ["latin"],
  weight: ["300", "400", "700", "900"],
  display: "swap",
});

const oswald = Oswald({
  variable: "--font-oswald",
  subsets: ["latin"],
  weight: ["300", "400", "500", "600", "700"],
  display: "swap",
});

const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://sseoa.af';

export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
};

export const metadata: Metadata = {
  metadataBase: new URL(siteUrl),
  title: "SSEOA - We strive to work towards serving humanity",
  description: "Join us in creating lasting change through education, youth support, and livelihood programmes that empower communities across Afghanistan.",
  keywords: "nonprofit, charity, education, girls education, community development, volunteer, donate, Afghanistan",
  authors: [{ name: "SSEOA" }],
  icons: {
    icon: [
      { url: '/logo/logo-png.png', sizes: 'any' },
    ],
    apple: [
      { url: '/logo/logo-png.png', sizes: '180x180', type: 'image/png' },
    ],
    shortcut: '/logo/logo-png.png',
  },
  openGraph: {
    title: "SSEOA - We strive to work towards serving humanity",
    description: "Creating positive change in communities across Afghanistan",
    type: "website",
    url: siteUrl,
    siteName: "SSEOA",
    images: ['/logo/logo-png.png'],
  },
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" className={`${lato.variable} ${oswald.variable}`}>
      <body className={`${lato.className} antialiased`}>
        {children}
      </body>
    </html>
  );
}