import { Analytics } from '@vercel/analytics/next'
import type { Metadata, Viewport } from 'next'
import { Open_Sans, Poppins } from 'next/font/google'
import { Header } from '@/components/header'
import { Footer } from '@/components/footer'
import './globals.css'

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

const poppins = Poppins({
  subsets: ['latin'],
  weight: ['500', '600', '700', '800'],
  variable: '--font-poppins',
  display: 'swap',
})

export const metadata: Metadata = {
  title: {
    default: '24-7 Care Givers | Compassionate In-Home Care in Port Saint Lucie, FL',
    template: '%s | 24-7 Care Givers',
  },
  description:
    'Qualified 24/7 caregivers providing personal care, companionship, private nursing, medication management, and more in Port Saint Lucie, Florida. Call +1 772 252 5270.',
  keywords: [
    'caregivers',
    'home care',
    'senior care',
    'private nursing',
    'Port Saint Lucie',
    'Florida',
    '24/7 care',
  ],
  generator: 'v0.app',
}

export const viewport: Viewport = {
  colorScheme: 'light',
  themeColor: '#2f6bb0',
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" className={`${openSans.variable} ${poppins.variable} bg-background`}>
      <body className="antialiased flex min-h-screen flex-col">
        <Header />
        <main className="flex-1">{children}</main>
        <Footer />
        {process.env.NODE_ENV === 'production' && <Analytics />}
      </body>
    </html>
  )
}