
import type { Metadata } from 'next';
import { Montserrat, Open_Sans } from 'next/font/google';
import './globals.css';
import { ThemeProvider } from '@/components/theme-provider';
import { Toaster } from '@/components/ui/toaster';
import { Providers } from '@/components/providers';
import { StructuredData } from '@/components/structured-data';
import { GoogleAnalytics } from '@/components/google-analytics';
import { AccessibilitySkipLink } from '@/components/accessibility-skip-link';
import { RealtimeProvider } from '@/components/realtime-provider';
import { PWAInstaller } from '@/components/pwa-installer';
import { ErrorBoundaryEnhanced } from '@/components/error-boundary-enhanced';
import { LazyChatbotWidget } from '@/components/lazy-components';
import { PerformanceMonitor } from '@/components/performance-monitor';

// Typography: Montserrat for headings, Open Sans for body
const montserrat = Montserrat({ 
  subsets: ['latin'],
  variable: '--font-montserrat',
  display: 'swap',
});

const openSans = Open_Sans({ 
  subsets: ['latin'],
  variable: '--font-open-sans',
  display: 'swap',
});

export const dynamic = "force-dynamic";

export const metadata: Metadata = {
  metadataBase: new URL(process.env.NEXTAUTH_URL || 'http://localhost:3000'),
  title: {
    default: 'Quote2ContractPro - Professional Home Services Platform',
    template: '%s | Quote2ContractPro',
  },
  description: 'Complete CRM solution for home services contractors specializing in roofing, pools, gutters, and irrigation systems. Streamline quotes, contracts, and customer management.',
  keywords: ['CRM', 'home services', 'roofing', 'pools', 'gutters', 'irrigation', 'contractor management', 'quote management', 'contract management'],
  authors: [{ name: 'Quote2ContractPro' }],
  creator: 'Quote2ContractPro',
  publisher: 'Quote2ContractPro',
  formatDetection: {
    email: false,
    address: false,
    telephone: false,
  },
  icons: {
    icon: '/favicon.svg',
    shortcut: '/favicon.svg',
    apple: '/logo-small.png',
  },
  manifest: '/manifest.json',
  openGraph: {
    type: 'website',
    locale: 'en_US',
    url: process.env.NEXTAUTH_URL || 'http://localhost:3000',
    title: 'Quote2ContractPro - Professional Home Services Platform',
    description: 'Complete CRM solution for home services contractors specializing in roofing, pools, gutters, and irrigation systems.',
    siteName: 'Quote2ContractPro',
    images: [
      {
        url: '/og-image.png',
        width: 1200,
        height: 630,
        alt: 'Quote2ContractPro Platform',
      },
    ],
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Quote2ContractPro - Professional Home Services Platform',
    description: 'Complete CRM solution for home services contractors',
    images: ['/og-image.png'],
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      'max-video-preview': -1,
      'max-image-preview': 'large',
      'max-snippet': -1,
    },
  },
  verification: {
    google: 'google-site-verification-code',
  },
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <StructuredData />
      </head>
      <body className={`${openSans.variable} ${montserrat.variable} font-sans`} suppressHydrationWarning>
        <GoogleAnalytics />
        <AccessibilitySkipLink />
        <ThemeProvider
          attribute="class"
          defaultTheme="light"
          enableSystem={false}
          disableTransitionOnChange
        >
          <Providers>
            <RealtimeProvider>
              <ErrorBoundaryEnhanced showDetails={process.env.NODE_ENV === 'development'}>
                <div id="main-content" className="min-h-screen bg-gradient-to-br from-[#fefdfb] via-white to-[#fefdfb]/50">
                  {children}
                </div>
              </ErrorBoundaryEnhanced>
              <LazyChatbotWidget />
              <PWAInstaller />
              {process.env.NODE_ENV === 'development' && <PerformanceMonitor />}
              <Toaster />
            </RealtimeProvider>
          </Providers>
        </ThemeProvider>
      </body>
    </html>
  );
}
