import type { Metadata, Viewport } from 'next';
import { Archivo, Inter, Source_Sans_3 } from 'next/font/google';
import './globals.css';
import { Providers } from '@/components/Providers';
import { Header } from '@/components/layout/Header';
import { BottomNav } from '@/components/layout/BottomNav';
import { FloatingLangToggle } from '@/components/layout/FloatingLangToggle';
import { SiteFooter } from '@/components/layout/SiteFooter';

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

const archivo = Archivo({
  subsets: ['latin'],
  variable: '--font-archivo',
});

const sourceSans = Source_Sans_3({
  subsets: ['latin'],
  variable: '--font-source-sans',
});

export const metadata: Metadata = {
  title: {
    default: 'eHandyHire - Workers Directory in the Philippines',
    template: '%s | eHandyHire',
  },
  description:
    'Browse verified blue-collar workers across the Philippines. Carpenters, plumbers, electricians, and more.',
  keywords: ['handyman', 'carpenter', 'plumber', 'electrician', 'Philippines', 'blue collar', 'Manila', 'Cebu', 'Davao'],
  icons: {
    icon: [{ url: '/brand/favicon.png', type: 'image/png' }],
    apple: '/brand/apple-touch-icon.png',
  },
};

export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
  maximumScale: 1,
  themeColor: '#0c1929',
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={`${inter.variable} ${archivo.variable} ${sourceSans.variable} antialiased`}>
        <Providers>
          <Header />
          <div className="min-h-screen pb-16 md:pb-0 flex flex-col">
            <div className="flex-1">{children}</div>
            <SiteFooter />
          </div>
          <BottomNav />
          <FloatingLangToggle />
        </Providers>
      </body>
    </html>
  );
}