"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import { Feather, Gift, Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="directional-hover"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="medium"
        sizing="largeSmall"
        background="noise"
        cardStyle="outline"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="solid"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        {
          name: "Home",          id: "#hero"},
        {
          name: "About",          id: "#about"},
        {
          name: "Collections",          id: "/products"},
        {
          name: "Features",          id: "#features"},
        {
          name: "Testimonials",          id: "#testimonials"},
        {
          name: "FAQ",          id: "#faq"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      logoSrc="http://img.b2bpic.net/free-vector/luxury-floral-perfume-logo-template-concept_23-2148467151.jpg"
      logoAlt="AromaLux Logo"
      brandName="AromaLux"
      button={{
        text: "Shop Now",        href: "/products"}}
      animateOnLoad={true}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardCarousel
      background={{
        variant: "radial-gradient"}}
      title="Discover Your Signature Scent"
      description="Experience the art of perfumery with AromaLux. Handcrafted fragrances designed to captivate and inspire."
      buttons={[
        {
          text: "Explore Collection",          href: "/products"},
        {
          text: "Our Story",          href: "#about"},
      ]}
      buttonAnimation="slide-up"
      mediaItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/monochrome-beauty-product-skincare_23-2151307320.jpg?_wi=1",          imageAlt: "Monochrome beauty product"
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/swirls-foam-blue-liquid_23-2148346909.jpg?_wi=1",          imageAlt: "Swirls foam blue liquid"
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/still-life-cosmetic-products_23-2149163167.jpg?_wi=1",          imageAlt: "Still life cosmetic products"
        }
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <TextSplitAbout
      useInvertedBackground={false}
      title="The Essence of Elegance"
      description={[
        "At AromaLux, we believe a fragrance is more than just a scent—it's an extension of your personality. Our master perfumers meticulously select the rarest ingredients to create extraordinary olfactory journeys.",        "Each bottle tells a story, a symphony of notes designed to evoke emotion and leave a lasting impression. From vibrant florals to deep, woody undertones, discover a world of luxurious aromas."]}
      buttons={[
        {
          text: "Learn More",          href: "#about"},
      ]}
      buttonAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentySeven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          id: "f1",          title: "Masterful Blending",          descriptions: [
            "Our perfumers are artists, combining rare essences to create harmonious and unique compositions."],
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-hand-holding-bottle_23-2148897591.jpg",          imageAlt: "Perfumer crafting scent"},
        {
          id: "f2",          title: "Sustainable Sourcing",          descriptions: [
            "We ethically source the finest natural ingredients, ensuring both quality and environmental responsibility."],
          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-still-life-with-herbal-medicine_23-2149292012.jpg",          imageAlt: "Sustainable ingredients"},
        {
          id: "f3",          title: "Exceptional Longevity",          descriptions: [
            "Formulated for enduring wear, our fragrances leave a memorable trail that lasts throughout the day."],
          imageSrc: "http://img.b2bpic.net/free-photo/close-view-sexual-bride-with-makeup-hairstyle-wearing-white-silk-gown-veil-spraying-perfume-her-neck-enjoying-smell-against-gray-background-bridal-morning_8353-12277.jpg",          imageAlt: "Perfume mist on skin"},
      ]}
      title="Crafted for Perfection"
      description="Our commitment to excellence shines through every bottle, from ingredient sourcing to final presentation."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardFour
      animationType="slide-up"
      gridVariant="three-columns-all-equal-width"
      textboxLayout="default"
      useInvertedBackground={false}
      products={[
        {
          id: "p1",          name: "Aura Bloom",          price: "$120",          variant: "Eau de Parfum",          imageSrc: "http://img.b2bpic.net/free-photo/monochrome-beauty-product-skincare_23-2151307320.jpg?_wi=2",          imageAlt: "Aura Bloom Perfume"},
        {
          id: "p2",          name: "Serenity Mist",          price: "$110",          variant: "Eau de Toilette",          imageSrc: "http://img.b2bpic.net/free-photo/swirls-foam-blue-liquid_23-2148346909.jpg?_wi=2",          imageAlt: "Serenity Mist Perfume"},
        {
          id: "p3",          name: "Ignite Elixir",          price: "$135",          variant: "Extrait de Parfum",          imageSrc: "http://img.b2bpic.net/free-photo/still-life-cosmetic-products_23-2149163167.jpg?_wi=2",          imageAlt: "Ignite Elixir Perfume"},
        {
          id: "p4",          name: "Blooming Charm",          price: "$105",          variant: "Eau de Parfum",          imageSrc: "http://img.b2bpic.net/free-photo/serum-bottle-yellow-flower-arrangement_23-2149353084.jpg",          imageAlt: "Blooming Charm Perfume"},
        {
          id: "p5",          name: "Noir Allure",          price: "$140",          variant: "Extrait de Parfum",          imageSrc: "http://img.b2bpic.net/free-photo/luxury-black-perfume-bottle-with-gold-cap-dark-textured-background_84443-84117.jpg",          imageAlt: "Noir Allure Perfume"},
        {
          id: "p6",          name: "Solstice Glow",          price: "$125",          variant: "Eau de Parfum",          imageSrc: "http://img.b2bpic.net/free-photo/golden-smoke-black-screen_23-2148227231.jpg",          imageAlt: "Solstice Glow Perfume"},
      ]}
      title="Our Exquisite Collections"
      description="Explore a diverse range of fragrances, each a masterpiece waiting to be discovered."
    />
  </div>

  <div id="offerings" data-section="offerings">
      <PricingCardFive
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      plans={[
        {
          id: "standard",          tag: "Classic",          tagIcon: Sparkles,
          price: "$120",          period: "50ml",          description: "Our signature scent in a standard, elegant bottle.",          button: {
            text: "Select Standard",            href: "#offerings"},
          featuresTitle: "Includes:",          features: [
            "50ml Eau de Parfum",            "Premium packaging",            "Free shipping"],
        },
        {
          id: "travel",          tag: "Traveler",          tagIcon: Feather,
          price: "$60",          period: "10ml",          description: "A portable companion for your journeys, perfect for on-the-go refresh.",          button: {
            text: "Select Travel",            href: "#offerings"},
          featuresTitle: "Includes:",          features: [
            "10ml Travel Spray",            "Refillable design",            "Velvet pouch"],
        },
        {
          id: "gift-set",          tag: "Luxury Set",          tagIcon: Gift,
          price: "$200",          period: "Gift Set",          description: "The ultimate gift, featuring a selection of our finest fragrances.",          button: {
            text: "Choose Gift Set",            href: "#offerings"},
          featuresTitle: "Includes:",          features: [
            "50ml Eau de Parfum",            "10ml Travel Spray",            "Scented candle",            "Personalized card"],
        },
      ]}
      title="Curated Offerings"
      description="Find the perfect size or gift set for yourself or a loved one."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFifteen
      useInvertedBackground={false}
      testimonial="AromaLux perfumes are truly captivating. The scents are sophisticated and long-lasting, always drawing compliments. My new favorite!"
      rating={5}
      author="Isabella Rossi, Fragrance Enthusiast"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/close-up-portrait-professional-business-woman-smiling-outdoor_1391-4.jpg",          alt: "Sarah Johnson"},
        {
          src: "http://img.b2bpic.net/free-photo/portrait-grey-haired-businessman-standing_74855-10324.jpg",          alt: "Michael Chen"},
        {
          src: "http://img.b2bpic.net/free-photo/busy-young-woman-work_329181-13393.jpg",          alt: "Emily Rodriguez"},
        {
          src: "http://img.b2bpic.net/free-photo/beautiful-woman-holding-hands-head-patterned-blouse-looking-happy-front-view_176474-31820.jpg",          alt: "David Kim"},
        {
          src: "http://img.b2bpic.net/free-photo/smiling-handsome-guy-posing-park_1262-20815.jpg",          alt: "Maria Gomez"},
      ]}
      ratingAnimation="blur-reveal"
      avatarsAnimation="slide-up"
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={true}
      names={[
        "Vogue Scent",        "Luxury Essence",        "Gourmet Fragrance",        "Chic Magazine",        "Aroma Monthly",        "Elite Style",        "Modern Perfumer"]}
      title="As Seen In"
      description="Proudly recognized by leading fashion and lifestyle publications for our unique olfactory artistry."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "q1",          title: "What makes AromaLux fragrances unique?",          content: "Our fragrances are crafted by master perfumers using rare and ethically sourced ingredients. Each scent is a unique composition designed for longevity and complexity."},n        {
          id: "q2",          title: "How long do your fragrances last?",          content: "AromaLux fragrances are formulated for exceptional longevity. Depending on the concentration (Eau de Parfum vs. Extrait de Parfum) and skin type, they can last anywhere from 6 to 12 hours."},n        {
          id: "q3",          title: "Are your products cruelty-free?",          content: "Yes, AromaLux is committed to ethical practices. All our products are 100% cruelty-free and vegan, never tested on animals."},n        {
          id: "q4",          title: "Do you offer international shipping?",          content: "Yes, we offer worldwide shipping. Shipping costs and delivery times vary by destination. Please see our shipping policy for more details."},n        {
          id: "q5",          title: "Can I sample fragrances before buying a full bottle?",          content: "We offer discovery sets with small samples of our most popular fragrances, allowing you to experience them before committing to a full-size purchase."},n      ]}
      title="Frequently Asked Questions"
      description="Find answers to common inquiries about our fragrances, ingredients, and ordering process."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      useInvertedBackground={false}
      background={{
        variant: "plain"}}
      tag="Inquire"
      title="Connect with AromaLux"
      description="We'd love to hear from you. Reach out to us for any questions, collaborations, or custom fragrance requests."
      imageSrc="http://img.b2bpic.net/free-photo/flat-lay-bottle-fan-yellow-background_23-2148306729.jpg"
      imageAlt="Elegant perfume bottle for contact section"
      mediaAnimation="opacity"
      mediaPosition="right"
      inputPlaceholder="Enter your email"
      buttonText="Send Message"
      termsText="By clicking Send Message, you agree to our privacy policy and terms of service."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBase
      columns={[
        {
          title: "Shop",          items: [
            {
              label: "All Fragrances",              href: "/products"},
            {
              label: "Gift Sets",              href: "#offerings"},
            {
              label: "New Arrivals",              href: "/products"},
            {
              label: "Discovery Sets",              href: "#offerings"},
          ],
        },
        {
          title: "Company",          items: [
            {
              label: "Our Story",              href: "#about"},
            {
              label: "Craftsmanship",              href: "#features"},
            {
              label: "Sustainability",              href: "#features"},
            {
              label: "Careers",              href: "#"},
          ],
        },
        {
          title: "Support",          items: [
            {
              label: "FAQ",              href: "#faq"},
            {
              label: "Contact Us",              href: "#contact"},
            {
              label: "Shipping & Returns",              href: "#"},
            {
              label: "Privacy Policy",              href: "#"},
          ],
        },
      ]}
      logoText="AromaLux"
      copyrightText="© 2024 AromaLux. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}