import { poppins } from "@/lib/font";
// import dynamic from "next/dynamic";

// // Lazy load heavy components
// const ContactFloat = dynamic(() => import("@/components/ContactFloat"), { ssr: false });
// const AutoPopup = dynamic(() => import("@/components/AutoPopup"), { ssr: false });

// Import only necessary CSS for global layout
import "@/node_modules/react-modal-video/css/modal-video.css";
import "../public/assets/css/bootstrap.css";
import "../public/assets/css/color.css";
import "../public/assets/css/style.css";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/free-mode";
import Head from "next/head";

export const metadata = {
  title: "Best Pain Relief & Physiotherapy - Repharehab Clinic",
  description: "Best pain relief physiotherapy clinic",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={`${poppins.variable}`}>
      <Head>
        {/* Lazy load non-critical CSS */}
        <link
          rel="stylesheet"
          href="/assets/css/style.css"
          media="print"
          onLoad="this.media='all'"
        />
        <link
          rel="stylesheet"
          href="/assets/css/swiper.css"
          media="print"
          onLoad="this.media='all'"
        />
        <link
          rel="stylesheet"
          href="/assets/css/swiper-pagination.css"
          media="print"
          onLoad="this.media='all'"
        />

        {/* Microsoft Clarity Tracking */}
        <script
          dangerouslySetInnerHTML={{
            __html: `
              (function(c,l,a,r,i,t,y){
                c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
                t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/th7p0lr1ca";
                y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
              })(window, document, "clarity", "script", "th7p0lr1ca");
            `,
          }}
        />
      </Head>
      <body>
        {children}

        {/* Lazy loaded components */}
        {/* <ContactFloat /> */}
        {/* <AutoPopup /> */}
      </body>
    </html>
  );
}
