import { poppins } from "@/lib/font";
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 Script from "next/script";

export const metadata = {
  title: "Best Pain Relief & Physiotherapy - Repharehab Clinic",
  description:
    "Rapharehab offers trusted physiotherapy and pain relief treatments with professional care tailored to restore your health and mobility.",
};

export default function RootLayout({ children }) {
  const siteUrl = "https://rapharehab.ca";
  const logoUrl = `${siteUrl}/assets/images/logo.png`;
  const ogImage = `${siteUrl}/assets/images/logo.jpg`;

  return (
    <html lang="en" className={`${poppins.variable}`}>
      <head>
        {/* ✅ Preload critical font */}
        {/* <link
          rel="preload"
          href="/fonts/poppins.woff2"
          as="font"
          type="font/woff2"
          crossOrigin="anonymous"
        /> */}

        {/* ✅ Canonical Tag */}
        <link rel="canonical" href={siteUrl} />

        {/* ✅ Open Graph Meta */}
        <meta property="og:title" content="Rapha Rehab – Physiotherapy Clinic" />
        <meta
          property="og:description"
          content="Trusted physiotherapy, pain relief and rehab clinic in Etobicoke. Book your appointment now."
        />
        <meta property="og:type" content="website" />
        <meta property="og:url" content={siteUrl} />
        <meta property="og:image" content={ogImage} />
        <meta property="og:site_name" content="Rapha Rehab" />
        <meta property="og:locale" content="en_CA" />

        {/* ✅ Twitter Meta */}
        <meta name="twitter:card" content="summary_large_image" />
        <meta
          name="twitter:title"
          content="Rapha Rehab – Physiotherapy & Rehab Clinic in Etobicoke"
        />
        <meta
          name="twitter:description"
          content="Expert physiotherapy and pain relief treatments tailored to you."
        />
        <meta name="twitter:image" content={ogImage} />
        <meta name="twitter:site" content="@YourTwitterHandle" />

        {/* ✅ Preconnect — Faster 3rd-party requests */}
        <link rel="preconnect" href="https://www.googletagmanager.com" />
        <link rel="preconnect" href="https://connect.facebook.net" />
        <link rel="preconnect" href="https://www.facebook.com" />
        <link rel="preconnect" href="https://scripts.clarity.ms" />

        {/* ✅ fetchpriority for LCP Image */}
        <link
          rel="preload"
          as="image"
          href="/assets/images/banner/mobile-banner/4.webp"
          fetchPriority="high"
        />
      </head>

      <body>
        {/* ✅ Google Tag Manager — non-blocking */}
        <Script id="gtm-init" strategy="afterInteractive">
          {`
            (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','G-KM1KJW539N');
          `}
        </Script>

        {/* ✅ Microsoft Clarity — lazy load to reduce LCP impact */}
        <Script id="clarity-script" strategy="lazyOnload">
          {`
            window.onload = function() {
              setTimeout(() => {
                (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");
              }, 3000);
            };
          `}
        </Script>

        {/* ✅ Facebook Pixel — lazy load to avoid blocking */}
        <Script id="facebook-pixel" strategy="lazyOnload">
          {`
            setTimeout(() => {
              !function(f,b,e,v,n,t,s){
                if(f.fbq)return;
                n=f.fbq=function(){n.callMethod?
                n.callMethod.apply(n,arguments):n.queue.push(arguments)};
                if(!f._fbq)f._fbq=n;
                n.push=n;
                n.loaded=!0;
                n.version='2.0';
                n.queue=[];
                t=b.createElement(e);t.async=!0;
                t.src=v;
                s=b.getElementsByTagName(e)[0];
                s.parentNode.insertBefore(t,s)
              }(window, document,'script','https://connect.facebook.net/en_US/fbevents.js');
              fbq('init', '1133141855537200');
              fbq('track', 'PageView');
            }, 4000);
          `}
        </Script>

        {/* ✅ Facebook & GTM noscript fallback */}
        <noscript>
          <iframe
            src="https://www.googletagmanager.com/ns.html?id=G-KM1KJW539N"
            height="0"
            width="0"
            style={{ display: "none", visibility: "hidden" }}
          ></iframe>
          <img
            height="1"
            width="1"
            style={{ display: "none" }}
            src="https://www.facebook.com/tr?id=1133141855537200&ev=PageView&noscript=1"
            alt="facebook pixel"
          />
        </noscript>

        {children}
      </body>
    </html>
  );
}
