import type { Metadata } from 'next';
import './globals.css';
import { Header } from '@/components/header';
import { Footer } from '@/components/footer';
import { FloatingWhatsapp } from '@/components/floating-whatsapp';
import { site } from '@/lib/site';

export const metadata: Metadata = {
    title: {
        default: `${site.brand} — ${site.tagline}`,
        template: `%s | ${site.brand}`,
    },
    description:
        'Generators, water pumps, agricultural machinery and power tools — sized, delivered and serviced for Ugandan businesses, farms and contractors.',
    metadataBase: new URL(`https://${site.domain}`),
    openGraph: {
        type: 'website',
        siteName: site.brand,
        locale: 'en_UG',
    },
    icons: { icon: '/favicon.ico' },
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html lang="en" className="h-full">
            <head>
                <link rel="preconnect" href="https://fonts.googleapis.com" />
                <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
                <link
                    rel="stylesheet"
                    href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Barlow:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"
                />
            </head>
            <body className="min-h-full flex flex-col bg-ink-950 text-steel-100">
                <Header />
                <main className="flex-1">{children}</main>
                <Footer />
                <FloatingWhatsapp />
            </body>
        </html>
    );
}
