"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import { useRouter } from 'next/navigation';

const commonNavItems = [
  {
    name: "Home",    id: "/"},
  {
    name: "About",    id: "#about"},
  {
    name: "Features",    id: "#features"},
  {
    name: "Shop",    id: "/shop"},
  {
    name: "Testimonials",    id: "#testimonials"},
  {
    name: "FAQ",    id: "#faq"},
  {
    name: "Contact",    id: "#contact"},
  {
    name: "Cart",    id: "/cart"},
];

const commonFooterColumns = [
  {
    items: [
      {
        label: "About Us",        href: "#about"},
      {
        label: "Features",        href: "#features"},
      {
        label: "Shop",        href: "/shop"},
    ],
  },
  {
    items: [
      {
        label: "Testimonials",        href: "#testimonials"},
      {
        label: "Partners",        href: "#social-proof"},
      {
        label: "FAQ",        href: "#faq"},
    ],
  },
  {
    items: [
      {
        label: "Privacy Policy",        href: "#"},
      {
        label: "Terms of Service",        href: "#"},
      {
        label: "Contact",        href: "#contact"},
    ],
  },
];

const mockProducts = [
  {
    id: "bra-1",    name: "Seamless Comfort Bra",    price: "$35.00",    imageSrc: "http://img.b2bpic.net/free-photo/view-of-collection-of-womens-bras_23-2151325150.jpg?_wi=1",    imageAlt: "Seamless Comfort Bra"},
  {
    id: "bra-2",    name: "Lace Elegance Bralette",    price: "$48.00",    imageSrc: "http://img.b2bpic.net/free-photo/black-bra_23-2148762740.jpg?_wi=1",    imageAlt: "Lace Elegance Bralette"},
  {
    id: "bra-3",    name: "Sporty Wireless Bra",    price: "$29.00",    imageSrc: "http://img.b2bpic.net/free-photo/white-bra-with-shoulder-straps_23-2149177112.jpg?_wi=1",    imageAlt: "Sporty Wireless Bra"},
  {
    id: "bra-4",    name: "Push-Up Contour Bra",    price: "$55.00",    imageSrc: "http://img.b2bpic.net/free-photo/pink-bra_23-2149177113.jpg?_wi=1",    imageAlt: "Push-Up Contour Bra"},
  {
    id: "bra-5",    name: "Minimizer Full Coverage",    price: "$40.00",    imageSrc: "http://img.b2bpic.net/free-photo/brown-bra_23-2149177115.jpg?_wi=1",    imageAlt: "Minimizer Full Coverage"},
  {
    id: "bra-6",    name: "Underwire Balconette",    price: "$52.00",    imageSrc: "http://img.b2bpic.net/free-photo/view-of-collection-of-womens-bras_23-2151325150.jpg?_wi=1",    imageAlt: "Underwire Balconette"},
];

export default function ShopPage() {
  const router = useRouter();

  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="largeSizeMediumTitles"
      background="grid"
      cardStyle="soft-shadow"
      primaryButtonStyle="flat"
      secondaryButtonStyle="solid"
      headingFontWeight="medium"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleApple navItems={commonNavItems} brandName="Khurasan Party" />
        </div>

        <div id="shop-catalog" data-section="shop-catalog" className="py-12 md:py-24">
          <ProductCardOne
            title="Our Bra Collection"
            description="Discover comfort and style with our exquisite range of bras."
            tag="Shop Now"
            products={mockProducts.map(product => ({
              ...product,
              onProductClick: () => router.push(`/product/${product.id}`),
            }))}
            gridVariant="three-columns-all-equal-width"
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterLogoEmphasis columns={commonFooterColumns} logoText="Khurasan Party" />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
