import type { Metadata } from "next";

import "./globals.css";
import { telefonica } from "@/utils/fonts";
import HeadMeta from "@/components/head-meta";
import Header from "@/components/header";
import Modal from "@/components/ui/modal";
import { Suspense } from "react";
import Footer from "@/components/footer";
import { GoogleTagManager } from "@next/third-parties/google";
import dynamic from "next/dynamic";

export const metadata: Metadata = {
  title: "Movistar | Beneficio Exclusivo Clientes",
  description: "Olvídate de los imprevistos y simplifica tu vida con las nuevas asistencias de salud, hogar y vial.",
};

const CookiesBanner = dynamic(() => import("@/components/cookies-banner"), {
  ssr: false,
});

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <HeadMeta />
      <GoogleTagManager gtmId="GTM-MHRXF2CL" />
      <body className={`${telefonica.variable}`} suppressHydrationWarning>
        <noscript>
          <iframe
            src="https://www.googletagmanager.com/ns.html?id=GTM-MHRXF2CL"
            height="0"
            width="0"
            style={{ display: "none", visibility: "hidden" }}
          ></iframe>
        </noscript>
        <Header />
        <main className="mt-[4.5rem]">
          {children}
          <CookiesBanner />
        </main>
        <Suspense>
          <Modal />
        </Suspense>
        <Footer />
      </body>
    </html>
  );
}
