"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import SplitAboutMetric from '@/components/sections/about/SplitAboutMetric';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import TeamCardSix from '@/components/sections/team/TeamCardSix';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import ContactCenterForm from '@/components/sections/contact/ContactCenterForm';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Sparkles, Star, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="mediumSizeLargeTitles"
      background="animatedGrid"
      cardStyle="outline-light"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Luxé"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Collections", id: "products" },
            { name: "About", id: "about" },
            { name: "Models", id: "team" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Shop Now", href: "products" }}
          className="backdrop-blur-md bg-background/30 border border-foreground/10"
        />
      </div>
      
      <div id="hero" data-section="hero">
        <HeroBillboardGallery
          title="Discover Timeless Elegance"
          description="Explore our curated collection of premium fashion and beautiful clothing designs. Each piece tells a story of craftsmanship and style."
          tag="New Collection"
          tagIcon={Sparkles}
          mediaItems={[
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766971764353-ff9r0lol.jpg", imageAlt: "Model in elegant dress on runway" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766973505965-qfwdihin.jpg", imageAlt: "Fashion model wearing luxury dress" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766973506470-pgtm7e08.jpg", imageAlt: "Professional fashion photoshoot" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766973606721-tswb1gx1.jpg", imageAlt: "Model with professional styling" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766973607520-6x9nj9qs.jpg", imageAlt: "Beautiful clothing showcase" }
          ]}
          buttons={[
            { text: "Shop Collection", href: "products" },
            { text: "Learn More", href: "about" }
          ]}
        />
      </div>
      
      <div id="products" data-section="products">
        <ProductCardOne
          title="Featured Products"
          description="Browse our handpicked selection of luxury clothing and accessories from this season's most anticipated collection."
          tag="Exclusive"
          tagIcon={Star}
          products={[
            {
              id: "1",
              name: "Premium Evening Dress",
              price: "$450",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766973831987-bmxkdy8r.jpg",
              imageAlt: "Elegant evening gown"
            },
            {
              id: "2",
              name: "Luxury Wool Jacket",
              price: "$380",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766973832408-1hixdjwi.jpg",
              imageAlt: "Designer wool jacket"
            },
            {
              id: "3",
              name: "Tailored Trousers",
              price: "$220",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766973832797-zmkzilv9.jpg",
              imageAlt: "Premium tailored pants"
            }
          ]}
          gridVariant="uniform-alternating-sizes"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="about" data-section="about">
        <SplitAboutMetric
          title="Crafted for Beauty"
          description={[
            "Since 2015, Luxé has been dedicated to bringing sophisticated, timeless fashion to discerning customers worldwide. Each piece in our collection is carefully selected and designed to embody elegance, quality, and authentic style. We believe that beautiful clothing should make you feel confident and inspired."
          ]}
          metrics={[
            { label: "Satisfied Customers", value: "50K+" },
            { label: "Collections Launched", value: "12" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="features" data-section="features">
        <FeatureCardTwentyOne
          title="Why Choose Luxé"
          description="Discover the features that make our fashion brand stand out in the industry."
          tag="Premium Quality"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766970907032-1blzmqcq.jpg"
          imageAlt="Fashion design and tailoring process"
          accordionItems={[
            {
              id: "1",
              title: "Custom Design Options",
              content: "Work with our designers to create bespoke pieces tailored to your exact specifications and preferences. From fabric selection to final fitting."
            },
            {
              id: "2",
              title: "Sustainable Materials",
              content: "We are committed to using ethically sourced, eco-friendly fabrics and sustainable production practices in all our collections."
            },
            {
              id: "3",
              title: "Premium Craftsmanship",
              content: "Each garment is handcrafted by skilled artisans with decades of experience in luxury fashion production."
            }
          ]}
          useInvertedBackground="noInvert"
          mediaPosition="left"
        />
      </div>
      
      <div id="metrics" data-section="metrics">
        <MetricCardEleven
          title="Our Impact"
          description="See the numbers behind our commitment to excellence and customer satisfaction."
          tag="Results"
          metrics={[
            {
              id: "1",
              value: "98%",
              title: "Customer Satisfaction",
              description: "Rated excellent by our valued customers",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766970906171-hjfra2pz.jpg",
              imageAlt: "Happy customers shopping in boutique"
            },
            {
              id: "2",
              value: "24H",
              title: "Delivery Time",
              description: "Express shipping available for all orders",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766971767174-s6q4uoux.jpg",
              imageAlt: "Fashion collection display"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="team" data-section="team">
        <TeamCardSix
          title="Featured Models"
          description="Meet the beautiful faces representing our collections this season."
          tag="Our Models"
          tagIcon={Users}
          members={[
            {
              id: "1",
              name: "Alexandra Sterling",
              role: "Lead Model",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766810997055-ljmx5kmk.jpg",
              imageAlt: "Alexandra Sterling professional portrait"
            },
            {
              id: "2",
              name: "Sofia Martinez",
              role: "Featured Model",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766154635301-vse33sxl.jpg",
              imageAlt: "Sofia Martinez fashion model"
            },
            {
              id: "3",
              name: "Emma Rosewood",
              role: "Exclusive Model",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766971772161-nr9paky2.jpg",
              imageAlt: "Emma Rosewood portrait"
            },
            {
              id: "4",
              name: "Isabella Chen",
              role: "Rising Star",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766971765388-hloexpv0.jpg",
              imageAlt: "Isabella Chen model photo"
            }
          ]}
          gridVariant="uniform-alternating-heights"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFive
          title="What Our Customers Say"
          description="Hear from fashion enthusiasts and style icons who love Luxé."
          tag="Testimonials"
          testimonials={[
            {
              id: "1",
              name: "Jasmine Park, Fashion Influencer",
              date: "Date: 15 January 2025",
              title: "Simply Exceptional Quality",
              quote: "The attention to detail in every piece is remarkable. I've invested in several items from Luxé and each one has become a wardrobe staple. The craftsmanship is unmatched.",
              tag: "Premium Customer",
              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140152452-p4x3ah4p.jpg",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140152452-p4x3ah4p.jpg"
            },
            {
              id: "2",
              name: "Victoria Holmes, Style Blogger",
              date: "Date: 22 December 2024",
              title: "Elevated My Entire Wardrobe",
              quote: "Shopping with Luxé has transformed how I approach fashion. The pieces are timeless, versatile, and make me feel confident in everything I wear.",
              tag: "Loyal Customer",
              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183843211-zal0n8gj.jpg",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183843211-zal0n8gj.jpg"
            },
            {
              id: "3",
              name: "Amelia Richardson, Executive",
              date: "Date: 18 November 2024",
              title: "Investment Pieces Worth Every Dollar",
              quote: "These are not just clothes, they are investments in quality and style. Every garment feels luxurious and lasts beautifully through years of wear.",
              tag: "Executive",
              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183844045-gbini56u.jpg",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183844045-gbini56u.jpg"
            },
            {
              id: "4",
              name: "Rebecca Turner, Fashion Designer",
              date: "Date: 10 October 2024",
              title: "Inspiring Craftsmanship",
              quote: "As someone in the industry, I deeply appreciate the design philosophy and execution at Luxé. The collections are beautifully curated and thoughtfully designed.",
              tag: "Industry Professional",
              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766971771014-s49lscnq.jpg",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766971771014-s49lscnq.jpg"
            },
            {
              id: "5",
              name: "Sophie Laurent, Stylist",
              date: "Date: 05 September 2024",
              title: "My Go-To for Client Styling",
              quote: "Luxé has become my trusted source for styling clients. The quality, fit, and aesthetic are consistently excellent across all collections.",
              tag: "Stylist",
              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766810996198-rgoz7x9l.jpg",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766810996198-rgoz7x9l.jpg"
            },
            {
              id: "6",
              name: "Grace Mitchell, Magazine Editor",
              date: "Date: 28 August 2024",
              title: "Setting Fashion Standards",
              quote: "Luxé represents everything we love about modern luxury fashion. Their commitment to quality and design excellence is evident in every collection.",
              tag: "Editor",
              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766810997055-ljmx5kmk.jpg",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766810997055-ljmx5kmk.jpg"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="contact" data-section="contact">
        <ContactCenterForm
          title="Get in Touch"
          description="Have questions about our collections or interested in custom designs? Reach out to our team and let's create something beautiful together."
          inputs={[
            { name: "name", type: "text", placeholder: "Your Name", required: true },
            { name: "email", type: "email", placeholder: "Your Email", required: true }
          ]}
          textarea={{ name: "message", placeholder: "Tell us about your inquiry...", rows: 5, required: true }}
          useInvertedBackground="noInvert"
          buttonText="Send Message"
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="Luxé"
          columns={[
            {
              title: "Shop",
              items: [
                { label: "New Arrivals", href: "#products" },
                { label: "Collections", href: "#products" },
                { label: "Sale", href: "#products" },
                { label: "Accessories", href: "#products" }
              ]
            },
            {
              title: "Company",
              items: [
                { label: "About Us", href: "#about" },
                { label: "Our Story", href: "#about" },
                { label: "Models", href: "#team" },
                { label: "Sustainability", href: "#" }
              ]
            },
            {
              title: "Customer Care",
              items: [
                { label: "Contact Us", href: "#contact" },
                { label: "Shipping Info", href: "#" },
                { label: "Returns", href: "#" },
                { label: "FAQ", href: "#" }
              ]
            },
            {
              title: "Connect",
              items: [
                { label: "Instagram", href: "#" },
                { label: "Facebook", href: "#" },
                { label: "Pinterest", href: "#" },
                { label: "Newsletter", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 Luxé Fashion. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}