import type { Metadata } from "next";
import { Noto_Serif, Inter } from "next/font/google";
import Script from "next/script";
import "./globals.css";
import RevealInit from "@/components/RevealInit";

const GA_MEASUREMENT_ID = "G-XTV0G1CSR7";

const notoSerif = Noto_Serif({
  variable: "--font-noto-serif",
  subsets: ["latin"],
  weight: ["400", "500", "700"],
  display: "swap",
  preload: true,
});

const inter = Inter({
  variable: "--font-inter",
  subsets: ["latin"],
  weight: ["400", "500", "600"],
  display: "swap",
  preload: true,
});

export const metadata: Metadata = {
  metadataBase: new URL("https://socialex.pro"),
  title: {
    default: "Socialex | L'Excellence Juridique au Service de votre Entreprise",
    template: "%s | Socialex",
  },
  description:
    "Expert juridique en droit des sociétés et droit des marques. Création, modifications statutaires, dépôt des comptes, dissolution, dépôt de marque. Une approche rigoureuse et digitale.",
  keywords: [
    "expert droit des sociétés",
    "création de société",
    "clôture de société",
    "dépôt des comptes",
    "secrétariat juridique",
    "liquidation",
    "Socialex",
  ],
  authors: [{ name: "Socialex" }],
  alternates: { canonical: "/" },
  openGraph: {
    title: "Socialex | L'Excellence Juridique",
    description:
      "Création, gestion et clôture de sociétés. Une approche rigoureuse pour sécuriser chaque étape de votre croissance corporate.",
    url: "https://socialex.pro",
    siteName: "Socialex",
    locale: "fr_FR",
    type: "website",
    images: [
      {
        url: "/logo.png",
        width: 512,
        height: 512,
        alt: "Socialex",
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    title: "Socialex | L'Excellence Juridique",
    description:
      "Expert juridique en droit des sociétés et des marques. Forfait clair, suivi rigoureux.",
    images: ["/logo.png"],
  },
  robots: {
    index: true,
    follow: true,
  },
};

/**
 * Root layout : html/body, fonts, motion init.
 * Nav + Footer publics sont dans `(public)/layout.tsx` pour que les routes
 * admin (`/socialexadmin`) et client (`/espace-client`) gardent leur propre
 * chrome.
 */
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html
      lang="fr"
      className={`${notoSerif.variable} ${inter.variable} antialiased`}
    >
      <head>
        {/* Preconnect aux origines tierces pour réduire la latence de
            handshake TLS sur les ressources critiques. */}
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link
          rel="preconnect"
          href="https://fonts.gstatic.com"
          crossOrigin="anonymous"
        />
        {/* Material Symbols : on lock opsz=24 et wght=300 (cf. globals.css)
            pour éviter de charger toute la variable font (1.1 MB → ~150 KB).
            FILL reste en axe variable car certains <Icon filled /> l'utilisent. */}
        <link
          rel="stylesheet"
          href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@24,300,0..1&display=swap"
        />
      </head>
      <body className="min-h-screen flex flex-col bg-background text-on-surface">
        <RevealInit />
        {children}
        <Script
          src={`https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`}
          strategy="afterInteractive"
        />
        <Script id="ga4-init" strategy="afterInteractive">
          {`
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${GA_MEASUREMENT_ID}');
          `}
        </Script>
      </body>
    </html>
  );
}
