import { getProducts } from "@/lib/woocommerce";
import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";
import ProductCard from "@/components/product/ProductCard";

export const metadata = {
  title: "ManoonOils - Premium Natural Oils for Hair & Skin",
  description: "Discover our premium collection of natural oils for hair and skin care. Handmade with love.",
};

export default async function Homepage() {
  const products = await getProducts();
  const publishedProducts = products.filter((p) => p.status === "publish").slice(0, 4);

  return (
    <main className="min-h-screen">
      <Header />
      
      {/* Hero Section */}
      <section className="relative h-[80vh] flex items-center justify-center bg-gradient-to-b from-white to-background-ice">
        <div className="text-center px-4">
          <h1 className="text-5xl md:text-7xl font-serif mb-6">
            ManoonOils
          </h1>
          <p className="text-xl md:text-2xl text-foreground-muted mb-8">
            Premium Natural Oils for Hair & Skin
          </p>
          <a 
            href="/products" 
            className="inline-block bg-foreground text-white px-8 py-4 text-lg font-medium hover:bg-opacity-90 transition-all"
          >
            Shop Now
          </a>
        </div>
      </section>

      {/* Products Section */}
      {publishedProducts.length > 0 && (
        <section className="py-20 px-4">
          <div className="max-w-7xl mx-auto">
            <h2 className="text-4xl font-serif text-center mb-12">Our Products</h2>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
              {publishedProducts.map((product, index) => (
                <ProductCard key={product.id} product={product} index={index} />
              ))}
            </div>
          </div>
        </section>
      )}

      {/* About Teaser */}
      <section className="py-20 px-4 bg-background-ice">
        <div className="max-w-3xl mx-auto text-center">
          <h2 className="text-3xl font-serif mb-6">Natural & Pure</h2>
          <p className="text-lg text-foreground-muted mb-8">
            Our oils are crafted with love using only the finest natural ingredients.
          </p>
          <a href="/about" className="text-foreground border-b border-foreground pb-1">
            Learn More
          </a>
        </div>
      </section>
      
      <Footer />
    </main>
  );
}