"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroOverlay from "@/components/sections/hero/HeroOverlay";
import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
import FeatureCardTwentyThree from "@/components/sections/feature/FeatureCardTwentyThree";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterBase from "@/components/sections/footer/FooterBase";
import { Heart, Phone, Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="largeSizeMediumTitles"
      background="circleGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Tendance Vintage"
          navItems={[
            { name: "Accueil", id: "hero" },
            { name: "À propos", id: "about" },
            { name: "Services", id: "services" },
            { name: "Galerie", id: "gallery" },
            { name: "Avis", id: "testimonials" },
            { name: "Contact", id: "contact" },
          ]}
          button={{ text: "Appeler", href: "tel:05567279353" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroOverlay
          title="Tendance Vintage"
          description="Salon de coiffure au cœur de Bordeaux"
          tag="Depuis 2010 | Excellence & Élégance"
          tagAnimation="blur-reveal"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXIQ1nqdfSgd3JeWRNW0QbYaXZ/uploaded-1772733679520-7kbanhde.jpg"
          imageAlt="Luxury hair salon interior at Tendance Vintage"
          textPosition="bottom-left"
          showBlur={true}
          showDimOverlay={true}
          buttonAnimation="blur-reveal"
          buttons={[
            { text: "Appeler", href: "tel:05567279353" },
            { text: "Itinéraire", href: "https://maps.google.com/?q=204+Rue+Sainte-Catherine,+33000+Bordeaux,+France" },
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TestimonialAboutCard
          tag="À propos de nous"
          tagIcon={Sparkles}
          tagAnimation="blur-reveal"
          title="Un salon d'exception pour vos cheveux"
          description="Tendance Vintage"
          subdescription="204 Rue Sainte-Catherine, Bordeaux"
          icon={Heart}
          imageSrc="http://img.b2bpic.net/free-photo/skies-snowboard-lounge-area_482257-76730.jpg"
          imageAlt="Interior view of Tendance Vintage salon"
          mediaAnimation="blur-reveal"
          useInvertedBackground={false}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardTwentyThree
          title="Nos Services Experts"
          description="Découvrez notre gamme complète de services capillaires haut de gamme, conçus pour sublimer vos cheveux"
          tag="Expertise & Qualité"
          tagAnimation="blur-reveal"
          features={[
            {
              id: "1",              title: "Balayage",              tags: ["Coloration", "Tendance"],
              imageSrc: "http://img.b2bpic.net/free-photo/blonde-sisters-little-chat_329181-10653.jpg",              imageAlt: "Professional balayage highlighting service"},
            {
              id: "2",              title: "Coloration",              tags: ["Couleur", "Professionnel"],
              imageSrc: "http://img.b2bpic.net/free-photo/cheerful-girl-process-hair-coloring_23-2147769774.jpg?_wi=1",              imageAlt: "Professional hair coloring treatment"},
            {
              id: "3",              title: "Coiffage",              tags: ["Styling", "Premium"],
              imageSrc: "http://img.b2bpic.net/free-photo/woman-drying-wet-hair-blonde_23-2147769809.jpg",              imageAlt: "Professional hair styling service"},
            {
              id: "4",              title: "Brushing",              tags: ["Lissage", "Élégance"],
              imageSrc: "http://img.b2bpic.net/free-photo/crop-stylist-drying-hair-with-brush_23-2147769824.jpg",              imageAlt: "Professional blowdry brushing service"},
            {
              id: "5",              title: "Lissage Brésilien",              tags: ["Traitement", "Réparation"],
              imageSrc: "http://img.b2bpic.net/free-photo/female-client-getting-her-hair-done-hairdresser_23-2150771236.jpg",              imageAlt: "Hair smoothing and keratin treatment"},
            {
              id: "6",              title: "Soins Kératine",              tags: ["Protection", "Brillance"],
              imageSrc: "http://img.b2bpic.net/free-photo/woman-washing-head-hairsalon_1157-27181.jpg",              imageAlt: "Premium keratin hair care treatment"},
            {
              id: "7",              title: "Mèches",              tags: ["Highlights", "Nuance"],
              imageSrc: "http://img.b2bpic.net/free-photo/cheerful-girl-process-hair-coloring_23-2147769774.jpg?_wi=2",              imageAlt: "Professional hair highlights service"},
            {
              id: "8",              title: "Taille de Barbe",              tags: ["Homme", "Précision"],
              imageSrc: "http://img.b2bpic.net/free-photo/professional-hairdresser-modeling-beard-barbershop-close-up-photo_613910-18422.jpg",              imageAlt: "Professional beard trimming service"},
          ]}
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={true}
          buttonAnimation="blur-reveal"
        />
      </div>

      <div id="gallery" data-section="gallery">
        <ProductCardOne
          title="Notre Galerie"
          description="Découvrez les réalisations de nos stylistes experts à travers une sélection de nos plus beaux travaux"
          tag="Portfolio"
          tagAnimation="blur-reveal"
          products={[
            {
              id: "1",              name: "Coupe & Coloration",              price: "Inspiration",              imageSrc: "http://img.b2bpic.net/free-photo/woman-preparing-girl-haircut-procedure_23-2147769867.jpg",              imageAlt: "Professional haircut and color work"},
            {
              id: "2",              name: "Balayage Moderne",              price: "Tendance",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-black-sweater-standing-posing_114579-81883.jpg?_wi=1",              imageAlt: "Modern balayage highlighting technique"},
            {
              id: "3",              name: "Styling Élégant",              price: "Raffiné",              imageSrc: "http://img.b2bpic.net/free-photo/blonde-woman-getting-her-hair-done_23-2148108776.jpg",              imageAlt: "Elegant professional hair styling"},
            {
              id: "4",              name: "Transformation",              price: "Luxe",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-black-sweater-standing-posing_114579-81883.jpg?_wi=2",              imageAlt: "Complete hair transformation result"},
          ]}
          gridVariant="two-columns-alternating-heights"
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          buttonAnimation="blur-reveal"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwo
          title="Témoignages Clients"
          description="Découvrez ce que nos clients satisfaits pensent de nos services et de notre expertise"
          tag="4.9 ⭐ / 571 avis"
          tagAnimation="blur-reveal"
          testimonials={[
            {
              id: "1",              name: "Marie Dubois",              role: "Professionnelle",              testimonial: "Tendance Vintage est un véritable havre de paix. Les stylistes sont exceptionnels et comprennent mes besoins. Je recommande vivement !",              imageSrc: "http://img.b2bpic.net/free-photo/casual-smile-street-style-background-spring_1139-777.jpg",              imageAlt: "Client testimonial - Marie Dubois",              icon: Heart,
            },
            {
              id: "2",              name: "Sophie Bernard",              role: "Entrepreneuse",              testimonial: "Un service de qualité premium avec une ambiance chaleureuse. Mes cheveux n'ont jamais été aussi beaux. Merci beaucoup !",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg?_wi=1",              imageAlt: "Client testimonial - Sophie Bernard",              icon: Heart,
            },
            {
              id: "3",              name: "Isabelle Martin",              role: "Consultante",              testimonial: "Les stylistes maîtrisent parfaitement leur art. J'ai eu une transformation complète et je suis ravie du résultat. À recommander sans hésiter.",              imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg",              imageAlt: "Client testimonial - Isabelle Martin",              icon: Heart,
            },
            {
              id: "4",              name: "Catherine Rousseau",              role: "Directrice",              testimonial: "Depuis plusieurs années, c'est ici que je viens pour mes soins capillaires. L'équipe est professionnelle et bienveillante. Lieu unique !",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg?_wi=2",              imageAlt: "Client testimonial - Catherine Rousseau",              icon: Heart,
            },
            {
              id: "5",              name: "Véronique Petit",              role: "Avocate",              testimonial: "Un salon d'exception à Bordeaux. Les stylistes écoutent vos envies et créent des résultats magnifiques. Je ne changerai jamais !",              imageSrc: "http://img.b2bpic.net/free-photo/happy-businesswoman-smiling-looking-camera-successful-confident-grey-haired-manager-sitting-office-room-workplace-business-management-concept_74855-7343.jpg",              imageAlt: "Client testimonial - Véronique Petit",              icon: Heart,
            },
            {
              id: "6",              name: "Monique Leclerc",              role: "Médecin",              testimonial: "Service impeccable, stylistes talentueux et ambiance luxueuse. C'est mon endroit préféré pour me sentir bien. Vivement la prochaine visite !",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-middle-aged-attractive-woman-showing-thumb-up-outdoors_1262-12526.jpg",              imageAlt: "Client testimonial - Monique Leclerc",              icon: Heart,
            },
          ]}
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={true}
          carouselMode="auto"
          buttonAnimation="blur-reveal"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          title="Nos Succès"
          description="Des chiffres qui parlent de notre engagement envers l'excellence"
          tag="Performance"
          tagAnimation="blur-reveal"
          metrics={[
            { id: "1", value: "571", description: "Avis Clients Satisfaits" },
            { id: "2", value: "4.9", description: "Note Moyenne ⭐" },
            { id: "3", value: "15+", description: "Années d'Expérience" },
            { id: "4", value: "1000+", description: "Clients Réguliers" },
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          buttonAnimation="blur-reveal"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Nous Contacter"
          tagIcon={Phone}
          tagAnimation="blur-reveal"
          title="Prêt à transformer vos cheveux ?"
          description="Réservez votre rendez-vous dès aujourd'hui ou visitez-nous au cœur de Bordeaux. Nos stylistes experts vous accueillent du lundi au samedi."
          buttons={[
            { text: "Appeler", href: "tel:05567279353" },
            { text: "Itinéraire", href: "https://maps.google.com/?q=204+Rue+Sainte-Catherine,+33000+Bordeaux,+France" },
          ]}
          buttonAnimation="blur-reveal"
          background={{ variant: "plain" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="Tendance Vintage"
          copyrightText="© 2025 Tendance Vintage. Tous droits réservés."
          columns={[
            {
              title: "Information",              items: [
                { label: "Horaires", href: "#" },
                { label: "Services", href: "#services" },
                { label: "Notre Équipe", href: "#about" },
              ],
            },
            {
              title: "Contact",              items: [
                { label: "Téléphone: 05 56 72 79 35", href: "tel:05567279353" },
                { label: "Adresse: 204 Rue Sainte-Catherine, 33000 Bordeaux", href: "https://maps.google.com/?q=204+Rue+Sainte-Catherine,+33000+Bordeaux,+France" },
                { label: "Facebook", href: "https://facebook.com" },
              ],
            },
            {
              title: "Légal",              items: [
                { label: "Conditions d'Utilisation", href: "#" },
                { label: "Politique de Confidentialité", href: "#" },
                { label: "Mentions Légales", href: "#" },
              ],
            },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
