"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import TextAbout from '@/components/sections/about/TextAbout';
import { Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="entrance-slide"
        borderRadius="soft"
        contentWidth="mediumSmall"
        sizing="largeSmallSizeMediumTitles"
        background="none"
        cardStyle="gradient-radial"
        primaryButtonStyle="flat"
        secondaryButtonStyle="solid"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Home",
          id: "#home",
        },
        {
          name: "About",
          id: "#about",
        },
        {
          name: "Services",
          id: "#services",
        },
        {
          name: "Products",
          id: "#products",
        },
        {
          name: "Pricing",
          id: "#pricing",
        },
        {
          name: "Testimonials",
          id: "#testimonials",
        },
        {
          name: "FAQ",
          id: "#faq",
        },
        {
          name: "Book Now",
          id: "#contact",
        },
      ]}
      button={{
        text: "Book Appointment",
        href: "#contact",
      }}
      brandName="Elegant Locks Salon"
    />
  </div>

  <div id="home" data-section="home">
      <HeroBillboardGallery
      background={{
        variant: "plain",
      }}
      title="Unleash Your Perfect Look"
      description="At Elegant Locks Salon, we craft personalized styles and deliver exceptional hair care. Experience luxury, creativity, and the ultimate transformation."
      buttons={[
        {
          text: "Book an Appointment",
          href: "#contact",
        },
        {
          text: "View Our Services",
          href: "#services",
        },
      ]}
      mediaItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/man-barbershop_1303-5403.jpg?_wi=1",
          imageAlt: "Woman getting hair styled in a salon",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/woman-hair-washing-with-soap_140725-8948.jpg?_wi=1",
          imageAlt: "Hairdresser applying color to client's hair",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313031.jpg?_wi=1",
          imageAlt: "Close-up of beautifully styled wavy hair",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/male-barber-giving-his-client-nice-haircut_23-2149186478.jpg",
          imageAlt: "Man getting a stylish haircut",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/pov-tourist-waves-videocall_482257-76727.jpg",
          imageAlt: "Elegant interior of a modern hair salon",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-getting-her-hair-dyed-by-hairdresser-home_23-2148817233.jpg",
          imageAlt: "Client enjoying a relaxing hair treatment",
        },
      ]}
      mediaAnimation="opacity"
    />
  </div>

  <div id="about" data-section="about">
      <TextAbout
      useInvertedBackground={false}
      tag="About Us"
      title="Where Style Meets Expertise"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureBento
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          title: "Precision Cuts & Styling",
          description: "From classic trims to trendy transformations, our stylists deliver impeccable cuts tailored to your face shape and lifestyle, followed by expert styling for a flawless finish.",
          bentoComponent: "media-stack",
          items: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/romantic-fair-haired-girl-chilling-outdoor-photoshoot-close-up-portrait-carefree-young-woman-with-tanned-skin-isolated-wooden-wall_197531-9114.jpg",
              imageAlt: "Hairdresser giving a precision haircut",
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/girl-africa-woman-making-eyebrows-girls-beauty-salon_1157-48328.jpg",
              imageAlt: "Hairdresser giving a precision haircut",
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/happy-young-woman-enjoys-spending-free-time-home-has-telephone-talk-with-best-friend-discuss-domestic-problems-share-positive-news-sits-comfortable-sofa-room_273609-2401.jpg",
              imageAlt: "Hairdresser giving a precision haircut",
            },
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/man-barbershop_1303-5403.jpg?_wi=2",
          imageAlt: "haircut and styling scissors comb",
        },
        {
          title: "Vibrant Color & Highlights",
          description: "Discover your perfect shade with our advanced color techniques, including balayage, ombre, full color, and highlights that add dimension and radiance.",
          bentoComponent: "media-stack",
          items: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/pleased-good-looking-girl-sunglasses-touching-her-face-smiling_197531-21061.jpg",
              imageAlt: "Client getting hair colored with highlights",
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/woman-shake-her-rainbow-color-hair_633478-156.jpg",
              imageAlt: "Client getting hair colored with highlights",
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-getting-her-hair-dyed-by-hairdresser-home_23-2148817234.jpg",
              imageAlt: "Client getting hair colored with highlights",
            },
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/woman-hair-washing-with-soap_140725-8948.jpg?_wi=2",
          imageAlt: "haircut and styling scissors comb",
        },
        {
          title: "Luxurious Hair Treatments",
          description: "Indulge in our restorative treatments, from deep conditioning masks to keratin smoothing and scalp therapies, designed to rejuvenate and strengthen your hair.",
          bentoComponent: "media-stack",
          items: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/woman-giving-herself-scalp-massage_23-2151301312.jpg",
              imageAlt: "Applying a luxurious hair treatment",
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-hair-process-keratin-treatment_23-2149332455.jpg",
              imageAlt: "Applying a luxurious hair treatment",
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/avocado-beauty-health-spa-concept_23-2148645568.jpg",
              imageAlt: "Applying a luxurious hair treatment",
            },
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313031.jpg?_wi=2",
          imageAlt: "haircut and styling scissors comb",
        },
      ]}
      title="Our Signature Services"
      description="Explore our comprehensive range of hair care and styling services designed to cater to your every need."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardFour
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      products={[
        {
          id: "shampoo-conditioner",
          name: "Hydrating Shampoo & Conditioner",
          price: "$45",
          variant: "Set",
          imageSrc: "http://img.b2bpic.net/free-photo/front-view-black-plastic-bottle-from-shampoo-with-pink-strip_140725-9056.jpg",
          imageAlt: "Hydrating Shampoo and Conditioner bottles",
        },
        {
          id: "hair-serum",
          name: "Silkening Hair Serum",
          price: "$32",
          variant: "50ml",
          imageSrc: "http://img.b2bpic.net/free-photo/assortment-natural-argan-oil-dropper_23-2149016625.jpg",
          imageAlt: "Hair serum bottle with dropper",
        },
        {
          id: "repair-mask",
          name: "Intensive Repair Mask",
          price: "$38",
          variant: "200ml",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-elegant-beauty-selfcare-treatment_23-2149238279.jpg",
          imageAlt: "Hair mask jar for deep repair",
        },
        {
          id: "volumizing-mousse",
          name: "Volumizing Styling Mousse",
          price: "$28",
          variant: "250ml",
          imageSrc: "http://img.b2bpic.net/free-photo/top-view-leaf-body-care-products_23-2148241787.jpg",
          imageAlt: "Volumizing hair mousse bottle",
        },
        {
          id: "heat-protectant",
          name: "Thermal Protectant Spray",
          price: "$29",
          variant: "150ml",
          imageSrc: "http://img.b2bpic.net/free-photo/kid-styling-his-afro-hair_52683-92730.jpg",
          imageAlt: "Heat protectant spray bottle",
        },
        {
          id: "dry-shampoo",
          name: "Refreshing Dry Shampoo",
          price: "$25",
          variant: "200ml",
          imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-woman-with-curly-hair_23-2151317373.jpg",
          imageAlt: "Dry shampoo spray can",
        },
      ]}
      title="Premium Hair Care Products"
      description="Maintain your salon-perfect look at home with our curated selection of high-quality hair care products trusted by professionals."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardThree
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      plans={[
        {
          id: "cut-style",
          name: "Haircut & Styling",
          price: "$60+",
          features: [
            "Consultation",
            "Shampoo & Conditioning",
            "Precision Cut",
            "Blow Dry & Styling",
          ],
          buttons: [
            {
              text: "Book Now",
              href: "#contact",
            },
          ],
        },
        {
          id: "color-highlights",
          name: "Color & Highlights",
          price: "$120+",
          badge: "Popular",
          badgeIcon: Sparkles,
          features: [
            "Personalized Color Consultation",
            "Full Color / Partial Highlights",
            "Toner & Gloss",
            "Post-Color Treatment",
          ],
          buttons: [
            {
              text: "Book Now",
              href: "#contact",
            },
          ],
        },
        {
          id: "treatments",
          name: "Deep Treatments",
          price: "$80+",
          features: [
            "Customized Hair Analysis",
            "Keratin Smoothing / Deep Conditioning",
            "Scalp Detox",
            "Style Finish",
          ],
          buttons: [
            {
              text: "Book Now",
              href: "#contact",
            },
          ],
        },
      ]}
      title="Our Service Menu"
      description="Transparent pricing for our exceptional hair services. Find the perfect option to achieve your desired style."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwo
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",
          name: "Sophia R.",
          role: "Regular Client",
          testimonial: "Elegant Locks is simply the best! My stylist always understands exactly what I want and delivers it flawlessly. I always leave feeling beautiful and confident.",
          imageSrc: "http://img.b2bpic.net/free-photo/mid-aged-couple-love-home_23-2147986288.jpg",
          imageAlt: "Sophia R.",
        },
        {
          id: "2",
          name: "Marcus L.",
          role: "New Client",
          testimonial: "First time here and I'm blown away. The atmosphere is relaxing, and my barber gave me the sharpest cut I've had in years. Highly recommend for men's styling!",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-thoughtful-man-office-corridor_329181-15803.jpg",
          imageAlt: "Marcus L.",
        },
        {
          id: "3",
          name: "Olivia M.",
          role: "Color Enthusiast",
          testimonial: "My hair color has never looked better! The team here is incredibly talented with color, and they really care about hair health. Five stars!",
          imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-using-tablet-celebrating-success-outdoor-cafe_1262-18867.jpg",
          imageAlt: "Olivia M.",
        },
        {
          id: "4",
          name: "Chloe S.",
          role: "Fashion Blogger",
          testimonial: "I trust Elegant Locks with all my styling needs for events and daily wear. They're always ahead of the trends and make my hair look effortlessly chic.",
          imageSrc: "http://img.b2bpic.net/free-photo/modern-redhead-non-binary-person_23-2148760601.jpg",
          imageAlt: "Chloe S.",
        },
        {
          id: "5",
          name: "Noah K.",
          role: "Busy Professional",
          testimonial: "Quick, efficient, and consistently excellent service. It’s hard to find a salon that respects your time while providing top-notch results, but Elegant Locks does both.",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-self-confident-hipster-girl-keeps-hands-near-face-looks-directly-front-has-unique-appearance-stands-out-from-crowd-enjoys-listening-favorite-rock-song-headphones_273609-53788.jpg",
          imageAlt: "Noah K.",
        },
      ]}
      title="What Our Clients Say"
      description="Hear from our happy clients who have experienced the Elegant Locks difference."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={true}
      faqs={[
        {
          id: "faq1",
          title: "How do I book an appointment?",
          content: "You can book an appointment directly through our website by clicking the 'Book Now' button, or by calling us during business hours.",
        },
        {
          id: "faq2",
          title: "What payment methods do you accept?",
          content: "We accept all major credit cards (Visa, MasterCard, Amex), debit cards, and cash payments. We also offer gift cards.",
        },
        {
          id: "faq3",
          title: "What is your cancellation policy?",
          content: "We require at least 24 hours' notice for cancellations or rescheduling. Cancellations made less than 24 hours in advance may incur a fee.",
        },
        {
          id: "faq4",
          title: "Do you offer consultations for new clients?",
          content: "Yes, we highly recommend a complimentary consultation for all new color clients or for those considering a major change. Please book this via our website or phone.",
        },
        {
          id: "faq5",
          title: "Can I purchase products at the salon?",
          content: "Absolutely! We stock a full range of the professional hair care products used by our stylists. Feel free to ask your stylist for personalized recommendations.",
        },
      ]}
      sideTitle="Your Questions, Answered"
      sideDescription="Find quick answers to common questions about our services, appointments, and salon policies."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={false}
      background={{
        variant: "plain",
      }}
      tag="Contact Us"
      title="Ready for Your Transformation?"
      description="Book your appointment today and let our expert stylists create the perfect look for you. We look forward to welcoming you to Elegant Locks Salon."
      buttons={[
        {
          text: "Book Online Now",
          href: "#",
        },
        {
          text: "Call Us: (555) 123-4567",
          href: "tel:+15551234567",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterSimple
      columns={[
        {
          title: "Services",
          items: [
            {
              label: "Haircuts",
              href: "#services",
            },
            {
              label: "Coloring",
              href: "#services",
            },
            {
              label: "Treatments",
              href: "#services",
            },
            {
              label: "Styling",
              href: "#services",
            },
          ],
        },
        {
          title: "About",
          items: [
            {
              label: "Our Story",
              href: "#about",
            },
            {
              label: "Team",
              href: "#",
            },
            {
              label: "Careers",
              href: "#",
            },
          ],
        },
        {
          title: "Support",
          items: [
            {
              label: "FAQ",
              href: "#faq",
            },
            {
              label: "Contact Us",
              href: "#contact",
            },
            {
              label: "Privacy Policy",
              href: "#",
            },
            {
              label: "Terms of Service",
              href: "#",
            },
          ],
        },
      ]}
      bottomLeftText="© 2024 Elegant Locks Salon. All rights reserved."
      bottomRightText="Crafted with care by Webuild"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
