import './globals.css'
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'KidsAI Explorer - Think, Learn, Discover!',
  description: 'A kid-friendly AI frontend that encourages critical thinking and self-discovery',
  icons: {
    icon: '/favicon.svg',
    apple: '/apple-touch-icon.png',
  },
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <head>
        <link href="https://fonts.googleapis.com/css2?family=Fredoka+One:wght@400&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
      </head>
      <body className="font-sans bg-gradient-to-br from-slate-50 to-blue-50 min-h-screen">
        <div className="relative z-10">
          {children}
        </div>
      </body>
    </html>
  )
}
