"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import { ShoppingBag } from 'lucide-react';

export default function Shop() {
  const products = [
    {
      id: "1",      name: "Neo's Coat",      price: "$299.00",      imageSrc: "https://images.unsplash.com/photo-1551028719-00167b16eac5?w=400&h=400&fit=crop&crop=center",      imageAlt: "Neo's iconic black trench coat",      initialQuantity: 1,
      onProductClick: () => console.log('Product clicked'),
      onQuantityChange: (quantity: number) => console.log('Quantity changed:', quantity)
    },
    {
      id: "2",      name: "Red Pill",      price: "$9.99",      imageSrc: "https://images.unsplash.com/photo-1584308666744-24d5c474f2ae?w=400&h=400&fit=crop&crop=center",      imageAlt: "The red pill of truth",      initialQuantity: 1,
      onProductClick: () => console.log('Product clicked'),
      onQuantityChange: (quantity: number) => console.log('Quantity changed:', quantity)
    },
    {
      id: "3",      name: "Blue Pill",      price: "$9.99",      imageSrc: "https://images.unsplash.com/photo-1559757175-0eb30cd8c063?w=400&h=400&fit=crop&crop=center",      imageAlt: "The blue pill of ignorance",      initialQuantity: 1,
      onProductClick: () => console.log('Product clicked'),
      onQuantityChange: (quantity: number) => console.log('Quantity changed:', quantity)
    },
    {
      id: "4",      name: "Morpheus Sunglasses",      price: "$149.00",      imageSrc: "https://images.unsplash.com/photo-1511499767150-a48a237f0083?w=400&h=400&fit=crop&crop=center",      imageAlt: "Morpheus's iconic sunglasses",      initialQuantity: 1,
      onProductClick: () => console.log('Product clicked'),
      onQuantityChange: (quantity: number) => console.log('Quantity changed:', quantity)
    },
    {
      id: "5",      name: "Trinity's Leather Jacket",      price: "$399.00",      imageSrc: "https://images.unsplash.com/photo-1521223890158-f9f7c3d5d504?w=400&h=400&fit=crop&crop=center",      imageAlt: "Trinity's sleek leather jacket",      initialQuantity: 1,
      onProductClick: () => console.log('Product clicked'),
      onQuantityChange: (quantity: number) => console.log('Quantity changed:', quantity)
    },
    {
      id: "6",      name: "Agent Smith Suit",      price: "$599.00",      imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=center",      imageAlt: "Agent Smith's formal black suit",      initialQuantity: 1,
      onProductClick: () => console.log('Product clicked'),
      onQuantityChange: (quantity: number) => console.log('Quantity changed:', quantity)
    }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="mediumSizeLargeTitles"
      background="aurora"
      cardStyle="glass-elevated"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="light"
    >
      <NavbarStyleCentered
        brandName="The Matrix"
        navItems={[
          { name: "Home", id: "/" },
          { name: "About", id: "about" },
          { name: "Characters", id: "characters" },
          { name: "Timeline", id: "timeline" },
          { name: "Community", id: "community" },
          { name: "FAQ", id: "faq" },
          { name: "Shop", id: "/shop" }
        ]}
        button={{ text: "Join Us", href: "contact" }}
      />
      
      <main className="min-h-screen">
        <ProductCardThree
          products={products}
          title="Matrix Store"
          description="Equip yourself with iconic items from The Matrix universe. Add your favorite gear to cart and step into the simulation."
          tag="Limited Edition"
          tagIcon={ShoppingBag}
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          buttons={[
            {
              text: "View All Products",              href: "#"
            },
            {
              text: "Special Offers",              href: "#"
            }
          ]}
        />
      </main>

      <FooterLogoEmphasis
        logoText="The Matrix"
        columns={[
          {
            items: [
              { label: "About", href: "about" },
              { label: "Characters", href: "characters" },
              { label: "Timeline", href: "timeline" }
            ]
          },
          {
            items: [
              { label: "Community", href: "community" },
              { label: "FAQ", href: "faq" },
              { label: "Contact", href: "contact" }
            ]
          },
          {
            items: [
              { label: "Privacy Policy", href: "#" },
              { label: "Terms of Service", href: "#" },
              { label: "Disclaimer", href: "#" }
            ]
          }
        ]}
      />
    </ThemeProvider>
  );
}