import type { Metadata } from 'next'
import { Plus_Jakarta_Sans, JetBrains_Mono, Geist } from 'next/font/google'
import './globals.css'
import Providers from './providers'
import Header from '@/components/layout/Header'
import Nav from '@/components/layout/Nav'
import StatusBar from '@/components/layout/StatusBar'
import AmbientBackground from '@/components/layout/AmbientBackground'
import { cn } from "@/lib/utils";

const geist = Geist({subsets:['latin'],variable:'--font-sans'});

const jakarta = Plus_Jakarta_Sans({
  subsets: ['latin'],
  variable: '--font-jakarta',
  weight: ['400', '500', '600', '700', '800'],
})
const mono = JetBrains_Mono({ subsets: ['latin'], variable: '--font-jetbrains' })

export const metadata: Metadata = {
  title: 'Ghost Node — Auction Sniper',
}

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={cn(jakarta.variable, mono.variable, "font-sans", geist.variable)}>
      <body className="bg-g-base text-g-text min-h-screen antialiased">
        <Providers>
          <AmbientBackground />
          <Header />
          <StatusBar />
          <Nav />
          <main className="relative px-6 py-8">
            <div className="mx-auto max-w-[1400px]">
              {children}
            </div>
          </main>
        </Providers>
      </body>
    </html>
  )
}
