import { Raleway } from "next/font/google";
import "./globals.css"; 
import MainLayout from "@/layouts/MainLayout";
import Loading from "@/layouts/loading";
import { Suspense } from "react";
import ScrollToTop from "@/hooks/ScroolTop";
import { CartProvider } from "@/context/CartContex";
import { Toaster } from 'react-hot-toast';
import Script from 'next/script';
import type { Metadata } from "next";

const raleway = Raleway({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-raleway'
});

const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || "https://www.secamuhendislik.com";

export const metadata: Metadata = {
  metadataBase: new URL(siteUrl),
  title: {
    default: "SECA Mühendislik",
    template: "%s | SECA Mühendislik",
  },
  description:
    "SECA Mühendislik endüstriyel otomasyon, ürün, marka ve çözüm içerikleri.",
  alternates: {
    canonical: "/",
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      "max-image-preview": "large",
      "max-snippet": -1,
      "max-video-preview": -1,
    },
  },
  openGraph: {
    type: "website",
    locale: "tr_TR",
    url: siteUrl,
    siteName: "SECA Mühendislik",
    title: "SECA Mühendislik",
    description:
      "SECA Mühendislik endüstriyel otomasyon, ürün, marka ve çözüm içerikleri.",
  },
  twitter: {
    card: "summary_large_image",
    title: "SECA Mühendislik",
    description:
      "SECA Mühendislik endüstriyel otomasyon, ürün, marka ve çözüm içerikleri.",
  },
  icons: {
    icon: '/fav-logo-02-01.svg',
  },
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <CartProvider>
      <html lang="tr">
        <head>
          <link rel="preconnect" href="https://www.googletagmanager.com" />
          <link rel="preconnect" href="https://www.google-analytics.com" />
          <Script
            src="https://www.googletagmanager.com/gtag/js?id=G-5W4142F0TS"
            strategy="lazyOnload"
          />
          <Script id="ga-script" strategy="lazyOnload">
            {`
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}
              gtag('js', new Date());
              gtag('config', 'G-5W4142F0TS');
            `}
          </Script>

          {/* Google Tag Manager */}
          <Script id="gtm-script" strategy="lazyOnload">
            {`
              (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-P6ZDP8ZD');
            `}
          </Script>

          {/* ✅ Google reCAPTCHA v2 */}
        </head>
        <body className={`${raleway.variable}`} suppressHydrationWarning>
          {/* JS kapalıysa çalışacak iframe */}
          <noscript>
            <iframe
              src="https://www.googletagmanager.com/ns.html?id=GTM-P6ZDP8ZD"
              height="0"
              width="0"
              style={{ display: 'none', visibility: 'hidden' }}
            ></iframe>
          </noscript>

          <ScrollToTop />
          <Suspense fallback={<Loading />}>
            <MainLayout>
              {children}
            </MainLayout>
          </Suspense>
          <Toaster position="top-right" />
        </body>
      </html>
    </CartProvider>
  );
}
