"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TeamCardSix from '@/components/sections/team/TeamCardSix';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
        contentWidth="mediumSmall"
        sizing="largeSizeMediumTitles"
        background="grid"
        cardStyle="soft-shadow"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="glass"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Home",          id: "home"},
        {
          name: "Services",          id: "services"},
        {
          name: "Gallery",          id: "gallery"},
        {
          name: "About",          id: "about"},
        {
          name: "Team",          id: "team"},
        {
          name: "Testimonials",          id: "testimonials"},
        {
          name: "Contact",          id: "contact"},
      ]}
      brandName="Salon Shelimar"
    />
  </div>

  <div id="home" data-section="home">
      <HeroCarouselLogo
      logoText="Salon Shelimar"
      description="Where heritage craftsmanship meets modern artistry. A sanctuary for those who understand that great hair is sculptural precision."
      buttons={[
        {
          text: "BOOK BY PHONE",          href: "#contact"},
        {
          text: "EXPLORE SERVICES",          href: "#services"},
      ]}
      slides={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-sitting-hair-dryer-with-rollers_329181-1939.jpg",          imageAlt: "Stylist working on a client's hair in a modern salon"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-young-beautiful-woman-with-magnificent-blonde-hair_8353-6159.jpg",          imageAlt: "Hand-painted balayage highlights being applied to hair"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/female-hairdresser-making-hairstyle-blonde-woman-beauty-salon_176420-4459.jpg",          imageAlt: "Elegant updo hairstyle for a special occasion"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/sitting-hair-dresser-posing_23-2148108747.jpg",          imageAlt: "Luxurious interior of Salon Shelimar with styling stations"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/child-getting-their-hair-washed-salon_23-2150462452.jpg",          imageAlt: "Deep conditioning treatment being applied to client's hair"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/handsome-hipster-bearded-male-sitting-armchair-barber-shop-while-hairdresser-shaves-his-beard-with-dangerous-razor_613910-18491.jpg",          imageAlt: "Male client receiving a stylish haircut from a professional"},
      ]}
      autoplayDelay={3000}
      showDimOverlay={true}
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      useInvertedBackground={true}
      title="A Heritage of Precision"
      description="Nestled in the heart of Côte Saint-Luc, Salon Shelimar has been a cornerstone of beauty and craftsmanship in the community. Every visit is a personalized experience — a conversation between stylist and canvas. Our master stylists bring decades of combined expertise, blending time-honored techniques with contemporary artistry. We believe that exceptional hair is not just worn — it is sculpted, considered, and brought to life with intention."
      metrics={[
        {
          value: "20+",          title: "Years of Expertise"},
        {
          value: "5",          title: "Master Stylists"},
        {
          value: "Thousands",          title: "Happy Clients"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/medium-shot-man-getting-haircut_23-2150665403.jpg?_wi=1"
      imageAlt="An experienced hair stylist meticulously working on a client's hair"
      mediaAnimation="slide-up"
      metricsAnimation="slide-up"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardTwentyNine
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      features={[
        {
          title: "The Signature Sculpt",          description: "Precision cut and styling tailored to your face shape and lifestyle, ensuring a look that truly reflects you.",          imageSrc: "http://img.b2bpic.net/free-photo/confident-young-beautiful-female-barber-uniform-holding-barber-tools-putting-barette-hair-isolated-pink-wall_141793-105672.jpg",          titleImageSrc: "http://img.b2bpic.net/free-photo/close-up-man-combing-customer-hair_23-2148256891.jpg",          buttonText: "Discover More"},
        {
          title: "Chromatic Infusion",          description: "Full color service with custom-blended shades for multidimensional depth and lasting vibrancy.",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-girl-with-colorful-hair-white-t-shirt-covering-her-eye-with-paint-brush-dreamily-looking-camera-pottery-studio_574295-955.jpg",          titleImageSrc: "http://img.b2bpic.net/free-photo/blonde-woman-getting-her-hair-done_23-2148108776.jpg",          buttonText: "Discover More"},
        {
          title: "The Balayage Artistry",          description: "Hand-painted highlights for a sun-kissed, natural gradient effect that grows out beautifully.",          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-looking-photo-tape-red-background-high-quality-photo_114579-60927.jpg",          titleImageSrc: "http://img.b2bpic.net/free-photo/elevated-view-smiling-woman-covered-with-holi-color-powder_23-2148129255.jpg",          buttonText: "Discover More"},
        {
          title: "The Silk Revival",          description: "Deep conditioning treatment restoring elasticity, shine, and softness to revitalize your hair.",          imageSrc: "http://img.b2bpic.net/free-photo/side-view-hairdresser-washing-woman-s-hair_23-2150668438.jpg",          titleImageSrc: "http://img.b2bpic.net/free-photo/top-view-bath-products-concept_23-2148459879.jpg",          buttonText: "Discover More"},
        {
          title: "The Ceremony Style",          description: "Special occasion styling with a personalized consultation to perfect your look for any event.",          imageSrc: "http://img.b2bpic.net/free-photo/cute-tender-slim-girl-with-blond-curly-hair-standing_197531-168.jpg",          titleImageSrc: "http://img.b2bpic.net/free-photo/male-make-up-look-using-hair-spray_23-2148784348.jpg",          buttonText: "Discover More"},
      ]}
      title="The Curated List"
      description="Our Services"
    />
  </div>

  <div id="gallery" data-section="gallery">
      <ProductCardFour
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="bento-grid"
      useInvertedBackground={true}
      products={[
        {
          id: "gallery-1",          name: "The Signature Sculpt",          price: "N/A",          variant: "Hair",          imageSrc: "http://img.b2bpic.net/free-photo/glamour-female-model-with-short-brown-hair-black-dress-posing-near-light-wall_613910-7032.jpg",          imageAlt: "A modern short haircut with precise lines"},
        {
          id: "gallery-2",          name: "The Atelier",          price: "N/A",          variant: "Interior",          imageSrc: "http://img.b2bpic.net/free-photo/world-theatre-day-celebration_23-2151185639.jpg",          imageAlt: "Interior view of Salon Shelimar"},
        {
          id: "gallery-3",          name: "The Chignon",          price: "N/A",          variant: "Hair",          imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-bride-home-standing-near-window-with-bridesmaid_1157-13875.jpg",          imageAlt: "An elegant chignon updo"},
        {
          id: "gallery-4",          name: "Chromatic Infusion",          price: "N/A",          variant: "Hair",          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-with-blue-hair_23-2149872337.jpg",          imageAlt: "Vibrant red hair color with rich tones"},
        {
          id: "gallery-5",          name: "The Curl Form",          price: "N/A",          variant: "Hair",          imageSrc: "http://img.b2bpic.net/free-photo/positive-carefreee-woman-keeps-eyes-closed-raises-arms-smiles-gently-dressed-elegant-formal-jacket-recalls-something-pleasant-mind-isolated-blue-background-happy-emotions-concept_273609-60208.jpg",          imageAlt: "Beautifully styled natural curly hair"},
        {
          id: "gallery-6",          name: "The Asymmetric Bob",          price: "N/A",          variant: "Hair",          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-fashion-model-with-bob-hair-red-lips-confidently-looking-camera-smiling-white-background_574295-4534.jpg",          imageAlt: "An edgy asymmetric bob haircut"},
      ]}
      title="The Gallery of Form"
      description="Our Artistry"
    />
  </div>

  <div id="team" data-section="team">
      <TeamCardSix
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      members={[
        {
          id: "team-1",          name: "Sophia Rodriguez",          role: "Lead Stylist & Colorist",          imageSrc: "http://img.b2bpic.net/free-photo/excited-young-woman-with-long-hair-showing-scissors_176420-18225.jpg",          imageAlt: "Portrait of Sophia Rodriguez, Lead Stylist"},
        {
          id: "team-2",          name: "Mark Chen",          role: "Precision Cutting Expert",          imageSrc: "http://img.b2bpic.net/free-photo/hairstylist-giving-haircut-customer_23-2148506232.jpg",          imageAlt: "Portrait of Mark Chen, Precision Cutting Expert"},
        {
          id: "team-3",          name: "Isabella Rossi",          role: "Balayage Specialist",          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-looking-photo-tape-red-background-high-quality-photo_114579-60934.jpg",          imageAlt: "Portrait of Isabella Rossi, Balayage Specialist"},
      ]}
      title="Meet Our Master Stylists"
      description="Decades of combined expertise, blending time-honored techniques with contemporary artistry."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardThirteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "t1",          name: "Elisa V.",          handle: "@elisa_beauty",          testimonial: "Salon Shelimar is simply the best! Sophia transformed my hair with the perfect cut and color. I always leave feeling amazing and confident.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/deaf-woman-communicating-through-sign-language_23-2148590375.jpg",          imageAlt: "Portrait of Elisa V."},
        {
          id: "t2",          name: "David M.",          handle: "@david_groom",          testimonial: "Mark's precision cuts are unmatched. Every time I get a haircut, it's exactly what I wanted. Highly recommend for men's styling!",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-hair-salon_23-2150665449.jpg",          imageAlt: "Portrait of David M."},
        {
          id: "t3",          name: "Sarah J.",          handle: "@sarah_styles",          testimonial: "Isabella's balayage artistry is incredible. My hair has never looked so natural and sun-kissed. The color lasts beautifully.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-glamour-model-smiling-posing-camera-feeling-happy-positive-studio-carefree-joyful-woman-with-pink-hair-wig-elegant-makeup-doing-sensual-attractive-moves_482257-51058.jpg",          imageAlt: "Portrait of Sarah J."},
        {
          id: "t4",          name: "Christine L.",          handle: "@christine_chic",          testimonial: "A truly personalized experience. The team at Salon Shelimar listens and delivers. My deep conditioning treatment was a game-changer.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-bride-before-event_23-2149860780.jpg",          imageAlt: "Portrait of Christine L."},
        {
          id: "t5",          name: "Jessica R.",          handle: "@jessica_glows",          testimonial: "From the moment I walk in, I feel pampered. The atmosphere is serene, and the results are always stunning. My favorite salon!",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/chest-up-shot-girl-tossing-her-head-with-eyes-closed-sun_1098-19309.jpg",          imageAlt: "Portrait of Jessica R."},
      ]}
      showRating={true}
      title="What Clients Say"
      description="Our clients' words reflect the dedication and passion we pour into every service."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      title="Book Your Haircut"
      description="Schedule your personalized haircut, color, or treatment. Fill out the form below, and we'll confirm your appointment shortly. For immediate assistance, feel free to call us directly at (514) 484-6902."
      inputs={[
        {
          name: "name",          type: "text",          placeholder: "Your Name",          required: true,
        },
        {
          name: "phone",          type: "tel",          placeholder: "Your Phone Number",          required: true,
        },
        {
          name: "email",          type: "email",          placeholder: "Your Email (optional)",          required: false,
        },
      ]}
      textarea={{
        name: "message",        placeholder: "Tell us about your desired style, color, or any special requests.",        rows: 4,
      }}
      buttonText="Confirm Booking"
      useInvertedBackground={false}
      imageSrc="http://img.b2bpic.net/free-photo/medium-shot-man-getting-haircut_23-2150665403.jpg?_wi=2"
      imageAlt="Client receiving a haircut at Salon Shelimar"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="Salon Shelimar"
      columns={[
        {
          title: "Services",          items: [
            {
              label: "Haircuts",              href: "#services"},
            {
              label: "Coloring",              href: "#services"},
            {
              label: "Treatments",              href: "#services"},
            {
              label: "Styling",              href: "#services"},
          ],
        },
        {
          title: "About Us",          items: [
            {
              label: "Our Story",              href: "#about"},
            {
              label: "Our Team",              href: "#team"},
            {
              label: "Gallery",              href: "#gallery"},
          ],
        },
        {
          title: "Connect",          items: [
            {
              label: "Book Now",              href: "#contact"},
            {
              label: "Call Us",              href: "tel:+15144846902"},
            {
              label: "Get Directions",              href: "https://www.google.com/maps/dir/?api=1&destination=5769+Av.+Caldwell,+Côte+Saint-Luc,+QC+H4W+1W1"},
          ],
        },
      ]}
      copyrightText="© 2026 Salon Shelimar · Côte Saint-Luc, Quebec"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}