"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FooterCard from '@/components/sections/footer/FooterCard';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import TextAbout from '@/components/sections/about/TextAbout';
import { Instagram, Facebook, Twitter } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="elastic-effect"
        defaultTextAnimation="entrance-slide"
        borderRadius="soft"
        contentWidth="medium"
        sizing="medium"
        background="circleGradient"
        cardStyle="glass-elevated"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        { name: "Accueil", id: "hero" },
        { name: "À Propos", id: "about" },
        { name: "Services", id: "features" },
        { name: "Contact", id: "contact" },
      ]}
      brandName="DG AUTO"
      button={{ text: "Contact", href: "#contact" }}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardRotatedCarousel
      title="DG AUTO PERFORMANCE"
      description="Gain up to 30% more horsepower with our precision tuning experts. Libérez la puissance de votre moteur avec nos solutions de pointe."
      background={{ variant: "gradient-bars" }}
      buttons={[
        { text: "Explorer", href: "#about" },
      ]}
      carouselItems={[
        { id: "h1", imageSrc: "http://img.b2bpic.net/free-photo/technology-background-concept_23-2148882653.jpg", imageAlt: "Showroom" },
        { id: "h2", imageSrc: "http://img.b2bpic.net/electric-car-fuel-socket_107420-94938.jpg", imageAlt: "Engine" },
        { id: "h3", imageSrc: "http://img.b2bpic.net/direction-wheel-speedometer-black-car_114579-6113.jpg", imageAlt: "Interior" },
        { id: "h4", imageSrc: "http://img.b2bpic.net/dreamy-atmosphere-pastel-colored-scene-travel-content_23-2151450578.jpg", imageAlt: "Road" },
        { id: "h5", imageSrc: "http://img.b2bpic.net/retro-vhs-packaging-indoors_23-2150172435.jpg", imageAlt: "Lamp" },
        { id: "h6", imageSrc: "http://img.b2bpic.net/young-mechanic-working-air-conditioning-system-car-auto-repair-shop_637285-4283.jpg", imageAlt: "Service" },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <TextAbout
      title="Une Passion pour la Performance"
      useInvertedBackground={false}
      buttons={[
        { text: "Nos Services", href: "#features" },
      ]}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentyEight
      title="Nos Spécialités"
      description="Technologie et expertise pour votre véhicule."
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        { id: "f1", title: "Reprogrammation", subtitle: "Optimisation électronique", category: "Moteur", value: "Stage 1/2" },
        { id: "f2", title: "Entretien", subtitle: "Vidanges, freins, filtres", category: "Maintenance", value: "Expert" },
        { id: "f3", title: "Diagnostic", subtitle: "Analyse de défauts", category: "Électronique", value: "Complet" },
      ]}
    />
  </div>

  <div id="catalog" data-section="catalog">
      <ProductCardOne
      title="Composants de Haute Performance"
      description="Optimisez votre véhicule avec nos pièces sélectionnées."
      animationType="slide-up"
      gridVariant="four-items-2x2-equal-grid"
      textboxLayout="default"
      useInvertedBackground={false}
      products={[
        { id: "p1", name: "Admission Carbone", price: "499€", imageSrc: "http://img.b2bpic.net/different-car-accessories-composition_23-2149030441.jpg" },
        { id: "p2", name: "Volant Racing", price: "350€", imageSrc: "http://img.b2bpic.net/control-table-spacecraft-from-inside_23-2151828183.jpg" },
        { id: "p3", name: "Kit Frein Céramique", price: "1200€", imageSrc: "http://img.b2bpic.net/car-being-taking-care-workshop_23-2149580610.jpg" },
        { id: "p4", name: "Jantes Performance", price: "1800€", imageSrc: "http://img.b2bpic.net/close-up-metallic-car-wheel_23-2151113193.jpg" },
      ]}
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardTwo
      title="Nos Chiffres"
      description="Plus de 500 projets réalisés avec succès."
      animationType="slide-up"
      gridVariant="uniform-all-items-equal"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        { id: "m1", value: "500+", description: "Véhicules préparés" },
        { id: "m2", value: "12 ans", description: "D'expérience" },
        { id: "m3", value: "98%", description: "Clients satisfaits" },
      ]}
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTen
      title="Avis Clients"
      description="Ce qu'ils pensent de notre travail."
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        { id: "t1", title: "Service exceptionnel", quote: "Ma voiture n'a jamais été aussi rapide.", name: "Jean Dupont", role: "Client", imageSrc: "http://img.b2bpic.net/stylish-black-woman-car-salon_1157-21427.jpg" },
        { id: "t2", title: "Professionnels", quote: "Une équipe à l'écoute et très efficace.", name: "Marie L.", role: "Cliente", imageSrc: "http://img.b2bpic.net/man-buying-car_1303-13540.jpg" },
        { id: "t3", title: "Au top", quote: "Je recommande DG Auto les yeux fermés.", name: "Marc S.", role: "Client", imageSrc: "http://img.b2bpic.net/young-man-standing-by-his-car_1303-31487.jpg" },
      ]}
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      sideTitle="Questions Fréquentes"
      faqsAnimation="slide-up"
      useInvertedBackground={false}
      faqs={[
        { id: "q1", title: "Quels types de véhicules ?", content: "Toutes marques et modèles sportifs." },
        { id: "q2", title: "Garantie ?", content: "Tous nos travaux sont garantis." },
        { id: "q3", title: "Combien de temps ?", content: "Cela dépend de la prestation choisie." },
      ]}
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      text="Contactez DG Auto Performance pour transformer votre véhicule. Expertises et passion à votre service."
      background={{ variant: "gradient-bars" }}
      useInvertedBackground={false}
      buttons={[
        { text: "Prendre RDV", href: "mailto:contact@dgauto.fr" }
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterCard
      logoText="DG AUTO"
      socialLinks={[
        { icon: Instagram, href: "#", ariaLabel: "Instagram" },
        { icon: Facebook, href: "#", ariaLabel: "Facebook" },
        { icon: Twitter, href: "#", ariaLabel: "Twitter" }
      ]}
      copyrightText="© 2025 DG AUTO | Performance de précision"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}