"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TeamCardSix from '@/components/sections/team/TeamCardSix';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import { Leaf, Scissors, Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="smallMedium"
        sizing="mediumLargeSizeMediumTitles"
        background="aurora"
        cardStyle="soft-shadow"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Home",
          id: "#home",
        },
        {
          name: "About",
          id: "#about",
        },
        {
          name: "Services",
          id: "#services",
        },
        {
          name: "Packages",
          id: "#packages",
        },
        {
          name: "Pricing",
          id: "#pricing",
        },
        {
          name: "Team",
          id: "#team",
        },
        {
          name: "Reviews",
          id: "#reviews",
        },
        {
          name: "Book Now",
          id: "#contact",
        },
      ]}
      brandName="Salon La Moda"
    />
  </div>

  <div id="home" data-section="home">
      <HeroBillboardScroll
      background={{
        variant: "radial-gradient",
      }}
      title="Salon La Moda: Your Beauty, Elevated"
      description="Premium hair, nails, and wellness services from expert stylists. Book your transformation today."
      buttons={[
        {
          text: "Book an Appointment",
          href: "#contact",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/female-agent-customer-meeting-co-working-signing-agreement-woman-writing-document_74855-15145.jpg"
      imageAlt="Woman getting hair styled in a luxurious salon"
    />
  </div>

  <div id="about" data-section="about">
      <TestimonialAboutCard
      useInvertedBackground={true}
      tag="Our Story"
      title="Experience Elegance and Expertise"
      description="Salon La Moda is dedicated to transforming your beauty aspirations into stunning realities. Our commitment to excellence, personalized care, and a serene ambiance sets us apart."
      subdescription="We believe beauty is an art form, and every client deserves a masterpiece. Discover the difference skilled artistry makes, where every visit is a step towards your perfect self."
      icon={Sparkles}
      imageSrc="http://img.b2bpic.net/free-photo/stylish-reception-desk-lounge-area-with-trendy-decorations_482257-87402.jpg"
      imageAlt="Clean modern salon reception area with elegant decor"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardTwentyEight
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          id: "hair",
          title: "Hair Styling & Care",
          subtitle: "From contemporary cuts to vibrant colors, extensions, and revitalizing treatments.",
          category: "Hair",
          value: "Expert Cuts & Colors",
        },
        {
          id: "nails",
          title: "Manicures & Pedicures",
          subtitle: "Indulge in classic manicures, relaxing pedicures, intricate gel designs, and durable acrylics.",
          category: "Nails",
          value: "Pristine Nail Artistry",
        },
        {
          id: "wellness",
          title: "Skincare & Wellness",
          subtitle: "Rejuvenate with our bespoke facials, professional waxing services, and therapeutic massages.",
          category: "Wellness",
          value: "Holistic Rejuvenation",
        },
      ]}
      title="Signature Services"
      description="Explore our comprehensive range of hair, nail, and wellness treatments designed to pamper and perfect."
      tag="Our Expertise"
    />
  </div>

  <div id="packages" data-section="packages">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      products={[
        {
          id: "p1",
          name: "Deluxe Hair Makeover",
          price: "From $250",
          imageSrc: "http://img.b2bpic.net/free-photo/sensual-glamour-portrait-beautiful-woman-model-with-fresh-daily-makeup-with-pink-lips-color-clean-healthy-skin-face-studio-lights-background_158538-14302.jpg",
          imageAlt: "Woman with luxurious styled hair",
        },
        {
          id: "p2",
          name: "Ultimate Spa Day",
          price: "From $300",
          imageSrc: "http://img.b2bpic.net/free-photo/skin-care-spa-cosmetic-products_23-2148287612.jpg",
          imageAlt: "Relaxing spa day elements bath salts",
        },
        {
          id: "p3",
          name: "Mani-Pedi Indulgence",
          price: "From $120",
          imageSrc: "http://img.b2bpic.net/free-photo/pretty-womans-manicure-pedicure_343596-710.jpg",
          imageAlt: "Perfectly manicured hands pedicure feet",
        },
        {
          id: "p4",
          name: "Bridal Prep Package",
          price: "From $400",
          imageSrc: "http://img.b2bpic.net/free-photo/bride-putting-earrings_1328-3452.jpg",
          imageAlt: "Bride getting makeup done at salon",
        },
        {
          id: "p5",
          name: "Gentleman's Grooming",
          price: "From $100",
          imageSrc: "http://img.b2bpic.net/free-photo/view-male-beauty-products-with-rock-stone-display_23-2150435228.jpg",
          imageAlt: "Man getting beard trimmed at barber",
        },
        {
          id: "p6",
          name: "Express Refresh",
          price: "From $80",
          imageSrc: "http://img.b2bpic.net/free-photo/small-family-using-smartphone-painting-home-interior-with-orange-color-paint-browsing-internet-find-house-design-inspiration-searching-decoration-online-mobile-phone_482257-47764.jpg",
          imageAlt: "Quick beauty refresh woman smiling",
        },
      ]}
      title="Gift the Experience of Beauty"
      description="Browse our curated selection of salon packages and gift vouchers, perfect for any occasion."
      tag="Special Offers"
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardEight
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        {
          id: "basic_haircut",
          badge: "Hair Care",
          badgeIcon: Scissors,
          price: "$60",
          subtitle: "Stylist Cut & Blow Dry",
          buttons: [
            {
              text: "Book Haircut",
              href: "#contact",
            },
          ],
          features: [
            "Shampoo & Conditioning",
            "Precision Cut",
            "Professional Blow Dry",
          ],
        },
        {
          id: "gel_manicure",
          badge: "Nail Care",
          badgeIcon: Sparkles,
          price: "$50",
          subtitle: "Luxurious Gel Manicure",
          buttons: [
            {
              text: "Book Manicure",
              href: "#contact",
            },
          ],
          features: [
            "Nail Shaping & Buffing",
            "Cuticle Care",
            "Long-lasting Gel Polish",
          ],
        },
        {
          id: "signature_facial",
          badge: "Skincare",
          badgeIcon: Leaf,
          price: "$120",
          subtitle: "Rejuvenating Signature Facial",
          buttons: [
            {
              text: "Book Facial",
              href: "#contact",
            },
          ],
          features: [
            "Deep Cleansing",
            "Exfoliation & Mask",
            "Hydrating Serum & Massage",
          ],
        },
      ]}
      title="Transparent Pricing, Premium Value"
      description="Find a service that fits your needs. All prices reflect our commitment to quality and expert care, ensuring exceptional results every time."
      tag="Value Plans"
    />
  </div>

  <div id="team" data-section="team">
      <TeamCardSix
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      members={[
        {
          id: "t1",
          name: "Amelia Ross",
          role: "Lead Hair Stylist",
          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-happy-bride-wearing-veil_23-2149722033.jpg",
          imageAlt: "Professional female hair stylist smiling",
        },
        {
          id: "t2",
          name: "Chloe Davis",
          role: "Senior Nail Technician",
          imageSrc: "http://img.b2bpic.net/free-photo/satisfied-glad-young-pinup-woman-with-charming-smile-points-upper-right-corner_273609-17108.jpg",
          imageAlt: "Skilled nail technician portrait",
        },
        {
          id: "t3",
          name: "Sophia Lee",
          role: "Master Esthetician",
          imageSrc: "http://img.b2bpic.net/free-photo/closeup-smiling-adult-woman-leaning-wall_1262-1759.jpg",
          imageAlt: "Esthetician performing facial smiling",
        },
      ]}
      title="Meet Our Talented Team"
      description="Our skilled stylists and therapists are passionate about bringing your vision to life with precision and creativity, ensuring every visit is exceptional."
      tag="Our Experts"
    />
  </div>

  <div id="reviews" data-section="reviews">
      <TestimonialCardFive
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "tes1",
          name: "Sarah J.",
          date: "May 2024",
          title: "Best Haircut Ever!",
          quote: "Salon La Moda always delivers! Amelia is a true artist; she understood exactly what I wanted and gave me the most flattering haircut I've ever had. Highly recommend!",
          tag: "Hair Styling",
          avatarSrc: "http://img.b2bpic.net/free-photo/stylish-european-woman-purple-wall-happy-face-smiling-with-crossed-arms-looking-camera_343596-5727.jpg",
          avatarAlt: "Smiling woman client headshot",
          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-getting-haircut_23-2150665403.jpg",
          imageAlt: "Woman with perfectly styled hair smiling",
        },
        {
          id: "tes2",
          name: "Emily R.",
          date: "April 2024",
          title: "Amazing Spa Day",
          quote: "I treated myself to a full spa day package, and it was pure bliss. Sophia’s facial was incredibly relaxing, and Chloe's manicure made my hands feel brand new. A perfect escape!",
          tag: "Wellness & Nails",
          avatarSrc: "http://img.b2bpic.net/free-photo/pretty-attractive-young-mixed-race-model-with-large-afro-wearing-navy-jacket-her-naked-body-shorts_633478-1216.jpg",
          avatarAlt: "Young woman smiling headshot",
          imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-her-hair-brushed-salon_23-2148817182.jpg",
          imageAlt: "Woman with elegant updo hairstyle",
        },
        {
          id: "tes3",
          name: "Jessica L.",
          date: "March 2024",
          title: "Vibrant New Color",
          quote: "I wanted a bold change, and Amelia delivered! My new hair color is absolutely stunning and so vibrant. I've received so many compliments. Salon La Moda never disappoints!",
          tag: "Hair Color",
          avatarSrc: "http://img.b2bpic.net/free-photo/portrait-person-smiling_23-2151169284.jpg",
          avatarAlt: "Mature woman smiling headshot",
          imageSrc: "http://img.b2bpic.net/free-photo/serious-woman-wearing-casual-white-t-shirt-with-strict-expression-pointing-thumb-aside-showing-free-space-advertisement-posing-isolated-gray-wall_176532-14212.jpg",
          imageAlt: "Woman with vibrant new hair color",
        },
        {
          id: "tes4",
          name: "Megan D.",
          date: "February 2024",
          title: "Perfect Gel Manicure",
          quote: "Chloe is meticulous! My gel manicure is flawless and has lasted perfectly. The salon atmosphere is so welcoming, and the attention to detail is unmatched.",
          tag: "Nail Care",
          avatarSrc: "http://img.b2bpic.net/free-photo/joyful-business-woman-with-coffee-cup_23-2148095746.jpg",
          avatarAlt: "Happy client with short hair",
          imageSrc: "http://img.b2bpic.net/free-photo/high-fashion-look-glamor-closeup-beauty-portrait-beautiful-caucasian-young-woman-model-with-no-makeup-with-perfect-clean-skin_158538-12920.jpg",
          imageAlt: "Woman with beautifully manicured nails",
        },
        {
          id: "tes5",
          name: "Olivia M.",
          date: "January 2024",
          title: "Glowing Skin After Facial",
          quote: "Sophia's signature facial left my skin feeling incredibly soft and looking radiant. She has magic hands! It's clear she truly cares about her clients' skin health.",
          tag: "Skincare",
          avatarSrc: "http://img.b2bpic.net/free-photo/close-up-attractive-long-haired-woman-bed_1139-193.jpg",
          avatarAlt: "Diverse woman smiling headshot",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-with-friends_23-2149152887.jpg",
          imageAlt: "Woman with glowing skin after facial",
        },
      ]}
      title="Hear From Our Happy Clients"
      description="Their words, our pride. Real stories of beauty transformations and exceptional service at Salon La Moda."
      tag="Client Love"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={true}
      background={{
        variant: "sparkles-gradient",
      }}
      tag="Ready for a Change?"
      title="Book Your Transformation Today"
      description="Contact us to schedule your next appointment or to learn more about our premium services. We look forward to welcoming you to Salon La Moda!"
      buttons={[
        {
          text: "Call Us Now",
          href: "tel:+1234567890",
        },
        {
          text: "Email Us",
          href: "mailto:info@salonlamoda.com",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-photo/vase-with-natural-leaves-monstera-leaf-interior-room_169016-13097.jpg"
      imageAlt="Minimalist salon interior plants"
      logoText="Salon La Moda"
      columns={[
        {
          title: "Services",
          items: [
            {
              label: "Hair Styling",
              href: "#services",
            },
            {
              label: "Nail Care",
              href: "#services",
            },
            {
              label: "Skincare",
              href: "#services",
            },
            {
              label: "Packages",
              href: "#packages",
            },
          ],
        },
        {
          title: "About Us",
          items: [
            {
              label: "Our Story",
              href: "#about",
            },
            {
              label: "Meet Our Team",
              href: "#team",
            },
            {
              label: "Client Reviews",
              href: "#reviews",
            },
          ],
        },
        {
          title: "Contact",
          items: [
            {
              label: "Book Online",
              href: "#contact",
            },
            {
              label: "Location",
              href: "#",
            },
            {
              label: "Phone",
              href: "tel:+1234567890",
            },
          ],
        },
      ]}
      copyrightText="© 2024 Salon La Moda. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
