"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import { Scissors, Palette, Sparkles, Leaf, User } from "lucide-react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="mediumSmall"
        sizing="largeSizeMediumTitles"
        background="noiseDiagonalGradient"
        cardStyle="gradient-bordered"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="solid"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Accueil",          id: "#hero"},
        {
          name: "Services",          id: "#services"},
        {
          name: "À Propos",          id: "#about"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      brandName="Stella Coiffure"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardRotatedCarousel
      background={{
        variant: "rotated-rays-static"}}
      title="L'Excellence Capillaire à Sartrouville"
      description="Bienvenue chez Stella Coiffure. Sublimez votre beauté naturelle avec nos experts coiffeurs dans un cadre raffiné et accueillant."
      buttons={[
        {
          text: "Réserver en ligne",          href: "#contact"},
      ]}
      carouselItems={[
        {
          id: "1",          imageSrc: "http://img.b2bpic.net/free-photo/content-client-with-hair-dye_23-2147769778.jpg?_wi=1",          imageAlt: "Salon élégant"},
        {
          id: "2",          imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205863.jpg?_wi=1",          imageAlt: "Coiffure professionnelle"},
        {
          id: "3",          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-hair-salon_23-2150668433.jpg?_wi=1",          imageAlt: "Coloration experte"},
        {
          id: "4",          imageSrc: "http://img.b2bpic.net/free-photo/illuminated-couch-armchair_1203-771.jpg?_wi=1",          imageAlt: "Client satisfait"},
        {
          id: "5",          imageSrc: "http://img.b2bpic.net/free-photo/closeup-bottles-with-dispensers-liquid-soap_169016-23684.jpg",          imageAlt: "Soin relaxant"},
        {
          id: "6",          imageSrc: "http://img.b2bpic.net/free-photo/empty-wintertime-luxury-ski-resort_482257-102290.jpg",          imageAlt: "Espace design"},
      ]}
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardTwentySix
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Coupe & Style",          description: "Coupes sur mesure adaptées à votre morphologie.",          buttonIcon: Scissors,
          imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-relaxing-with-diary_23-2150522497.jpg",          imageAlt: "Front view woman relaxing with diary"},
        {
          title: "Couleur & Mèches",          description: "Techniques de coloration lumineuses et naturelles.",          buttonIcon: Palette,
          imageSrc: "http://img.b2bpic.net/free-photo/content-client-with-hair-dye_23-2147769778.jpg?_wi=2",          imageAlt: "Front view woman relaxing with diary"},
        {
          title: "Brushing",          description: "Le soin éclat pour une coiffure élégante.",          buttonIcon: Sparkles,
          imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205863.jpg?_wi=2",          imageAlt: "Front view woman relaxing with diary"},
        {
          title: "Soins Profonds",          description: "Ritual de nutrition pour une chevelure saine.",          buttonIcon: Leaf,
          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-hair-salon_23-2150668433.jpg?_wi=2",          imageAlt: "Front view woman relaxing with diary"},
        {
          title: "Conseil Visagisme",          description: "Étude personnalisée de votre visage.",          buttonIcon: User,
          imageSrc: "http://img.b2bpic.net/free-photo/illuminated-couch-armchair_1203-771.jpg?_wi=2",          imageAlt: "Front view woman relaxing with diary"},
      ]}
      title="Nos Services"
      description="Des prestations personnalisées pour révéler la beauté de vos cheveux."
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      useInvertedBackground={true}
      title="À Propos"
      description="Stella Coiffure, c'est l'union de la passion et du conseil personnalisé. Notre équipe est dédiée à votre bien-être dans une ambiance chaleureuse."
      metrics={[
        {
          value: "10 ans",          title: "D'Expérience"},
        {
          value: "100%",          title: "Passion"},
        {
          value: "Sur mesure",          title: "Conseil"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/woman-using-mobile-phone-while-getting-her-hair-straightened_107420-12154.jpg"
      mediaAnimation="slide-up"
      metricsAnimation="slide-up"
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwo
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",          name: "Julie M.",          role: "Cliente",          testimonial: "Très satisfaite de ma coupe, un accueil toujours souriant !",          imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-consulting-client-salon_23-2147769879.jpg",          imageAlt: "Hairdresser consulting client in salon"},
        {
          id: "2",          name: "Thomas P.",          role: "Client",          testimonial: "Le meilleur salon de Sartrouville, conseil au top.",          imageSrc: "http://img.b2bpic.net/free-photo/content-client-with-hair-dye_23-2147769778.jpg?_wi=3",          imageAlt: "Hairdresser consulting client in salon"},
        {
          id: "3",          name: "Sophie L.",          role: "Cliente",          testimonial: "Mèches réalisées avec une grande précision, merci !",          imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205863.jpg?_wi=3",          imageAlt: "Hairdresser consulting client in salon"},
        {
          id: "4",          name: "Marc B.",          role: "Client",          testimonial: "Un salon très agréable et professionnel.",          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-hair-salon_23-2150668433.jpg?_wi=3",          imageAlt: "Hairdresser consulting client in salon"},
        {
          id: "5",          name: "Claire D.",          role: "Cliente",          testimonial: "Brushing parfait, je recommande vivement.",          imageSrc: "http://img.b2bpic.net/free-photo/illuminated-couch-armchair_1203-771.jpg?_wi=3",          imageAlt: "Hairdresser consulting client in salon"},
      ]}
      title="L'Avis de nos Clients"
      description="Plus de 100 avis clients sur Google avec une note de 4,1/5."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={true}
      title="Prendre Rendez-vous"
      description="8 avenue Jean Jaurès, 78500 Sartrouville. Ouvert jusqu'à 19h30. Téléphone : 01 80 35 18 49."
      inputs={[
        {
          name: "nom",          type: "text",          placeholder: "Votre nom",          required: true,
        },
        {
          name: "tel",          type: "tel",          placeholder: "Téléphone",          required: true,
        },
      ]}
      textarea={{
        name: "message",        placeholder: "Votre message",        rows: 4,
        required: true,
      }}
      imageSrc="http://img.b2bpic.net/free-photo/arrangement-old-objects-antiques-market_23-2148950901.jpg"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-photo/indoor-hotel-view_1417-1565.jpg"
      logoText="Stella Coiffure"
      columns={[
        {
          title: "Navigation",          items: [
            {
              label: "Accueil",              href: "#hero"},
            {
              label: "Services",              href: "#services"},
            {
              label: "Contact",              href: "#contact"},
          ],
        },
        {
          title: "Contact",          items: [
            {
              label: "Tél : 01 80 35 18 49",              href: "tel:0180351849"},
            {
              label: "Localisation Google Maps",              href: "https://maps.google.com/?q=8+avenue+Jean+Jaurès+78500+Sartrouville"},
          ],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
