import type { Metadata, Viewport } from 'next'
import { Antonio, Raleway, Quicksand } from 'next/font/google'
import { Analytics } from '@vercel/analytics/next'
import './globals.css'
import { EventProvider } from '@/components/event-provider'
import { getPublicEvent, registrationEnabled } from '@/lib/lukenya-api'

// Race data comes from the backend; refresh it at most once a minute.
export const revalidate = 60

const antonio = Antonio({ 
  subsets: ['latin'],
  weight: ['400', '700'],
  variable: '--font-antonio',
  display: 'swap',
})

const raleway = Raleway({ 
  subsets: ['latin'],
  weight: ['400', '600', '700'],
  variable: '--font-raleway',
  display: 'swap',
})

const quicksand = Quicksand({ 
  subsets: ['latin'],
  weight: ['400', '500', '600'],
  variable: '--font-quicksand',
  display: 'swap',
})

export const metadata: Metadata = {
  title: '10 Million Trees Marathon | Lukenya University',
  description: 'Africa\'s only university-backed marathon with a verified reforestation mission. Running, cycling and virtual races, competitive prize money and certified timing.',
  keywords: ['marathon', 'Kenya', 'Lukenya University', 'environmental', 'running', 'ASAL', 'reforestation', '10 million trees', 'Machakos'],
  openGraph: {
    title: '10 Million Trees Marathon | Lukenya University',
    description: 'Run for Kenya. Plant a Future. Africa\'s only university-backed environmental marathon.',
    type: 'website',
  },
}

export const viewport: Viewport = {
  themeColor: '#006838',
  width: 'device-width',
  initialScale: 1,
}

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  const event = await getPublicEvent()
  return (
    <html lang="en" className="bg-background">
      <body className={`${antonio.variable} ${raleway.variable} ${quicksand.variable} font-sans antialiased`}>
        <EventProvider event={event} registrationEnabled={registrationEnabled()}>
          {children}
        </EventProvider>
        {process.env.NODE_ENV === 'production' && <Analytics />}
      </body>
    </html>
  )
}