import type { Metadata } from "next"
import { Space_Grotesk, Inter, Space_Mono } from "next/font/google"
import { ScrollModeController } from "@/components/scroll-mode-controller"
import "./globals.css"

const spaceGrotesk = Space_Grotesk({
  subsets: ["latin"],
  variable: "--font-heading",
  weight: ["300", "400", "500", "600", "700"],
})

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-body",
  weight: ["300", "400", "500", "600"],
})

const spaceMono = Space_Mono({
  subsets: ["latin"],
  variable: "--font-mono",
  weight: ["400", "700"],
})

export const metadata: Metadata = {
  title: {
    default: "VALABEL — Streetwear Néoprène Premium",
    template: "%s | VALABEL",
  },
  description:
    "Streetwear technique premium en néoprène. Drops limités, design futuriste. Bruxelles.",
  keywords: ["streetwear", "néoprène", "techwear", "drops limités", "premium"],
  openGraph: {
    title: "VALABEL",
    description: "Streetwear technique premium en néoprène.",
    url: "https://valabel.com",
    siteName: "VALABEL",
    locale: "fr_BE",
    type: "website",
  },
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html
      lang="fr"
      className={`${spaceGrotesk.variable} ${inter.variable} ${spaceMono.variable} h-full`}
    >
      <head>
        {/* Applique le thème et les couleurs personnalisées avant le premier rendu, pour éviter un flash */}
        <script
          dangerouslySetInnerHTML={{
            __html: `try{if(localStorage.getItem('valabel-theme')==='light'){document.documentElement.setAttribute('data-theme','light')}var c=JSON.parse(localStorage.getItem('valabel-colors')||'{}');var m={bg:'--bg',text:'--text',accent:'--accent'};for(var k in m){if(c[k])document.documentElement.style.setProperty(m[k],c[k])}}catch(e){}`,
          }}
        />
      </head>
      <body className="min-h-full flex flex-col antialiased">
        <ScrollModeController />
        {children}
      </body>
    </html>
  )
}
