import { Hero } from "@/components/hero";
import { CategoryBar } from "@/components/category-bar";
import { ProductGrid } from "@/components/product-grid";
import { Footer } from "@/components/footer";
import { Container } from "@/components/container";

export default function Home() {
  return (
    <main className="min-h-screen bg-neutral-50">
      <CategoryBar />
      <Hero />
      
      <div className="py-8">
        <Container>
          <div className="bg-orange-600 rounded-xl p-6 md:p-10 text-white flex flex-col md:flex-row items-center justify-between gap-6">
            <div>
              <h2 className="text-2xl md:text-3xl font-bold mb-2">Flash Sale is Live!</h2>
              <p className="text-orange-100">Up to 70% off on selected international brands.</p>
            </div>
            <div className="flex gap-4 text-center">
              <div className="bg-white/20 rounded-lg p-3 min-w-[60px]">
                <span className="block text-xl font-bold">12</span>
                <span className="text-xs uppercase">Hrs</span>
              </div>
              <div className="bg-white/20 rounded-lg p-3 min-w-[60px]">
                <span className="block text-xl font-bold">45</span>
                <span className="text-xs uppercase">Min</span>
              </div>
              <div className="bg-white/20 rounded-lg p-3 min-w-[60px]">
                <span className="block text-xl font-bold">30</span>
                <span className="text-xs uppercase">Sec</span>
              </div>
            </div>
          </div>
        </Container>
      </div>

      <ProductGrid title="Featured Products" />
      
      <section className="py-12 bg-white">
        <Container>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="flex items-start gap-4">
              <div className="bg-orange-100 p-3 rounded-full text-orange-600 text-2xl">🌍</div>
              <div>
                <h4 className="font-bold mb-1">Global Selection</h4>
                <p className="text-sm text-neutral-600">Access products from top international marketplaces in one place.</p>
              </div>
            </div>
            <div className="flex items-start gap-4">
              <div className="bg-orange-100 p-3 rounded-full text-orange-600 text-2xl">💎</div>
              <div>
                <h4 className="font-bold mb-1">Curated Quality</h4>
                <p className="text-sm text-neutral-600">Every product is hand-picked for quality and value for money.</p>
              </div>
            </div>
            <div className="flex items-start gap-4">
              <div className="bg-orange-100 p-3 rounded-full text-orange-600 text-2xl">🔗</div>
              <div>
                <h4 className="font-bold mb-1">Direct Links</h4>
                <p className="text-sm text-neutral-600">Shop directly from trusted sellers with our secure affiliate links.</p>
              </div>
            </div>
          </div>
        </Container>
      </section>

      <ProductGrid title="New Arrivals" />
      
      <Footer />
    </main>
  );
}