"use client"
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductDetailCard from '@/components/ecommerce/productDetail/ProductDetailCard';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Heart, Package, Star } from "lucide-react";
import { useState } from "react";

export default function LandingPage() {
  const [selectedColor, setSelectedColor] = useState('Midnight Black');
  const [selectedWarranty, setSelectedWarranty] = useState('1 Year Standard');
  const [selectedQuantity, setSelectedQuantity] = useState('1');

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

  const handleWarrantyChange = (value: string) => {
    setSelectedWarranty(value);
  };

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

  const addToCart = () => {
    console.log('Added to cart:', { color: selectedColor, warranty: selectedWarranty, quantity: selectedQuantity });
  };

  const buyNow = () => {
    console.log('Buy now:', { color: selectedColor, warranty: selectedWarranty, quantity: selectedQuantity });
  };

  const toggleFavorite1 = () => {
    console.log('Toggled favorite for product 1');
  };

  const toggleFavorite2 = () => {
    console.log('Toggled favorite for product 2');
  };

  const toggleFavorite3 = () => {
    console.log('Toggled favorite for product 3');
  };

  const viewProduct1 = () => {
    console.log('View product 1');
  };

  const viewProduct2 = () => {
    console.log('View product 2');
  };

  const viewProduct3 = () => {
    console.log('View product 3');
  };

  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="mediumLargeSizeMediumTitles"
      background="circleGradient"
      cardStyle="layered-gradient"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="ShopHub"
          navItems={[
            { name: 'Home', id: 'home' },
            { name: 'Products', id: 'products' },
            { name: 'About', id: 'about' },
            { name: 'Reviews', id: 'reviews' },
            { name: 'Contact', id: 'contact' }
          ]}
          button={{
            text: 'Shop Now',
            href: 'products'
          }}
        />
      </div>

      <div id="product-detail" data-section="product-detail">
        <ProductDetailCard
          layout="page"
          name="Premium Wireless Headphones Pro"
          price="$249.99"
          rating={5}
          showRating={true}
          ratingIcon={Star}
          description="Experience premium sound quality with active noise cancellation, 40-hour battery life, and premium comfort design. Perfect for music lovers and professionals."
          images={[
            {
              src: "https://img.b2bpic.net/free-psd/cyber-monday-landing-page-template_23-2149839009.jpg",              alt: "Premium Wireless Headphones Front View"
            },
            {
              src: "https://img.b2bpic.net/free-psd/e-commerce-furniture-landing-page_197582-336.jpg",              alt: "Headphones Detail Close-up"
            },
            {
              src: "https://img.b2bpic.net/free-vector/product-card-design-template_23-2149687351.jpg",              alt: "Headphones Lifestyle Shot"
            },
            {
              src: "https://img.b2bpic.net/free-psd/landing-page-template-cyber-monday-shopping_23-2148723519.jpg",              alt: "Headphones Angle View"
            }
          ]}
          variants={[
            {
              label: 'Color',
              options: ['Midnight Black', 'Silver Gray', 'Deep Blue', 'Forest Green'],
              selected: selectedColor,
              onChange: handleColorChange
            },
            {
              label: 'Warranty',
              options: ['1 Year Standard', '2 Year Extended', '3 Year Premium'],
              selected: selectedWarranty,
              onChange: handleWarrantyChange
            }
          ]}
          quantity={{
            label: 'Quantity',
            options: ['1', '2', '3', '4', '5'],
            selected: selectedQuantity,
            onChange: handleQuantityChange
          }}
          buttons={[
            { text: 'Add to Cart', onClick: addToCart },
            { text: 'Buy Now', onClick: buyNow }
          ]}
        />
      </div>

      <div id="reviews" data-section="reviews">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: '1',
              name: 'Sarah Johnson',
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg",              imageAlt: 'Sarah Johnson'
            },
            {
              id: '2',
              name: 'Michael Chen',
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-green-shirt_141793-122624.jpg",              imageAlt: 'Michael Chen'
            },
            {
              id: '3',
              name: 'Emma Rodriguez',
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-millennial-man-looking-camera-cafe-headshot-portrait_1163-5163.jpg",              imageAlt: 'Emma Rodriguez'
            },
            {
              id: '4',
              name: 'David Kim',
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-caucasian-man-black-t-shirt-smiles-isolated-grey-wall_132075-8163.jpg",              imageAlt: 'David Kim'
            },
            {
              id: '5',
              name: 'Jessica Brown',
              imageSrc: "https://img.b2bpic.net/free-photo/pleased-young-brunette-caucasian-girl-looks-camera_141793-103873.jpg",              imageAlt: 'Jessica Brown'
            },
            {
              id: '6',
              name: 'James Wilson',
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-serious-man-with-curly-hair_176532-7988.jpg",              imageAlt: 'James Wilson'
            }
          ]}
          cardTitle="Over 15,000+ satisfied customers worldwide trust our products for exceptional quality and outstanding performance"
          cardTag="Customer Reviews"
          cardTagIcon={Heart}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="related-products" data-section="related-products">
        <ProductCardFour
          products={[
            {
              id: '1',
              name: 'Premium Wireless Earbuds',
              price: '$129.99',
              variant: 'Black  2 Colors',
              imageSrc: "https://img.b2bpic.net/free-vector/flat-design-product-card-template_23-2149671179.jpg",              imageAlt: 'Wireless Earbuds',
              isFavorited: false,
              onFavorite: toggleFavorite1,
              onProductClick: viewProduct1
            },
            {
              id: '2',
              name: 'Portable Bluetooth Speaker',
              price: '$89.99',
              variant: 'Silver  3 Colors',
              imageSrc: "https://img.b2bpic.net/free-vector/realistic-10-10-background_23-2149066040.jpg",              imageAlt: 'Bluetooth Speaker',
              isFavorited: false,
              onFavorite: toggleFavorite2,
              onProductClick: viewProduct2
            },
            {
              id: '3',
              name: 'Premium Audio Cable',
              price: '$49.99',
              variant: 'White  4 Lengths',
              imageSrc: "https://img.b2bpic.net/free-psd/gradient-bonus-card-design-template_23-2149992509.jpg",              imageAlt: 'Audio Cable',
              isFavorited: false,
              onFavorite: toggleFavorite3,
              onProductClick: viewProduct3
            }
          ]}
          title="You Might Also Like"
          description="Discover other premium products curated for you"
          tag="Related Products"
          tagIcon={Package}
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          buttons={[
            { text: 'View All Products', href: 'products' }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://img.b2bpic.net/free-vector/verified-check-mark-badges_78370-9292.jpg"
          imageAlt="Footer Brand Image"
          logoText="ShopHub"
          copyrightText="© 2025 ShopHub. All rights reserved."
          columns={[
            {
              title: 'Shop',
              items: [
                { label: 'Products', href: 'products' },
                { label: 'New Arrivals', href: 'new' },
                { label: 'Best Sellers', href: 'bestsellers' },
                { label: 'Sale', href: 'sale' }
              ]
            },
            {
              title: 'Support',
              items: [
                { label: 'Contact Us', href: 'contact' },
                { label: 'Shipping Info', href: 'shipping' },
                { label: 'Returns', href: 'returns' },
                { label: 'FAQ', href: 'faq' }
              ]
            },
            {
              title: 'Company',
              items: [
                { label: 'About Us', href: 'about' },
                { label: 'Careers', href: 'careers' },
                { label: 'Blog', href: 'blog' },
                { label: 'Partners', href: 'partners' }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}