"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Sparkles, HeartHandshake, Scissors, Star, Crown } from "lucide-react";

export default function Page() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="mediumLargeSizeLargeTitles"
      background="blurBottom"
      cardStyle="outline"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Élégance Beauté"
          navItems={[
            { name: "Accueil", id: "hero" },
            { name: "À Propos", id: "about" },
            { name: "Services", id: "services" },
            { name: "Produits", id: "products" },
            { name: "Équipe", id: "team" },
            { name: "Tarifs", id: "pricing" },
            { name: "Témoignages", id: "testimonials" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>
      <div id="hero" data-section="hero">
        <HeroOverlay
          title="Sublimez Votre Beauté"
          description="Découvrez l'excellence de nos soins et laissez-nous révéler votre éclat naturel avec des traitements personnalisés."
          buttons={[
            { text: "Prenez Rendez-vous", href: "#contact" },
            { text: "Nos Services", href: "#services" }
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/woman-donating-hair-cancer_657883-597.jpg"
          imageAlt="Intérieur élégant de salon de beauté avec une femme recevant un soin"
          showDimOverlay={true}
          showBlur={true}
          textPosition="bottom"
        />
      </div>
      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          title="Notre Histoire & Philosophie"
          description="Depuis 20XX, notre passion est de vous offrir une expérience beauté unique. Nous combinons expertise, produits de qualité supérieure et un service personnalisé pour garantir votre bien-être et votre satisfaction."
          metrics={[
            { value: "10+", title: "Années d'Expérience" },
            { value: "500+", title: "Clients Satisfaits" },
            { value: "20+", title: "Services Spécialisés" }
          ]}
          useInvertedBackground={false}
          imageSrc="http://img.b2bpic.net/free-photo/high-angle-woman-laying-bed_23-2149341424.jpg"
          imageAlt="Zone de réception moderne d'un salon de beauté"
          mediaAnimation="slide-up"
        />
      </div>
      <div id="services" data-section="services">
        <FeatureCardTwentyFive
          title="Nos Services Exclusifs"
          description="Profitez d'une gamme complète de traitements conçus pour répondre à tous vos besoins de beauté et de relaxation, prodigués par nos experts."
          features={[
            {
              title: "Soins du Visage Personnalisés",              description: "Des traitements adaptés à chaque type de peau pour un teint éclatant et revitalisé.",              icon: Sparkles,
              mediaItems: [
                { imageSrc: "http://img.b2bpic.net/free-photo/make-up-concept-with-golden-plant_23-2149030352.jpg", imageAlt: "Femme recevant un soin du visage" },
                { imageSrc: "http://img.b2bpic.net/free-photo/close-beauty-portrait-topless-woman-with-perfect-skin-natural-makeup-holds-serum-youth-skin-hydration-dropper-with-cosmetic-oilx9_343596-7963.jpg", imageAlt: "Atmosphère relaxante de spa avec des produits" }
              ]
            },
            {
              title: "Manucure & Pédicure de Luxe",              description: "Des mains et des pieds impeccables avec nos soins complets et nos vernis longue durée.",              icon: HeartHandshake,
              mediaItems: [
                { imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-feet-with-red-nailpolish-getting-relazing-foot-massage-spa-salon_176420-42487.jpg", imageAlt: "Manucure en cours dans un salon" },
                { imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-female-getting-her-nails-fixed-by-manicurist-inside-room-beauty-manicure-nails-hand-self-care_140725-65113.jpg", imageAlt: "Flacons de vernis à ongles colorés" }
              ]
            },
            {
              title: "Coiffure & Coloration Tendance",              description: "Transformez votre look avec nos coiffeurs experts et nos techniques de coloration innovantes.",              icon: Scissors,
              mediaItems: [
                { imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blonde-woman-red-evening-dress_176420-3715.jpg", imageAlt: "Coiffeur coupant les cheveux d'une cliente" },
                { imageSrc: "http://img.b2bpic.net/free-photo/front-view-bride-getting-hair-done_23-2149860769.jpg", imageAlt: "Femme avec des cheveux longs et sains" }
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>
      <div id="products" data-section="products">
        <ProductCardTwo
          title="Découvrez Nos Produits"
          description="Une sélection rigoureuse de produits professionnels et haut de gamme pour prolonger les bienfaits de vos soins à la maison."
          products={[
            { id: "1", brand: "Éclat Botanique", name: "Crème Hydratante Intense", price: "49.99€", rating: 5, reviewCount: "120 avis", imageSrc: "http://img.b2bpic.net/free-photo/pink-container-flowers-arrangement_23-2149270053.jpg", imageAlt: "Pot de crème hydratante de luxe" },
            { id: "2", brand: "Senteur Divine", name: "Parfum Floral Éternel", price: "75.00€", rating: 4, reviewCount: "85 avis", imageSrc: "http://img.b2bpic.net/free-photo/close-up-perfume-floating-water_23-2150963092.jpg", imageAlt: "Bouteille de parfum élégante" },
            { id: "3", brand: "Maquillage Pro", name: "Palette d'Ombres à Paupières", price: "35.50€", rating: 5, reviewCount: "150 avis", imageSrc: "http://img.b2bpic.net/free-photo/elevated-view-eye-shadow-powders-blue-background_23-2147878902.jpg", imageAlt: "Palette de maquillage avec pinceaux" },
            { id: "4", brand: "Capil'Action", name: "Sérum Réparateur Cheveux", price: "29.99€", rating: 4, reviewCount: "92 avis", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-using-dry-shampoo-home_23-2150706302.jpg", imageAlt: "Bouteilles de shampoing et revitalisant" },
            { id: "5", brand: "Douceur Corps", name: "Lait Corporel Nourrissant", price: "22.00€", rating: 5, reviewCount: "60 avis", imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-trying-cream-hands_23-2148660812.jpg", imageAlt: "Lait corporel sur une main" },
            { id: "6", brand: "NailArt Premium", name: "Kit Vernis Semi-Permanent", price: "59.90€", rating: 4, reviewCount: "78 avis", imageSrc: "http://img.b2bpic.net/free-photo/still-life-tools-nail-art_23-2150321317.jpg", imageAlt: "Kit de vernis à ongles" }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>
      <div id="team" data-section="team">
        <TeamCardEleven
          title="Rencontrez Notre Équipe d'Experts"
          description="Nos esthéticiennes qualifiées et passionnées sont là pour vous guider et vous conseiller, garantissant une expérience de beauté exceptionnelle et personnalisée."
          groups={[
            {
              id: "experts",              groupTitle: "Nos Spécialistes de la Beauté",              members: [
                { id: "member-1", title: "Sophie Dubois", subtitle: "Esthéticienne Principale", detail: "Experte en soins du visage et du corps, Sophie est reconnue pour ses techniques innovantes et son approche douce.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67053.jpg", imageAlt: "Portrait de Sophie Dubois" },
                { id: "member-2", title: "Marc Léger", subtitle: "Coiffeur Styliste", detail: "Avec 10 ans d'expérience, Marc maîtrise l'art de la coupe et de la coloration, créant des looks sur mesure.", imageSrc: "http://img.b2bpic.net/free-photo/confident-young-beautiful-female-barber-uniform-grabbed-hair-isolated-green-wall_141793-105669.jpg", imageAlt: "Portrait de Marc Léger" },
                { id: "member-3", title: "Clara Rousseau", subtitle: "Prothésiste Ongulaire", detail: "Créative et minutieuse, Clara réalise des manucures et pédicures d'exception avec des designs uniques.", imageSrc: "http://img.b2bpic.net/free-photo/model-with-beautiful-blue-nails_23-2149921693.jpg", imageAlt: "Portrait de Clara Rousseau" }
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>
      <div id="pricing" data-section="pricing">
        <PricingCardTwo
          title="Nos Tarifs & Forfaits"
          description="Découvrez nos options flexibles et nos forfaits avantageux, conçus pour une beauté accessible à tous et adaptée à vos besoins."
          plans={[
            { id: "basic", badge: "Découverte", badgeIcon: Sparkles, price: "50€", subtitle: "Soin Express", buttons: [{ text: "Réserver", href: "#contact" }], features: ["Nettoyage de peau", "Masque hydratant", "Massage rapide du visage"] },
            { id: "standard", badge: "Populaire", badgeIcon: Star, price: "90€", subtitle: "Forfait Harmonie", buttons: [{ text: "Réserver", href: "#contact" }], features: ["Soin du visage complet", "Manucure express", "Massage relaxant du dos"] },
            { id: "premium", badge: "Luxe", badgeIcon: Crown, price: "150€", subtitle: "Journée Détente", buttons: [{ text: "Réserver", href: "#contact" }], features: ["Soin anti-âge premium", "Manucure & Pédicure de luxe", "Coiffure brushing", "Massage corporel complet"] }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="Ce Que Nos Clients Disent"
          description="Vos retours sont notre plus belle récompense. Lisez les expériences de nos clients satisfaits qui ont trouvé leur bonheur chez nous."
          testimonials={[
            { id: "1", name: "Laura G.", role: "Cliente Fidèle", company: "Montréal", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/optimistic-confident-carefree-chill-african-american-female_176420-31297.jpg", imageAlt: "Laura G. souriante après un soin" },
            { id: "2", name: "Thomas D.", role: "Client", company: "Laval", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/lesbian-couple-looking-their-laptop_23-2149123898.jpg", imageAlt: "Thomas D. satisfait de sa coupe de cheveux" },
            { id: "3", name: "Émilie P.", role: "Cliente", company: "Longueuil", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-with-glowing-skin-natural-sunlight_23-2151992832.jpg", imageAlt: "Émilie P. heureuse après un soin du visage" },
            { id: "4", name: "Jean-Luc M.", role: "Client", company: "Brossard", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-getting-haircut_23-2150665403.jpg", imageAlt: "Jean-Luc M. après un soin de toilettage" },
            { id: "5", name: "Chloé R.", role: "Cliente", company: "Terrebonne", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/love-mother-daughter_496169-200.jpg", imageAlt: "Chloé R. après une manucure" }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>
      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Questions Fréquentes"
          description="Trouvez rapidement les réponses à vos interrogations sur nos services, nos produits et nos politiques de réservation."
          faqs={[
            { id: "faq-1", title: "Comment prendre rendez-vous ?", content: "Vous pouvez prendre rendez-vous directement en ligne via notre site web, par téléphone, ou en vous rendant à notre salon pendant les heures d'ouverture." },
            { id: "faq-2", title: "Quels types de produits utilisez-vous ?", content: "Nous utilisons exclusivement des produits de marques professionnelles reconnues pour leur qualité et leur efficacité, respectueux de votre peau et de l'environnement." },
            { id: "faq-3", title: "Proposez-vous des cartes-cadeaux ?", content: "Oui, nous proposons des cartes-cadeaux personnalisables, valables sur tous nos services et produits. C'est le cadeau idéal pour faire plaisir à vos proches !" }
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/medium-shot-smiley-women-with-coffee-cups_23-2149308476.jpg"
          imageAlt="Femme regardant des produits de soin devant un miroir"
          mediaAnimation="slide-up"
          mediaPosition="left"
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
        />
      </div>
      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Contactez-Nous"
          description="Nous sommes à votre écoute pour toute question, prise de rendez-vous ou demande de renseignements. N'hésitez pas à nous laisser un message."
          inputs={[
            { name: "name", type: "text", placeholder: "Votre Nom Complet", required: true },
            { name: "email", type: "email", placeholder: "Votre Adresse Email", required: true },
            { name: "phone", type: "tel", placeholder: "Votre Numéro de Téléphone" }
          ]}
          textarea={{ name: "message", placeholder: "Votre Message", rows: 4, required: true }}
          useInvertedBackground={true}
          imageSrc="http://img.b2bpic.net/free-photo/minimalist-office-interior-design_23-2151826280.jpg"
          imageAlt="Réception du salon de beauté"
          mediaPosition="right"
          buttonText="Envoyer le message"
          mediaAnimation="none"
        />
      </div>
      <div id="footer" data-section="footer">
        <FooterBaseReveal
          logoText="Élégance Beauté"
          columns={[
            {
              title: "Services",              items: [
                { label: "Soins du Visage", href: "#services" },
                { label: "Manucure & Pédicure", href: "#services" },
                { label: "Coiffure", href: "#services" },
                { label: "Produits de Beauté", href: "#products" }
              ]
            },
            {
              title: "Informations",              items: [
                { label: "À Propos de Nous", href: "#about" },
                { label: "Notre Équipe", href: "#team" },
                { label: "Témoignages", href: "#testimonials" },
                { label: "FAQ", href: "#faq" }
              ]
            },
            {
              title: "Contact",              items: [
                { label: "Prendre Rendez-vous", href: "#contact" },
                { label: "Localisation", href: "#contact" },
                { label: "Appelez-nous", href: "tel:+123456789" },
                { label: "Envoyez-nous un Email", href: "mailto:contact@elegancebeaute.com" }
              ]
            }
          ]}
          copyrightText="© 2024 Élégance Beauté. Tous droits réservés."
        />
      </div>
    </ThemeProvider>
  );
}
