"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Star } from 'lucide-react';

export default function ShopPage() {
  const navItems = [
    { name: "Shop", id: "shop" },
    { name: "Collections", id: "collections" },
    { name: "About", id: "about" },
    { name: "Contact", id: "contact" },
    { name: "Cart", id: "https://example.com/cart" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="medium"
      sizing="mediumSizeLargeTitles"
      background="blurBottom"
      cardStyle="glass-elevated"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple 
          brandName="STUDIO LUXE"
          navItems={navItems}
        />
      </div>

      <div id="shop-products" data-section="shop-products">
        <ProductCardTwo
          title="Complete Furniture Collection"
          description="Explore our full range of premium furniture pieces handcrafted for luxury and durability."
          tag="All Products"
          tagIcon={Star}
          tagAnimation="opacity"
          products={[
            {
              id: "1",              brand: "Studio Luxe",              name: "Modern White Sectional",              price: "$2,850",              rating: 5,
              reviewCount: "342",              imageSrc: "http://img.b2bpic.net/free-photo/gorgeous-brunette-laced-dress-with-make-up_132075-12543.jpg",              imageAlt: "Modern white sectional sofa"
            },
            {
              id: "2",              brand: "Studio Luxe",              name: "Marble Dining Table",              price: "$1,650",              rating: 5,
              reviewCount: "218",              imageSrc: "http://img.b2bpic.net/free-photo/luxury-dining-room-authentic-interior-design_53876-129853.jpg",              imageAlt: "Marble dining table with brass legs"
            },
            {
              id: "3",              brand: "Studio Luxe",              name: "Sculpted Lounge Chair",              price: "$945",              rating: 5,
              reviewCount: "156",              imageSrc: "http://img.b2bpic.net/free-photo/still-life-office-chair-indoors_23-2151108763.jpg",              imageAlt: "Designer lounge chair in cream"
            },
            {
              id: "4",              brand: "Studio Luxe",              name: "Walnut Bookshelf",              price: "$1,420",              rating: 5,
              reviewCount: "98",              imageSrc: "http://img.b2bpic.net/free-photo/home-interior-design-arrangement_23-2148986615.jpg",              imageAlt: "Modern walnut shelving unit"
            },
            {
              id: "5",              brand: "Studio Luxe",              name: "Glass Coffee Table",              price: "$725",              rating: 5,
              reviewCount: "267",              imageSrc: "http://img.b2bpic.net/free-photo/glass-orange-juice-desktop-near-laptop-morning_169016-25099.jpg",              imageAlt: "Minimalist glass coffee table"
            },
            {
              id: "6",              brand: "Studio Luxe",              name: "Pendant Light Collection",              price: "$385",              rating: 5,
              reviewCount: "421",              imageSrc: "http://img.b2bpic.net/free-photo/luxury-dining-room-with-elegant-chandelier-lighting-generated-by-ai_188544-21199.jpg",              imageAlt: "Designer pendant lighting"
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="featured-categories" data-section="featured-categories">
        <ProductCardTwo
          title="Curated Collections"
          description="Specialty selections organized by room and design aesthetic."
          products={[
            {
              id: "7",              brand: "Studio Luxe",              name: "Minimalist Living Set",              price: "$4,200",              rating: 5,
              reviewCount: "89",              imageSrc: "http://img.b2bpic.net/free-photo/modern-interior-design-living-room-with-soft-sofa-background-wooden-wall-minim_1258-134116.jpg",              imageAlt: "Minimalist living room set"
            },
            {
              id: "8",              brand: "Studio Luxe",              name: "Luxury Bedroom Suite",              price: "$3,600",              rating: 5,
              reviewCount: "64",              imageSrc: "http://img.b2bpic.net/free-photo/luxury-lounge-area-hotel-reception_482257-78350.jpg",              imageAlt: "Luxury bedroom furniture"
            },
            {
              id: "9",              brand: "Studio Luxe",              name: "Contemporary Home Office",              price: "$2,950",              rating: 5,
              reviewCount: "102",              imageSrc: "http://img.b2bpic.net/free-photo/stylish-kitchen-cutlery-organizer-minimalist-aesthetics_169016-68940.jpg",              imageAlt: "Modern home office setup"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="opacity"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Shop",              items: [
                { label: "All Furniture", href: "shop" },
                { label: "Seating", href: "shop" },
                { label: "Tables", href: "shop" },
                { label: "Storage", href: "shop" },
                { label: "New Arrivals", href: "shop" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "about" },
                { label: "Design Philosophy", href: "about" },
                { label: "Sustainability", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Press", href: "#" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Contact Us", href: "contact" },
                { label: "Shipping Info", href: "#" },
                { label: "Returns", href: "#" },
                { label: "Care Guide", href: "#" },
                { label: "Warranty", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 Studio Luxe. All rights reserved. Crafted for those who value timeless design."
        />
      </div>
    </ThemeProvider>
  );
}