"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';

const products = [
  {
    id: "1",    name: "Eclipse Motion Pro",    price: "$299",    imageSrc: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&h=400&fit=crop",    imageAlt: "Eclipse Motion Pro headphones",    onProductClick: () => console.log('Product clicked')
  },
  {
    id: "2",    name: "Aurora Wireless Speaker",    price: "$189",    imageSrc: "https://images.unsplash.com/photo-1608043152269-423dbba4e7e1?w=400&h=400&fit=crop",    imageAlt: "Aurora Wireless Speaker",    onProductClick: () => console.log('Product clicked')
  },
  {
    id: "3",    name: "Quantum Fitness Tracker",    price: "$249",    imageSrc: "https://images.unsplash.com/photo-1544117519-31a4b719223d?w=400&h=400&fit=crop",    imageAlt: "Quantum Fitness Tracker",    onProductClick: () => console.log('Product clicked')
  },
  {
    id: "4",    name: "Nexus Smart Watch",    price: "$399",    imageSrc: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=400&h=400&fit=crop",    imageAlt: "Nexus Smart Watch",    onProductClick: () => console.log('Product clicked')
  },
  {
    id: "5",    name: "Prism Wireless Charger",    price: "$79",    imageSrc: "https://images.unsplash.com/photo-1586953208448-b95a79798f07?w=400&h=400&fit=crop",    imageAlt: "Prism Wireless Charger",    onProductClick: () => console.log('Product clicked')
  },
  {
    id: "6",    name: "Vertex Gaming Mouse",    price: "$129",    imageSrc: "https://images.unsplash.com/photo-1527814050087-3793815479db?w=400&h=400&fit=crop",    imageAlt: "Vertex Gaming Mouse",    onProductClick: () => console.log('Product clicked')
  }
];

export default function ShopPage() {
  return (
    <ThemeProvider 
      defaultButtonVariant="slide-background"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="mediumSizeLargeTitles"
      background="none"
      cardStyle="solid"
      primaryButtonStyle="flat"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="light"
    >
      <NavbarStyleApple 
        brandName="Refract" 
        navItems={[
          {"name":"Home","id":"/"},
          {"name":"Shop","id":"/shop"}
        ]}
      />
      
      <main className="min-h-screen">
        <ProductCardOne
          products={products}
          title="Featured Products"
          description="Discover our curated collection of premium tech products designed to enhance your digital lifestyle"
          tag="New Arrivals"
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          buttons={[
            {
              text: "View All Products",              onClick: () => console.log('View all clicked')
            }
          ]}
        />
      </main>
      
      <FooterBaseCard 
        logoText="Refract"
        columns={[
          {
            "title":"Services",            "items":[
              {"label":"Web Design","href":"#services"},
              {"label":"Development","href":"#services"},
              {"label":"Branding","href":"#services"}
            ]
          },
          {
            "title":"Company",            "items":[
              {"label":"About","href":"#about"},
              {"label":"Team","href":"#team"},
              {"label":"Work","href":"#work"}
            ]
          },
          {
            "title":"Connect",            "items":[
              {"label":"Contact","href":"#contact"},
              {"label":"LinkedIn","href":"https://linkedin.com"},
              {"label":"Twitter","href":"https://twitter.com"}
            ]
          }
        ]}
        copyrightText="© 2025 Refract. All rights reserved. Based in California."
      />
    </ThemeProvider>
  );
}