import type { Metadata } from "next";
import { MobileMenuProvider } from "@/components/global/MobileMenuContext";
import { SearchPopupProvider } from "@/components/global/SearchPopupContext";
import AosInit from "@/components/global/AosInit";
import BootstrapInit from "@/components/global/BootstrapInit";
import DarkModeBtn from "@/components/global/DarkModeBtn";
import ScrollTopBtn from "@/components/global/ScrollTopBtn";

// Core CSS
import "bootstrap/dist/css/bootstrap.min.css";
import "aos/dist/aos.css";
// Custom CSS
import "@/public/assets/css/style.css";
import "@/public/assets/css/custom.css";

export const metadata: Metadata = {
  title: {
    template: "%s | Sasico || Fintech Software - SaaS & Tech Startup",
    default: "Sasico || Fintech Software - 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">
      <head>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link
          rel="preconnect"
          href="https://fonts.gstatic.com"
          crossOrigin="anonymous"
        />
        <link
          href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap"
          rel="stylesheet"
        />
      </head>
      <body className="fintech-software">
        <MobileMenuProvider>
          <SearchPopupProvider>
            <BootstrapInit />
            <AosInit />
            <DarkModeBtn />
            <ScrollTopBtn />
            {children}
          </SearchPopupProvider>
        </MobileMenuProvider>
      </body>
    </html>
  );
}
