"use client"

import { useState } from "react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import ProductDetailCard from "@/components/ecommerce/productDetail/ProductDetailCard";
import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
import FaqBase from "@/components/sections/faq/FaqBase";
import ProductCardFour from "@/components/sections/product/ProductCardFour";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
import { CheckCircle, HelpCircle, Mail, Package, Shield, Sparkles, Star, Zap } from "lucide-react";

export default function LandingPage() {
  const [selectedSize, setSelectedSize] = useState("10");
  const [selectedColor, setSelectedColor] = useState("Sunset Orange");
  const [selectedQuantity, setSelectedQuantity] = useState("1");

  const handleSizeChange = (value: string) => {
    setSelectedSize(value);
  };

  const handleColorChange = (value: string) => {
    setSelectedColor(value);
  };

  const handleQuantityChange = (value: string) => {
    setSelectedQuantity(value);
  };

  const handleAddToCart = () => {
    console.log("Add to cart clicked");
  };

  const handleAddToWishlist = () => {
    console.log("Add to wishlist clicked");
  };

  const handleFavorite = () => {
    console.log("Favorite clicked");
  };

  const handleProductClick = () => {
    console.log("Product clicked");
  };

  const handleNewsletterSubmit = (email: string) => {
    console.log("Newsletter submitted:", email);
  };

  const handlePrivacyClick = () => {
    console.log("Privacy policy clicked");
  };

  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="compact"
      sizing="largeSizeMediumTitles"
      background="none"
      cardStyle="outline"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="ProShop"
          navItems={[
            { name: "Shop", id: "products" },
            { name: "About", id: "about" },
            { name: "Reviews", id: "reviews" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Shop Now",            href: "#products"
          }}
        />
      </div>

      <div id="product-detail" data-section="product-detail">
        <ProductDetailCard
          layout="page"
          name="Eclipse Motion Pro"
          price="$159.99"
          showRating={true}
          rating={4.8}
          ratingIcon={Star}
          description="Experience ultimate comfort and performance with the Eclipse Motion Pro. Engineered with advanced cushioning technology, premium breathable materials, and a sleek design that transitions seamlessly from the gym to the streets. Built for athletes and style enthusiasts alike."
          images={[
            {
              src: "https://img.b2bpic.net/free-photo/gym-composition-with-sport-elements_23-2147915644.jpg",              alt: "Eclipse Motion Pro - Front View"
            },
            {
              src: "https://img.b2bpic.net/free-photo/gym-composition-with-sport-elements_23-2147915643.jpg",              alt: "Eclipse Motion Pro - Side View"
            },
            {
              src: "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",              alt: "Eclipse Motion Pro - Back View"
            },
            {
              src: "https://img.b2bpic.net/free-photo/sided-view-athlete-running-starting-line_23-2149731274.jpg",              alt: "Eclipse Motion Pro - Detail View"
            },
            {
              src: "https://img.b2bpic.net/free-photo/sneakers_1122-2301.jpg",              alt: "Eclipse Motion Pro - Lifestyle Shot"
            }
          ]}
          variants={[
            {
              label: "Size",              options: ["5", "6", "7", "8", "9", "10", "11", "12", "13"],
              selected: selectedSize,
              onChange: handleSizeChange
            },
            {
              label: "Color",              options: ["Midnight Black", "Sunset Orange", "Pearl White", "Deep Blue"],
              selected: selectedColor,
              onChange: handleColorChange
            }
          ]}
          quantity={{
            label: "Quantity",            options: ["1", "2", "3", "4", "5"],
            selected: selectedQuantity,
            onChange: handleQuantityChange
          }}
          buttons={[
            {
              text: "Add to Cart",              onClick: handleAddToCart
            },
            {
              text: "Wishlist",              onClick: handleAddToWishlist
            }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwentySix
          features={[
            {
              title: "Premium Cushioning",              description: "Advanced gel foam technology provides superior shock absorption and all-day comfort for every step you take",              imageSrc: "https://img.b2bpic.net/free-photo/modern-sport-composition-with-gym-elements_23-2147915646.jpg",              imageAlt: "Premium cushioning technology",              buttonIcon: Zap,
              buttonHref: "#"
            },
            {
              title: "Superior Durability",              description: "Crafted from premium materials with reinforced stitching that withstands intense workouts and daily wear",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-runner-shoes-with-red-laces_23-2148381975.jpg",              imageAlt: "Durable shoe construction",              buttonIcon: Shield,
              buttonHref: "#"
            },
            {
              title: "Sleek Design",              description: "Contemporary silhouette blends athletic performance with modern street style effortlessly",              imageSrc: "https://img.b2bpic.net/free-photo/sportswoman-tying-her-shoelaces-before-training-close-up-gray-background_639032-1563.jpg",              imageAlt: "Modern stylish design",              buttonIcon: Sparkles,
              buttonHref: "#"
            },
            {
              title: "Performance Ready",              description: "Engineered for athletes with lightweight construction and responsive sole technology for peak performance",              imageSrc: "https://img.b2bpic.net/free-photo/sneakers-towel-bottle_23-2147711362.jpg",              imageAlt: "Athletic performance",              buttonIcon: Zap,
              buttonHref: "#"
            }
          ]}
          title="Why Choose Eclipse Motion Pro"
          description="Discover the features that make Eclipse Motion Pro the preferred choice for athletes and everyday wear"
          tag="Product Features"
          tagIcon={CheckCircle}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="reviews" data-section="reviews">
        <TestimonialCardOne
          testimonials={[
            {
              id: "1",              name: "Marcus Johnson",              role: "Fitness Enthusiast",              company: "Active Lifestyle",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Marcus Johnson"
            },
            {
              id: "2",              name: "Sarah Chen",              role: "Professional Athlete",              company: "Elite Sports",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-businessman-conference-room-thinking-about-future_482257-25787.jpg",              imageAlt: "Sarah Chen"
            },
            {
              id: "3",              name: "David Rodriguez",              role: "Style Blogger",              company: "Urban Fashion",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",              imageAlt: "David Rodriguez"
            },
            {
              id: "4",              name: "Emily Patel",              role: "Gym Owner",              company: "Peak Performance",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg",              imageAlt: "Emily Patel"
            }
          ]}
          title="Customer Reviews"
          description="See what our satisfied customers are saying about Eclipse Motion Pro"
          tag="Testimonials"
          tagIcon={Star}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          carouselMode="buttons"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          faqs={[
            {
              id: "1",              title: "What is the fit of Eclipse Motion Pro?",              content: "Eclipse Motion Pro runs true to size. We recommend ordering your normal shoe size. If you're between sizes, we suggest going a half size up for a more comfortable fit during intense activities."
            },
            {
              id: "2",              title: "Is there a warranty or guarantee?",              content: "Yes, all Eclipse Motion Pro shoes come with a 1-year manufacturing warranty covering defects in materials and workmanship. We also offer a 30-day satisfaction guarantee—if you're not completely satisfied, you can return or exchange your shoes."
            },
            {
              id: "3",              title: "How should I care for my Eclipse Motion Pro?",              content: "Hand wash with cold water and mild soap, then air dry away from direct heat or sunlight. Do not machine wash or dry clean. For stubborn stains, use a soft brush with a bit of warm water. This will help extend the life of your shoes."
            },
            {
              id: "4",              title: "What are the shipping options?",              content: "We offer standard shipping (5-7 business days) at no charge for orders over $100, and expedited shipping (2-3 business days) for an additional fee. International shipping is available to select countries."
            },
            {
              id: "5",              title: "Can I return or exchange my shoes?",              content: "Absolutely! We offer hassle-free returns and exchanges within 30 days of purchase. Items must be unworn with original packaging. Simply initiate a return through your account or contact our customer service team for assistance."
            },
            {
              id: "6",              title: "Are Eclipse Motion Pro shoes suitable for running?",              content: "Yes! Eclipse Motion Pro is designed for both running and everyday wear. The advanced cushioning technology and lightweight construction make them ideal for runners seeking comfort and performance. They're equally great for casual activities and gym workouts."
            }
          ]}
          title="Frequently Asked Questions"
          description="Find answers to common questions about Eclipse Motion Pro shoes"
          tag="Help & Support"
          tagIcon={HelpCircle}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          showCard={true}
        />
      </div>

      <div id="related-products" data-section="related-products">
        <ProductCardFour
          products={[
            {
              id: "related-1",              name: "Urban Runner Max",              price: "$149.99",              variant: "Black, White, Navy  5 Colors",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-sporty-woman-with-purple-sneakers_23-2147598753.jpg",              imageAlt: "Urban Runner Max",              isFavorited: false,
              onFavorite: handleFavorite,
              onProductClick: handleProductClick
            },
            {
              id: "related-2",              name: "Velocity Sport Pro",              price: "$169.99",              variant: "Midnight Blue, Crimson Red  4 Colors",              imageSrc: "https://img.b2bpic.net/free-photo/sneakers-near-towel-bottle_23-2147711360.jpg",              imageAlt: "Velocity Sport Pro",              isFavorited: false,
              onFavorite: handleFavorite,
              onProductClick: handleProductClick
            },
            {
              id: "related-3",              name: "Nexus Flex Elite",              price: "$179.99",              variant: "Sunset Orange, Forest Green, Pearl White  6 Colors",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-modern-sport-trainers_23-2147995937.jpg",              imageAlt: "Nexus Flex Elite",              isFavorited: false,
              onFavorite: handleFavorite,
              onProductClick: handleProductClick
            }
          ]}
          title="You May Also Like"
          description="Explore other popular shoes from our premium collection"
          tag="Related Products"
          tagIcon={Package}
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Newsletter"
          title="Stay Updated with New Releases"
          description="Subscribe to our newsletter for exclusive deals, new product launches, and early access to sales on the latest Eclipse Motion Pro collections."
          tagIcon={Mail}
          background={{ variant: "rotated-rays-animated" }}
          useInvertedBackground="invertDefault"
          inputPlaceholder="Enter your email"
          buttonText="Subscribe"
          termsText="By subscribing, you agree to receive marketing emails. Unsubscribe anytime."
          onSubmit={handleNewsletterSubmit}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="ProShop"
          columns={[
            {
              title: "Shop",              items: [
                { label: "Men's Shoes", href: "/shop/mens" },
                { label: "Women's Shoes", href: "/shop/womens" },
                { label: "New Arrivals", href: "/shop/new" },
                { label: "Sale", href: "/shop/sale" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Track Order", href: "/track" },
                { label: "Returns", href: "/returns" },
                { label: "Size Guide", href: "/size-guide" },
                { label: "Contact Us", href: "/contact" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "/about" },
                { label: "Blog", href: "/blog" },
                { label: "Careers", href: "/careers" },
                { label: "Sustainability", href: "/sustainability" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "/privacy" },
                { label: "Terms of Service", href: "/terms" },
                { label: "Cookie Policy", href: "/cookies" }
              ]
            }
          ]}
          copyrightText="© 2025 ProShop. All rights reserved."
          onPrivacyClick={handlePrivacyClick}
        />
      </div>
    </ThemeProvider>
  );
}