import type { Metadata } from 'next'
import { Inter, Bebas_Neue } from 'next/font/google'
import './globals.css'

import { LoadingProvider } from '@/components/providers/LoadingProvider'
import { SmoothScrollProvider } from '@/components/providers/SmoothScrollProvider'
import { CustomCursor } from '@/components/ui/CustomCursor'
import { NoiseOverlay } from '@/components/ui/NoiseOverlay'
import { OrbitalMenu } from '@/components/navigation/OrbitalMenu'
import { Loader } from '@/components/sections/Loader'

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
  display: 'swap',
})

const bebasNeue = Bebas_Neue({
  subsets: ['latin'],
  weight: '400',
  variable: '--font-bebas',
  display: 'swap',
})

export const metadata: Metadata = {
  title: 'Martin Baturina — Official',
  description: 'Martin Baturina — Croatian footballer, Como 1907, attacking midfielder. Official digital experience.',
  openGraph: {
    title: 'Martin Baturina — Official',
    description: 'The immersive digital experience of Croatian talent Martin Baturina.',
    type: 'website',
  },
}

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={`${inter.variable} ${bebasNeue.variable}`} style={{ background: '#020209', color: '#F0F0FF' }}>
      <head>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
        <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet" />
      </head>
      <body className="cursor-none antialiased" suppressHydrationWarning>
        <LoadingProvider>
          <SmoothScrollProvider>
            <Loader />
            <CustomCursor />
            <NoiseOverlay />
            <OrbitalMenu />
            {children}
          </SmoothScrollProvider>
        </LoadingProvider>
      </body>
    </html>
  )
}
