import type { Metadata, Viewport } from 'next'
import { DM_Sans, JetBrains_Mono } from 'next/font/google'
import './globals.css'
import { Navbar } from '@/components/layout/Navbar'
import { Footer } from '@/components/layout/Footer'
import { LenisProvider } from '@/lib/LenisProvider'

const dmSansDisplay = DM_Sans({
  subsets: ['latin'],
  weight: ['700', '800'],
  variable: '--font-display',
  display: 'swap',
})
const dmSansBody = DM_Sans({
  subsets: ['latin'],
  weight: ['400', '500', '700'],
  variable: '--font-body',
  display: 'swap',
})
const jetbrains = JetBrains_Mono({
  subsets: ['latin'],
  weight: ['400', '500'],
  variable: '--font-mono',
  display: 'swap',
})

export const metadata: Metadata = {
  metadataBase: new URL('https://nearle.in'),
  title: {
    default: 'Nearle — Your Neighbourhood, Your World',
    template: '%s | Nearle',
  },
  description:
    "India's hyperlocal neighbourhood commerce platform. Groceries, restaurants, home services, and trusted local businesses — all delivered to your door.",
  keywords: [
    'hyperlocal',
    'neighbourhood delivery',
    'Coimbatore',
    'local grocery',
    'Nearle',
    'home services',
    'India delivery',
  ],
  openGraph: {
    title: 'Nearle — Your Neighbourhood, Your World',
    description: "India's hyperlocal neighbourhood commerce platform",
    url: 'https://nearle.in',
    siteName: 'Nearle',
    locale: 'en_IN',
    type: 'website',
  },
  robots: { index: true, follow: true },
}

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html
      lang="en"
      className={`${dmSansDisplay.variable} ${dmSansBody.variable} ${jetbrains.variable}`}
    >
      <body className="bg-white text-nearle-dark font-body antialiased">
        <LenisProvider>
          <Navbar />
          <main>{children}</main>
          <Footer />
        </LenisProvider>
      </body>
    </html>
  )
}
