"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { ArrowLeftRight, CheckCircle, CircleDollarSign, Heart, HelpCircle, Hexagon, MessageCircle, Package, Send, Share2, Shield, Sparkles, Zap } from "lucide-react";

export default function ProductPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="mediumLarge"
      sizing="mediumLarge"
      background="circleGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="ShopHub"
          navItems={[
            { name: "Shop", id: "shop" },
            { name: "Collections", id: "collections" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Cart",            href: "#"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardDashboard
          title="Premium Wireless Headphones"
          description="Experience crystal-clear sound with active noise cancellation, 30-hour battery life, and premium comfort designed for audio enthusiasts."
          tag="New Release"
          tagIcon={Sparkles}
          buttons={[
            { text: "Add to Cart", href: "#" },
            { text: "View Details", href: "#" }
          ]}
          background={{ variant: "radial-gradient" }}
          dashboard={{
            title: "Product Gallery",            logoIcon: Package,
            imageSrc: "https://img.b2bpic.net/free-vector/mandala-cards-premium-golden-style_1017-8498.jpg",            imageAlt: "Premium Wireless Headphones",            buttons: [
              { text: "View 360°", href: "#" },
              { text: "Compare", href: "#" }
            ],
            sidebarItems: [
              { icon: Heart },
              { icon: Share2 },
              { icon: MessageCircle }
            ],
            stats: [
              {
                title: "Rating",                values: [4.8, 4.8, 4.8],
                description: "Out of 5 stars"
              },
              {
                title: "Reviews",                values: [245, 245, 245],
                description: "Customer verified"
              },
              {
                title: "In Stock",                values: [127, 127, 127],
                description: "Units available"
              }
            ],
            chartTitle: "Sales This Week",            chartData: [
              { value: 40 },
              { value: 65 },
              { value: 50 },
              { value: 75 },
              { value: 85 }
            ],
            listTitle: "Product Features",            listItems: [
              {
                icon: Zap,
                title: "Active Noise Cancellation",                status: "Premium"
              },
              {
                icon: Package,
                title: "30-Hour Battery Life",                status: "Extended"
              },
              {
                icon: Shield,
                title: "2-Year Warranty",                status: "Included"
              }
            ],
            searchPlaceholder: "Search product details..."
          }}
        />
      </div>

      <div id="details" data-section="details">
        <TextSplitAbout
          title="Product Specifications"
          description={[
            "Engineered with precision acoustic chambers and premium drivers for studio-quality sound reproduction. Every component is selected to deliver exceptional audio fidelity across all frequencies.",            "The advanced active noise cancellation technology uses intelligent algorithms to monitor and counteract ambient noise up to 40dB in real-time. Features ambient awareness mode for transparency when you need it."
          ]}
          buttons={[
            { text: "Download Specs", href: "#" }
          ]}
          useInvertedBackground="noInvert"
          showBorder={true}
        />
      </div>

      <div id="reviews" data-section="reviews">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",              name: "Jessica Chen",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg",              imageAlt: "Jessica Chen"
            },
            {
              id: "3",              name: "Michael Torres",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg",              imageAlt: "Michael Torres"
            },
            {
              id: "4",              name: "David Kumar",              imageSrc: "https://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg",              imageAlt: "David Kumar"
            }
          ]}
          cardTitle="Trusted by over 2,400 satisfied customers worldwide who love the superior sound quality and comfort"
          cardTag="Verified Customer Reviews"
          cardTagIcon={CheckCircle}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardFour
          products={[
            {
              id: "1",              name: "Studio Monitor Speakers",              price: "$299.99",              variant: "Black  Professional Audio",              imageSrc: "https://img.b2bpic.net/free-vector/premium-vintage-vertical-cards_1017-15340.jpg",              imageAlt: "Studio Monitor Speakers",              isFavorited: false
            },
            {
              id: "2",              name: "Premium Audio Cable Kit",              price: "$49.99",              variant: "Silver  5-Piece Set",              imageSrc: "https://img.b2bpic.net/free-photo/vertical-closeup-shot-luxurious-boxes-with-ribbons-table_181624-32513.jpg",              imageAlt: "Premium Audio Cable Kit",              isFavorited: false
            },
            {
              id: "3",              name: "Wireless Charging Dock",              price: "$79.99",              variant: "White  Fast Charging",              imageSrc: "https://img.b2bpic.net/free-photo/top-view-mystery-box-concept_23-2149516467.jpg",              imageAlt: "Wireless Charging Dock",              isFavorited: false
            }
          ]}
          title="You Might Also Like"
          description="Discover complementary products to enhance your audio experience"
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Questions?"
          tagIcon={HelpCircle}
          title="Need Help Choosing?"
          description="Our audio specialists are here to help you find the perfect headphones for your needs. Contact us anytime for personalized recommendations and expert advice."
          buttons={[
            { text: "Contact Support", href: "#" },
            { text: "Schedule Demo", href: "#" }
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="ShopHub"
          columns={[
            {
              title: "Shop",              items: [
                { label: "New Arrivals", href: "#" },
                { label: "Best Sellers", href: "#" },
                { label: "Sale", href: "#" },
                { label: "All Products", href: "#" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Contact Us", href: "#" },
                { label: "Shipping Info", href: "#" },
                { label: "Returns", href: "#" },
                { label: "FAQ", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Press", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 ShopHub. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}