'use client';

import { useState } from 'react';
import AnnouncementBar from '@/components/xevon/AnnouncementBar';
import Header from '@/components/xevon/Header';
import MobileMenu from '@/components/xevon/MobileMenu';
import CartDrawer from '@/components/xevon/CartDrawer';
import HeroSlider from '@/components/xevon/HeroSlider';
import CategoryGrid from '@/components/xevon/CategoryGrid';
import PromoBanners from '@/components/xevon/PromoBanners';
import ProductGrid from '@/components/xevon/ProductGrid';
import TrustBar from '@/components/xevon/TrustBar';
import Footer from '@/components/xevon/Footer';
import MobileNav from '@/components/xevon/MobileNav';
import FloatingWidgets from '@/components/xevon/FloatingWidgets';

export default function Home() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  return (
    <div className="min-h-screen flex flex-col">
      <AnnouncementBar />
      <Header mobileMenuOpen={mobileMenuOpen} setMobileMenuOpen={setMobileMenuOpen} />
      <MobileMenu open={mobileMenuOpen} onClose={() => setMobileMenuOpen(false)} />
      <CartDrawer />

      <main className="min-h-screen">
        <HeroSlider />
        <CategoryGrid />
        <PromoBanners />

        <section>
          <div className="max-w-7xl mx-auto px-4 lg:px-8">
            <ProductGrid />
          </div>
        </section>

        <TrustBar />
      </main>

      <Footer className="mt-auto" />
      <MobileNav />
      <FloatingWidgets />
    </div>
  );
}
