import type React from "react"
import type { Metadata } from "next"
import { GeistMono } from "geist/font/mono"
import { Playfair_Display, Space_Grotesk } from "next/font/google"
import { Analytics } from "@vercel/analytics/next"
import { Suspense } from "react"
import "./globals.css"

const playfair = Playfair_Display({
  subsets: ["latin"],
  variable: "--font-heading",
  display: "swap",
})

const spaceGrotesk = Space_Grotesk({
  subsets: ["latin"],
  variable: "--font-body",
  display: "swap",
})

export const metadata: Metadata = {
  title: "Inspiration Repo Agent - AI-Powered Creative Assistant",
  description: "Get inspired and generate creative content with our AI-powered assistant. Perfect for brainstorming, content creation, and creative problem-solving.",
  keywords: "AI, creative assistant, inspiration, brainstorming, content creation",
  authors: [{ name: "Inspiration Repo Team" }],
  creator: "Inspiration Repo",
  publisher: "Inspiration Repo",
  robots: "index, follow",
  openGraph: {
    title: "Inspiration Repo Agent - AI-Powered Creative Assistant",
    description: "Get inspired and generate creative content with our AI-powered assistant.",
    type: "website",
    locale: "en_US",
    siteName: "Inspiration Repo Agent",
  },
  twitter: {
    card: "summary_large_image",
    title: "Inspiration Repo Agent - AI-Powered Creative Assistant",
    description: "Get inspired and generate creative content with our AI-powered assistant.",
  },
  viewport: "width=device-width, initial-scale=1",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" className="dark" suppressHydrationWarning>
      <head>
        <link rel="canonical" href="https://inspiration-repo-agent.com" />
      </head>
      <body className={`${spaceGrotesk.variable} ${playfair.variable} ${GeistMono.variable} font-sans antialiased`}>
        <Suspense fallback={null}>{children}</Suspense>
        <Analytics />
      </body>
    </html>
  )
}
