"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterCard from '@/components/sections/footer/FooterCard';
import { ArrowLeftRight, Award, CheckCircle, CircleDollarSign, Facebook, Heart, Home, Instagram, Package, Palette, Send, Shirt, ShoppingBag, ShoppingCart, Sparkles, Star, Truck, Twitter, Zap } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="large"
      background="aurora"
      cardStyle="gradient-mesh"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Mango"
          navItems={[
            { name: "Shop", id: "products" },
            { name: "About", id: "about" },
            { name: "Collections", id: "collections" },
            { name: "Reviews", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Shop Now", href: "products" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardDashboard
          background={{ variant: "radial-gradient" }}
          tag="Summer Collection"
          tagIcon={Sparkles}
          title="Discover Your Style with Mango"
          description="Explore our curated collection of premium fashion pieces designed for the modern lifestyle. From casual wear to elegant statements, find everything you need to express yourself."
          buttons={[
            { text: "Shop Collection", href: "products" },
            { text: "Learn More", href: "about" }
          ]}
          dashboard={{
            title: "Fashion Trends Dashboard",            logoIcon: ShoppingBag,
            imageSrc: "https://img.b2bpic.net/free-photo/inspired-woman-enjoying-sunlight-with-closed-eyes_197531-19712.jpg",            searchPlaceholder: "Search collections...",            buttons: [
              { text: "Trending", href: "#" },
              { text: "New Arrivals", href: "#" }
            ],
            sidebarItems: [
              { icon: Home, active: true },
              { icon: Heart, active: false },
              { icon: ShoppingCart, active: false }
            ],
            stats: [
              {
                title: "Collections",                values: [45, 52, 68],
                description: "Active collections"
              },
              {
                title: "Items",                values: [1200, 1450, 1680],
                description: "Premium pieces"
              },
              {
                title: "Customers",                values: [8500, 12300, 15200],
                description: "Happy shoppers"
              }
            ],
            chartTitle: "Monthly Sales",            chartData: [
              { value: 65 },
              { value: 45 },
              { value: 80 },
              { value: 55 },
              { value: 90 }
            ],
            listTitle: "Latest Orders",            listItems: [
              {
                icon: Package,
                title: "Summer Dress Collection",                status: "Shipped"
              },
              {
                icon: Truck,
                title: "Casual Wear Set",                status: "In Transit"
              },
              {
                icon: CheckCircle,
                title: "Accessory Bundle",                status: "Delivered"
              }
            ]
          }}
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardFour
          title="Featured Products"
          description="Discover our handpicked selection of premium pieces that define modern fashion."
          tag="New Arrivals"
          tagIcon={Star}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          gridVariant="uniform-all-items-equal"
          products={[
            {
              id: "1",              name: "Mango Premium Summer Dress",              price: "$89.99",              variant: "Light Blue • 4 Colors",              imageSrc: "https://img.b2bpic.net/free-photo/woman-happy-dress-beach_1303-9441.jpg",              imageAlt: "Summer dress in light blue",              isFavorited: false
            },
            {
              id: "2",              name: "Classic Casual Button-Up Shirt",              price: "$64.99",              variant: "White • 6 Colors",              imageSrc: "https://img.b2bpic.net/free-photo/sensual-young-woman-posing-street_291049-15.jpg",              imageAlt: "Casual button-up shirt",              isFavorited: false
            },
            {
              id: "3",              name: "Modern Lightweight Jacket",              price: "$124.99",              variant: "Charcoal • 3 Colors",              imageSrc: "https://img.b2bpic.net/free-photo/stylish-beautiful-woman-red-hat-posing-blue-wall-printed-outfit-summer-style-fashion-trend-top-skirt-skinny-straw-handbag-sunglasses-accessories-smiling-happy-tropical-vacation_285396-4260.jpg",              imageAlt: "Modern lightweight jacket",              isFavorited: false
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TestimonialAboutCard
          tag="Our Story"
          tagIcon={Heart}
          title="Mango: Where Fashion Meets Quality"
          description="Founded in 2015"
          subdescription="Crafting Timeless Style"
          icon={Zap}
          imageSrc="https://img.b2bpic.net/free-photo/medium-shot-colleagues-discussing-project_23-2149721918.jpg"
          imageAlt="Mango fashion team"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardSixteen
          title="Why Choose Mango"
          description="Experience the difference with our commitment to quality and customer satisfaction"
          tag="Premium Benefits"
          tagIcon={Award}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          negativeCard={{
            items: [
              "Generic mass-produced clothing",              "Poor quality materials",              "Inconsistent sizing",              "Limited style options",              "No customer support"
            ]
          }}
          positiveCard={{
            items: [
              "Curated premium collections",              "High-quality fabrics and craftsmanship",              "True-to-size guarantee",              "Diverse and trendy styles",              "Dedicated customer service"
            ]
          }}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          title="What Our Customers Say"
          description="Real feedback from fashion enthusiasts who love Mango"
          tag="Customer Reviews"
          tagIcon={Star}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          showRating={true}
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              handle: "@sarahstyle",              testimonial: "Mango's collection is absolutely stunning! The quality is incredible and the prices are fair. I've become a regular customer.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/caucasion-woman-casual-confident-concept_53876-137678.jpg",              imageAlt: "Sarah Johnson"
            },
            {
              id: "2",              name: "Emma Davis",              handle: "@emmasfashion",              testimonial: "Finally found a clothing brand that gets my style! Every piece fits perfectly and arrives so quickly.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/headshot-charismatic-pleasant-friendly-european-woman-short-chestnut-haircut-smiling-positive-feeling-happy-upbeat-enjoying-lifes-casually-talking-friends-amused-cheerful-standing-white-background_176420-34680.jpg",              imageAlt: "Emma Davis"
            },
            {
              id: "3",              name: "Michael Chen",              handle: "@mikesstyle",              testimonial: "The customer service team at Mango is outstanding. They helped me find the perfect fit and answered all my questions.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-blonde-woman-white_181624-25676.jpg",              imageAlt: "Michael Chen"
            },
            {
              id: "4",              name: "Jessica Martinez",              handle: "@jessicafashion",              testimonial: "I love how Mango combines affordability with quality. This is my go-to store for all my wardrobe needs.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-blonde-woman-white_181624-33452.jpg",              imageAlt: "Jessica Martinez"
            }
          ]}
        />
      </div>

      <div id="collections" data-section="collections">
        <MetricCardThree
          title="Our Collections Showcase"
          description="Explore the diverse range of fashion categories we offer"
          tag="Collection Highlights"
          tagIcon={Palette}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          metrics={[
            {
              id: "1",              icon: Shirt,
              title: "Casual Wear",              value: "180+"
            },
            {
              id: "2",              icon: ShoppingBag,
              title: "Formal Wear",              value: "95+"
            },
            {
              id: "3",              icon: Package,
              title: "Outerwear",              value: "120+"
            },
            {
              id: "4",              icon: Sparkles,
              title: "Accessories",              value: "250+"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Ready to Shop"
          tagIcon={ShoppingBag}
          title="Find Your Perfect Outfit Today"
          description="Browse our full collection and discover pieces that reflect your unique style. Free shipping on orders over $100!"
          buttons={[
            { text: "Start Shopping", href: "products" },
            { text: "View Lookbooks", href: "#" }
          ]}
          background={{ variant: "gradient-bars" }}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Mango"
          copyrightText="© 2025 Mango Clothing Shop. All rights reserved."
          socialLinks={[
            {
              icon: Instagram,
              href: "https://instagram.com/mangofashion",              ariaLabel: "Instagram"
            },
            {
              icon: Facebook,
              href: "https://facebook.com/mangofashion",              ariaLabel: "Facebook"
            },
            {
              icon: Twitter,
              href: "https://twitter.com/mangofashion",              ariaLabel: "Twitter"
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}