import React from "react";
import type { Metadata } from "next";
import "./globals.css";
import Script from "next/script";

import Preloader from "@/components/common/Preloader";
import BackToTop from "@/components/common/BackToTop";
import SearchOverlay from "@/components/common/SearchOverlay";
import Offcanvas from "@/components/common/Offcanvas";

export const metadata: Metadata = {
    title: "Metatroncube - IT Solutions & Technology",
    description: "IT Solutions & Technology",
};

export default function RootLayout({
    children,
}: {
    children: React.ReactNode;
}) {
    return (
        <html lang="en">
            <head>
                <link rel="stylesheet" href="/assets/css/bootstrap.min.css" />
                <link rel="stylesheet" href="/assets/css/meanmenu.min.css" />
                <link rel="stylesheet" href="/assets/css/animate.css" />
                <link rel="stylesheet" href="/assets/css/swiper.min.css" />
                <link rel="stylesheet" href="/assets/css/slick.css" />
                <link rel="stylesheet" href="/assets/css/magnific-popup.css" />
                <link rel="stylesheet" href="/assets/css/fontawesome-pro.css" />
                <link rel="stylesheet" href="/assets/css/icomoon.css" />
                <link rel="stylesheet" href="/assets/css/spacing.css" />
                <link rel="stylesheet" href="/assets/css/main.css" />
            </head>
            <body>
                <Preloader />
                <BackToTop />
                <SearchOverlay />
                <Offcanvas />
                {children}

                <Script src="/assets/js/jquery-3.7.1.min.js" strategy="beforeInteractive" />
                <Script src="/assets/js/waypoints.min.js" strategy="afterInteractive" />
                <Script src="/assets/js/bootstrap.bundle.min.js" strategy="afterInteractive" />
                <Script src="/assets/js/meanmenu.min.js" strategy="afterInteractive" />
                <Script src="/assets/js/swiper.min.js" strategy="afterInteractive" />
                <Script src="/assets/js/slick.min.js" strategy="afterInteractive" />
                <Script src="/assets/js/magnific-popup.min.js" strategy="afterInteractive" />
                <Script src="/assets/js/counterup.js" strategy="afterInteractive" />
                <Script src="/assets/js/wow.js" strategy="afterInteractive" />
                <Script src="/assets/js/main.js" strategy="afterInteractive" />
            </body>
        </html>
    );
}
