"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Star } from "lucide-react";

export default function EcommercePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="large"
      background="none"
      cardStyle="glass-elevated"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="EcommerceCo"
          navItems={[
            { name: "Shop", id: "products" },
            { name: "About", id: "about" },
            { name: "Reviews", id: "reviews" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCentered
          title="Premium Product Collection"
          description="Discover our curated selection of high-quality products crafted with precision and care. Experience excellence in every detail."
          background={{ variant: "gradient-bars" }}
          avatars={[
            { src: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Customer 1" },
            { src: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg", alt: "Customer 2" },
            { src: "https://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg", alt: "Customer 3" }
          ]}
          avatarText="Trusted by 10,000+ satisfied customers"
          buttons={[
            { text: "Shop Now", href: "#products" },
            { text: "Learn More", href: "#about" }
          ]}
          ariaLabel="Product showcase hero section"
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardThree
          title="Featured Product"
          description="Experience premium quality with our signature collection. Each item is carefully selected and crafted for excellence."
          products={[
            {
              id: "1",              name: "Premium Leather Messenger Bag",              price: "$189.00",              imageSrc: "https://img.b2bpic.net/free-photo/top-view-round-mystery-box_23-2149516475.jpg",              imageAlt: "Premium leather messenger bag in warm tan",              initialQuantity: 1,
              isFavorited: false
            },
            {
              id: "2",              name: "Sustainable Canvas Tote",              price: "$79.00",              imageSrc: "https://img.b2bpic.net/free-vector/realistic-dark-podium-background_23-2149153456.jpg",              imageAlt: "Eco-friendly canvas tote bag",              initialQuantity: 1,
              isFavorited: false
            },
            {
              id: "3",              name: "Luxury Travel Backpack",              price: "$249.00",              imageSrc: "https://img.b2bpic.net/free-photo/make-up-product-light_52683-105035.jpg",              imageAlt: "Professional travel backpack",              initialQuantity: 1,
              isFavorited: false
            },
            {
              id: "4",              name: "Minimalist Crossbody Bag",              price: "$119.00",              imageSrc: "https://img.b2bpic.net/free-photo/modern-round-wireless-speaker-with-slick-design-showcased-geometric-podium_23-2150808059.jpg",              imageAlt: "Sleek crossbody bag design",              initialQuantity: 1,
              isFavorited: false
            }
          ]}
          gridVariant="two-columns-alternating-heights"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          ariaLabel="Product selection with add to cart"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwentyFour
          title="Why Choose Our Products"
          description="We're committed to delivering exceptional quality, sustainability, and customer satisfaction in every product."
          features={[
            {
              id: "1",              title: "Premium Materials & Craftsmanship",              author: "Quality Team",              description: "Each product is handcrafted using only the finest materials sourced from sustainable suppliers worldwide.",              tags: ["Quality", "Craftsmanship"],
              imageSrc: "https://img.b2bpic.net/free-photo/suitmaker-tailor-cutting-fabric_482257-78193.jpg",              imageAlt: "Premium material quality showcase"
            },
            {
              id: "2",              title: "Fast & Reliable Shipping",              author: "Logistics Team",              description: "We guarantee secure packaging and swift delivery to your doorstep within 3-5 business days.",              tags: ["Shipping", "Reliability"],
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-engraving-art-tools_23-2149186734.jpg",              imageAlt: "Fast delivery service"
            },
            {
              id: "3",              title: "Dedicated Customer Support",              author: "Support Team",              description: "Our expert support team is available 24/7 to assist with any questions or concerns about your purchase.",              tags: ["Support", "Service"],
              imageSrc: "https://img.b2bpic.net/free-photo/man-studio-creates-leather-ware_1157-33210.jpg",              imageAlt: "Customer support excellence"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          ariaLabel="Product features and benefits"
        />
      </div>

      <div id="reviews" data-section="reviews">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Sarah Johnson"
            },
            {
              id: "2",              name: "Michael Chen",              imageSrc: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",              imageAlt: "Michael Chen"
            },
            {
              id: "3",              name: "Emily Rodriguez",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg",              imageAlt: "Emily Rodriguez"
            },
            {
              id: "4",              name: "David Kim",              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: "David Kim"
            },
            {
              id: "5",              name: "Jessica Martinez",              imageSrc: "https://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg",              imageAlt: "Jessica Martinez"
            },
            {
              id: "6",              name: "Thomas Wilson",              imageSrc: "https://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg",              imageAlt: "Thomas Wilson"
            }
          ]}
          cardTitle="Over 15,000 customers worldwide trust our products for quality and style"
          cardTag="See what customers are saying"
          cardTagIcon={Star}
          useInvertedBackground="noInvert"
          ariaLabel="Customer testimonials and reviews"
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <MetricCardEleven
          title="Trusted by Industry Leaders"
          description="Our products are chosen by premium brands and retailers across the globe"
          metrics={[
            {
              id: "1",              value: "15K+",              title: "Happy Customers",              description: "Satisfied customers worldwide",              imageSrc: "https://img.b2bpic.net/free-vector/psychology-logos-with-colorful-geometric-shapes_23-2147590277.jpg",              imageAlt: "Customer satisfaction"
            },
            {
              id: "2",              value: "50+",              title: "Brand Partners",              description: "Trusted by leading retailers",              imageSrc: "https://img.b2bpic.net/free-vector/collection-modern-logos-abstract-design_23-2147594158.jpg",              imageAlt: "Brand partnerships"
            },
            {
              id: "3",              value: "4.8★",              title: "Average Rating",              description: "Consistent excellence recognized",              imageSrc: "https://img.b2bpic.net/free-vector/geometric-harmony-hills-private-school-logo-template_742173-18879.jpg",              imageAlt: "Quality ratings"
            },
            {
              id: "4",              value: "100%",              title: "Quality Guarantee",              description: "Premium standards every time",              imageSrc: "https://img.b2bpic.net/free-vector/geometric-young-creative-agency-logo-template_742173-17664.jpg",              imageAlt: "Quality assurance"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          ariaLabel="Key metrics and social proof"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Find answers to common questions about our products, shipping, and ordering process."
          faqs={[
            {
              id: "1",              title: "What materials are used in your products?",              content: "All our products are crafted from premium, sustainably-sourced materials. We work exclusively with suppliers who meet our rigorous quality and ethical standards. Each item is thoroughly inspected before shipment."
            },
            {
              id: "2",              title: "How long does shipping take?",              content: "Standard shipping typically takes 3-5 business days within the US. International orders may take 7-14 business days depending on destination. We offer express shipping options at checkout for faster delivery."
            },
            {
              id: "3",              title: "What is your return policy?",              content: "We offer a 30-day money-back guarantee on all products. If you're not completely satisfied, simply return your item in original condition for a full refund or exchange."
            },
            {
              id: "4",              title: "Do you offer bulk discounts?",              content: "Yes, we offer special pricing for bulk orders. For orders over 10 items, please contact our sales team at sales@example.com for a custom quote."
            },
            {
              id: "5",              title: "Are your products eco-friendly?",              content: "Sustainability is at the core of our business. We use eco-friendly packaging, partner with sustainable suppliers, and offset our carbon footprint. Many of our products are made from recycled or organic materials."
            },
            {
              id: "6",              title: "How can I track my order?",              content: "Once your order ships, you'll receive a tracking number via email. You can use this number to track your package in real-time through our shipping partner's website."
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          ariaLabel="Product FAQ section"
        />
      </div>

      <div id="related-products" data-section="related-products">
        <ProductCardThree
          title="You Might Also Like"
          description="Explore our complementary products that pair perfectly with your selection."
          products={[
            {
              id: "5",              name: "Premium Leather Wallet",              price: "$59.00",              imageSrc: "https://img.b2bpic.net/free-photo/neon-robot-vacuum-cleaner_23-2151349187.jpg",              imageAlt: "Handcrafted leather wallet",              initialQuantity: 1,
              isFavorited: false
            },
            {
              id: "6",              name: "Protective Bag Insert",              price: "$29.00",              imageSrc: "https://img.b2bpic.net/free-psd/elegant-wooden-logo-mockup-designers_445255-1350.jpg",              imageAlt: "Organizer bag insert",              initialQuantity: 1,
              isFavorited: false
            },
            {
              id: "7",              name: "Travel Accessory Set",              price: "$99.00",              imageSrc: "https://img.b2bpic.net/free-psd/wooden-logo-mockup-showcasing-your-design-clients_445255-1348.jpg",              imageAlt: "Complete travel accessories",              initialQuantity: 1,
              isFavorited: false
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          ariaLabel="Related product recommendations"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="EcommerceCo"
          leftLink={{ text: "Privacy Policy", href: "/privacy" }}
          rightLink={{ text: "Terms of Service", href: "/terms" }}
          ariaLabel="Site footer"
        />
      </div>
    </ThemeProvider>
  );
}