"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import ProductCardThree from '@/components/sections/product/ProductCardThree';

export default function ShopPage() {
  const products = [
    {
      id: "1",      name: "iPhone 15 Pro Max",      price: "$1,199",      imageSrc: "https://images.unsplash.com/photo-1695654395980-3a34f64ec0b0?w=500&h=500&fit=crop",      imageAlt: "iPhone 15 Pro Max",      initialQuantity: 1,
      onFavorite: () => console.log("Favorited iPhone 15 Pro Max"),
      onProductClick: () => console.log("Clicked iPhone 15 Pro Max"),
      onQuantityChange: (quantity: number) => console.log("Quantity changed:", quantity)
    },
    {
      id: "2",      name: "iPhone 15 Pro",      price: "$999",      imageSrc: "https://images.unsplash.com/photo-1695048133142-1a20484d2569?w=500&h=500&fit=crop",      imageAlt: "iPhone 15 Pro",      initialQuantity: 1,
      onFavorite: () => console.log("Favorited iPhone 15 Pro"),
      onProductClick: () => console.log("Clicked iPhone 15 Pro"),
      onQuantityChange: (quantity: number) => console.log("Quantity changed:", quantity)
    },
    {
      id: "3",      name: "iPhone 15",      price: "$799",      imageSrc: "https://images.unsplash.com/photo-1695048072473-b0bfe2c86b30?w=500&h=500&fit=crop",      imageAlt: "iPhone 15",      initialQuantity: 1,
      onFavorite: () => console.log("Favorited iPhone 15"),
      onProductClick: () => console.log("Clicked iPhone 15"),
      onQuantityChange: (quantity: number) => console.log("Quantity changed:", quantity)
    },
    {
      id: "4",      name: "iPhone 15 Plus",      price: "$899",      imageSrc: "https://images.unsplash.com/photo-1696446702798-36dfa7c960a5?w=500&h=500&fit=crop",      imageAlt: "iPhone 15 Plus",      initialQuantity: 1,
      onFavorite: () => console.log("Favorited iPhone 15 Plus"),
      onProductClick: () => console.log("Clicked iPhone 15 Plus"),
      onQuantityChange: (quantity: number) => console.log("Quantity changed:", quantity)
    },
    {
      id: "5",      name: "AirPods Pro",      price: "$249",      imageSrc: "https://images.unsplash.com/photo-1588423771073-b8903fbb85b5?w=500&h=500&fit=crop",      imageAlt: "AirPods Pro",      initialQuantity: 1,
      onFavorite: () => console.log("Favorited AirPods Pro"),
      onProductClick: () => console.log("Clicked AirPods Pro"),
      onQuantityChange: (quantity: number) => console.log("Quantity changed:", quantity)
    },
    {
      id: "6",      name: "Apple Watch Ultra 2",      price: "$799",      imageSrc: "https://images.unsplash.com/photo-1551816230-ef5deaed4a26?w=500&h=500&fit=crop",      imageAlt: "Apple Watch Ultra 2",      initialQuantity: 1,
      onFavorite: () => console.log("Favorited Apple Watch Ultra 2"),
      onProductClick: () => console.log("Clicked Apple Watch Ultra 2"),
      onQuantityChange: (quantity: number) => console.log("Quantity changed:", quantity)
    }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="medium"
      background="none"
      cardStyle="gradient-bordered"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="semibold"
    >
      <NavbarLayoutFloatingInline
        brandName="iPhone Store"
        navItems={[
          { name: "Home", id: "/" },
          { name: "Shop", id: "/shop" }
        ]}
        button={{
          text: "Shop Now",          href: "/shop"
        }}
      />
      
      <main className="min-h-screen pt-24">
        <ProductCardThree
          products={products}
          title="Shop iPhone Products"
          description="Discover our complete collection of iPhone devices and accessories. Add your favorites to cart with our easy quantity selection."
          tag="Premium Collection"
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          ariaLabel="iPhone products shop section"
        />
      </main>
      
      <FooterLogoReveal
        logoText="iPhone Store"
        leftLink={{
          text: "Privacy Policy",          href: "#"
        }}
        rightLink={{
          text: "Terms of Service",          href: "#"
        }}
      />
    </ThemeProvider>
  );
}