import { SiteFooter } from '@/Components/site-footer';
import { SiteHeader } from '@/Components/site-header';
import { CreativeBackground } from '@/Components/creative-background';
import ScrollToTop from '@/Components/ScrollToTop';
import { Head } from '@inertiajs/react';
import { ReactNode } from 'react';

interface Props {
    children: ReactNode;
    title?: string;
    description?: string;
}

export default function AltivateLayout({ children, title, description }: Props) {
    const fullTitle = title 
        ? `${title} — Altivate Solutions` 
        : "Altivate Solutions — Strategy, branding & marketing for African businesses";
    
    const metaDescription = description || "One partner. One system. One result: growth you can measure. Altivate is an integrated growth engine for Nigerian SMEs and African diaspora businesses.";

    return (
        <div className="flex min-h-screen flex-col relative isolate">
            <Head>
                <title>{fullTitle}</title>
                <meta name="description" content={metaDescription} />
                <meta property="og:title" content={fullTitle} />
                <meta property="og:description" content={metaDescription} />
                <meta property="og:type" content="website" />
                <meta name="twitter:card" content="summary" />
            </Head>

            <CreativeBackground />
            
            <div className="relative z-10 flex flex-col min-h-screen">
                <SiteHeader />
                <main className="flex-1">
                    {children}
                </main>
                <SiteFooter />
            </div>
            <ScrollToTop />
        </div>
    );
}
