"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductDetailCard from '@/components/ecommerce/productDetail/ProductDetailCard';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import FeatureCardTwentyTwo from '@/components/sections/feature/FeatureCardTwentyTwo';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { CheckCircle, Mail, Sparkles, Star, Zap } from "lucide-react";

export default function EcommercePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="compact"
      sizing="largeSizeMediumTitles"
      background="none"
      cardStyle="inset"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          brandName="ShopHub"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Products", id: "/products" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "contact" },
            { name: "Cart", id: "/cart" }
          ]}
          bottomLeftText="Premium E-Commerce"
          bottomRightText="hello@shophub.com"
        />
      </div>

      <div id="product-detail" data-section="product-detail">
        <ProductDetailCard
          layout="page"
          name="Eclipse Motion Pro"
          price="$189.99"
          showRating={true}
          rating={4.8}
          ratingIcon={Star}
          description="Experience ultimate comfort and style with the Eclipse Motion Pro. Engineered with advanced cushioning technology and premium breathable materials, these athletic sneakers are perfect for both serious athletes and casual wearers. Features responsive foam midsole, durable rubber outsole, and ergonomic arch support."
          images={[
            {
              src: "https://img.b2bpic.net/free-photo/close-up-runner-shoes-with-red-laces_23-2148381975.jpg",              alt: "Eclipse Motion Pro - Front View"
            },
            {
              src: "https://img.b2bpic.net/free-photo/sided-view-athlete-running-starting-line_23-2149731274.jpg",              alt: "Eclipse Motion Pro - Side View"
            },
            {
              src: "https://img.b2bpic.net/free-photo/gym-composition-with-sport-elements_23-2147915643.jpg",              alt: "Eclipse Motion Pro - Back View"
            },
            {
              src: "https://img.b2bpic.net/free-photo/runner-man-s-feet-running-road-closeup-shoe_273609-14245.jpg",              alt: "Eclipse Motion Pro - Detail Shot"
            }
          ]}
          buttons={[
            { text: "Add To Cart" },
            { text: "Buy Now" }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwo
          title="Customer Reviews"
          description="Real feedback from verified buyers who love the Eclipse Motion Pro"
          tag="Verified Purchases"
          tagIcon={CheckCircle}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              role: "Marathon Runner",              testimonial: "These are hands down the most comfortable sneakers I've ever owned. The cushioning is incredible and they've held up perfectly after 6 months of regular running.",              imageSrc: "https://img.b2bpic.net/free-photo/blonde-businesswoman-portrait-with-copy-space_1194-633470.jpg",              imageAlt: "Sarah Johnson"
            },
            {
              id: "2",              name: "Michael Chen",              role: "Fitness Coach",              testimonial: "I recommend the Eclipse Motion Pro to all my clients. The arch support is exceptional and they look great both in the gym and for casual wear.",              imageSrc: "https://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg",              imageAlt: "Michael Chen"
            },
            {
              id: "3",              name: "Emma Rodriguez",              role: "Casual Wearer",              testimonial: "Love how stylish these are! I wear them almost every day and they're still as comfortable as day one. Great quality for the price.",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-hispanic-female-executive-wearing-eyeglasses-standing-studio_662251-664.jpg",              imageAlt: "Emma Rodriguez"
            },
            {
              id: "4",              name: "David Kim",              role: "Trail Runner",              testimonial: "The durability is impressive. I've taken these on several challenging trail runs and the grip and support have never let me down.",              imageSrc: "https://img.b2bpic.net/free-photo/beautiful-young-businesswoman-smiling-camera_74855-3966.jpg",              imageAlt: "David Kim"
            },
            {
              id: "5",              name: "Jessica Lee",              role: "Daily Commuter",              testimonial: "Perfect for my daily commute. They're lightweight, supportive, and the style works with any outfit. Already planning to buy another pair.",              imageSrc: "https://img.b2bpic.net/free-photo/friendly-successful-business-lady-wearing-formal-suit-glasses-standing-with-arms-folded-smiling_74855-9932.jpg",              imageAlt: "Jessica Lee"
            },
            {
              id: "6",              name: "Thomas Wright",              role: "Sports Enthusiast",              testimonial: "Exceptional value. The build quality feels premium and the responsive cushioning makes every step feel effortless.",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-positive-executive-work_1098-519.jpg",              imageAlt: "Thomas Wright"
            }
          ]}
        />
      </div>

      <div id="related-products" data-section="related-products">
        <ProductCardOne
          title="Related Products"
          description="Explore other popular sneakers and athletic footwear"
          tag="You Might Like"
          tagIcon={Sparkles}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          gridVariant="three-columns-all-equal-width"
          carouselMode="buttons"
          products={[
            {
              id: "1",              name: "Swift Runner X",              price: "$159.99",              imageSrc: "https://img.b2bpic.net/free-photo/gym-composition-with-sport-elements_23-2147915644.jpg",              imageAlt: "Swift Runner X Sneaker"
            },
            {
              id: "2",              name: "Urban Stride Pro",              price: "$174.99",              imageSrc: "https://img.b2bpic.net/free-photo/top-view-sneakers-white-background-fitness-wear-equipment-sport-fashion-sport-accessories-sport-equipment-healthy-concept-copy-space-concept-healthy-lifestyle-sport-diet-sport-equipment_1391-726.jpg",              imageAlt: "Urban Stride Pro Sneaker"
            },
            {
              id: "3",              name: "Velocity Sport Max",              price: "$199.99",              imageSrc: "https://img.b2bpic.net/free-photo/sneakers_1122-2301.jpg",              imageAlt: "Velocity Sport Max Sneaker"
            }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwentyTwo
          title="Why Choose Eclipse Motion Pro"
          description="Premium features that set these sneakers apart from the competition"
          tag="Product Features"
          tagIcon={Zap}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          features={[
            {
              id: "1",              title: "Advanced Responsive Cushioning Technology",              category: ["Technology", "Comfort"],
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-runner-shoes-with-red-laces_23-2148381975.jpg",              imageAlt: "Responsive Cushioning"
            },
            {
              id: "2",              title: "Breathable Premium Materials for All-Day Wear",              category: ["Materials", "Durability"],
              imageSrc: "https://img.b2bpic.net/free-photo/sided-view-athlete-running-starting-line_23-2149731274.jpg",              imageAlt: "Premium Materials"
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardFourteen
          title="Built on Performance and Customer Satisfaction"
          tag="By The Numbers"
          useInvertedBackground="invertDefault"
          metrics={[
            {
              id: "1",              value: "50K+",              description: "Happy customers worldwide who trust the Eclipse Motion Pro for their daily activities"
            },
            {
              id: "2",              value: "4.8/5",              description: "Average customer rating across verified reviews and independent platforms"
            }
          ]}
        />
      </div>

      <div id="contact-cta" data-section="contact-cta">
        <ContactCTA
          tag="Get In Touch"
          tagIcon={Mail}
          title="Questions About Your Order?"
          description="Our customer support team is here to help with any questions about sizing, materials, or shipping. Reach out anytime—we're ready to assist."
          buttons={[
            {
              text: "Contact Support",              href: "mailto:support@shophub.com"
            },
            {
              text: "View FAQ",              href: "/faq"
            }
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              title: "Shop",              items: [
                { label: "All Products", href: "/products" },
                { label: "New Arrivals", href: "/new" },
                { label: "Sale Items", href: "/sale" },
                { label: "Clearance", href: "/clearance" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Contact Us", href: "/contact" },
                { label: "Shipping Info", href: "/shipping" },
                { label: "Returns", href: "/returns" },
                { label: "Size Guide", href: "/size-guide" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "/about" },
                { label: "Blog", href: "/blog" },
                { label: "Careers", href: "/careers" },
                { label: "Press", href: "/press" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "/privacy" },
                { label: "Terms of Service", href: "/terms" },
                { label: "Cookie Policy", href: "/cookies" }
              ]
            }
          ]}
          bottomLeftText="© 2025 ShopHub. All rights reserved."
          bottomRightText="Crafted with care for modern shoppers"
        />
      </div>
    </ThemeProvider>
  );
}