import type { Metadata } from "next";
import { Inter, Kanit } from "next/font/google";
import "./globals.css";
import '@splidejs/react-splide/css';
import 'aos/dist/aos.css';
import Footer from "./components/footer/Footer";
import Header from "./components/header/Header";
import FormModal from "./components/FormModal";
import StickyActionButton from "./components/footer/StickyActionButton";
import CalendlyModal from "./components/CalendlyModal";
import Script from "next/script";

const inter = Inter({
  variable: "--font-inter",
  subsets: ["latin"],
  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
});

const kanit = Kanit({
  variable: "--font-kanit",
  subsets: ["latin"],
  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
});

export const metadata: Metadata = {
  title: "Eleantz",
  description: "Eleantz is a platform for creating and managing your team",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
    const GTM_ID = process.env.NEXT_PUBLIC_GTM_ID;
  return (
    <html lang="en">
    <head>
        {GTM_ID && (
          <Script
            id="gtm-script"
            strategy="afterInteractive"
            dangerouslySetInnerHTML={{
              __html: `
                (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
                new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
                j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
                'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
                })(window,document,'script','dataLayer','${GTM_ID}');
              `,
            }}
          />
        )}
      </head>
      <body
        className={` ${inter.variable} ${kanit.variable} antialiased`}
      >
      {GTM_ID && (
          <noscript>
            <iframe
              src={`https://www.googletagmanager.com/ns.html?id=${GTM_ID}`}
              height="0"
              width="0"
              style={{ display: "none", visibility: "hidden" }}
            />
          </noscript>
        )}
        <Header/>
        {children}
        <Footer/>
        <FormModal/>
        <CalendlyModal/>
        <StickyActionButton/>
      </body>
    </html>
  );
}
