import type { Metadata } from "next";
import { Inter, Plus_Jakarta_Sans } from "next/font/google";
import BootstrapLoader from "@/components/shared/BootstrapLoader";
import DarkModeToggle from "@/components/shared/DarkModeToggle";
import "bootstrap/dist/css/bootstrap.min.css";
import "aos/dist/aos.css";
import "@/public/assets/css/style.css";
import "@/public/assets/css/custom.css";

const primaryFont = Inter({
  subsets: ["latin"],
  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
  variable: "--font-primary",
  display: "swap",
});

const secondaryFont = Plus_Jakarta_Sans({
  subsets: ["latin"],
  weight: ["200", "300", "400", "500", "600", "700", "800"],
  variable: "--font-secondary",
  display: "swap",
});

export const metadata: Metadata = {
  title: {
    template: "%s | Sasico || Website Builder - SaaS & Tech Startup",
    default: "Sasico || Website Builder - SaaS & Tech Startup",
  },
  description: "Ai-power Software Solutions",
  icons: {
    icon: "/assets/images/favicon.ico",
  },
};

export default function RootLayout({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  return (
    <html lang="en">
      <body
        className={`${primaryFont.variable} ${secondaryFont.variable} website-builder`}
      >
        <BootstrapLoader />
        <DarkModeToggle />
        {children}
      </body>
    </html>
  );
}
