"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Star, Mail } from "lucide-react";

export default function EcommercePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="largeSmallSizeMediumTitles"
      background="circleGradient"
      cardStyle="gradient-radial"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="ShopHub"
          navItems={[
            { name: "Shop", id: "products" },
            { name: "About", id: "about" },
            { name: "Reviews", id: "reviews" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "View Cart"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="Premium Product Collection"
          description="Discover our handpicked selection of high-quality products designed for excellence and durability. Experience premium craftsmanship at competitive prices."
          background={{ variant: "sparkles-gradient" }}
          imageSrc="https://img.b2bpic.net/free-vector/gradient-golden-luxury-banners-with-photo_52683-69958.jpg"
          imageAlt="Featured premium product showcase"
          buttons={[
            { text: "Shop Now", href: "#products" },
            { text: "Learn More", href: "#details" }
          ]}
        />
      </div>

      <div id="product-details" data-section="product-details">
        <ProductCardTwo
          title="Featured Products"
          description="Explore our curated selection of bestselling items with authentic customer reviews and ratings."
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          gridVariant="uniform-all-items-equal"
          products={[
            {
              id: "1",              brand: "PremiumCraft",              name: "Elegant Coffee Maker Pro",              price: "$89.99",              rating: 5,
              reviewCount: "1.2k",              imageSrc: "https://img.b2bpic.net/free-vector/modern-bar-gradient-template-minimal-style_53876-117518.jpg",              imageAlt: "Elegant Coffee Maker Pro"
            },
            {
              id: "2",              brand: "LuxeDesign",              name: "Modern Desk Organizer",              price: "$45.50",              rating: 4,
              reviewCount: "856",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-champagne-bottle-cork_23-2148578909.jpg",              imageAlt: "Modern Desk Organizer"
            },
            {
              id: "3",              brand: "TechVision",              name: "Smart LED Work Lamp",              price: "$65.00",              rating: 5,
              reviewCount: "2.3k",              imageSrc: "https://img.b2bpic.net/free-vector/perfume-bottle-olive-green-silk-fabric-folded_107791-751.jpg",              imageAlt: "Smart LED Work Lamp"
            }
          ]}
        />
      </div>

      <div id="reviews" data-section="reviews">
        <TestimonialCardTwelve
          cardTitle="Trusted by thousands of satisfied customers worldwide who love our quality and service"
          cardTag="See what customers say"
          cardTagIcon={Star}
          useInvertedBackground="noInvert"
          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: "Michael Chen",              imageSrc: "https://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg",              imageAlt: "Michael Chen"
            },
            {
              id: "3",              name: "Emma Rodriguez",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg",              imageAlt: "Emma Rodriguez"
            },
            {
              id: "4",              name: "James Wilson",              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: "James Wilson"
            }
          ]}
        />
      </div>

      <div id="related-products" data-section="related-products">
        <FeatureCardTwentyThree
          title="You Might Also Like"
          description="Discover complementary products that pair perfectly with your selection"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          features={[
            {
              id: "1",              title: "Premium Stainless Steel Accessories",              tags: ["Bestseller", "Premium"],
              imageSrc: "https://img.b2bpic.net/free-vector/perfume-bottle-black-silk-fabric-background_107791-1629.jpg",              imageAlt: "Premium Stainless Steel Accessories"
            },
            {
              id: "2",              title: "Eco-Friendly Packaging Bundle",              tags: ["Sustainable", "New"],
              imageSrc: "https://img.b2bpic.net/free-vector/gradient-hotel-banner-template-with-photo_23-2148923560.jpg",              imageAlt: "Eco-Friendly Packaging Bundle"
            },
            {
              id: "3",              title: "Extended Warranty Protection Plan",              tags: ["Value", "Limited Time"],
              imageSrc: "https://img.b2bpic.net/free-vector/perfume-bottle-olive-green-silk-fabric-folded-banner_107791-1018.jpg",              imageAlt: "Extended Warranty Protection Plan"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Newsletter"
          tagIcon={Mail}
          title="Stay Updated on New Arrivals"
          description="Subscribe to our exclusive newsletter for early access to new products, special discounts, and insider tips from our team."
          background={{ variant: "gradient-bars" }}
          useInvertedBackground="noInvert"
          inputPlaceholder="Enter your email address"
          buttonText="Subscribe"
          termsText="We respect your privacy. You can unsubscribe at any time with one click."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="ShopHub"
          copyrightText="© 2025 ShopHub. All rights reserved."
          columns={[
            {
              title: "Shop",              items: [
                { label: "Products", href: "products" },
                { label: "New Arrivals", href: "products" },
                { label: "Best Sellers", href: "products" },
                { label: "Sale", href: "products" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "about" },
                { label: "Blog", href: "https://blog.shophub.com" },
                { label: "Careers", href: "https://careers.shophub.com" },
                { label: "Press", href: "https://press.shophub.com" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Help Center", href: "https://help.shophub.com" },
                { label: "Contact Us", href: "contact" },
                { label: "Shipping Info", href: "https://shipping.shophub.com" },
                { label: "Returns", href: "https://returns.shophub.com" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}