"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import TeamCardFive from '@/components/sections/team/TeamCardFive';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="medium"
      sizing="mediumSizeLargeTitles"
      background="none"
      cardStyle="inset"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleCentered
            navItems={[
              { name: "Accueil", id: "hero" },
              { name: "Produits", id: "products" },
              { name: "Contact", id: "contact" },
            ]}
            brandName="LuxeLeather"
          />
        </div>

        <div id="hero" data-section="hero">
          <HeroBillboardGallery
            title="L'Essence du Cuir"
            description="Redécouvrez l'élégance intemporelle à travers nos créations artisanales en cuir."
            background={{ variant: "plain" }}
            mediaItems={[
                { imageSrc: "http://img.b2bpic.net/free-photo/full-shot-chic-woman-posing_23-2149267441.jpg?_wi=1" },
                { imageSrc: "http://img.b2bpic.net/free-photo/view-women-s-purse-tiles-with-mediterranean-aesthetics_23-2150916721.jpg?_wi=1" },
                { imageSrc: "http://img.b2bpic.net/free-photo/designer-working-3d-model_23-2149371901.jpg?_wi=1" }
            ]}
          />
        </div>

        <div id="products" data-section="products">
          <ProductCardTwo
            title="Nos Créations"
            description="Une sélection exclusive de maroquinerie haut de gamme."
            gridVariant="four-items-2x2-equal-grid"
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            products={[
              { id: "p1", brand: "LuxeLeather", name: "Sac Iconique", price: "450€", rating: 5, reviewCount: "24 avis", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-chic-woman-posing_23-2149267441.jpg?_wi=1" },
              { id: "p2", brand: "LuxeLeather", name: "Balghas Tradition", price: "120€", rating: 4, reviewCount: "18 avis", imageSrc: "http://img.b2bpic.net/free-photo/view-women-s-purse-tiles-with-mediterranean-aesthetics_23-2150916721.jpg?_wi=2" }
            ]}
          />
        </div>

        <div id="pricing" data-section="pricing">
          <PricingCardThree
            title="Nos Forfaits"
            description="Choisissez l'option qui correspond à vos besoins."
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            plans={[
              { id: "std", badge: "Populaire", price: "0€", name: "Standard", features: ["Livraison standard", "Suivi inclus"], buttons: [{ text: "Choisir" }] },
              { id: "exp", price: "15€", name: "Express", features: ["Livraison 24h", "Emballage cadeau"], buttons: [{ text: "Choisir" }] }
            ]}
          />
        </div>

        <div id="team" data-section="team">
          <TeamCardFive
            title="Notre Équipe"
            description="Les mains expertes derrière nos créations."
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            team={[
              { id: "1", name: "Marie L.", role: "Artisane Maroquinière", imageSrc: "http://img.b2bpic.net/free-photo/designer-working-3d-model_23-2149371901.jpg?_wi=2" },
              { id: "2", name: "Jean D.", role: "Maître Artisan", imageSrc: "http://img.b2bpic.net/free-photo/front-view-people-chatting-classroom_23-2150331688.jpg" }
            ]}
          />
        </div>

        <div id="testimonials" data-section="testimonials">
          <TestimonialCardThirteen
            title="Témoignages"
            description="Ce que nos clients disent de nous."
            showRating={true}
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            testimonials={[
              { id: "1", name: "Amira S.", handle: "@amira_s", testimonial: "Une qualité exceptionnelle, mes balghas sont parfaits.", rating: 5 },
              { id: "2", name: "Julien M.", handle: "@julien_m", testimonial: "Le sac est encore plus beau en vrai.", rating: 5 }
            ]}
          />
        </div>

        <div id="contact" data-section="contact">
          <ContactSplitForm
            title="Contactez-nous"
            description="Vous avez une question sur une commande ?"
            useInvertedBackground={false}
            inputs={[
              { name: "nom", type: "text", placeholder: "Votre nom", required: true },
              { name: "email", type: "email", placeholder: "Votre email", required: true }
            ]}
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterLogoEmphasis
            logoText="LuxeLeather"
            columns={[
              { items: [{ label: "Accueil", href: "#hero" }, { label: "Produits", href: "#products" }] },
              { items: [{ label: "Mentions Légales", href: "#" }, { label: "CGU", href: "#" }] }
            ]}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}