import type { Metadata } from 'next'
import { Inter_Tight, Space_Grotesk } from 'next/font/google'
import './globals.css'
import { Providers } from './providers'

// Body/UI font - straff, modern, excellent readability
const interTight = Inter_Tight({
  subsets: ['latin'],
  variable: '--font-body',
  display: 'swap',
})

// Headline font - geometric, futuristic, "smart" look
const spaceGrotesk = Space_Grotesk({
  subsets: ['latin'],
  variable: '--font-display',
  display: 'swap',
})

export const metadata: Metadata = {
  title: 'Alertify - Track Changes on Any Website',
  description: 'Alertify helps you track website changes in real-time. Get notified instantly when content updates.',
}

import { Toaster } from 'sonner'

import { PostHogProvider } from '@/components/analytics/PostHogProvider'
import { CookieBanner } from '@/components/compliance/CookieBanner'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={`${interTight.variable} ${spaceGrotesk.variable}`}>
      <body className={interTight.className}>
        <PostHogProvider>
          <Providers>{children}</Providers>
          <CookieBanner />
          <Toaster richColors position="top-right" />
        </PostHogProvider>
      </body>
    </html>
  )
}
