"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import ProductCardFour from "@/components/sections/product/ProductCardFour";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";

const productsData = [
  {
    id: "watch-1",    name: "Chronos Elegance Watch",    brand: "Elegance Atelier",    price: "$5,200",    rating: 4.5,
    reviewCount: "120 reviews",    variant: "Rose Gold",    description: "A timeless masterpiece combining classic design with modern precision. Featuring a rose gold casing, automatic movement, and a genuine leather strap. Water-resistant up to 50 meters.",    imageSrc: "http://img.b2bpic.net/free-photo/groom-fastens-buttons-his-wedding-suit_8353-10664.jpg?_wi=2",    imageAlt: "Luxury rose gold watch",    images: [
      { src: "http://img.b2bpic.net/free-photo/groom-fastens-buttons-his-wedding-suit_8353-10664.jpg", alt: "Luxury rose gold watch" },
      { src: "http://img.b2bpic.net/free-photo/wedding-watch-rings-flowers-shoes-pink-background_140725-63863.jpg", alt: "Watch on display" },
      { src: "http://img.b2bpic.net/free-photo/men-s-accessories-set-gentleman-wearing-classic-rose-gold-watch-dark-leather-strap-wrist-close-up-view-with-cufflinks-sunglasses-table_23-2148095697.jpg", alt: "Watch detail" }
    ],
    variants: [
      { label: "Color", options: ["Rose Gold", "Silver", "Black"] }
    ]
  },
  {
    id: "handbag-1",    name: "Empress Alligator Handbag",    brand: "Elegance Atelier",    price: "$8,900",    rating: 4.8,
    reviewCount: "85 reviews",    variant: "Midnight Black",    description: "Exquisitely crafted from genuine alligator leather, this handbag embodies sophistication. Featuring a spacious interior, gold-tone hardware, and a detachable shoulder strap. Perfect for grand occasions.",    imageSrc: "http://img.b2bpic.net/free-photo/happy-father-s-day-composition-father-s-day-top-view_185193-109773.jpg?_wi=2",    imageAlt: "Designer alligator handbag",    images: [
      { src: "http://img.b2bpic.net/free-photo/happy-father-s-day-composition-father-s-day-top-view_185193-109773.jpg", alt: "Designer alligator handbag" },
      { src: "http://img.b2bpic.net/free-photo/leather-handbag_23-2147743936.jpg", alt: "Handbag detail" },
      { src: "http://img.b2bpic.net/free-photo/luxury-handbag-white-background_23-2147743922.jpg", alt: "Handbag opened" }
    ],
    variants: [
      { label: "Color", options: ["Midnight Black", "Emerald Green", "Ruby Red"] }
    ]
  },
  {
    id: "scarf-1",    name: "Versailles Silk Scarf",    brand: "Elegance Atelier",    price: "$450",    rating: 4.2,
    reviewCount: "60 reviews",    variant: "Emerald Green",    description: "A luxurious silk scarf inspired by the gardens of Versailles. Made from 100% pure Mulberry silk, featuring a vibrant emerald green pattern. Adds a touch of refined elegance to any outfit.",    imageSrc: "http://img.b2bpic.net/free-photo/top-view-pinecone-beige-shawl-dark-surface_140725-63513.jpg?_wi=2",    imageAlt: "Elegant silk scarf",    images: [
      { src: "http://img.b2bpic.net/free-photo/top-view-pinecone-beige-shawl-dark-surface_140725-63513.jpg", alt: "Elegant silk scarf" },
      { src: "http://img.b2bpic.net/free-photo/flat-lay-elegant-silk-scarf_23-2148671691.jpg", alt: "Scarf pattern" },
      { src: "http://img.b2bpic.net/free-photo/elegant-silk-scarf-display_23-2148719941.jpg", alt: "Scarf on mannequin" }
    ],
    variants: [
      { label: "Color", options: ["Emerald Green", "Royal Blue", "Crimson Red"] }
    ]
  },
  {
    id: "earrings-1",    name: "Celestial Diamond Earrings",    brand: "Elegance Atelier",    price: "$3,800",    rating: 4.9,
    reviewCount: "95 reviews",    variant: "Platinum",    description: "Dazzling diamond earrings crafted in platinum, featuring brilliant-cut diamonds. Each stone is ethically sourced and meticulously set to maximize sparkle. A perfect gift for special occasions.",    imageSrc: "http://img.b2bpic.net/free-photo/moment-before-kiss-young-beautiful-caucasian-couple-sunny-day-outdoors_8353-10690.jpg?_wi=2",    imageAlt: "Sparkling diamond earrings",    images: [
      { src: "http://img.b2bpic.net/free-photo/moment-before-kiss-young-beautiful-caucasian-couple-sunny-day-outdoors_8353-10690.jpg", alt: "Sparkling diamond earrings" },
      { src: "http://img.b2bpic.net/free-photo/close-up-diamond-earrings-jewelry_23-2148680798.jpg", alt: "Earrings close-up" },
      { src: "http://img.b2bpic.net/free-photo/woman-wearing-diamond-earrings_23-2148720000.jpg", alt: "Earrings worn" }
    ],
    variants: [
      { label: "Metal", options: ["Platinum", "White Gold", "Yellow Gold"] }
    ]
  },
  {
    id: "pen-1",    name: "Sovereign Fountain Pen",    brand: "Elegance Atelier",    price: "$1,100",    rating: 4.7,
    reviewCount: "70 reviews",    variant: "Obsidian Black",    description: "Experience the art of writing with our Sovereign Fountain Pen. Crafted with a polished obsidian black finish and 18k gold nib, it offers a smooth, luxurious writing experience.",    imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-pen-ai-generated_23-2150695517.jpg?_wi=2",    imageAlt: "Luxury fountain pen",    images: [
      { src: "http://img.b2bpic.net/free-photo/3d-rendering-pen-ai-generated_23-2150695517.jpg", alt: "Luxury fountain pen" },
      { src: "http://img.b2bpic.net/free-photo/fountain-pen-writing-pad_23-2147743950.jpg", alt: "Pen with ink" },
      { src: "http://img.b2bpic.net/free-photo/elegant-writing-utensil_23-2147743945.jpg", alt: "Pen on desk" }
    ],
    variants: [
      { label: "Finish", options: ["Obsidian Black", "Deep Blue", "Emerald Green"] }
    ]
  },
  {
    id: "cufflinks-1",    name: "Aristocrat Cufflinks",    brand: "Elegance Atelier",    price: "$680",    rating: 4.6,
    reviewCount: "55 reviews",    variant: "Sterling Silver",    description: "Elevate your formal wear with these meticulously crafted sterling silver cufflinks. Featuring a unique geometric design and a polished finish. A statement of refined taste.",    imageSrc: "http://img.b2bpic.net/free-photo/grooms-morning-preparation_1328-1774.jpg?_wi=2",    imageAlt: "Sterling silver cufflinks",    images: [
      { src: "http://img.b2bpic.net/free-photo/grooms-morning-preparation_1328-1774.jpg", alt: "Sterling silver cufflinks" },
      { src: "http://img.b2bpic.net/free-photo/cufflinks-on-white-shirt_23-2147743960.jpg", alt: "Cufflinks close-up" },
      { src: "http://img.b2bpic.net/free-photo/elegant-cufflinks-on-shirt_23-2147743965.jpg", alt: "Cufflinks on shirt" }
    ],
    variants: [
      { label: "Material", options: ["Sterling Silver", "Rose Gold Plated", "Gold Plated"] }
    ]
  },
];

export default function ProductListingPage() {
  const productCards = productsData.map(product => ({
    id: product.id,
    name: product.name,
    price: product.price,
    variant: product.variant,
    imageSrc: product.imageSrc,
    imageAlt: product.imageAlt,
    onProductClick: () => window.location.href = `/products/${product.id}`,
  }));

  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="compact"
      sizing="largeSmall"
      background="circleGradient"
      cardStyle="glass-depth"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="light"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingInline
            navItems={[
              {
                name: "Home",                id: "#hero"},
              {
                name: "About",                id: "#about"},
              {
                name: "Shop",                id: "/shop"},
              {
                name: "Products",                id: "/products"},
              {
                name: "Features",                id: "#features"},
              {
                name: "Testimonials",                id: "#testimonials"},
              {
                name: "Contact",                id: "#contact"},
            ]}
            logoSrc="http://img.b2bpic.net/free-vector/wedding-badge-vector-gold-vintage-ornamental-style_53876-140182.jpg"
            logoAlt="Elegance Atelier Logo"
            brandName="Elegance Atelier"
            button={{
              text: "Shop Now",              href: "/shop"}}
            animateOnLoad={true}
          />
        </div>

        <div id="product-listing" data-section="product-listing">
          <div className="mx-auto max-w-screen-xl px-4 py-16 sm:px-6 lg:px-8">
            <h1 className="text-center text-4xl font-light tracking-tight text-foreground sm:text-5xl lg:text-6xl">Our Collections</h1>
            <p className="mt-4 text-center text-lg text-foreground/70">Explore our full range of luxury products.</p>
            <ProductCardFour
              animationType="slide-up"
              textboxLayout="default"
              gridVariant="three-columns-all-equal-width"
              useInvertedBackground={false}
              products={productCards}
              title=""
              description=""
              buttons={[]}
            />
          </div>
        </div>

        <div id="footer" data-section="footer">
          <FooterLogoEmphasis
            logoSrc="http://img.b2bpic.net/free-vector/wedding-badge-vector-gold-vintage-ornamental-style_53876-140182.jpg"
            logoAlt="Elegance Atelier Logo"
            columns={[
              {
                items: [
                  {
                    label: "Home",                    href: "#hero"},
                  {
                    label: "About Us",                    href: "#about"},
                  {
                    label: "Shop",                    href: "/shop"},
                  {
                    label: "Products",                    href: "/products"},
                  {
                    label: "Membership",                    href: "#pricing"},
                ],
              },
              {
                items: [
                  {
                    label: "Contact",                    href: "#contact"},
                  {
                    label: "FAQ",                    href: "#faq"},
                  {
                    label: "Careers",                    href: "#"},
                  {
                    label: "Press",                    href: "#"},
                ],
              },
              {
                items: [
                  {
                    label: "Privacy Policy",                    href: "#"},
                  {
                    label: "Terms of Service",                    href: "#"},
                  {
                    label: "Shipping & Returns",                    href: "#"},
                ],
              },
            ]}
            logoText="Elegance Atelier"
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
