"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import MediaAbout from '@/components/sections/about/MediaAbout';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="mediumLarge"
        sizing="mediumSizeLargeTitles"
        background="grid"
        cardStyle="outline"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="solid"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        {
          name: "Home",          id: "#hero"},
        {
          name: "About Us",          id: "#about"},
        {
          name: "Services",          id: "#services"},
        {
          name: "Reviews",          id: "#testimonials"},
        {
          name: "FAQ",          id: "#faq"},
        {
          name: "Book Now",          id: "#contact"},
      ]}
      brandName="Hairtalks Rouse Hill"
      button={{
        text: "Book Appointment",        href: "#contact"}}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardCarousel
      background={{
        variant: "rotated-rays-animated"}}
      title="Premium Hair Styling in Rouse Hill"
      description="Experience expert cuts and colour at Hairtalks, located in Rouse Hill Town Centre. Trusted by 4.1 stars from our community."
      buttons={[
        {
          text: "Book Your Appointment",          href: "#contact"},
      ]}
      buttonAnimation="slide-up"
      mediaItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/sensual-glamour-portrait-beautiful-blond-woman-model-lady-with-fresh-daily-makeup-with-pink-lips-color-clean-healthy-skin_158538-14293.jpg",          imageAlt: "Luxurious hair salon interior with stylists at work"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-protecting-client-with-plastic-cape_23-2147769746.jpg",          imageAlt: "Hair stylist applying color to client's hair"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/professional-bearded-barber-man-apron-holding-scissors-hairbrush-going-cut-standing-orange-wall_141793-48457.jpg",          imageAlt: "Client getting hair cut and styled by a professional"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-getting-hairwashed-with-copy-space_23-2148224414.jpg",          imageAlt: "Hair washing station in a luxury salon"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/blonde-girl-getting-her-hair-washed_23-2148108850.jpg",          imageAlt: "Hair treatments being applied in a salon"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-pink-sweater-looking-camera-posing-high-quality-photo_114579-31514.jpg",          imageAlt: "Happy client showing off new hairstyle"},
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <MediaAbout
      useInvertedBackground={true}
      title="Welcome to Hairtalks Rouse Hill"
      description="At Hairtalks, we believe in crafting more than just hairstyles; we create experiences. Located conveniently in Rouse Hill Town Centre, our salon offers a sanctuary where expert stylists use premium products and innovative techniques to bring your hair vision to life. From precision cuts and vibrant colours to nourishing treatments and elegant styling, we're dedicated to delivering exceptional results that leave you feeling confident and beautiful. Discover the difference of true artistry and personalized care."
      tag="Our Story"
      tagAnimation="slide-up"
      buttons={[
        {
          text: "Meet Our Team",          href: "#"},
      ]}
      buttonAnimation="slide-up"
      imageSrc="http://img.b2bpic.net/free-photo/empty-hairdresser-shop-with-chairs_23-2149220584.jpg"
      imageAlt="Interior view of Hairtalks Rouse Hill salon"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureBento
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Precision Cutting & Styling",          description: "Expert haircuts tailored to your unique features and lifestyle, ensuring a flawless look that lasts.",          bentoComponent: "media-stack",          items: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/rhinoplasty-surgery-concept-with-woman-model_23-2150036906.jpg",              imageAlt: "Hair transformation before and after a cutting and styling session"},
            {
              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-studio_1157-17096.jpg",              imageAlt: "Beautiful woman in the studio"
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/lodge-wintertime-with-ski-gear_482257-76632.jpg",              imageAlt: "Lodge in wintertime with ski gear"
            }
          ]
        },
        {
          title: "Vibrant Colour Creations",          description: "From subtle highlights to dramatic balayage, our colour specialists use premium dyes for stunning, long-lasting results.",          bentoComponent: "media-stack",          items: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-hair-salon_23-2150668428.jpg",              imageAlt: "Hair coloring process with foils and brushes"},
            {
              imageSrc: "http://img.b2bpic.net/free-photo/life-style_1122-1803.jpg",              imageAlt: "life style"
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/side-view-leather-barber-shop-chair_23-2148242807.jpg",              imageAlt: "Side view of leather barber shop chair"
            }
          ]
        },
        {
          title: "Nourishing Hair Treatments",          description: "Revitalize your hair with our bespoke treatments designed to restore health, shine, and manageability.",          bentoComponent: "media-stack",          items: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/woman-standing-factory-with-thread_1157-29346.jpg",              imageAlt: "Luxurious hair treatment application in a salon"},
            {
              imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-putting-face-man-towel_23-2147737014.jpg",              imageAlt: "Hairdresser putting face of man in towel"
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/barber-putting-towel-face-client_23-2147736960.jpg",              imageAlt: "Barber putting towel on face of client"
            }
          ]
        },
      ]}
      title="Crafting Your Perfect Look"
      description="Our comprehensive range of services ensures every client leaves feeling radiant. Explore our specialties designed for modern styles and lasting beauty."
      tag="Our Expertise"
      tagAnimation="slide-up"
    />
  </div>

  <div id="product-services" data-section="product-services">
      <ProductCardFour
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      products={[
        {
          id: "p-cut-style",          name: "Women's Cut & Style",          price: "$95",          variant: "Includes wash, cut & blow-dry",          imageSrc: "http://img.b2bpic.net/free-photo/fashion-brunette-girl-with-bob-hair-red-lips-looking-serious-white-background-professional-model-posing-studio_574295-4528.jpg",          imageAlt: "Stylish haircut on a woman"},
        {
          id: "p-color-refresh",          name: "Full Head Colour & Tone",          price: "$220",          variant: "Vibrant, long-lasting results",          imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-getting-her-hair-dyed-by-hairdresser-home_23-2148817230.jpg",          imageAlt: "Vibrant balayage hair color"},
        {
          id: "p-treatment",          name: "Luxury Hair Treatment",          price: "$65",          variant: "Deep conditioning & shine",          imageSrc: "http://img.b2bpic.net/free-photo/flay-lay-body-cosmetics-plain-background_23-2148241788.jpg",          imageAlt: "Luxurious hair treatment for healthy shine"},
        {
          id: "p-styling",          name: "Event Styling & Updos",          price: "$120",          variant: "Perfect for special occasions",          imageSrc: "http://img.b2bpic.net/free-photo/woman-dries-long-hair-with-blue-dryer-bathroom-home-blowout-lifestyle_169016-69602.jpg",          imageAlt: "Elegant formal hairstyle updo"},
        {
          id: "p-mens-cut",          name: "Men's Precision Cut",          price: "$55",          variant: "Modern cuts & grooming",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-blond-bearded-male-dressed-black-leather-jacket_613910-11927.jpg",          imageAlt: "Stylish men's haircut"},
        {
          id: "p-bridal",          name: "Bridal Hair Package",          price: "$POA",          variant: "Consultation & wedding day styling",          imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-stylish-woman-wedding-dress_285396-7804.jpg",          imageAlt: "Bridal updo hairstyle with flowers"},
      ]}
      title="Our Signature Services & Packages"
      description="Explore our curated selection of services, from a fresh trim to a complete hair transformation. Find your perfect package today."
      tag="Services"
      tagAnimation="slide-up"
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTen
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "t-1",          title: "Absolutely love my new look!",          quote: "The team at Hairtalks Rouse Hill truly transformed my hair. The colour is perfect, and the cut is exactly what I wanted. Highly recommend their professional and friendly service!",          name: "Sarah J.",          role: "Local Resident",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-brunette-girl-background-city-sunset-woman-short-red-skirt-black-tshirt-with-stylish-makeup_132075-12119.jpg",          imageAlt: "Happy woman client smiling in salon"},
        {
          id: "t-2",          title: "Best haircut in Rouse Hill",          quote: "I've been coming to Hairtalks for years, and they never disappoint. Always a great atmosphere, and my stylist always nails the cut. Fantastic attention to detail.",          name: "Michael D.",          role: "Businessman",          imageSrc: "http://img.b2bpic.net/free-photo/young-black-people-taking-care-afro-hair_23-2149575478.jpg",          imageAlt: "Man client smiling at hair salon"},
        {
          id: "t-3",          title: "Exceptional service and results",          quote: "From the moment I walked in, I felt pampered. The consultation was thorough, and the end result was beyond my expectations. My hair has never looked this good!",          name: "Emily R.",          role: "Marketing Manager",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-with-friends_23-2149152887.jpg",          imageAlt: "Woman with long beautiful hair in salon"},
        {
          id: "t-4",          title: "Convenient and high-quality",          quote: "Being in Rouse Hill Town Centre, Hairtalks is so convenient. I can pop in during my lunch break. The quality of service is consistently excellent, making it my go-to salon.",          name: "David K.",          role: "Operations Director",          imageSrc: "http://img.b2bpic.net/free-photo/excited-young-beautiful-female-barber-uniform-holding-hair-clipper-with-comb-isolated-green-wall_141793-105764.jpg",          imageAlt: "Professional woman happy at hair salon"},
        {
          id: "t-5",          title: "A wonderful experience every time",          quote: "The staff are so welcoming, and they genuinely care about their clients. I always leave feeling refreshed and delighted with my hair. It's truly a pleasure visiting Hairtalks.",          name: "Jessica L.",          role: "Teacher",          imageSrc: "http://img.b2bpic.net/free-photo/beauty-concept-with-mother-daughter_23-2147791546.jpg",          imageAlt: "Happy young woman client"},
      ]}
      title="Hear From Our Happy Clients"
      description="We're proud of the glowing feedback we receive. Read what our community says about their Hairtalks experience."
      tag="Client Love"
      tagAnimation="slide-up"
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={true}
      names={[
        "Google Reviews (4.1/5 Stars)",        "Community Choice Award",        "Certified Hair Professional",        "Australian Hair Excellence",        "Sustainable Salon Partner",        "Local Business Favorite",        "Hygiene Certified"]}
      title="Trusted by the Rouse Hill Community"
      description="Our commitment to excellence has earned us recognition and the trust of our valued clients. We are proud of our 4.1-star average rating."
      tag="Our Reputation"
      tagAnimation="slide-up"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "faq-1",          title: "Where is Hairtalks Rouse Hill located?",          content: "We are conveniently located in the Rouse Hill Town Centre. You'll find us near [mention a prominent store or landmark]."},
        {
          id: "faq-2",          title: "How can I book an appointment?",          content: "You can easily book your appointment online through our website's booking portal or by calling us directly at [Phone Number]."},
        {
          id: "faq-3",          title: "Do you offer consultations for new clients?",          content: "Yes, we offer complimentary consultations for all new clients to discuss your hair goals and recommend the best services for you."},
        {
          id: "faq-4",          title: "What COVID-19 safety measures are in place?",          content: "Your safety is our priority. We adhere to strict hygiene protocols, including regular sanitization, mask-wearing for staff, and social distancing."},
        {
          id: "faq-5",          title: "What hair products do you use?",          content: "We pride ourselves on using only premium, professional-grade hair products from leading brands to ensure the best results and hair health for our clients."},
      ]}
      title="Frequently Asked Questions"
      description="Find answers to common questions about our services, bookings, and salon policies."
      tag="Got Questions?"
      tagAnimation="slide-up"
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={true}
      background={{
        variant: "radial-gradient"}}
      tag="Ready for a new look?"
      tagAnimation="slide-up"
      title="Visit Us or Book Your Appointment"
      description="Located in Rouse Hill Town Centre, Hairtalks is easily accessible. Schedule your visit today and let our expert stylists bring your hair vision to life."
      buttons={[
        {
          text: "Book Online Now",          href: "#"},
        {
          text: "Get Directions (Map)",          href: "https://www.google.com/maps/search/Hairtalks+Rouse+Hill+Town+Centre"},
      ]}
      buttonAnimation="slide-up"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterSimple
      columns={[
        {
          title: "Services",          items: [
            {
              label: "Cuts & Styling",              href: "#services"},
            {
              label: "Colouring",              href: "#services"},
            {
              label: "Treatments",              href: "#services"},
            {
              label: "Bridal Packages",              href: "#services"},
          ],
        },
        {
          title: "About Us",          items: [
            {
              label: "Our Story",              href: "#about"},
            {
              label: "Our Team",              href: "#"},
            {
              label: "Client Reviews",              href: "#testimonials"},
          ],
        },
        {
          title: "Support",          items: [
            {
              label: "FAQs",              href: "#faq"},
            {
              label: "Contact Us",              href: "#contact"},
            {
              label: "Privacy Policy",              href: "#"},
          ],
        },
      ]}
      bottomLeftText="© 2024 Hairtalks Rouse Hill. All rights reserved."
      bottomRightText="Crafted with passion in Rouse Hill."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
