"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Sparkles, Star, Crown, Zap } from 'lucide-react';

export default function ProductsPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="mediumSizeLargeTitles"
      background="blurBottom"
      cardStyle="outline"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="UrbanStyle"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Shop", id: "/products" },
            { name: "About", id: "/about" },
            { name: "Pricing", id: "/pricing" }
          ]}
          button={{
            text: "Contact Us",
            href: "/contact"
          }}
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardThree
          title="Complete Urban Fashion Collection"
          description="Discover our full range of premium streetwear, from essential basics to statement pieces. Each item is crafted with attention to detail and contemporary style."
          tag="All Products"
          tagIcon={Sparkles}
          textboxLayout="default"
          useInvertedBackground={false}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          carouselMode="buttons"
          products={[
            {
              id: "1",
              name: "Classic Black Bomber Jacket",
              price: "$129.99",
              imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-walking-down-street_1303-24594.jpg?_wi=2",
              imageAlt: "black bomber jacket men fashion jacket urban outerwear",
              initialQuantity: 1
            },
            {
              id: "2",
              name: "White Oversized T-Shirt",
              price: "$34.99",
              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-black-woman-with-afro-curls-hairstylesmiling-hipster-model-white-tshirt-sexy-carefree-female-posing-street-near-brown-wall-cheerful-happy-sunglasses_158538-21447.jpg?_wi=2",
              imageAlt: "white oversized t-shirt casual tee minimalist clothing",
              initialQuantity: 1
            },
            {
              id: "3",
              name: "Premium Slim Fit Jeans",
              price: "$89.99",
              imageSrc: "http://img.b2bpic.net/free-photo/urban-outdoor-fashion-portrait-young-stylish-hipster-man-wearing-leather-biker-jacket-denim-pants-vintage-shoes-posing-countryside-parking-evening-sunlight_291049-1614.jpg?_wi=2",
              imageAlt: "slim fit jeans denim pants classic blue jeans",
              initialQuantity: 1
            },
            {
              id: "4",
              name: "Urban Hoodie Sweatshirt",
              price: "$64.99",
              imageSrc: "http://img.b2bpic.net/free-photo/outdoor-shot-pensive-curly-haired-young-woman-concentrated-into-distance-dressed-hoodie-trousers-thinks-about-something-rests-after-excursion-city-feels-tired-explores-new-places_273609-57016.jpg",
              imageAlt: "urban hoodie sweatshirt pullover hoodie comfortable sweatwear",
              initialQuantity: 1
            },
            {
              id: "5",
              name: "Cargo Pants with Multiple Pockets",
              price: "$79.99",
              imageSrc: "http://img.b2bpic.net/free-photo/front-view-romantic-couple-holding-hands-while-beach_23-2148700335.jpg",
              imageAlt: "cargo pants multiple pockets utility pants street fashion pants",
              initialQuantity: 1
            },
            {
              id: "6",
              name: "Minimalist Sneakers",
              price: "$99.99",
              imageSrc: "http://img.b2bpic.net/free-photo/female-walking-park-high-quality-photo_114579-92105.jpg",
              imageAlt: "minimalist white sneakers clean white shoes casual sneaker",
              initialQuantity: 1
            }
          ]}
        />
      </div>

      <div id="membership" data-section="membership">
        <PricingCardEight
          title="Unlock Member Benefits"
          description="Get exclusive access to limited collections, special discounts, and priority customer service with our membership programs."
          tag="Exclusive Access"
          tagIcon={Zap}
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          carouselMode="buttons"
          plans={[
            {
              id: "basic",
              badge: "Popular",
              badgeIcon: Star,
              price: "Free",
              subtitle: "Perfect to get started",
              buttons: [
                { text: "Get Started", href: "/contact" }
              ],
              features: ["Access to all products", "Standard shipping", "Member-exclusive sales"]
            },
            {
              id: "premium",
              badge: "Best Value",
              badgeIcon: Crown,
              price: "$4.99/mo",
              subtitle: "Premium benefits and perks",
              buttons: [
                { text: "Subscribe Now", href: "/contact" }
              ],
              features: ["Everything in Free plan", "Free shipping on all orders", "15% discount on all purchases"]
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="UrbanStyle"
          columns={[
            {
              items: [
                { label: "Home", href: "/" },
                { label: "Shop", href: "/products" },
                { label: "About", href: "/about" },
                { label: "Pricing", href: "/pricing" }
              ]
            },
            {
              items: [
                { label: "Contact Us", href: "/contact" },
                { label: "FAQ", href: "#" },
                { label: "Shipping Info", href: "#" },
                { label: "Returns", href: "#" }
              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Accessibility", href: "#" },
                { label: "Sustainability", href: "#" }
              ]
            },
            {
              items: [
                { label: "Instagram", href: "https://instagram.com" },
                { label: "Twitter", href: "https://twitter.com" },
                { label: "Facebook", href: "https://facebook.com" },
                { label: "TikTok", href: "https://tiktok.com" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}