import { Hero } from "@/components/hero";
import { FeaturedProducts } from "@/components/featured-products";
import { Categories } from "@/components/categories";
import { Footer } from "@/components/footer";
import { Container } from "@/components/container";
import { Button } from "@/components/ui/button";
import Link from "next/link";

export default function Home() {
  return (
    <>
      <Hero />
      <FeaturedProducts />
      <Categories />
      
      {/* Why Choose Us Section */}
      <section className="py-20">
        <Container>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="text-center">
              <div className="w-16 h-16 bg-neutral-900 dark:bg-neutral-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <span className="text-2xl">🚚</span>
              </div>
              <h3 className="font-semibold text-lg mb-2">Free Delivery</h3>
              <p className="text-sm text-neutral-600 dark:text-neutral-400">
                Free shipping on all orders over $500
              </p>
            </div>
            <div className="text-center">
              <div className="w-16 h-16 bg-neutral-900 dark:bg-neutral-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <span className="text-2xl">✓</span>
              </div>
              <h3 className="font-semibold text-lg mb-2">Quality Guarantee</h3>
              <p className="text-sm text-neutral-600 dark:text-neutral-400">
                Premium materials and expert craftsmanship
              </p>
            </div>
            <div className="text-center">
              <div className="w-16 h-16 bg-neutral-900 dark:bg-neutral-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <span className="text-2xl">↻</span>
              </div>
              <h3 className="font-semibold text-lg mb-2">Easy Returns</h3>
              <p className="text-sm text-neutral-600 dark:text-neutral-400">
                30-day return policy, no questions asked
              </p>
            </div>
          </div>
        </Container>
      </section>

      {/* CTA Section */}
      <section className="py-20 bg-neutral-900 dark:bg-neutral-800 text-white">
        <Container>
          <div className="text-center max-w-2xl mx-auto">
            <h2 className="text-3xl md:text-4xl font-bold mb-4">
              Ready to Transform Your Home?
            </h2>
            <p className="text-neutral-300 mb-8">
              Browse our full collection and find the perfect pieces for your space
            </p>
            <Link href="/shop">
              <Button size="lg" variant="outline" className="bg-white text-neutral-900 hover:bg-neutral-100">
                Shop All Products
              </Button>
            </Link>
          </div>
        </Container>
      </section>

      <Footer />
    </>
  );
}