"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import { CalendarDays, Car, Headphones } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
        contentWidth="mediumLarge"
        sizing="mediumLargeSizeLargeTitles"
        background="blurBottom"
        cardStyle="solid"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="layered"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Accueil",          id: "#home"},
        {
          name: "Véhicules",          id: "#vehicles"},
        {
          name: "Services",          id: "#features"},
        {
          name: "À Propos",          id: "#about"},
        {
          name: "Témoignages",          id: "#testimonials"},
        {
          name: "FAQ",          id: "#faq"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      button={{
        text: "Réservez Maintenant",        href: "#contact"}}
      brandName="Mag Auto"
    />
  </div>

  <div id="home" data-section="home">
      <HeroBillboardRotatedCarousel
      background={{
        variant: "radial-gradient"}}
      title="Mag Auto: Votre Chemin, Notre Voiture"
      description="Louez la voiture parfaite pour chaque occasion. Explorez notre vaste sélection de véhicules neufs et bien entretenus, disponibles pour vos aventures sur les routes."
      buttons={[
        {
          text: "Voir nos Véhicules",          href: "#vehicles"},
        {
          text: "Réservez Maintenant",          href: "#contact"},
      ]}
      carouselItems={[
        {
          id: "hero-carousel-1",          imageSrc: "http://img.b2bpic.net/free-photo/young-family-choosing-car-car-showroom_1303-17380.jpg",          imageAlt: "Voiture de sport rouge"},
        {
          id: "hero-carousel-2",          imageSrc: "http://img.b2bpic.net/free-photo/person-preparing-get-driver-license_23-2150167642.jpg",          imageAlt: "Petite citadine économique"},
        {
          id: "hero-carousel-3",          imageSrc: "http://img.b2bpic.net/free-photo/good-friends-playing-guitar-while-traveling-by-car_23-2148771860.jpg",          imageAlt: "SUV familial noir"},
        {
          id: "hero-carousel-4",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-family-looking-out-caravan-s-window_23-2148659482.jpg",          imageAlt: "Minivan pour groupe"},
        {
          id: "hero-carousel-5",          imageSrc: "http://img.b2bpic.net/free-photo/red-pickup-model-black-floor_1150-16351.jpg",          imageAlt: "Décapotable de luxe"},
        {
          id: "hero-carousel-6",          imageAlt: "Véhicule électrique en charge",          imageSrc: "http://img.b2bpic.net/free-photo/view-3d-car-with-trees_23-2151005352.jpg"},
      ]}
      autoPlay={true}
      autoPlayInterval={4000}
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      useInvertedBackground={false}
      title="À Propos de Mag Auto"
      description="Mag Auto est votre partenaire de confiance pour la location de voitures depuis plus d'une décennie. Nous nous engageons à offrir une expérience de location simple, rapide et agréable avec une flotte diversifiée et un service client irréprochable."
      metrics={[
        {
          value: "10+",          title: "Ans d'Expérience"},
        {
          value: "200+",          title: "Véhicules Modernes"},
        {
          value: "5000+",          title: "Clients Satisfaits"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/family-buying-car-dealer_1303-13702.jpg"
      imageAlt="Clés de voiture remises à un client"
      mediaAnimation="slide-up"
      metricsAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentyFive
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          title: "Réservation Facile",          description: "Réservez votre véhicule en quelques clics via notre plateforme intuitive, disponible 24/7.",          icon: CalendarDays,
          mediaItems: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/smartphone-near-calendar-paper_23-2148036901.jpg",              imageAlt: "Application de réservation de voiture sur smartphone"},
            {
              imageSrc: "http://img.b2bpic.net/free-photo/online-ticket-booking_53876-74932.jpg",              imageAlt: "Application de réservation de voiture sur smartphone"},
          ]
        },
        {
          title: "Large Sélection",          description: "Choisissez parmi une vaste flotte de véhicules, de la citadine économique au SUV familial, en passant par les voitures de luxe.",          icon: Car,
          mediaItems: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/multilevel-parking-place_1398-457.jpg",              imageAlt: "Divers types de voitures sur un parking"},
            {
              imageSrc: "http://img.b2bpic.net/free-photo/that-how-success-looks-like-girl-modern-car-salon-daytime-indoors-buying-new-vehicle_146671-16555.jpg",              imageAlt: "Divers types de voitures sur un parking"},
          ]
        },
        {
          title: "Support 24/7",          description: "Notre équipe d'assistance est disponible à tout moment pour répondre à vos questions et vous aider en cas de besoin.",          icon: Headphones,
          mediaItems: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/colleagues-working-together-call-center-office-with-coffee_23-2149256070.jpg",              imageAlt: "Agent de support client avec casque"},
            {
              imageSrc: "http://img.b2bpic.net/free-photo/joyful-colleagues-laughing-work_74855-4314.jpg",              imageAlt: "Agent de support client avec casque"},
          ]
        },
      ]}
      title="Nos Avantages Clés"
      description="Découvrez ce qui fait de Mag Auto le choix préféré pour la location de véhicules."
    />
  </div>

  <div id="vehicles" data-section="vehicles">
      <ProductCardFour
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      products={[
        {
          id: "fiat-500",          name: "Fiat 500",          price: "45€ / jour",          variant: "Économique",          imageSrc: "http://img.b2bpic.net/free-photo/woman-near-man-looking-map-positive-lady-leaning-out-from-car-near-beach_23-2148039117.jpg",          imageAlt: "Fiat 500 blanche"},
        {
          id: "peugeot-308",          name: "Peugeot 308",          price: "60€ / jour",          variant: "Compacte",          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-people-eating-near-car_23-2149437544.jpg",          imageAlt: "Peugeot 308 bleue"},
        {
          id: "renault-clio",          name: "Renault Clio",          price: "50€ / jour",          variant: "Citadine",          imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-car-voyage_23-2148619954.jpg",          imageAlt: "Renault Clio rouge"},
        {
          id: "vw-golf",          name: "Volkswagen Golf",          price: "70€ / jour",          variant: "Berline",          imageSrc: "http://img.b2bpic.net/free-photo/black-luxury-jeep-driving-road_114579-4058.jpg",          imageAlt: "Volkswagen Golf noire"},
        {
          id: "nissan-qashqai",          name: "Nissan Qashqai",          price: "85€ / jour",          variant: "SUV",          imageSrc: "http://img.b2bpic.net/free-photo/two-women-checking-map-together-while-traveling-by-car_23-2148771841.jpg",          imageAlt: "Nissan Qashqai blanche"},
        {
          id: "mercedes-c",          name: "Mercedes C-Class",          price: "120€ / jour",          variant: "Luxe",          imageSrc: "http://img.b2bpic.net/free-photo/modern-electric-crossover-driving-winter-highway-eco-mobility-snowy-road_169016-71503.jpg",          imageAlt: "Mercedes Classe C argentée"},
      ]}
      title="Notre Flotte de Véhicules"
      description="Explorez notre gamme complète de voitures, des citadines économiques aux SUV de luxe, toutes prêtes pour votre prochaine aventure."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardSeven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      metrics={[
        {
          id: "customer-satisfaction",          value: "98%",          title: "Satisfaction Client",          items: [
            "Avis positifs constants",            "Service clientèle dédié",            "Expérience de location fluide"],
        },
        {
          id: "recent-vehicles",          value: "150+",          title: "Véhicules Récentes",          items: [
            "Flotte renouvelée chaque année",            "Derniers modèles disponibles",            "Entretien rigoureux"],
        },
        {
          id: "roadside-assistance",          value: "24/7",          title: "Assistance Routière",          items: [
            "Disponible à tout moment",            "Intervention rapide partout",            "Tranquillité d'esprit garantie"],
        },
      ]}
      title="Mag Auto en Chiffres"
      description="Notre engagement envers l'excellence se reflète dans les chiffres qui parlent d'eux-mêmes."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTen
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",          title: "Service exceptionnel!",          quote: "L'expérience avec Mag Auto a été absolument parfaite. La voiture était impeccable et le personnel très accueillant. Je recommande vivement!",          name: "Julien Dubois",          role: "Entrepreneur",          imageSrc: "http://img.b2bpic.net/free-photo/young-caucasian-man-touching-rearview-sitting-car-street_839833-25870.jpg",          imageAlt: "Photo de Julien Dubois"},
        {
          id: "2",          title: "Location sans tracas",          quote: "J'ai loué une voiture pour mes vacances et tout s'est déroulé sans accroc. Le processus de réservation est simple et rapide, et les tarifs sont compétitifs.",          name: "Sophie Martin",          role: "Voyageuse",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-posing_23-2150171294.jpg",          imageAlt: "Photo de Sophie Martin"},
        {
          id: "3",          title: "Flotte de qualité supérieure",          quote: "Impressionné par la qualité et la propreté des véhicules. J'ai pu choisir exactement le modèle que je voulais. Mag Auto est mon agence de prédilection désormais.",          name: "Marc Lefevre",          role: "Professionnel de la route",          imageSrc: "http://img.b2bpic.net/free-photo/young-family-with-baby-girl-choosing-car_1303-27395.jpg",          imageAlt: "Photo de Marc Lefevre"},
        {
          id: "4",          title: "Support client réactif",          quote: "J'ai eu une petite question en cours de route et le service client a été incroyablement réactif et serviable. Un vrai plus!",          name: "Fatima Benali",          role: "Cadre commercial",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-pensive-young-man-wearing-glasses-sitting-back-seat-car-0_613910-19961.jpg",          imageAlt: "Photo de Fatima Benali"},
        {
          id: "5",          title: "Excellent rapport qualité/prix",          quote: "Mag Auto offre le meilleur rapport qualité/prix que j'ai trouvé. Des voitures récentes, un service irréprochable et des prix justes. Je reviendrai!",          name: "Thomas Petit",          role: "Étudiant",          imageSrc: "http://img.b2bpic.net/free-photo/young-couple-talking-sales-person-car-showroom_1303-15142.jpg",          imageAlt: "Photo de Thomas Petit"},
      ]}
      title="Ce que nos Clients Disent"
      description="L'expérience Mag Auto racontée par ceux qui nous font confiance pour leurs besoins en location de véhicules."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "faq-1",          title: "Quels documents sont nécessaires pour louer une voiture ?",          content: "Pour louer une voiture, vous aurez besoin d'un permis de conduire valide, d'une pièce d'identité (carte d'identité ou passeport) et d'une carte de crédit pour le dépôt de garantie."},
        {
          id: "faq-2",          title: "Quel est l'âge minimum pour louer un véhicule ?",          content: "L'âge minimum pour louer est de 21 ans. Des frais supplémentaires peuvent s'appliquer pour les conducteurs de moins de 25 ans."},
        {
          id: "faq-3",          title: "L'assurance est-elle incluse dans le prix de la location ?",          content: "Une assurance de base est généralement incluse. Des options d'assurance supplémentaires pour une couverture plus complète sont disponibles et recommandées."},
        {
          id: "faq-4",          title: "Puis-je modifier ou annuler ma réservation ?",          content: "Oui, les modifications et annulations sont possibles. Les conditions varient en fonction du tarif et du moment de l'annulation. Veuillez consulter nos conditions générales ou contacter notre service client."},
        {
          id: "faq-5",          title: "Proposez-vous des services de livraison/collecte de véhicules ?",          content: "Oui, nous proposons des services de livraison et de collecte à des endroits spécifiques moyennant des frais supplémentaires. Veuillez nous contacter pour organiser ce service."},
      ]}
      title="Questions Fréquemment Posées"
      description="Trouvez les réponses à vos interrogations les plus courantes concernant la location de véhicules avec Mag Auto."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={false}
      background={{
        variant: "rotated-rays-animated-grid"}}
      tag="Contactez-nous"
      title="Prêt à Rouler ?"
      description="Remplissez le formulaire ci-dessous pour toute question ou pour démarrer votre réservation. Notre équipe est là pour vous aider."
      inputPlaceholder="Votre adresse email"
      buttonText="Envoyer le Message"
      termsText="En envoyant ce formulaire, vous acceptez nos conditions générales et notre politique de confidentialité."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-photo/moving-car-road-top-view_23-2148242179.jpg"
      imageAlt="Vue de la route de nuit"
      logoText="Mag Auto"
      columns={[
        {
          title: "Liens Rapides",          items: [
            {
              label: "Accueil",              href: "#home"},
            {
              label: "Véhicules",              href: "#vehicles"},
            {
              label: "Services",              href: "#features"},
          ],
        },
        {
          title: "Informations",          items: [
            {
              label: "À Propos",              href: "#about"},
            {
              label: "FAQ",              href: "#faq"},
            {
              label: "Contact",              href: "#contact"},
          ],
        },
        {
          title: "Légal",          items: [
            {
              label: "Politique de Confidentialité",              href: "#"},
            {
              label: "Conditions Générales",              href: "#"},
          ],
        },
      ]}
      copyrightText="© 2024 Mag Auto. Tous droits réservés."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
