"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactText from '@/components/sections/contact/ContactText';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import { Award, Sparkles, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-stagger"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="medium"
        sizing="largeSizeMediumTitles"
        background="circleGradient"
        cardStyle="solid"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="solid"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        { name: "Home", id: "hero" },
        { name: "Services", id: "services" },
        { name: "Treatments", id: "treatments" },
        { name: "Pricing", id: "pricing" },
        { name: "Contact", id: "contact" }
      ]}
      brandName="Serene Sanctuary"
      button={{
        text: "WhatsApp Us",        href: "https://wa.me/919999999999"}}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitDoubleCarousel
      background={{ variant: "cell-wave" }}
      title="Escape. Restore. Elevate Your Wellness."
      description="Experience India's most luxurious spa treatments designed to melt stress and rejuvenate your mind, body, and spirit. Book your sanctuary moment in seconds."
      leftCarouselItems={[{imageSrc: "http://img.b2bpic.net/free-photo/panoramic-lakeside-sauna-geometric-heaters-scandinavian-style_169016-68879.jpg"}, {imageSrc: "http://img.b2bpic.net/free-photo/modern-oil-aroma-diffuser-close-up-blurred-background_169016-20822.jpg"}, {imageSrc: "http://img.b2bpic.net/free-photo/woman-receiving-relaxing-facial-massage_23-2148176880.jpg"}, {imageSrc: "http://img.b2bpic.net/free-photo/white-bathtub_1203-2707.jpg"}, {imageSrc: "http://img.b2bpic.net/free-photo/spa-still-life-with-face-body-skin-care-products-tea-background_169016-10775.jpg"}]}
      rightCarouselItems={[{imageSrc: "http://img.b2bpic.net/free-photo/coconut-underwater-still-life_23-2150434850.jpg"}, {imageSrc: "http://img.b2bpic.net/free-photo/cozy-composition-with-cup-tea-book-candles-by-window_169016-49157.jpg"}, {imageSrc: "http://img.b2bpic.net/free-photo/young-woman-relaxing-spa-hotel_23-2149037090.jpg"}, {imageSrc: "http://img.b2bpic.net/free-photo/relaxing-sauna_1098-15097.jpg"}, {imageSrc: "http://img.b2bpic.net/free-photo/natural-elements-spa-with-candles_23-2148199490.jpg"}]}
      buttons={[{ text: "Reserve Your Treatment Now", href: "https://wa.me/919999999999" }]}
    />
  </div>

  <div id="about" data-section="about">
      <AboutMetric
      useInvertedBackground={false}
      title="A Legacy of Rejuvenation"
      metrics={[
        { icon: Award, label: "Years Experience", value: "15+" },
        { icon: Users, label: "Happy Clients", value: "20k+" },
        { icon: Sparkles, label: "Treatments", value: "50+" }
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardThree
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      features={[
        { title: "Ayurvedic Healing", description: "Ancient wellness practices for modern stress.", imageSrc: "http://img.b2bpic.net/free-photo/woman-relaxing-spa_329181-13179.jpg" },
        { title: "Botanical Facials", description: "Natural radiance and skin health regeneration.", imageSrc: "http://img.b2bpic.net/free-photo/phytotherapy-products-assortment_23-2149339772.jpg" },
        { title: "Holistic Therapy", description: "Mind, body, and spirit balancing sessions.", imageSrc: "http://img.b2bpic.net/free-photo/still-life-yoga-equipment_23-2151725289.jpg" }
      ]}
      title="Our Signature Wellness Services"
      description="Tailored experiences designed for total physical and mental harmony."
    />
  </div>

  <div id="treatments" data-section="treatments">
      <ProductCardOne
      textboxLayout="split"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      animationType="slide-up"
      products={[
        { id: "1", name: "Deep Tissue Oil", price: "₹2,500", imageSrc: "http://img.b2bpic.net/free-photo/unrecognizable-therapist-pouring-oil-her-hands-before-massage-treatment-wellness-center_637285-2057.jpg" },
        { id: "2", name: "Aroma Diffuser", price: "₹1,800", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-practicing-selfcare_23-2150229555.jpg" },
        { id: "3", name: "Silk Bath Robe", price: "₹4,200", imageSrc: "http://img.b2bpic.net/free-photo/woman-purple-bathrobe-bedroom_1303-11278.jpg" }
      ]}
      title="Premium Ritual Packages"
      description="Select the ideal package for your personal rejuvenation needs."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardOne
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      plans={[
        { id: "1", badge: "Essential", price: "₹3,500", subtitle: "Introductory wellness package", features: ["Full body massage", "Botanical scrub", "Organic tea service"] },
        { id: "2", badge: "Premium", price: "₹6,000", subtitle: "Complete renewal ritual", features: ["Signature massage", "Facial treatment", "Ayurvedic shirodhara", "Sound healing"] },
        { id: "3", badge: "Elite", price: "₹10,500", subtitle: "Luxury full day experience", features: ["VIP wellness suite", "All treatments included", "Priority concierge", "Lunch service"] }
      ]}
      title="Investment in Yourself"
      description="Transparent pricing for exceptional wellness journeys."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwo
      textboxLayout="split"
      useInvertedBackground={false}
      animationType="slide-up"
      testimonials={[
        { id: "1", name: "Aarav Sharma", role: "Architect", testimonial: "The best spa experience in Delhi.", imageSrc: "http://img.b2bpic.net/free-photo/two-young-beautiful-smiling-girls-white-bathrobes-towels-head_158538-18079.jpg" },
        { id: "2", name: "Priya Kapoor", role: "Director", testimonial: "Perfect rejuvenation.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67053.jpg" },
        { id: "3", name: "Vikram Sethi", role: "Business Owner", testimonial: "Exceptional care and attention.", imageSrc: "http://img.b2bpic.net/free-photo/affectionate-couple-about-kiss-while-standing-embraced-swimming-pool-wellness-center-copy-space_637285-7544.jpg" }
      ]}
      title="Words of Peace"
      description="Hear what our guests say about their sanctuary experience."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={true}
      faqs={[
        { id: "1", title: "How do I book?", content: "Book directly through our WhatsApp link." },
        { id: "2", title: "Do you offer couples?", content: "Yes, we have specialized suites." },
        { id: "3", title: "What is the cancellation policy?", content: "Cancel 24 hours prior." }
      ]}
      sideTitle="Common Inquiries"
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={false}
      background={{ variant: "gradient-bars" }}
      text="Ready to rejuvenate? Reserve your moment of peace now via WhatsApp for instant confirmation."
      buttons={[{ text: "Contact us on WhatsApp", href: "https://wa.me/919999999999" }]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      columns={[
        { items: [{ label: "About", href: "#about" }, { label: "Services", href: "#services" }] },
        { items: [{ label: "Pricing", href: "#pricing" }, { label: "FAQs", href: "#faq" }] },
        { items: [{ label: "Privacy Policy", href: "#" }, { label: "WhatsApp Support", href: "https://wa.me/919999999999" }] }
      ]}
      logoText="Serene Sanctuary"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
