manoon-headless/src/app/page.tsx

import { getProducts } from "@/lib/saleor";
import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";
import HeroVideo from "@/components/home/HeroVideo";
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 using only the finest ingredients.",
};

export default async function Homepage() {
  let products: any[] = [];
  try {
    products = await getProducts("SR");
  } catch (e) {
    // Fallback for build time when API is unavailable
    console.log('Failed to fetch products during build');
  }
  
  const featuredProducts = products?.slice(0, 4) || [];
  const hasProducts = featuredProducts.length > 0;

  return (
    <>
      <Header />
      
      <main className="min-h-screen bg-white">
        {/* Hero Section with Video Background */}
        <HeroVideo />

        {/* Main Content */}
        <div id="main-content" className="scroll-mt-[72px] lg:scroll-mt-[72px]">
          {/* Products Grid Section */}
          {hasProducts && (
            <section className="py-24 px-4 sm:px-6 lg:px-8 bg-white">
              <div className="max-w-7xl mx-auto">
                {/* Section Header */}
                <div className="text-center mb-16">
                  <span className="text-xs uppercase tracking-[0.2em] text-[#666666] mb-3 block">
                    Our Collection
                  </span>
                  <h2 className="text-3xl md:text-4xl font-medium mb-4">
                    Premium Natural Oils
                  </h2>
                  <p className="text-[#666666] max-w-xl mx-auto">
                    Cold-pressed, pure, and natural oils for your daily beauty routine
                  </p>
                </div>

                {/* Products Grid */}
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
                  {featuredProducts.map((product, index) => (
                    <ProductCard key={product.id} product={product} index={index} locale="SR" />
                  ))}
                </div>

                {/* View All Link */}
                <div className="text-center mt-12">
                  <a
                    href="/products"
                    className="inline-block text-sm uppercase tracking-[0.1em] border-b border-black pb-1 hover:text-[#666666] hover:border-[#666666] transition-colors"
                  >
                    View All Products
                  </a>
                </div>
              </div>
            </section>
          )}

          {/* Brand Story Section */}
          <section className="py-24 px-4 sm:px-6 lg:px-8 bg-[#f8f9fa]">
            <div className="max-w-7xl mx-auto">
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
                <div>
                  <span className="text-xs uppercase tracking-[0.2em] text-[#666666] mb-3 block">
                    Our Story
                  </span>
                  <h2 className="text-3xl md:text-4xl font-medium mb-6">
                    Handmade with Love
                  </h2>
                  <p className="text-[#666666] mb-6 leading-relaxed">
                    Every bottle of ManoonOils is crafted with care using traditional 
                    methods passed down through generations. We source only the finest 
                    organic ingredients to bring you oils that nourish both hair and skin.
                  </p>
                  <p className="text-[#666666] mb-8 leading-relaxed">
                    Our commitment to purity means no additives, no preservatives - 
                    just nature&apos;s goodness in its most potent form.
                  </p>
                  <a
                    href="/about"
                    className="inline-block text-sm uppercase tracking-[0.1em] border-b border-black pb-1 hover:text-[#666666] hover:border-[#666666] transition-colors"
                  >
                    Learn More
                  </a>
                </div>
                <div className="relative aspect-[4/3] bg-[#e8f0f5] rounded-lg overflow-hidden">
                  <img
                    src="https://images.unsplash.com/photo-1608571423902-eed4a5ad8108?q=80&w=800&auto=format&fit=crop"
                    alt="Natural oils production"
                    className="w-full h-full object-cover"
                  />
                </div>
              </div>
            </div>
          </section>

          {/* Benefits Section */}
          <section className="py-24 px-4 sm:px-6 lg:px-8 bg-white">
            <div className="max-w-7xl mx-auto">
              <div className="text-center mb-16">
                <span className="text-xs uppercase tracking-[0.2em] text-[#666666] mb-3 block">
                  Why Choose Us
                </span>
                <h2 className="text-3xl md:text-4xl font-medium">
                  The Manoon Difference
                </h2>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-3 gap-8 lg:gap-12">
                {[
                  {
                    title: "100% Natural",
                    description: "Pure, cold-pressed oils with no additives or preservatives. Just nature's goodness.",
                  },
                  {
                    title: "Handcrafted",
                    description: "Each batch is carefully prepared by hand to ensure the highest quality.",
                  },
                  {
                    title: "Sustainable",
                    description: "Ethically sourced ingredients and eco-friendly packaging for a better planet.",
                  },
                ].map((benefit, index) => (
                  <div key={index} className="text-center">
                    <div className="w-16 h-16 mx-auto mb-6 rounded-full bg-[#e8f0f5] flex items-center justify-center">
                      <span className="text-2xl font-medium text-[#1a1a1a]">
                        {String(index + 1).padStart(2, '0')}
                      </span>
                    </div>
                    <h3 className="text-xl font-medium mb-3">{benefit.title}</h3>
                    <p className="text-[#666666]">{benefit.description}</p>
                  </div>
                ))}
              </div>
            </div>
          </section>

          {/* Newsletter Section */}
          <section className="py-28 lg:py-32 px-4 sm:px-6 lg:px-8 bg-[#1a1a1a] text-white">
            <div className="max-w-7xl mx-auto">
              <div className="max-w-2xl mx-auto text-center">
                <span className="text-xs uppercase tracking-[0.2em] text-white/60 mb-3 block">
                  Stay Connected
                </span>
                <h2 className="text-3xl md:text-4xl lg:text-5xl font-medium mb-6">
                  Join Our Community
                </h2>
                <p className="text-white/70 mb-10 mx-auto text-lg">
                  Subscribe to receive exclusive offers, beauty tips, and be the first to know about new products.
                </p>
                {/* Newsletter Form - Centered */}
                <form className="flex flex-col sm:flex-row items-stretch justify-center max-w-md mx-auto gap-0">
                  <input
                    type="email"
                    placeholder="Enter your email"
                    className="flex-1 min-w-0 px-5 h-14 bg-white/10 border border-white/20 border-b-0 sm:border-b border-r-0 sm:border-r border-white/20 text-white placeholder:text-white/50 focus:border-white focus:outline-none transition-colors text-base text-center sm:text-left rounded-t sm:rounded-l sm:rounded-tr-none"
                  />
                  <button
                    type="submit"
                    className="px-8 h-14 bg-white text-black text-sm uppercase tracking-[0.1em] font-medium hover:bg-white/90 transition-colors whitespace-nowrap flex-shrink-0 rounded-b sm:rounded-r sm:rounded-bl-none"
                  >
                    Subscribe
                  </button>
                </form>
              </div>
            </div>
          </section>
        </div>
      </main>

      <Footer />
    </>
  );
}