import type React from "react"
import type { Metadata } from "next"
import { Geist, Geist_Mono, DM_Sans, Bricolage_Grotesque } from "next/font/google"
import { Analytics } from "@vercel/analytics/next"
import { Toaster } from "sonner"
import { ThemeProvider } from "@/components/theme-provider"
import { ErrorBoundary } from "@/components/error-boundary"
import { env } from "@/lib/env"
import "./globals.css"

const geist = Geist({ subsets: ["latin"], variable: "--font-geist" })
const geistMono = Geist_Mono({ subsets: ["latin"], variable: "--font-geist-mono" })
const dmSans = DM_Sans({ subsets: ["latin"], variable: "--font-dm-sans" })
const bricolage = Bricolage_Grotesque({ subsets: ["latin"], variable: "--font-bricolage" })

export const metadata: Metadata = {
  title: "Factor Sciences - Professional Digital Telehealth Services",
  description: "Expert telehealth consultations and informational wellness services through licensed professionals. Digital healthcare services with no physical products or medications dispensed.",
  generator: "v0.app",
  keywords: ["telehealth", "digital health", "healthcare consultations", "wellness services", "professional telehealth"],
  icons: {
    icon: [
      {
        url: "/icon-light-32x32.png",
        media: "(prefers-color-scheme: light)",
      },
      {
        url: "/icon-dark-32x32.png",
        media: "(prefers-color-scheme: dark)",
      },
      {
        url: "/icon.svg",
        type: "image/svg+xml",
      },
    ],
    apple: "/apple-icon.png",
  },
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <script
          dangerouslySetInnerHTML={{
            __html: `window.__WC_BASE_URL__ = ${JSON.stringify(env.WC_BASE_URL)};`,
          }}
        />
      </head>
      <body className={`${dmSans.variable} ${bricolage.variable} ${geist.variable} ${geistMono.variable} font-sans antialiased`}>
        <a 
          href="#main-content" 
          className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-primary focus:text-primary-foreground focus:rounded-md"
        >
          Skip to main content
        </a>
        <ThemeProvider attribute="class" defaultTheme="light" enableSystem>
          <ErrorBoundary>
            <main id="main-content">
              {children}
            </main>
            <Toaster
              position="top-center"
              toastOptions={{
                classNames: {
                  error: "border-destructive/50 bg-destructive/10 text-destructive",
                  success: "border-green-500/50 bg-green-500/10 text-green-700 dark:text-green-400",
                  warning: "border-yellow-500/50 bg-yellow-500/10 text-yellow-700 dark:text-yellow-400",
                  info: "border-primary/50 bg-primary/10 text-primary",
                },
              }}
            />
          </ErrorBoundary>
          <Analytics />
        </ThemeProvider>
      </body>
    </html>
  )
}
