import type { Metadata } from "next";
import { Geist, Geist_Mono, DM_Sans, Outfit } from "next/font/google";
import "./globals.css";
import { cn } from "@/lib/utils";
import { siteUrl } from "@/lib/site-url";

const outfitHeading = Outfit({
  subsets: ["latin"],
  variable: "--font-heading",
});

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

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

const SITE_NAME = "S.I. Tech Hub";

export const metadata: Metadata = {
  metadataBase: new URL(siteUrl),
  title: {
    default: SITE_NAME,
    template: `%s — ${SITE_NAME}`,
  },
  description:
    "S.I. Tech Hub — trusted gadgets and electronics. Compare prices, read verified reviews, and get doorstep delivery across Bangladesh with easy bKash, Nagad and card payment options.",
  keywords: [
    "tech hub",
    "gadgets",
    "electronics",
    "laptops",
    "smartphones",
    "Bangladesh",
    "bKash",
  ],
  applicationName: SITE_NAME,
  openGraph: {
    type: "website",
    locale: "en_US",
    siteName: SITE_NAME,
    url: siteUrl,
    title: SITE_NAME,
    description:
      "Trusted gadgets and electronics with doorstep delivery across Bangladesh.",
  },
  twitter: {
    card: "summary_large_image",
    title: SITE_NAME,
    description:
      "Trusted gadgets and electronics with doorstep delivery across Bangladesh.",
  },
  robots: {
    index: true,
    follow: true,
  },
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html
      lang="en"
      className={cn(
        "h-full bg-background text-on-background font-body-md selection:bg-primary selection:text-on-primary",
        "antialiased",
        geistSans.variable,
        geistMono.variable,
        "font-sans",
        dmSans.variable,
        outfitHeading.variable,
      )}
      suppressHydrationWarning
    >
      <body className="min-h-full flex flex-col overflow-x-hidden">
        {children}
      </body>
    </html>
  );
}