import type { Metadata } from 'next';
import { Inter } from 'next/font/google'; 
import './globals.css';

// Import global components
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer'; // <-- Import the new Footer
import BackToHome from '@/components/BackToHome'; 
import CartDrawer from '@/components/CartDrawer'; 

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
  title: 'WowWear | Wear What Wows You',
  description: 'Premium print-on-demand apparel and accessories.',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={`${inter.className} flex flex-col min-h-screen`}>
        
        <Navbar />
        
        {/* 'flex-grow' ensures this section takes up the remaining space */}
        <main className="flex-grow">{children}</main>

        <Footer />

        {/* Global Floating Components */}
        <CartDrawer />
        <BackToHome />
        
      </body>
    </html>
  );
}