import type { Metadata, Viewport } from 'next'
import { Inter } from 'next/font/google'
import './globals.css'
import { Providers } from './providers'
import { ErrorBoundary } from '@/components/error-boundary'

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

export const metadata: Metadata = {
  title: {
    default: "Sankofa's Phoenix Nexus Cloud",
    template: "%s | Sankofa's Phoenix Nexus Cloud",
  },
  description: 'The sovereign cloud born of fire and ancestral wisdom.',
  metadataBase: new URL(process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000'),
}

// Viewport configuration without maximum-scale and user-scalable for accessibility compliance
export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
  // Note: maximum-scale and user-scalable removed per accessibility best practices
}

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

