"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroSignup from '@/components/sections/hero/HeroSignup';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import SplitAbout from '@/components/sections/about/SplitAbout';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Award, CheckCircle, Facebook, Hammer, Heart, Instagram, Leaf, Linkedin, Shield, Star, Twitter } from "lucide-react";

export default function EcommercePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="sharp"
      contentWidth="compact"
      sizing="largeSmallSizeMediumTitles"
      background="aurora"
      cardStyle="glass-elevated"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="ShopHub"
          navItems={[
            { name: "Shop", id: "products" },
            { name: "About", id: "about" },
            { name: "Reviews", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "View Cart", href: "#" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSignup
          title="Premium Quality Product"
          description="Discover our best-selling item crafted with precision and care. Limited stock available—secure yours today with our satisfaction guarantee."
          tag="Featured Product"
          tagIcon={Star}
          background={{ variant: "sparkles-gradient" }}
          inputPlaceholder="Enter your email for updates"
          buttonText="Explore Now"
          className="py-16 md:py-24"
        />
      </div>

      <div id="product-showcase" data-section="product-showcase">
        <ProductCardThree
          title="Product Details & Quick Add"
          description="Select your quantity and add to cart instantly. Free shipping on orders over $50."
          tag="In Stock"
          tagIcon={CheckCircle}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          products={[
            {
              id: "1",              name: "Premium Leather Messenger Bag",              price: "$149.99",              imageSrc: "https://img.b2bpic.net/free-photo/happy-couple-listening-music-kitchen_53876-97222.jpg",              imageAlt: "Premium leather messenger bag in cognac",              initialQuantity: 1
            },
            {
              id: "2",              name: "Classic Black Variant",              price: "$149.99",              imageSrc: "https://img.b2bpic.net/free-photo/minimalist-camera-lens-desk-with-copy-space_23-2148424430.jpg",              imageAlt: "Premium leather messenger bag in classic black",              initialQuantity: 1
            },
            {
              id: "3",              name: "Travel Bundle Edition",              price: "$199.99",              imageSrc: "https://img.b2bpic.net/free-photo/side-view-woman-working-photography-studio_23-2150254643.jpg",              imageAlt: "Premium leather messenger bag travel bundle",              initialQuantity: 1
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFive
          title="What Customers Love"
          description="Read authentic reviews from verified buyers who have experienced the quality firsthand."
          tag="Customer Reviews"
          tagIcon={Heart}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell, Verified Buyer",              date: "Date: 15 January 2025",              title: "Exceeded all my expectations",              quote: "The quality of this product is absolutely outstanding. It arrived perfectly packaged and the craftsmanship is evident in every detail. I've recommended it to all my friends and colleagues. Worth every penny!",              tag: "Premium Quality",              avatarSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              avatarAlt: "Sarah Mitchell",              imageSrc: "https://img.b2bpic.net/free-photo/happy-couple-listening-music-kitchen_53876-97222.jpg",              imageAlt: "Customer with premium product"
            },
            {
              id: "2",              name: "James Chen, Verified Buyer",              date: "Date: 12 January 2025",              title: "Best purchase this year",              quote: "I've owned many similar products, but this one truly stands out. The attention to detail, the durability, and the elegant design make it a must-have. Customer service was also exceptional when I had questions.",              tag: "Excellent Value",              avatarSrc: "https://img.b2bpic.net/free-photo/portrait-smiley-business-man_23-2148514859.jpg",              avatarAlt: "James Chen",              imageSrc: "https://img.b2bpic.net/free-photo/minimalist-camera-lens-desk-with-copy-space_23-2148424430.jpg",              imageAlt: "Customer satisfaction with product"
            },
            {
              id: "3",              name: "Emily Rodriguez, Verified Buyer",              date: "Date: 8 January 2025",              title: "Perfect for everyday use",              quote: "This product has become an essential part of my daily routine. It's versatile, durable, and looks great. The design is timeless and functional. I'm incredibly happy with my purchase and the fast shipping was a bonus!",              tag: "Reliable & Durable",              avatarSrc: "https://img.b2bpic.net/free-photo/happy-young-professional-posing-office_1262-21170.jpg",              avatarAlt: "Emily Rodriguez",              imageSrc: "https://img.b2bpic.net/free-photo/side-view-woman-working-photography-studio_23-2150254643.jpg",              imageAlt: "Lifestyle use of premium product"
            },
            {
              id: "4",              name: "Michael Thompson, Verified Buyer",              date: "Date: 5 January 2025",              title: "Investment worth making",              quote: "Initially hesitant about the price point, but this product is truly an investment. The quality materials, superior construction, and timeless design ensure it will last for years. Best decision I've made. Highly recommend!",              tag: "Premium Choice",              avatarSrc: "https://img.b2bpic.net/free-photo/portrait-businessman-conference-room-thinking-about-future_482257-25787.jpg",              avatarAlt: "Michael Thompson",              imageSrc: "https://img.b2bpic.net/free-photo/photography-studio-with-equipment-items-arrangement_23-2150254625.jpg",              imageAlt: "Premium packaging and presentation"
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <SplitAbout
          title="About This Product"
          description="Crafted with premium materials and designed for those who appreciate quality and timeless style. Every product undergoes rigorous quality control to ensure excellence."
          tag="Our Commitment"
          imagePosition="right"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/happy-couple-listening-music-kitchen_53876-97222.jpg"
          imageAlt="Premium product craftsmanship"
          bulletPoints={[
            {
              title: "Premium Materials",              description: "Sourced from the finest suppliers worldwide for uncompromising quality",              icon: Award
            },
            {
              title: "Expert Craftsmanship",              description: "Handpicked artisans with decades of experience create each piece",              icon: Hammer
            },
            {
              title: "Lifetime Warranty",              description: "Backed by our comprehensive warranty and dedicated customer support",              icon: Shield
            },
            {
              title: "Eco-Conscious",              description: "Sustainable sourcing and environmentally responsible production methods",              icon: Leaf
            }
          ]}
          buttons={[
            { text: "Learn More", href: "#" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwentyOne
          title="Why Choose This Product"
          description="Discover the features that set this product apart from the competition."
          tag="Key Features"
          mediaPosition="left"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/minimalist-camera-lens-desk-with-copy-space_23-2148424430.jpg"
          imageAlt="Product features and benefits"
          accordionItems={[
            {
              id: "1",              title: "Superior Durability & Longevity",              content: "Built to last for years with premium materials that age beautifully. Our rigorous testing ensures this product withstands daily use and maintains its integrity over time. Investment quality that pays dividends."
            },
            {
              id: "2",              title: "Elegant & Timeless Design",              content: "Versatile aesthetics that complement any style. The minimalist approach ensures this product never goes out of fashion. Designed by award-winning designers with decades of experience."
            },
            {
              id: "3",              title: "Sustainable & Ethical Production",              content: "Produced using eco-friendly methods and fair-trade practices. We partner with suppliers who share our commitment to environmental responsibility and ethical labor standards."
            },
            {
              id: "4",              title: "White Glove Service & Support",              content: "Dedicated customer service team available 24/7 to assist with any questions. Free shipping on all orders and hassle-free returns within 30 days."
            }
          ]}
          buttons={[
            { text: "Add to Cart", href: "#" }
          ]}
        />
      </div>

      <div id="related" data-section="related">
        <ProductCardThree
          title="You Might Also Like"
          description="Explore our complementary products to complete your collection."
          tag="Related Items"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          products={[
            {
              id: "r1",              name: "Leather Passport Wallet",              price: "$59.99",              imageSrc: "https://img.b2bpic.net/free-photo/view-process-making-pressed-coffee_23-2149709930.jpg",              imageAlt: "Premium leather passport wallet",              initialQuantity: 1
            },
            {
              id: "r2",              name: "Travel Accessories Kit",              price: "$79.99",              imageSrc: "https://img.b2bpic.net/free-photo/make-up-product-light_52683-105035.jpg",              imageAlt: "Complete travel accessories set",              initialQuantity: 1
            },
            {
              id: "r3",              name: "Protective Leather Pouch",              price: "$44.99",              imageSrc: "https://img.b2bpic.net/free-photo/side-view-woman-working-photography-studio_23-2150254644.jpg",              imageAlt: "Premium protective leather pouch",              initialQuantity: 1
            }
          ]}
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <MetricCardTwo
          title="Trusted by Thousands"
          description="Join our community of satisfied customers worldwide."
          tag="Social Proof"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          gridVariant="uniform-all-items-equal"
          metrics={[
            {
              id: "1",              value: "50K+",              description: "Happy Customers Worldwide"
            },
            {
              id: "2",              value: "4.9/5",              description: "Average Customer Rating"
            },
            {
              id: "3",              value: "98%",              description: "Customer Satisfaction Rate"
            },
            {
              id: "4",              value: "15 Years",              description: "Industry Excellence"
            }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Find answers to common questions about our product, shipping, and returns."
          tag="Customer Support"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "What is the warranty period?",              content: "All our products come with a comprehensive lifetime warranty covering manufacturing defects. This includes free repairs or replacement if any issues arise during normal use. Extended coverage options are also available."
            },
            {
              id: "2",              title: "How long does shipping take?",              content: "Standard shipping typically takes 5-7 business days. Express shipping (2-3 business days) is available for an additional fee. All orders include tracking information so you can monitor your package in real-time."
            },
            {
              id: "3",              title: "Is there a return policy?",              content: "We offer a hassle-free 30-day money-back guarantee. If you're not completely satisfied, simply return the product in its original condition for a full refund. No questions asked."
            },
            {
              id: "4",              title: "What materials are used?",              content: "Our products are crafted from premium materials sourced from certified suppliers. We use genuine leather, sustainable wood, and high-quality metals. All materials undergo rigorous testing for durability and safety."
            },
            {
              id: "5",              title: "Can I customize my order?",              content: "Yes! We offer customization options including colors, monogramming, and engraving. Contact our customer service team for details on available customization options for your specific product."
            },
            {
              id: "6",              title: "Is there a bulk discount?",              content: "Yes, we offer special pricing for bulk orders. For purchases of 5 or more items, please contact our sales team at sales@shophub.com or call 1-800-SHOP-HUB for a custom quote."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Get In Touch"
          title="Have Questions?"
          description="Our customer service team is here to help. Reach out with any inquiries about our products, shipping, or anything else. We typically respond within 24 hours."
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/photography-studio-with-equipment-items-arrangement_23-2150254625.jpg"
          imageAlt="Customer service support"
          mediaPosition="right"
          inputPlaceholder="Enter your email"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe anytime from our newsletter."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="ShopHub"
          copyrightText="© 2025 ShopHub. All rights reserved. | Privacy Policy | Terms of Service"
          socialLinks={[
            {
              icon: Instagram,
              href: "https://instagram.com",              ariaLabel: "Follow us on Instagram"
            },
            {
              icon: Facebook,
              href: "https://facebook.com",              ariaLabel: "Follow us on Facebook"
            },
            {
              icon: Twitter,
              href: "https://twitter.com",              ariaLabel: "Follow us on Twitter"
            },
            {
              icon: Linkedin,
              href: "https://linkedin.com",              ariaLabel: "Connect with us on LinkedIn"
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}