"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductDetailCard from '@/components/ecommerce/productDetail/ProductDetailCard';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Star } from 'lucide-react';

export default function ProductPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="sharp"
      contentWidth="compact"
      sizing="mediumLargeSizeMediumTitles"
      background="floatingGradient"
      cardStyle="soft-shadow"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="ProStore"
          navItems={[
            { name: "Shop", id: "products" },
            { name: "Reviews", id: "reviews" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "View Cart",            href: "#"
          }}
        />
      </div>

      <div id="product" data-section="product">
        <ProductDetailCard
          layout="page"
          name="Eclipse Motion Pro"
          price="$149.99"
          showRating={true}
          rating={4.8}
          ratingIcon={Star}
          description="Premium athletic sneaker engineered for maximum comfort and performance. Features advanced cushioning technology, breathable mesh upper, and responsive sole design. Perfect for running, training, or everyday wear."
          images={[
            {
              src: "https://img.b2bpic.net/free-photo/runner-man-s-feet-running-road-closeup-shoe_273609-14245.jpg",              alt: "Eclipse Motion Pro - Front View"
            },
            {
              src: "https://img.b2bpic.net/free-photo/view-travel-items-inside-car-ready-trip_23-2151078251.jpg",              alt: "Eclipse Motion Pro - Side View"
            },
            {
              src: "https://img.b2bpic.net/free-photo/gym-composition-with-sport-elements_23-2147915644.jpg",              alt: "Eclipse Motion Pro - Top View"
            },
            {
              src: "https://img.b2bpic.net/free-photo/view-white-ice-skates-with-peaches_23-2150806735.jpg",              alt: "Eclipse Motion Pro - Sole Detail"
            }
          ]}
          buttons={[
            {
              text: "Add To Cart",              onClick: () => console.log('Added to cart')
            },
            {
              text: "Save for Later",              onClick: () => console.log('Saved for later')
            }
          ]}
        />
      </div>

      <div id="reviews" data-section="reviews">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg",              imageAlt: "Sarah Johnson - Customer Review"
            },
            {
              id: "2",              name: "Michael Chen",              imageSrc: "https://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg",              imageAlt: "Michael Chen - Customer Review"
            },
            {
              id: "3",              name: "Emily Rodriguez",              imageSrc: "https://img.b2bpic.net/free-photo/business-woman-banner-concept-with-copy-space_23-2149601533.jpg",              imageAlt: "Emily Rodriguez - Customer Review"
            },
            {
              id: "4",              name: "David Kim",              imageSrc: "https://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg",              imageAlt: "David Kim - Customer Review"
            },
            {
              id: "5",              name: "Jessica Brown",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-positive-businesswoman_1098-3531.jpg",              imageAlt: "Jessica Brown - Customer Review"
            },
            {
              id: "6",              name: "Thomas Wilson",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-good-looking-smiling-friendly-female-trainee-ready-tackle-assignments-smiling-broadly-feeling-lucky-day-work-self-assured-encouraged-achieve-success-goal-white-wall_176420-35567.jpg",              imageAlt: "Thomas Wilson - Customer Review"
            }
          ]}
          cardTitle="Over 50,000 satisfied customers love the Eclipse Motion Pro"
          cardTag="Rated 4.8/5 stars based on authentic customer reviews"
          cardTagIcon={Star}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardEleven
          title="Trusted by Athletes Worldwide"
          description="Join thousands of satisfied customers who have experienced superior comfort and performance"
          metrics={[
            {
              id: "1",              value: "50K+",              title: "Happy Customers",              description: "Customers who trusted us with their athletic needs",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg",              imageAlt: "Happy customer wearing Eclipse Motion Pro"
            },
            {
              id: "2",              value: "4.8★",              title: "Average Rating",              description: "Consistent 5-star reviews from verified purchases",              imageSrc: "https://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg",              imageAlt: "Customer satisfaction rating"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Everything you need to know about the Eclipse Motion Pro"
          faqs={[
            {
              id: "1",              title: "What is the warranty on the Eclipse Motion Pro?",              content: "The Eclipse Motion Pro comes with a comprehensive 2-year warranty covering manufacturing defects and material failures. We stand behind our quality and craftsmanship. If you experience any issues within this period, our customer support team will help you with a replacement or repair at no additional cost."
            },
            {
              id: "2",              title: "How do I know what size to order?",              content: "We recommend using our size chart provided on this page. The Eclipse Motion Pro runs true to size for most customers. If you're between sizes, we suggest going up a half size for extra comfort, especially if you plan to wear thick socks. You can also consult our detailed fit guide or contact our support team for personalized recommendations."
            },
            {
              id: "3",              title: "What is your return policy?",              content: "We offer a 30-day money-back guarantee on all unworn, unwashed products with original packaging. If you're not completely satisfied with your Eclipse Motion Pro for any reason, simply return it within 30 days for a full refund. No questions asked. We also cover return shipping on defective items."
            },
            {
              id: "4",              title: "Are these shoes suitable for running?",              content: "Yes! The Eclipse Motion Pro was specifically engineered for running and high-impact athletic activities. The advanced cushioning technology provides excellent shock absorption, while the responsive sole design promotes natural foot movement. Many professional athletes and casual runners trust these shoes for both training and competition."
            },
            {
              id: "5",              title: "How should I care for my Eclipse Motion Pro?",              content: "To maintain your shoes, gently clean them with a soft brush and mild soap. Air dry them away from direct heat or sunlight. For the insoles, you can hand wash them separately and air dry. We recommend replacing insoles every 6-12 months depending on usage. Avoid machine washing or placing them in the dryer, as this may damage the materials."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/young-distraught-call-center-agent-communicating-with-client-while-using-desktop-pc-office_637285-6461.jpg"
          imageAlt="Customer support and FAQ assistance"
          mediaPosition="left"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Get in Touch"
          description="Have questions about the Eclipse Motion Pro? Our customer support team is here to help. Fill out the form below and we'll respond within 24 hours."
          inputs={[
            {
              name: "name",              type: "text",              placeholder: "Your Full Name",              required: true
            },
            {
              name: "email",              type: "email",              placeholder: "your@email.com",              required: true
            },
            {
              name: "phone",              type: "tel",              placeholder: "Your Phone Number",              required: false
            }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell us how we can help...",            rows: 5,
            required: true
          }}
          useInvertedBackground="invertDefault"
          mediaPosition="right"
          buttonText="Send Message"
          onSubmit={() => console.log('Form submitted')}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="ProStore"
          columns={[
            {
              items: [
                { label: "Shop", href: "#products" },
                { label: "New Arrivals", href: "#" },
                { label: "Best Sellers", href: "#" },
                { label: "Sale", href: "#" }
              ]
            },
            {
              items: [
                { label: "Support", href: "#" },
                { label: "Contact Us", href: "#contact" },
                { label: "FAQ", href: "#faq" },
                { label: "Shipping Info", href: "#" }
              ]
            },
            {
              items: [
                { label: "Company", href: "#" },
                { label: "About Us", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Blog", href: "#" }
              ]
            },
            {
              items: [
                { label: "Legal", href: "#" },
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Returns", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}