import type { Metadata } from 'next'
import { Analytics } from '@vercel/analytics/next'
import { AuthProvider } from '@/lib/auth-context'
import { VendorAuthProvider } from '@/lib/vendor-auth-context'
import { ConditionalFooter } from '@/components/layout/conditional-footer'
import { fontDashboard, fontSans } from '@/lib/fonts'
import './globals.css'

export const metadata: Metadata = {
  title: 'BeachLyfe - Discover Beach Experiences',
  description: 'Your gateway to coastal adventures. Discover rentals, attractions, and local vendors at beaches near you.',
  generator: 'v0.app',
  icons: {
    icon: '/fav.png',
    shortcut: '/fav.png',
    apple: '/fav.png',
  },
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" className={`${fontSans.variable} ${fontDashboard.variable}`}>
      <head>
        {/* Fallback so content is readable if main CSS fails to load (e.g. proxy not forwarding /_next/static) */}
        <style dangerouslySetInnerHTML={{ __html: `
          body{margin:0;min-height:100vh;background:#fafafa;color:#171717;line-height:1.5;-webkit-font-smoothing:antialiased;}
          .line-through{text-decoration:line-through;}
          [class*="text-primary"]{color:#2A7EE0;}
          [class*="text-muted"]{color:#737373;}
          [class*="font-bold"]{font-weight:700;}
          [class*="font-semibold"]{font-weight:600;}
        ` }} />
      </head>
      <body className={`${fontDashboard.className} antialiased min-h-screen`}>
        <AuthProvider>
          <VendorAuthProvider>
            <div className="flex min-h-screen flex-col">
              <main className="w-full min-w-0 flex-1">
                {children}
              </main>
              <ConditionalFooter />
            </div>
          </VendorAuthProvider>
        </AuthProvider>
        <Analytics />
      </body>
    </html>
  )
}
