"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import FooterCard from '@/components/sections/footer/FooterCard';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import { Instagram, Facebook, Linkedin } from 'lucide-react';

export default function ShopPage() {
  const products = [
    {
      id: "1",      name: "Classic Leather Handbag",      price: "€680",      imageSrc: "https://images.unsplash.com/photo-1584917865442-de89df76afd3?w=600&h=600&fit=crop",      imageAlt: "Classic Leather Handbag",      onProductClick: () => console.log("Product clicked")
    },
    {
      id: "2",      name: "Silk Evening Dress",      price: "€1,250",      imageSrc: "https://images.unsplash.com/photo-1566479179817-93f6cc03ba4e?w=600&h=600&fit=crop",      imageAlt: "Silk Evening Dress",      onProductClick: () => console.log("Product clicked")
    },
    {
      id: "3",      name: "Gold Watch Collection",      price: "€2,100",      imageSrc: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=600&h=600&fit=crop",      imageAlt: "Gold Watch Collection",      onProductClick: () => console.log("Product clicked")
    },
    {
      id: "4",      name: "Cashmere Wool Coat",      price: "€890",      imageSrc: "https://images.unsplash.com/photo-1544441893-675973e31985?w=600&h=600&fit=crop",      imageAlt: "Cashmere Wool Coat",      onProductClick: () => console.log("Product clicked")
    },
    {
      id: "5",      name: "Italian Leather Shoes",      price: "€520",      imageSrc: "https://images.unsplash.com/photo-1549298916-b41d501d3772?w=600&h=600&fit=crop",      imageAlt: "Italian Leather Shoes",      onProductClick: () => console.log("Product clicked")
    },
    {
      id: "6",      name: "Designer Sunglasses",      price: "€340",      imageSrc: "https://images.unsplash.com/photo-1511499767150-a48a237f0083?w=600&h=600&fit=crop",      imageAlt: "Designer Sunglasses",      onProductClick: () => console.log("Product clicked")
    }
  ];

  return (
    <ThemeProvider 
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="mediumLargeSizeLargeTitles"
      background="circleGradient"
      cardStyle="elevated"
      primaryButtonStyle="flat"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      <NavbarLayoutFloatingInline
        brandName="LUSSO ITALIA"
        navItems={[
          {"name":"Home","id":"/"},
          {"name":"Shop","id":"/shop"}
        ]}
        button={{
          "text":"Shop Now",          "href":"/shop"
        }}
      />
      
      <main className="min-h-screen pt-16">
        <ProductCardOne
          products={products}
          title="Luxury Collection"
          description="Discover our exclusive range of premium Italian-crafted products, where timeless elegance meets contemporary design"
          tag="Featured"
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          buttons={[
            {
              text: "View All Products",              href: "/shop"
            }
          ]}
        />
      </main>
      
      <FooterCard
        logoText="LUSSO ITALIA"
        copyrightText="© 2025 LUSSO ITALIA. All rights reserved. Crafted in Milan, Italy."
        socialLinks={[
          {"icon":Instagram,"href":"https://instagram.com","ariaLabel":"Follow us on Instagram"},
          {"icon":Facebook,"href":"https://facebook.com","ariaLabel":"Follow us on Facebook"},
          {"icon":Linkedin,"href":"https://linkedin.com","ariaLabel":"Connect on LinkedIn"}
        ]}
      />
    </ThemeProvider>
  );
}