import type { Metadata } from 'next';
import './globals.css';
import { AuthProvider } from '@/context/AuthContext';
import { CartProvider } from '@/context/CartContext';
import { WishlistProvider } from '@/context/WishlistContext';
import Header from '@/components/layout/Header';
import Footer from '@/components/layout/Footer';
import WhatsAppWidget from '@/components/common/WhatsAppWidget';

export const metadata: Metadata = {
  title: 'HN HostNeko Store - Premium WHMCS Modules & Web Scripts',
  description:
    'HN HostNeko is your ultimate store for digital products! Explore a wide range of verified WHMCS modules, Telegram Mini Apps, PHP Laravel scripts, and hosting plugins.',
  keywords: 'HN HostNeko, HostNeko Store, digital products, WHMCS modules, PHP scripts, Telegram Mini Apps, web development',
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <head>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
        <link
          href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
          rel="stylesheet"
        />
      </head>
      <body className="bg-gray-50 text-gray-900 min-h-screen flex flex-col antialiased font-sans">
        <AuthProvider>
          <CartProvider>
            <WishlistProvider>
              <Header />
              <main className="flex-1 pt-16 md:pt-20">{children}</main>
              <Footer />
              <WhatsAppWidget />
            </WishlistProvider>
          </CartProvider>
        </AuthProvider>
      </body>
    </html>
  );
}
