import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import { ThemeProvider } from "@/components/theme-provider"
import Navbar from "@/components/navbar"
import Footer from "@/components/footer"
import CookieBanner from "@/components/cookie-banner"
import Analytics from "@/components/analytics"
import { Suspense } from "react"

// Load Inter font from Google Fonts
const inter = Inter({
  subsets: ["latin"],
  display: "swap",
})

export const metadata: Metadata = {
  title: "QuantumVerify - Quantum-secure, sub-100 ms payee verification",
  description:
    "Real-time, quantum-secure verification before the money moves. Cross-border payments confirmed in ≤ 100 ms with post-quantum signatures and explainable AI.",
  openGraph: {
    title: "QuantumVerify - Quantum-secure verification",
    description:
      "Real-time, quantum-secure verification before the money moves. Cross-border payments confirmed in ≤ 100 ms.",
    url: process.env.NEXT_PUBLIC_SITE_URL || "https://quantumverify.io",
    siteName: "QuantumVerify",
    images: [
      {
        url: `${process.env.NEXT_PUBLIC_SITE_URL || "https://quantumverify.io"}/api/og`,
        width: 1200,
        height: 630,
        alt: "QuantumVerify",
      },
    ],
    locale: "en_US",
    type: "website",
  },
    generator: 'v0.dev'
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <link rel="icon" href="/images/logo.png" />
      </head>
      <body className={inter.className}>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
          <Suspense>
            <Navbar />
            {children}
            <Footer />
            <CookieBanner />
            <Analytics />
          </Suspense>
        </ThemeProvider>
      </body>
    </html>
  )
}
