"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import { CheckCircle, Headphones, MapPin, Shield, Star, Tag, Truck, Users, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="mediumLarge"
        sizing="largeSmallSizeMediumTitles"
        background="fluid"
        cardStyle="inset"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Accueil",          id: "/"},
        {
          name: "Véhicules",          id: "#featured-vehicles"},
        {
          name: "Services",          id: "#why-us"},
        {
          name: "Contact",          id: "#cta-banner"},
      ]}
      logoSrc="http://img.b2bpic.net/free-vector/best-dad-award_23-2147501669.jpg"
      logoAlt="FAHD AUTO SETIF Logo"
      brandName="FAHD AUTO SETIF"
      button={{
        text: "WhatsApp",        href: "https://wa.me/213550208888?text=Bonjour,%20je%20suis%20intéressé%20par%20vos%20véhicules"}}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitTestimonial
      useInvertedBackground={false}
      background={{
        variant: "plain"}}
      title="L'Excellence Automobile"
      description="Vente de véhicules neufs et d'occasion — Toutes marques"
      testimonials={[
        {
          name: "FAHD AUTO SETIF",          handle: "N°1 en Algérie 🥇",          testimonial: "+10 Ans d'Expérience",          rating: 5,
          imageSrc: "asset://hero-testimonial-1",          imageAlt: "Badge d'expérience"},
        {
          name: "FAHD AUTO SETIF",          handle: "La Référence",          testimonial: "+500 Véhicules Vendus",          rating: 5,
          imageSrc: "asset://hero-testimonial-2",          imageAlt: "Badge de véhicules vendus"},
        {
          name: "FAHD AUTO SETIF",          handle: "Communauté Active",          testimonial: "78 000 Abonnés Instagram",          rating: 5,
          imageSrc: "asset://hero-testimonial-3",          imageAlt: "Badge communauté Instagram"},
        {
          name: "FAHD AUTO SETIF",          handle: "Confiance Client",          testimonial: "92% Clients Satisfaits",          rating: 5,
          imageSrc: "asset://hero-testimonial-4",          imageAlt: "Badge de satisfaction client"},
        {
          name: "FAHD AUTO SETIF",          handle: "Service Premium",          testimonial: "Support client dédié",          rating: 5,
          imageSrc: "asset://hero-testimonial-5",          imageAlt: "Badge service premium"},
      ]}
      testimonialRotationInterval={3000}
      tag="SÉTIF — ALGÉRIE"
      buttons={[
        {
          text: "Voir nos véhicules",          href: "#featured-vehicles"},
        {
          text: "Nous contacter sur WhatsApp",          href: "https://wa.me/213550208888?text=Je suis intéressé par vos véhicules"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/portrait-salesman-car-dealership_23-2148130126.jpg"
      videoSrc="/videos/luxury-cars-algeria.mp4"
      imageAlt="Luxury cars driving in Algerian landscape, FAHD AUTO showroom"
      videoAriaLabel="Video of luxury cars and showroom"
      mediaAnimation="opacity"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/happy-couple-against-building-new-brick-house_1398-5104.jpg",          alt: "Happy customer"},
        {
          src: "http://img.b2bpic.net/free-photo/portrait-happy-customers-car-showroom-browsing-automobiles-catalog_482257-124583.jpg",          alt: "Satisfied client portrait"},
        {
          src: "http://img.b2bpic.net/free-photo/close-up-customer-with-business-person-car-dealership_23-2149117151.jpg",          alt: "Customer with business person"},
        {
          src: "http://img.b2bpic.net/free-photo/close-up-seller-car-dealership_23-2149106152.jpg",          alt: "Car sales executive"},
        {
          src: "http://img.b2bpic.net/free-photo/beautiful-brunette-woman-standing-bricks-wall-with-happy-cool-smile-face-lucky-person_839833-8060.jpg",          alt: "Smiling female client"},
      ]}
      avatarText="+1000 clients nous font confiance"
      marqueeItems={[
        {
          type: "text-icon",          text: "Qualité Garantie",          icon: CheckCircle,
        },
        {
          type: "text-icon",          text: "Meilleurs Prix",          icon: Tag,
        },
        {
          type: "text-icon",          text: "Conseils Experts",          icon: Users,
        },
        {
          type: "text-icon",          text: "Livraison Rapide",          icon: Truck,
        },
        {
          type: "text-icon",          text: "Service Après-Vente",          icon: Headphones,
        },
      ]}
    />
  </div>

  <div id="featured-vehicles" data-section="featured-vehicles">
      <ProductCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      carouselMode="buttons"
      products={[
        {
          id: "prod-1",          brand: "Audi",          name: "RS6 Performance",          price: "Prix sur demande",          rating: 5,
          reviewCount: "20+",          imageSrc: "http://img.b2bpic.net/free-photo/auto-racing-blue-jeep-grey-sedan-sport-car_114579-4041.jpg",          imageAlt: "Audi RS6 Performance 2025"},
        {
          id: "prod-2",          brand: "Porsche",          name: "Cayenne S 4.0L V8",          price: "Prix sur demande",          rating: 5,
          reviewCount: "15+",          imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-headlights-modern-red-car_181624-22677.jpg",          imageAlt: "Porsche Cayenne S 4.0L V8 2025"},
        {
          id: "prod-3",          brand: "Mercedes",          name: "GLE 300d 4MATIC",          price: "3,000,000 DZD",          rating: 4,
          reviewCount: "10+",          imageSrc: "http://img.b2bpic.net/free-photo/woman-enjoying-her-financially-independence-while-buying-car_23-2149434336.jpg",          imageAlt: "Mercedes GLE 300d 4MATIC"},
        {
          id: "prod-4",          brand: "Kia",          name: "Seltos Premium 1.5L",          price: "Prix sur demande",          rating: 5,
          reviewCount: "25+",          imageSrc: "http://img.b2bpic.net/free-photo/pretty-girl-travelling-another-city_1303-22423.jpg",          imageAlt: "Kia Seltos Premium 1.5L 2025"},
        {
          id: "prod-5",          brand: "BYD",          name: "Han 2024",          price: "Prix sur demande",          rating: 4,
          reviewCount: "12+",          imageSrc: "http://img.b2bpic.net/free-photo/couple-taking-photos-with-car-outdoors_23-2148150156.jpg",          imageAlt: "BYD Han 2024"},
        {
          id: "prod-6",          brand: "Audi",          name: "RS3 2.5L 400cv",          price: "Prix sur demande",          rating: 4,
          reviewCount: "5+",          imageSrc: "http://img.b2bpic.net/free-vector/best-dad-award_23-2147501669.jpg",          imageAlt: "FAHD AUTO SETIF logo gold black"},
      ]}
      title="Véhicules en Vedette"
      description="Découvrez notre sélection exclusive du moment"
      buttons={[
        {
          text: "Voir tout le stock →",          href: "#featured-vehicles"},
      ]}
    />
  </div>

  <div id="brands-marquee" data-section="brands-marquee">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "Audi",        "Mercedes-Benz",        "Porsche",        "BMW",        "Kia",        "BYD",        "Lamborghini",        "Fiat",        "Dacia",        "Peugeot",        "Volkswagen",        "Toyota"]}
      title="Marques Disponibles"
      description="Découvrez notre large éventail de marques partenaires"
      speed={40}
      showCard={false}
    />
  </div>

  <div id="why-us" data-section="why-us">
      <FeatureHoverPattern
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          icon: Shield,
          title: "Garantie de Confiance",          description: "Tous nos véhicules sont vérifiés et certifiés."},
        {
          icon: Star,
          title: "N°1 en Algérie",          description: "La référence automobile à Sétif depuis des années."},
        {
          icon: Zap,
          title: "Multi-Marques",          description: "Luxe, SUV, citadines : un seul endroit pour tout trouver."},
        {
          icon: Users,
          title: "Service Personnalisé",          description: "Conseils d'experts pour chaque profil d'acheteur."},
        {
          icon: MapPin,
          title: "Facilement Accessible",          description: "Sur la RN28, Aïn Sfiha, Sétif."},
      ]}
      title="Pourquoi FAHD AUTO ?"
      description="Votre partenaire de confiance pour l'achat et la vente de véhicules en Algérie."
      buttons={[
        {
          text: "Découvrir nos services",          href: "#why-us"},
      ]}
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      carouselMode="auto"
      testimonials={[
        {
          id: "1",          name: "Ahmed Benali",          role: "Entrepreneur",          company: "Sétif",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/man-checking-out-new-car_23-2148130138.jpg",          imageAlt: "Ahmed Benali"},
        {
          id: "2",          name: "Fatima Zohra",          role: "Avocate",          company: "Constantine",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/casual-woman-with-denim-jacket-smiling_1187-1316.jpg",          imageAlt: "Fatima Zohra"},
        {
          id: "3",          name: "Karim Meziane",          role: "Directeur Commercial",          company: "Alger",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/employee-working-with-trendy-clothes_482257-78860.jpg",          imageAlt: "Karim Meziane"},
        {
          id: "4",          name: "Nadia Cherif",          role: "Enseignante",          company: "Batna",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/friendly-car-salesman-showcasing-dealership-vehicles-clients_482257-124573.jpg",          imageAlt: "Nadia Cherif"},
        {
          id: "5",          name: "Yacine & Sarah",          role: "Jeunes Mariés",          company: "Sétif",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/couple-sitting-car-trunk-gesturing-while-taking-self-portrait_23-2147863561.jpg",          imageAlt: "Yacine and Sarah"},
        {
          id: "6",          name: "Famille Boudjemaa",          role: "Famille",          company: "Béjaïa",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/family-enjoying-views-car-trip_23-2149401822.jpg",          imageAlt: "Famille Boudjemaa"},
      ]}
      title="Ce que disent nos clients"
      description="92% de recommandation — 1 118+ avis sur Facebook"
    />
  </div>

  <div id="social-feed" data-section="social-feed">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={true}
      names={[
        "Instagram",        "Facebook",        "TikTok",        "YouTube"]}
      title="Suivez-nous"
      description="@fahd_auto_setif sur Instagram — 78 000 abonnés"
      buttons={[
        {
          text: "📸 Instagram",          href: "https://www.instagram.com/fahd_auto_setif/"},
        {
          text: "👍 Facebook",          href: "https://www.facebook.com/FAHDAUTOSETIF/"},
        {
          text: "🎵 TikTok",          href: "https://www.tiktok.com/@fahdhalfaia19"},
        {
          text: "▶ YouTube",          href: "https://www.youtube.com/@fahdautosetif"},
      ]}
      showCard={true}
    />
  </div>

  <div id="cta-banner" data-section="cta-banner">
      <ContactSplitForm
      useInvertedBackground={false}
      title="Votre prochain véhicule vous attend."
      description="Contactez-nous dès maintenant sur WhatsApp ou venez nous rendre visite."
      inputs={[
        {
          name: "name",          type: "text",          placeholder: "Votre nom",          required: true,
        },
        {
          name: "email",          type: "email",          placeholder: "Votre e-mail",          required: true,
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/dark-vip-cinema-studio-still-life_23-2149500615.jpg"
      imageAlt="Modern car interior"
      mediaAnimation="none"
      mediaPosition="left"
      buttonText="Envoyer ma demande"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoReveal
      logoSrc="http://img.b2bpic.net/free-vector/best-dad-award_23-2147501669.jpg"
      logoAlt="FAHD AUTO SETIF Logo"
      logoText="FAHD AUTO SETIF"
      leftLink={{
        text: "© 2025 FAHD AUTO SETIF. Tous droits réservés.",        href: "#"}}
      rightLink={{
        text: "Politique de confidentialité",        href: "#"}}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
