"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { Sparkles, CheckCircle, Star, Award, Users, TrendingUp, Shield, Mail } from "lucide-react";

export default function LandingPage() {
  const handleAddToCart = () => {
    console.log('Add to cart clicked');
  };

  const handleQuantityChange = (quantity: number) => {
    console.log('Quantity changed:', quantity);
  };

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

  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="mediumLarge"
      background="circleGradient"
      cardStyle="soft-shadow"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          brandName="ShopHub"
          navItems={[
            { name: "Shop", id: "products" },
            { name: "Categories", id: "categories" },
            { name: "About", id: "about" },
            { name: "Reviews", id: "reviews" },
            { name: "Contact", id: "contact" }
          ]}
          bottomLeftText="Premium Shopping"
          bottomRightText="support@shophub.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitDualMedia
          tag="Premium Product"
          tagIcon={Sparkles}
          title="Premium Leather Messenger Bag"
          description="Handcrafted with genuine Italian leather, featuring a sleek design perfect for professionals on the go. Durable, sophisticated, and timeless."
          background={{ variant: "plain" }}
          buttons={[
            { text: "Add to Cart", onClick: handleAddToCart },
            { text: "View Details", href: "#features" }
          ]}
          mediaItems={[
            {
              imageSrc: "https://img.b2bpic.net/free-vector/realistic-10-10-background_23-2149066040.jpg",              imageAlt: "Premium Leather Messenger Bag Main View"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-psd/cyber-monday-landing-page-template_23-2149839009.jpg",              imageAlt: "Product in Use Lifestyle Shot"
            }
          ]}
          rating={5}
          ratingText="Trusted by 2,500+ customers"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardSix
          title="Product Specifications"
          description="Discover what makes our messenger bag the perfect daily companion"
          tag="Features"
          tagIcon={CheckCircle}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          features={[
            {
              id: 1,
              title: "Premium Italian Leather",              description: "Genuine full-grain leather sourced from sustainable manufacturers, ensuring durability and a rich patina over time.",              imageSrc: "https://img.b2bpic.net/free-vector/realistic-dark-podium-background_23-2149153456.jpg"
            },
            {
              id: 2,
              title: "Ergonomic Design",              description: "Padded shoulder strap and weight-distributed compartments reduce strain during daily commute and travel.",              imageSrc: "https://img.b2bpic.net/free-photo/modern-round-wireless-speaker-with-slick-design-showcased-geometric-podium_23-2150808059.jpg"
            },
            {
              id: 3,
              title: "Versatile Storage",              description: "Multiple pockets and organizational compartments perfect for laptops, documents, and everyday essentials.",              imageSrc: "https://img.b2bpic.net/free-vector/realistic-10-10-background_23-2149066040.jpg"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFive
          title="What Our Customers Say"
          description="Real reviews from real customers who love their purchase"
          tag="Reviews"
          tagIcon={Star}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson, Marketing Manager",              date: "Date: 15 January 2025",              title: "Best investment for my daily commute",              quote: "The quality is exceptional. The leather feels premium and the bag has held up perfectly through daily use. I get compliments constantly, and it pairs well with any outfit. Highly recommend!",              tag: "Verified Purchase",              avatarSrc: "https://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg",              imageSrc: "https://img.b2bpic.net/free-psd/cyber-monday-landing-page-template_23-2149839009.jpg"
            },
            {
              id: "2",              name: "Michael Chen, Business Consultant",              date: "Date: 10 January 2025",              title: "Professional, durable, and stylish",              quote: "I've been using this messenger bag for three months now. The compartments are perfectly organized, and it looks as good as it did on day one. Worth every penny.",              tag: "Verified Purchase",              avatarSrc: "https://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg",              imageSrc: "https://img.b2bpic.net/free-vector/realistic-10-10-background_23-2149066040.jpg"
            },
            {
              id: "3",              name: "Emma Rodriguez, Freelance Designer",              date: "Date: 5 January 2025",              title: "Timeless design meets functionality",              quote: "Finally found a bag that matches my professional aesthetic and actually carries my laptop safely. The craftsmanship is outstanding and the warranty gives great peace of mind.",              tag: "Verified Purchase",              avatarSrc: "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",              imageSrc: "https://img.b2bpic.net/free-vector/realistic-dark-podium-background_23-2149153456.jpg"
            },
            {
              id: "4",              name: "David Kim, Travel Consultant",              date: "Date: 28 December 2024",              title: "Perfect travel companion",              quote: "Used it for a two-week business trip and it performed flawlessly. The leather is aging beautifully, and customer service was incredibly helpful with care tips.",              tag: "Verified Purchase",              avatarSrc: "https://img.b2bpic.net/free-photo/blond-business-woman-blue-shirt_23-2148095792.jpg",              imageSrc: "https://img.b2bpic.net/free-photo/modern-round-wireless-speaker-with-slick-design-showcased-geometric-podium_23-2150808059.jpg"
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Our Trust Metrics"
          description="Real numbers that showcase our commitment to quality and customer satisfaction"
          tag="Social Proof"
          tagIcon={Award}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          metrics={[
            {
              id: "1",              icon: Users,
              title: "Happy Customers",              value: "2,500+"
            },
            {
              id: "2",              icon: Star,
              title: "Average Rating",              value: "4.9/5"
            },
            {
              id: "3",              icon: TrendingUp,
              title: "Product Sales",              value: "10K+"
            },
            {
              id: "4",              icon: Shield,
              title: "Satisfaction Rate",              value: "98%"
            }
          ]}
        />
      </div>

      <div id="related-products" data-section="related-products">
        <ProductCardThree
          title="You Might Also Like"
          description="Explore other premium products our customers love"
          tag="Related Items"
          tagIcon={Sparkles}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          carouselMode="auto"
          products={[
            {
              id: "prod-1",              name: "Leather Laptop Case",              price: "$79.99",              imageSrc: "https://img.b2bpic.net/free-photo/mystery-box-collage_23-2150061730.jpg",              imageAlt: "Premium Leather Laptop Case",              initialQuantity: 1,
              onQuantityChange: handleQuantityChange
            },
            {
              id: "prod-2",              name: "Leather Wallet",              price: "$45.99",              imageSrc: "https://img.b2bpic.net/free-vector/realistic-10-10-background_52683-70288.jpg",              imageAlt: "Classic Leather Wallet",              initialQuantity: 1,
              onQuantityChange: handleQuantityChange
            },
            {
              id: "prod-3",              name: "Leather Briefcase",              price: "$159.99",              imageSrc: "https://img.b2bpic.net/free-photo/modern-round-wireless-speaker-with-slick-design-showcased-geometric-podium_23-2150808057.jpg",              imageAlt: "Executive Leather Briefcase",              initialQuantity: 1,
              onQuantityChange: handleQuantityChange
            }
          ]}
        />
      </div>

      <div id="newsletter" data-section="newsletter">
        <ContactCenter
          tag="Newsletter"
          tagIcon={Mail}
          title="Stay Updated on New Arrivals"
          description="Subscribe to our newsletter for exclusive offers, new product launches, and care tips for your leather goods."
          background={{ variant: "rotated-rays-animated" }}
          useInvertedBackground="noInvert"
          inputPlaceholder="Enter your email"
          buttonText="Subscribe"
          termsText="We'll never spam you. Unsubscribe anytime."
          onSubmit={handleNewsletterSubmit}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              title: "Shop",              items: [
                { label: "All Products", href: "#products" },
                { label: "New Arrivals", href: "#new" },
                { label: "Best Sellers", href: "#bestsellers" },
                { label: "Sale", href: "#sale" }
              ]
            },
            {
              title: "Customer Care",              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: "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" }
              ]
            }
          ]}
          bottomLeftText="© 2025 ShopHub. All rights reserved."
          bottomRightText="Made with quality in mind"
        />
      </div>
    </ThemeProvider>
  );
}