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: 'Website Monitor - Track Changes on Any Website',
  description: 'Monitor website changes with smart filtering and instant alerts',
}

import { Toaster } from 'sonner'

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