manoon-headless/src/app/en/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("EN");
  } catch (e) {
    console.log('Failed to fetch products during build');
  }
  
  const featuredProducts = products.slice(0, 4);

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

        {/* Main Content */}
        <div id="main-content">
          {/* Products Grid Section */}
          {featuredProducts.length > 0 && (
            <section className="py-24 px-4 sm:px-6 lg:px-8 bg-white">
              <div className="container">
                {/* 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="EN" />
                  ))}
                </div>

                {/* View All Link */}
                <div className="text-center mt-12">
                  <a
                    href="/en/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="container">
              <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="/en/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="container">
              <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 mb-16">
            <div className="container">
              <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>
                <div className="flex justify-center">
                  <form className="inline-flex flex-col sm:flex-row">
                    <input
                      type="email"
                      placeholder="Enter your email"
                      className="w-64 sm:w-80 px-5 h-14 bg-white/10 border border-white/20 text-white placeholder:text-white/50 focus:border-white focus:outline-none transition-colors text-base text-center sm:text-left"
                    />
                    <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"
                    >
                      Subscribe
                    </button>
                  </form>
                </div>
              </div>
            </div>
          </section>
        </div>
      </main>

      <div className="pt-16">
        <Footer />
      </div>
    </>
  );
}