"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Zap, Star, Sparkles } from "lucide-react";

export default function HomePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="compact"
      sizing="mediumLargeSizeMediumTitles"
      background="none"
      cardStyle="gradient-radial"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="EchoCart"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Shop", id: "/shop" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero" className="mx-auto px-4 md:px-6">
        <HeroBillboardRotatedCarousel
          title="Discover Your Next Favorite Product"
          description="Shop premium products with exclusive deals. Free shipping on orders over $50. Limited time offer - 5 minute countdown to save 20%."
          tag="Flash Sale"
          tagIcon={Zap}
          background={{ variant: "plain" }}
          buttons={[
            { text: "Shop Now", href: "/shop" },
            { text: "View Deals" }
          ]}
          carouselItems={[
            { id: "1", imageSrc: "https://img.b2bpic.net/free-photo/headset-table_417767-238.jpg", imageAlt: "Premium Headphones" },
            { id: "2", imageSrc: "https://img.b2bpic.net/free-photo/headset-aa-white-surface_181624-21804.jpg", imageAlt: "Smart Watch" },
            { id: "3", imageSrc: "https://img.b2bpic.net/free-photo/blonde-girl-listening-music-headphones-close-up_23-2148381820.jpg", imageAlt: "Wireless Earbuds" },
            { id: "4", imageSrc: "https://img.b2bpic.net/free-photo/headphones-laptop-home_23-2149551432.jpg", imageAlt: "Phone Accessories" },
            { id: "5", imageSrc: "https://img.b2bpic.net/free-photo/wireless-earbuds-with-neon-cyberpunk-style-lighting_23-2151074308.jpg", imageAlt: "Tech Gadgets" },
            { id: "6", imageSrc: "https://img.b2bpic.net/free-photo/young-businesswoman-reaching-her-headphones-multitasking_482257-117033.jpg", imageAlt: "Camera Equipment" }
          ]}
          autoPlay={true}
          autoPlayInterval={4000}
        />
      </div>

      <div id="products" data-section="products" className="mx-auto px-4 md:px-6">
        <ProductCardOne
          title="Featured Products"
          description="Handpicked selection of our best-selling items. New arrivals added weekly."
          tag="New Arrivals"
          tagIcon={Star}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          gridVariant="uniform-all-items-equal"
          products={[
            { id: "1", name: "Premium Wireless Headphones", price: "$149.99", imageSrc: "https://img.b2bpic.net/free-photo/journalism-headphones-interview_23-2148524067.jpg", imageAlt: "Premium Wireless Headphones" },
            { id: "2", name: "Smart Watch Pro", price: "$299.99", imageSrc: "https://img.b2bpic.net/free-photo/black-cordless-headphones-gray-textile_417767-474.jpg", imageAlt: "Smart Watch Pro" },
            { id: "3", name: "Wireless Charging Case", price: "$79.99", imageSrc: "https://img.b2bpic.net/free-photo/modern-apartment-with-luxury-vibe-featuring-spacious-living-room_482257-120668.jpg", imageAlt: "Wireless Charging Case" },
            { id: "4", name: "4K Action Camera", price: "$349.99", imageSrc: "https://img.b2bpic.net/free-photo/disabled-person-with-prosthetic-leg_23-2149057459.jpg", imageAlt: "4K Action Camera" }
          ]}
        />
      </div>

      <div id="features" data-section="features" className="mx-auto px-4 md:px-6">
        <FeatureCardSixteen
          title="Why Choose EchoCart"
          description="We stand out from competitors with unmatched quality and service."
          negativeCard={{
            items: ["Long shipping times", "Poor customer service", "Limited product selection", "Hidden fees"]
          }}
          positiveCard={{
            items: ["Fast 2-day shipping", "24/7 dedicated support", "10,000+ premium products", "Transparent pricing"]
          }}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          tag="Quality Difference"
        />
      </div>

      <div id="pricing" data-section="pricing" className="mx-auto px-4 md:px-6">
        <PricingCardThree
          title="Membership Plans"
          description="Choose the perfect plan for your shopping needs."
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          plans={[
            {
              id: "1",
              price: "Free",
              name: "Standard",
              buttons: [
                { text: "Get Started", href: "/signup" },
                { text: "Learn More" }
              ],
              features: ["Standard shipping", "Basic customer support", "Access to sales", "Order tracking"]
            },
            {
              id: "2",
              badge: "Most Popular",
              badgeIcon: Sparkles,
              price: "$9.99/mo",
              name: "Premium",
              buttons: [
                { text: "Start Free Trial", href: "/trial" },
                { text: "Contact Sales", href: "/contact" }
              ],
              features: ["Free 2-day shipping", "Priority support", "Early access to sales", "Exclusive discounts", "Rewards points"]
            },
            {
              id: "3",
              price: "$19.99/mo",
              name: "Elite",
              buttons: [
                { text: "Upgrade Now", href: "/upgrade" },
                { text: "Chat with Us", href: "/contact" }
              ],
              features: ["Free overnight shipping", "VIP 24/7 support", "Exclusive member events", "20% discount on all items", "Concierge service", "Birthday gift"]
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics" className="mx-auto px-4 md:px-6">
        <MetricCardTwo
          title="Our Impact"
          description="Trusted by thousands of satisfied customers worldwide."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          gridVariant="uniform-all-items-equal"
          metrics={[
            { id: "1", value: "500K+", description: "Happy Customers" },
            { id: "2", value: "4.8★", description: "Average Rating" },
            { id: "3", value: "10K+", description: "Products Available" },
            { id: "4", value: "98%", description: "On-Time Delivery" }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials" className="mx-auto px-4 md:px-6">
        <TestimonialCardOne
          title="What Our Customers Say"
          description="Real reviews from verified buyers who love our products and service."
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          gridVariant="uniform-all-items-equal"
          testimonials={[
            { id: "1", name: "Sarah Johnson", role: "Verified Buyer", company: "Tech Enthusiast", rating: 5, imageSrc: "https://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg", imageAlt: "Sarah Johnson" },
            { id: "2", name: "Michael Chen", role: "Regular Customer", company: "Digital Professional", rating: 5, imageSrc: "https://img.b2bpic.net/free-photo/content-beautiful-businesswoman-standing-window_1262-1778.jpg", imageAlt: "Michael Chen" },
            { id: "3", name: "Emily Rodriguez", role: "Premium Member", company: "Content Creator", rating: 5, imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-stylish-pretty-young-woman-look-professional-cross-hands-chest-smiling-confident-camera-wear-glasses-standing-near-reception-office-hall-discuss-business_197531-22165.jpg", imageAlt: "Emily Rodriguez" },
            { id: "4", name: "David Kim", role: "Loyal Customer", company: "Business Owner", rating: 5, imageSrc: "https://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg", imageAlt: "David Kim" }
          ]}
        />
      </div>

      <FooterBaseReveal
        copyrightText="© 2025 EchoCart. All rights reserved."
        columns={[
          {
            title: "Shop",
            items: [
              { label: "All Products", href: "/shop" },
              { label: "New Arrivals", href: "/shop?filter=new" },
              { label: "Best Sellers", href: "/shop?filter=bestsellers" },
              { label: "On Sale", href: "/shop?filter=sale" }
            ]
          },
          {
            title: "Company",
            items: [
              { label: "About Us", href: "/about" },
              { label: "Our Story", href: "/about" },
              { label: "Careers", href: "/careers" },
              { label: "Press", href: "/press" }
            ]
          },
          {
            title: "Support",
            items: [
              { label: "Contact Us", href: "/contact" },
              { label: "Help Center", href: "/help" },
              { label: "Shipping Info", href: "/shipping" },
              { label: "Returns", href: "/returns" }
            ]
          }
        ]}
      />
    </ThemeProvider>
  );
}