"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import FaqBase from '@/components/sections/faq/FaqBase';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { CheckCircle, Leaf, Sparkles, Star, TrendingUp, Users, Zap } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="compact"
      sizing="mediumLarge"
      background="floatingGradient"
      cardStyle="inset"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered 
          navItems={[
            { name: "About", id: "about" },
            { name: "Products", id: "products" },
            { name: "Benefits", id: "features" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Shop Now",            href: "products"
          }}
          brandName="Luxe Botanics"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCentered 
          title="Luxury Skincare for the Discerning Beauty"
          description="Experience transformative botanical formulas crafted with the finest natural ingredients. Elevate your skincare ritual with luxury that whispers sophistication."
          background={{ variant: "downward-rays-static" }}
          avatars={[
            { 
              src: "https://img.b2bpic.net/free-photo/beautiful-middle-aged-businesswoman-standing-looking-away_74855-8812.jpg", 
              alt: "Customer testimonial 1" 
            },
            { 
              src: "https://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg", 
              alt: "Customer testimonial 2" 
            },
            { 
              src: "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", 
              alt: "Customer testimonial 3" 
            }
          ]}
          avatarText="Trusted by 10,000+ beauty enthusiasts worldwide"
          buttons={[
            { text: "Discover Collection", href: "products" },
            { text: "Learn Our Story", href: "about" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="about" data-section="about">
        <TextSplitAbout 
          title="Our Essence"
          description={[
            "At Luxe Botanics, we believe skincare is a sacred ritual. Founded in 2015, our mission has been to merge ancient botanical wisdom with modern dermatological science.",            "Every formulation is meticulously crafted in our Swiss laboratory, using ethically sourced ingredients from around the globe. We honor nature's power while delivering visible, transformative results.",            "Our commitment to purity, sustainability, and efficacy is unwavering. We never compromise on quality—because your skin deserves nothing less than extraordinary."
          ]}
          buttons={[
            { text: "View Certifications", href: "#" }
          ]}
          showBorder={true}
          useInvertedBackground={false}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwentyFive 
          title="What Sets Us Apart"
          description="Our formulations combine clinical efficacy with the gentle touch of nature. Each benefit is scientifically proven and beautifully experienced."
          tag="Premium Ingredients"
          tagIcon={Sparkles}
          features={[
            {
              title: "Botanical Innovation",              description: "Hand-selected extracts from rare botanical sources, combined with cutting-edge peptide technology for maximum efficacy.",              icon: Leaf,
              mediaItems: [
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/make-up-brushes-pile-wild-flowers-wooden-background_482257-9797.jpg",                  imageAlt: "Natural botanical ingredients"
                },
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/close-up-elegant-beauty-selfcare-treatment_23-2149238252.jpg",                  imageAlt: "Luxury formulation process"
                }
              ]
            },
            {
              title: "Clinically Tested Results",              description: "Every product undergoes rigorous dermatological testing with visible results in as little as 7 days of consistent use.",              icon: CheckCircle,
              mediaItems: [
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/close-up-elegant-beauty-selfcare-treatment_23-2149238252.jpg",                  imageAlt: "Clinical testing results"
                },
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/make-up-brushes-pile-wild-flowers-wooden-background_482257-9797.jpg",                  imageAlt: "Quality assurance"
                }
              ]
            },
            {
              title: "Eco-Conscious Luxury",              description: "Sustainable packaging, cruelty-free formulations, and carbon-neutral production. Luxury that respects our planet.",              icon: Leaf,
              mediaItems: [
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/make-up-brushes-pile-wild-flowers-wooden-background_482257-9797.jpg",                  imageAlt: "Sustainable packaging"
                },
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/close-up-elegant-beauty-selfcare-treatment_23-2149238252.jpg",                  imageAlt: "Eco-friendly production"
                }
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardFour 
          title="Our Signature Collection"
          description="Curated products for every step of your skincare journey. From cleansing to nourishment, each formula is a masterpiece of botanical luxury."
          tag="Best Sellers"
          tagIcon={Star}
          products={[
            {
              id: "1",              name: "Radiance Renewal Serum",              price: "$185",              variant: "Golden Elixir - 30ml",              imageSrc: "https://img.b2bpic.net/free-vector/night-cosmetic-serum-face-skin-care_88138-248.jpg",              imageAlt: "Radiance Renewal Serum bottle"
            },
            {
              id: "2",              name: "Silk Velvet Moisturizer",              price: "$165",              variant: "Rich Cream - 50ml",              imageSrc: "https://img.b2bpic.net/free-photo/jar-cream_23-2147803534.jpg",              imageAlt: "Silk Velvet Moisturizer jar"
            },
            {
              id: "3",              name: "Luminous Renewal Mask",              price: "$95",              variant: "Weekly Treatment - 75ml",              imageSrc: "https://img.b2bpic.net/free-photo/cosmetologist-applying-mask-face-client-beauty-salon_1303-16765.jpg",              imageAlt: "Luminous Renewal Mask"
            },
            {
              id: "4",              name: "Pure Essence Cleanser",              price: "$68",              variant: "Gentle Formula - 200ml",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-floating-water_23-2150963076.jpg",              imageAlt: "Pure Essence Cleanser bottle"
            }
          ]}
          gridVariant="two-columns-alternating-heights"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTen 
          title="Loved by Beauty Connoisseurs"
          description="Real transformations from real people who have discovered the power of luxury botanical skincare."
          testimonials={[
            {
              id: "1",              title: "My Skin Has Never Felt More Radiant",              quote: "After just three weeks of using the Radiance Renewal Serum, my skin texture transformed completely. The glow is undeniable, and the ingredients feel so luxurious on my skin.",              name: "Eleanor Mitchell",              role: "Beauty Editor, Vogue",              imageSrc: "https://img.b2bpic.net/free-photo/beautiful-middle-aged-businesswoman-standing-looking-away_74855-8812.jpg",              imageAlt: "Eleanor Mitchell"
            },
            {
              id: "2",              title: "Worth Every Penny",              quote: "I've tried countless expensive serums, but this is the first one that actually delivers on its promises. My dermatologist was impressed with my skin's improvements.",              name: "Victoria Chen",              role: "Skincare Specialist",              imageSrc: "https://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg",              imageAlt: "Victoria Chen"
            },
            {
              id: "3",              title: "A Ritual Worth Treasuring",              quote: "Using these products feels like a spa experience every morning and night. The packaging is beautiful, the scent is divine, and my skin has never looked better.",              name: "Sophie Laurent",              role: "Fashion & Lifestyle Blogger",              imageSrc: "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",              imageAlt: "Sophie Laurent"
            },
            {
              id: "4",              title: "Transformed My Sensitive Skin",              quote: "As someone with extremely sensitive skin, I was skeptical. But these formulations are incredibly gentle yet potent. No irritation, only visible results.",              name: "Maya Patel",              role: "Wellness Coach",              imageSrc: "https://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg",              imageAlt: "Maya Patel"
            },
            {
              id: "5",              title: "The Best Investment in My Skin",              quote: "Luxury skincare doesn't have to be complicated. This collection simplified my routine while elevating my results. I recommend it to everyone.",              name: "Isabelle Moreau",              role: "Aesthetic Consultant",              imageSrc: "https://img.b2bpic.net/free-photo/closeup-relaxed-serious-woman-leaning-wall_1262-1750.jpg",              imageAlt: "Isabelle Moreau"
            },
            {
              id: "6",              title: "Finally, Results That Match the Price",              quote: "I've spent small fortunes on skincare. This is the first line where I can honestly say the quality, efficacy, and luxury justify the investment entirely.",              name: "Natasha Volkov",              role: "Executive, Beauty Industry",              imageSrc: "https://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg",              imageAlt: "Natasha Volkov"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne 
          title="By The Numbers"
          description="The impact of pure luxury skincare, measured and celebrated by our global community of discerning beauty lovers."
          metrics={[
            {
              id: "1",              value: "98",              title: "%",              description: "Customer satisfaction rate with visible results",              icon: TrendingUp
            },
            {
              id: "2",              value: "10",              title: "K+",              description: "Happy customers worldwide",              icon: Users
            },
            {
              id: "3",              value: "8",              title: "Days",              description: "Average time to see visible improvements",              icon: Zap
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase 
          title="Frequently Asked Questions"
          description="Everything you need to know about our luxury skincare philosophy, formulations, and results."
          faqs={[
            {
              id: "1",              title: "What makes your skincare truly luxury?",              content: "Our luxury is defined by three pillars: the finest botanical ingredients sourced ethically from around the world, rigorous dermatological testing ensuring clinical efficacy, and thoughtful formulation that respects both skin health and environmental sustainability. Each product is crafted in small batches in our Swiss laboratory to guarantee uncompromising quality."
            },
            {
              id: "2",              title: "Are your products suitable for sensitive skin?",              content: "Absolutely. Our formulations are hypoallergenic and free from common irritants like sulfates, parabens, and synthetic fragrances. We recommend a patch test before full application, but the vast majority of customers with sensitive skin experience excellent tolerance and visible improvements within 2-3 weeks."
            },
            {
              id: "3",              title: "How soon will I see results?",              content: "Most customers notice improvements in skin texture and radiance within 7-10 days of consistent use. Visible changes in fine lines, pores, and overall luminosity typically appear within 4-6 weeks. For optimal results, we recommend committing to a full 8-week regimen as cell turnover cycles require time."
            },
            {
              id: "4",              title: "Can I use multiple products together?",              content: "Yes, we've designed our collection to work synergistically. Our recommended ritual is: cleanse, apply serum, follow with moisturizer, and use the mask weekly. All products complement each other beautifully and are formulated to enhance absorption and efficacy when layered correctly."
            },
            {
              id: "5",              title: "Do you offer consultations?",              content: "We offer personalized skincare consultations with our certified beauty consultants. Email our concierge team or book a virtual consultation to receive tailored recommendations based on your skin type, concerns, and goals. First-time customers receive a complimentary consultation."
            },
            {
              id: "6",              title: "What is your return policy?",              content: "We stand behind our products with a 60-day satisfaction guarantee. If you don't see visible improvements or are unsatisfied for any reason, we'll process a full refund. We only ask that you give the products a genuine 4-week trial as skin transformation requires consistency."
            }
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal 
          columns={[
            {
              title: "Shop",              items: [
                { label: "All Products", href: "products" },
                { label: "Serums", href: "#" },
                { label: "Moisturizers", href: "#" },
                { label: "Masks & Treatments", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "about" },
                { label: "Our Story", href: "#" },
                { label: "Sustainability", href: "#" },
                { label: "Careers", href: "#" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Contact Us", href: "#" },
                { label: "FAQ", href: "faq" },
                { label: "Shipping & Returns", href: "#" },
                { label: "Privacy Policy", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 Luxe Botanics. All rights reserved. Crafted with purpose, delivered with luxury."
        />
      </div>
    </ThemeProvider>
  );
}