"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Sparkles, TrendingUp, Star, Zap, Crown } from 'lucide-react';
import Link from 'next/link';

export default function HomePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="mediumSizeLargeTitles"
      background="blurBottom"
      cardStyle="outline"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="UrbanStyle"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Shop", id: "/products" },
            { name: "About", id: "/about" },
            { name: "Pricing", id: "/pricing" }
          ]}
          button={{
            text: "Contact Us",
            href: "/contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCarouselLogo
          logoText="URBANSTYLE"
          description="Discover cutting-edge urban fashion with our exclusive collection of premium streetwear and contemporary apparel."
          buttons={[
            { text: "Shop Now", href: "/products" },
            { text: "Learn More", href: "/about" }
          ]}
          slides={[
            {
              imageSrc: "http://img.b2bpic.net/free-photo/young-black-spanish-male-friends-standing-front-blue-metal-gate_181624-57919.jpg",
              imageAlt: "urban streetwear fashion street style collection contemporary apparel"
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/outdoor-shot-thoughtful-curly-haired-young-woman-listens-audio-track-via-wireless-stereo-headphones-looks-away-dressed-casual-clothes-sits-stairs-urban-place-thinks-about-something_273609-59966.jpg",
              imageAlt: "premium casual wear modern urban fashion streetwear outfit"
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/school-scene-with-queer-teens_23-2150379366.jpg",
              imageAlt: "contemporary fashion collection trendy clothing display urban style showcase"
            }
          ]}
          autoplayDelay={5000}
          showDimOverlay={true}
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardThree
          title="Featured Products"
          description="Browse our curated collection of urban fashion essentials with add-to-cart functionality"
          tag="New Arrivals"
          tagIcon={Sparkles}
          textboxLayout="default"
          useInvertedBackground={false}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          carouselMode="buttons"
          products={[
            {
              id: "1",
              name: "Classic Black Bomber Jacket",
              price: "$129.99",
              imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-walking-down-street_1303-24594.jpg?_wi=1",
              imageAlt: "black bomber jacket men fashion jacket urban outerwear",
              initialQuantity: 1
            },
            {
              id: "2",
              name: "White Oversized T-Shirt",
              price: "$34.99",
              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-black-woman-with-afro-curls-hairstylesmiling-hipster-model-white-tshirt-sexy-carefree-female-posing-street-near-brown-wall-cheerful-happy-sunglasses_158538-21447.jpg?_wi=1",
              imageAlt: "white oversized t-shirt casual tee minimalist clothing",
              initialQuantity: 1
            },
            {
              id: "3",
              name: "Premium Slim Fit Jeans",
              price: "$89.99",
              imageSrc: "http://img.b2bpic.net/free-photo/urban-outdoor-fashion-portrait-young-stylish-hipster-man-wearing-leather-biker-jacket-denim-pants-vintage-shoes-posing-countryside-parking-evening-sunlight_291049-1614.jpg?_wi=1",
              imageAlt: "slim fit jeans denim pants classic blue jeans",
              initialQuantity: 1
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TextSplitAbout
          title="About UrbanStyle"
          description={[
            "UrbanStyle is dedicated to bringing authentic, high-quality urban fashion to fashion enthusiasts worldwide. Since 2015, we've been curating premium streetwear and contemporary apparel that celebrates individuality and creative expression.",
            "Our mission is to provide accessible luxury fashion that empowers our community to express themselves confidently. We work directly with independent designers and ethical manufacturers to ensure every piece meets our standards for quality, sustainability, and style.",
            "With over 50,000 satisfied customers across the globe, UrbanStyle continues to innovate and push the boundaries of urban fashion. Join our community and discover your unique style."
          ]}
          buttons={[
            { text: "Explore Collection", href: "/products" }
          ]}
          showBorder={true}
          useInvertedBackground={false}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardSeven
          title="Our Growth Story"
          description="Track record of success demonstrating our impact in the urban fashion industry"
          tag="Sales Performance"
          tagIcon={TrendingUp}
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          carouselMode="buttons"
          metrics={[
            {
              id: "1",
              value: "50K+",
              title: "Happy Customers Worldwide",
              items: ["Active in 25+ countries", "95% customer satisfaction rate", "Award-winning service"]
            },
            {
              id: "2",
              value: "$2.5M",
              title: "Annual Sales Revenue",
              items: ["Year-over-year growth: 45%", "Q4 2024 peak performance", "Record-breaking inventory"]
            },
            {
              id: "3",
              value: "500+",
              title: "Premium Products",
              items: ["Exclusive designer collaborations", "Seasonal collections released quarterly", "Limited edition drops"]
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTen
          title="What Our Customers Love"
          description="Real feedback from our community of urban fashion enthusiasts"
          tag="Customer Reviews"
          tagIcon={Star}
          textboxLayout="default"
          useInvertedBackground={false}
          testimonials={[
            {
              id: "1",
              title: "Premium Quality at Affordable Prices",
              quote: "UrbanStyle offers the best combination of quality and price. Every piece I've purchased has exceeded my expectations. The fit, the fabric, the attention to detail—it's all incredible. I'm a loyal customer for life!",
              name: "Marcus Johnson",
              role: "Fashion Enthusiast",
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
              imageAlt: "professional headshot man portrait business photo"
            },
            {
              id: "2",
              title: "Exceptional Customer Service",
              quote: "I had a sizing issue with my order and the customer service team resolved it within 24 hours. They shipped a replacement immediately without any hassle. This is the kind of service that keeps me coming back!",
              name: "Sarah Chen",
              role: "Regular Customer",
              imageSrc: "http://img.b2bpic.net/free-photo/casual-smile-street-style-background-spring_1139-777.jpg",
              imageAlt: "woman headshot portrait professional photo smiling woman"
            }
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardEight
          title="Membership Tiers"
          description="Choose the perfect plan to unlock exclusive benefits and rewards"
          tag="Membership"
          tagIcon={Zap}
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          carouselMode="buttons"
          plans={[
            {
              id: "basic",
              badge: "Popular",
              badgeIcon: Star,
              price: "Free",
              subtitle: "Perfect to get started",
              buttons: [
                { text: "Get Started", href: "/contact" }
              ],
              features: ["Access to all products", "Standard shipping", "Member-exclusive sales", "10% discount on first purchase", "Email newsletters"]
            },
            {
              id: "premium",
              badge: "Best Value",
              badgeIcon: Crown,
              price: "$4.99/mo",
              subtitle: "Premium benefits and perks",
              buttons: [
                { text: "Subscribe Now", href: "/contact" }
              ],
              features: ["Everything in Free plan", "Free shipping on all orders", "Priority customer support", "15% discount on all purchases", "Early access to new collections"]
            },
            {
              id: "elite",
              badge: "Most Popular",
              badgeIcon: Sparkles,
              price: "$9.99/mo",
              subtitle: "Ultimate urban fashion experience",
              buttons: [
                { text: "Join Elite Club", href: "/contact" }
              ],
              features: ["Everything in Premium plan", "Express shipping (1-2 days)", "24/7 VIP support hotline", "25% discount on all purchases", "Personal styling consultations"]
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="UrbanStyle"
          columns={[
            {
              items: [
                { label: "Home", href: "/" },
                { label: "Shop", href: "/products" },
                { label: "About", href: "/about" },
                { label: "Pricing", href: "/pricing" }
              ]
            },
            {
              items: [
                { label: "Contact Us", href: "/contact" },
                { label: "FAQ", href: "#" },
                { label: "Shipping Info", href: "#" },
                { label: "Returns", href: "#" }
              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Accessibility", href: "#" },
                { label: "Sustainability", href: "#" }
              ]
            },
            {
              items: [
                { label: "Instagram", href: "https://instagram.com" },
                { label: "Twitter", href: "https://twitter.com" },
                { label: "Facebook", href: "https://facebook.com" },
                { label: "TikTok", href: "https://tiktok.com" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}