"use client";

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

export default function ShopPage() {
  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: "/"},
              {
                name: "About",          id: "#about"},
              {
                name: "Products",          id: "#products"},
              {
                name: "Shop",          id: "/shop"},
              {
                name: "Features",          id: "#features"},
              {
                name: "Testimonials",          id: "#testimonials"},
              {
                name: "Contact",          id: "#contact"},
              {
                name: "Cart",          id: "/cart"},
              {
                name: "Signup",          id: "/signup"},
              {
                name: "Order History",          id: "/order-history"},
              {
                name: "Account",          id: "/account"},
            ]}
            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: "Login",        href: "/login"}}
            animateOnLoad={true}
          />
        </div>

        <div id="shop-products" data-section="shop-products">
          <ProductCardTwo
            animationType="slide-up"
            textboxLayout="default"
            gridVariant="three-columns-all-equal-width"
            useInvertedBackground={false}
            products={[
              {
                id: "watch-1",                brand: "Elegance Atelier",                name: "Chronos Elegance Watch",                price: "$5,200",                rating: 4.5,
                reviewCount: "25 Reviews",                imageSrc: "http://img.b2bpic.net/free-photo/groom-fastens-buttons-his-wedding-suit_8353-10664.jpg",                imageAlt: "Luxury rose gold watch",                onProductClick: () => window.location.href = "/shop/watch-1"
              },
              {
                id: "handbag-1",                brand: "Elegance Atelier",                name: "Empress Alligator Handbag",                price: "$8,900",                rating: 4.8,
                reviewCount: "18 Reviews",                imageSrc: "http://img.b2bpic.net/free-photo/happy-father-s-day-composition-father-s-day-top-view_185193-109773.jpg",                imageAlt: "Designer alligator handbag",                onProductClick: () => window.location.href = "/shop/handbag-1"
              },
              {
                id: "scarf-1",                brand: "Elegance Atelier",                name: "Versailles Silk Scarf",                price: "$450",                rating: 4.2,
                reviewCount: "30 Reviews",                imageSrc: "http://img.b2bpic.net/free-photo/top-view-pinecone-beige-shawl-dark-surface_140725-63513.jpg",                imageAlt: "Elegant silk scarf",                onProductClick: () => window.location.href = "/shop/scarf-1"
              },
              {
                id: "earrings-1",                brand: "Elegance Atelier",                name: "Celestial Diamond Earrings",                price: "$3,800",                rating: 4.9,
                reviewCount: "12 Reviews",                imageSrc: "http://img.b2bpic.net/free-photo/moment-before-kiss-young-beautiful-caucasian-couple-sunny-day-outdoors_8353-10690.jpg",                imageAlt: "Sparkling diamond earrings",                onProductClick: () => window.location.href = "/shop/earrings-1"
              },
              {
                id: "pen-1",                brand: "Elegance Atelier",                name: "Sovereign Fountain Pen",                price: "$1,100",                rating: 4.7,
                reviewCount: "20 Reviews",                imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-pen-ai-generated_23-2150695517.jpg",                imageAlt: "Luxury fountain pen",                onProductClick: () => window.location.href = "/shop/pen-1"
              },
              {
                id: "cufflinks-1",                brand: "Elegance Atelier",                name: "Aristocrat Cufflinks",                price: "$680",                rating: 4.6,
                reviewCount: "15 Reviews",                imageSrc: "http://img.b2bpic.net/free-photo/grooms-morning-preparation_1328-1774.jpg",                imageAlt: "Sterling silver cufflinks",                onProductClick: () => window.location.href = "/shop/cufflinks-1"
              },
              {
                id: "ring-1",                brand: "Elegance Atelier",                name: "Emerald Solitaire Ring",                price: "$7,500",                rating: 4.9,
                reviewCount: "9 Reviews",                imageSrc: "http://img.b2bpic.net/free-photo/diamond-ring-isolated_1203-4927.jpg",                imageAlt: "Emerald solitaire ring",                onProductClick: () => window.location.href = "/shop/ring-1"
              },
              {
                id: "watch-2",                brand: "Elegance Atelier",                name: "Daytona Platinum Watch",                price: "$12,000",                rating: 4.7,
                reviewCount: "22 Reviews",                imageSrc: "http://img.b2bpic.net/free-photo/luxury-watch-still-life_23-2150993077.jpg",                imageAlt: "Daytona Platinum Watch",                onProductClick: () => window.location.href = "/shop/watch-2"
              }
            ]}
            title="Explore Our Full Collection"
            description="Discover the complete range of our luxury products, meticulously crafted for perfection."
            buttons={[
              {
                text: "View All",          href: "#"},
            ]}
            buttonAnimation="slide-up"
          />
        </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: "/"},
                  {
                    label: "About Us",              href: "#about"},
                  {
                    label: "Collections",              href: "#products"},
                  {
                    label: "Shop",              href: "/shop"},
                  {
                    label: "Membership",              href: "#pricing"},
                ],
              },
              {
                items: [
                  {
                    label: "Contact",              href: "#contact"},
                  {
                    label: "FAQ",              href: "#faq"},
                  {
                    label: "Login",              href: "/login"},
                  {
                    label: "Signup",              href: "/signup"},
                  {
                    label: "Cart",              href: "/cart"},
                  {
                    label: "Order History",              href: "/order-history"},
                  {
                    label: "Account",              href: "/account"}
                ],
              },
              {
                items: [
                  {
                    label: "Privacy Policy",              href: "#"},
                  {
                    label: "Terms of Service",              href: "#"},
                  {
                    label: "Shipping & Returns",              href: "#"},
                ],
              },
            ]}
            logoText="Elegance Atelier"
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}