import type React from "react"
import type { Metadata } from "next"
import { Poppins, Inter } from "next/font/google"
import { Analytics } from "@vercel/analytics/next"
import "./globals.css"

const poppins = Poppins({
  subsets: ["latin"],
  weight: ["400", "500", "600", "700", "800"],
  variable: "--font-poppins",
})

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
})

export const metadata: Metadata = {
  title: "Beyond Classroom Coding | Coding, Robotics & AI Education",
  description:
    "Beyond Classroom Coding offers hands-on coding, robotics, and AI workshops, teacher training, web development, and digital marketing services in South Africa and Lesotho.",
  keywords: [
    "coding",
    "robotics",
    "AI",
    "education",
    "South Africa",
    "Lesotho",
    "web development",
    "digital marketing",
  ],
}

export const viewport = {
  themeColor: "#1a5276",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" className="scroll-smooth">
      <body className={`${poppins.variable} ${inter.variable} font-sans antialiased`}>
        {children}
        <Analytics />
      </body>
    </html>
  )
}