import { getProducts } from "@/lib/woocommerce";
import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";
import AnnouncementBar from "@/components/home/AnnouncementBar";
import NewHero from "@/components/home/NewHero";
import StatsSection from "@/components/home/StatsSection";
import FeaturesSection from "@/components/home/FeaturesSection";
import TestimonialsSection from "@/components/home/TestimonialsSection";
import NewsletterSection from "@/components/home/NewsletterSection";

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 using only the finest ingredients.",
};

export default async function Homepage() {
  let products: any[] = [];
  try {
    products = await getProducts();
  } catch (e) {
    // Fallback for build time when API is unavailable
    console.log('Failed to fetch products during build');
  }
  const featuredProduct = products.find((p) => p.status === "publish");
  const publishedProducts = products
    .filter((p) => p.status === "publish")
    .slice(0, 4);

  return (
    <main className="min-h-screen bg-white">
      <AnnouncementBar />
      <div className="pt-10">
        <Header />
      </div>

      {/* New Hero Section */}
      <NewHero featuredProduct={featuredProduct} />

      {/* Stats & Philosophy Section */}
      <StatsSection />

      {/* Features Section */}
      <FeaturesSection />

      {/* Testimonials Section */}
      <TestimonialsSection />

      {/* Newsletter Section */}
      <NewsletterSection />

      {/* Products Grid Section */}
      {publishedProducts.length > 0 && (
        <section className="py-20 px-6 bg-white">
          <div className="max-w-[1400px] mx-auto">
            <h2 className="font-serif italic text-4xl text-center mb-4">
              Our Collection
            </h2>
            <p className="text-center text-[#4A4A4A] mb-12 max-w-2xl mx-auto">
              Cold-pressed, pure, and natural oils for your daily beauty routine
            </p>
            <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>
      )}

      <Footer />
    </main>
  );
}

// Import ProductCard here to avoid circular dependency
import ProductCard from "@/components/product/ProductCard";