"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: "https://framerusercontent.com/images/kF8qXvH9VwR8M0LpE0Vb3Z4dFk.webp",          imageAlt: "Voiture de sport rouge"},
        {
          id: "hero-carousel-2",          imageSrc: "https://framerusercontent.com/images/3G0X1G7Q3kG7X3L0X3N3Q2D1E0V.webp",          imageAlt: "Petite citadine économique"},
        {
          id: "hero-carousel-3",          imageSrc: "https://framerusercontent.com/images/B9Z2p4XlR0v1M1gG5cI1G7Q4vG0.webp",          imageAlt: "SUV familial noir"},
        {
          id: "hero-carousel-4",          imageSrc: "https://framerusercontent.com/images/T2w8G9kF3X1j5R6x0f3P1E1c2V2.webp",          imageAlt: "Minivan pour groupe"},
        {
          id: "hero-carousel-5",          imageSrc: "https://framerusercontent.com/images/M6X2L9P4h1j5R6x0f3P1E1c2V2.webp",          imageAlt: "Décapotable de luxe"},
        {
          id: "hero-carousel-6",          imageAlt: "Véhicule électrique en charge",          imageSrc: "https://framerusercontent.com/images/0N0X1B4Q2L7C3F8P9T3R5K1E0V.webp"},
      ]}
      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="https://framerusercontent.com/images/vR1m7g4T1R5h8u3i2Z2c0f1D0J0.webp"
      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: "https://framerusercontent.com/images/p9JjX0W2Fm4t9p2q6y3m1n1r0c5e.webp",              imageAlt: "Application de réservation de voiture sur smartphone"},
            {
              imageSrc: "https://framerusercontent.com/images/z2C0M7gQ4h1x5T8p3e1s0d0u2v0.webp",              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: "https://framerusercontent.com/images/d3F8e5sP9c1R0x1Z2k4w6v7i0j0.webp",              imageAlt: "Divers types de voitures sur un parking"},
            {
              imageSrc: "https://framerusercontent.com/images/h2J7v0U4m1n6o3P8q0r1s0t0u0.webp",              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: "https://framerusercontent.com/images/s7T0v2M1e3x5F8j0y0c1R4b0a2.webp",              imageAlt: "Agent de support client avec casque"},
            {
              imageSrc: "https://framerusercontent.com/images/y9K0B3G6j2V5c1h0x1Z4d0q0r0.webp",              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: "https://framerusercontent.com/images/f9D2J8X3p1V5c1h0x1Z4d0q0r0.webp",          imageAlt: "Fiat 500 blanche"},
        {
          id: "peugeot-308",          name: "Peugeot 308",          price: "60€ / jour",          variant: "Compacte",          imageSrc: "https://framerusercontent.com/images/e4W1L7P3h1j5R6x0f3P1E1c2V2.webp",          imageAlt: "Peugeot 308 bleue"},
        {
          id: "renault-clio",          name: "Renault Clio",          price: "50€ / jour",          variant: "Citadine",          imageSrc: "https://framerusercontent.com/images/t2Q7F9V0X4Y1B6G8J0K1L2M3N4O5.webp",          imageAlt: "Renault Clio rouge"},
        {
          id: "vw-golf",          name: "Volkswagen Golf",          price: "70€ / jour",          variant: "Berline",          imageSrc: "https://framerusercontent.com/images/y6Z1X5V0N9M8L7K6J5H4G3F2E1D0.webp",          imageAlt: "Volkswagen Golf noire"},
        {
          id: "nissan-qashqai",          name: "Nissan Qashqai",          price: "85€ / jour",          variant: "SUV",          imageSrc: "https://framerusercontent.com/images/r8S3P7C1B4N0M2L5K6J7H9G0F1E2.webp",          imageAlt: "Nissan Qashqai blanche"},
        {
          id: "mercedes-c",          name: "Mercedes C-Class",          price: "120€ / jour",          variant: "Luxe",          imageSrc: "https://framerusercontent.com/images/p1K6T0Z2X5V7B9N0M1L3J4H6G8F0E2.webp",          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: "https://framerusercontent.com/images/a0X4B8R6k1Y5p2z3u0v1w2x3y4z5.webp",          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: "https://framerusercontent.com/images/b1C5D9S7t2U6v3w4x5y6z7a8b9.webp",          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: "https://framerusercontent.com/images/c2E6F0T8u3V7w4x5y6z7a8b9c0.webp",          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: "https://framerusercontent.com/images/d3F7G1U9v4W8x5y6z7a8b9c0d1.webp",          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: "https://framerusercontent.com/images/e4G8H2V0w5X9y6z7a8b9c0d1e2.webp",          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="https://framerusercontent.com/images/n5M7P9R1j2K0L4Q6T8U0V2W4X6Y8Z0.webp"
      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>
  );
}