"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';

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: "Mon Compte",
          id: "contact",
        },
      ]}
      brandName="LuxeLeather"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitDoubleCarousel
      background={{
        variant: "plain",
      }}
      title="L'Essence du Cuir"
      description="Redécouvrez l'élégance intemporelle à travers nos créations artisanales en cuir."
      leftCarouselItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/fashionable-woman-holding-her-hat-down_23-2148448803.jpg?_wi=1",
          imageAlt: "Mode Luxe",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/pretty-adult-caucasian-woman-blonde-black-pajamas-sits-light-room-with-place-text-weekend-enjoyment-concept_197531-31166.jpg?_wi=1",
          imageAlt: "Détails artisanaux",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-wearing-minimalist-shirt_23-2149317768.jpg",
          imageAlt: "Cuir de qualité",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/concentrated-shoemaker-workshop-making-shoes_171337-12271.jpg",
          imageAlt: "Savoir-faire",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-rich-woman-sitting-home_23-2149722595.jpg",
          imageAlt: "Texture",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/men-s-fashion-wallpaper-wooden-background-leather-shoes-with-polishing-tools_53876-145655.jpg",
          imageAlt: "Balghas",
        },
      ]}
      rightCarouselItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-girl-studio-fashion-portrait_1328-2194.jpg",
          imageAlt: "Style minimaliste",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-young-elegant-woman_1328-2692.jpg",
          imageAlt: "Détails",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/fairskinned-adult-blonde-woman-black-pajamas-sits-indoors-white-background-relaxation-concept_197531-31168.jpg",
          imageAlt: "Artisanat",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-ferromagnetic-liquid-metal-with-copy-space_23-2148253612.jpg",
          imageAlt: "Élégance",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-business-suit-sitting-chair_1303-17687.jpg",
          imageAlt: "Luxe",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/young-man-portrait_23-2148830393.jpg",
          imageAlt: "Cuir",
        },
      ]}
      buttons={[
        {
          text: "Découvrir",
          href: "#products",
        },
      ]}
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/young-man-portrait-with-flowers_23-2148830425.jpg",
          alt: "Portrait 1",
        },
        {
          src: "http://img.b2bpic.net/free-photo/young-asian-woman-posing-autumn-clothes_23-2149071347.jpg",
          alt: "Portrait 2",
        },
        {
          src: "http://img.b2bpic.net/free-photo/beautiful-woman-wearing-minimalist-shirt_23-2149317767.jpg",
          alt: "Portrait 3",
        },
        {
          src: "http://img.b2bpic.net/free-photo/beautiful-woman-wearing-minimalist-shirt_23-2149317769.jpg",
          alt: "Portrait 4",
        },
        {
          src: "http://img.b2bpic.net/free-photo/elegant-woman-black-hat-spring-forest_1157-35552.jpg",
          alt: "Portrait 5",
        },
      ]}
      avatarText="Rejoignez notre communauté"
      marqueeItems={[
        {
          type: "image",
          src: "http://img.b2bpic.net/free-photo/textile-background_93675-132434.jpg",
          alt: "Texture 1",
        },
        {
          type: "image",
          src: "http://img.b2bpic.net/free-photo/black-patterned-texture_1194-7015.jpg",
          alt: "Texture 2",
        },
        {
          type: "image",
          src: "http://img.b2bpic.net/free-photo/fabric-texture-background_1385-1257.jpg",
          alt: "Texture 3",
        },
        {
          type: "image",
          src: "http://img.b2bpic.net/free-photo/fabric-texture-background_1388-107.jpg",
          alt: "Texture 4",
        },
        {
          type: "image",
          src: "http://img.b2bpic.net/free-photo/top-view-close-up-vinyl-texture_23-2149075975.jpg",
          alt: "Texture 5",
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <TextSplitAbout
      useInvertedBackground={false}
      title="Un Héritage Moderne"
      description={[
        "Nous fusionnons tradition artisanale et design contemporain.",
        "Nos pièces en cuir sont conçues pour durer et raconter une histoire.",
      ]}
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardThree
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="one-large-left-three-stacked-right"
      useInvertedBackground={true}
      products={[
        {
          id: "p1",
          name: "Sac en Cuir Iconique",
          price: "450€",
          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-chic-woman-posing_23-2149267441.jpg?_wi=1",
        },
        {
          id: "p2",
          name: "Balghas Traditionnels",
          price: "120€",
          imageSrc: "http://img.b2bpic.net/free-photo/view-women-s-purse-tiles-with-mediterranean-aesthetics_23-2150916721.jpg",
        },
        {
          id: "p3",
          name: "Petit Sac à Main",
          price: "290€",
          imageSrc: "http://img.b2bpic.net/free-photo/businessman-holding-brown-leather-bag-close-up-shot-businessman-suit-holding-his-bag-metro-train_549566-2.jpg",
        },
        {
          id: "p4",
          name: "Veste en Cuir",
          price: "890€",
          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-demonstrating-upper-cloths_1303-24561.jpg",
        },
        {
          id: "p5",
          name: "Sacoche Luxe",
          price: "350€",
          imageSrc: "http://img.b2bpic.net/free-photo/bag-hanging-from-furniture-item-indoors_23-2151073523.jpg",
        },
        {
          id: "p6",
          name: "Accessoires Cuir",
          price: "95€",
          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-covid-party-with-masks_23-2149299867.jpg",
        },
      ]}
      title="Nos Créations"
      description="Sélection exclusive de vêtements, sacs et balghas."
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardThree
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      features={[
        {
          title: "Cuir Premium",
          description: "Sélection rigoureuse des meilleures peaux.",
          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-posing-street_1303-29727.jpg?_wi=1",
        },
        {
          title: "Fait à la main",
          description: "Un savoir-faire ancestral préservé.",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-smiling-brunette-model-dressed-summer-hipster-jacket-jeans-clothes_158538-1626.jpg",
        },
        {
          title: "Design Durable",
          description: "Une mode qui traverse le temps.",
          imageSrc: "http://img.b2bpic.net/free-photo/fashionable-sensual-woman-black-leather-jacket-stylish-sunglasses-posing-rocks_273443-5237.jpg",
        },
      ]}
      title="Pourquoi Choisir LuxeLeather"
      description="L'excellence à chaque étape de création."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardThree
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      plans={[
        {
          id: "std",
          price: "Gratuit",
          name: "Standard",
          features: [
            "3-5 jours ouvrés",
            "Suivi inclus",
          ],
          buttons: [
            {
              text: "Sélectionner",
            },
          ],
        },
        {
          id: "exp",
          price: "15€",
          name: "Express",
          features: [
            "24-48h",
            "Emballage cadeau",
          ],
          buttons: [
            {
              text: "Sélectionner",
            },
          ],
        },
      ]}
      title="Services de Livraison"
      description="Des options pensées pour votre confort."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFive
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",
          name: "Amira S.",
          date: "12/03",
          title: "Excellence",
          quote: "Une qualité exceptionnelle, mes balghas sont parfaits.",
          tag: "Luxe",
          avatarSrc: "http://img.b2bpic.net/free-photo/designer-working-3d-model_23-2149371901.jpg",
          imageSrc: "http://img.b2bpic.net/free-photo/fashionable-woman-holding-her-hat-down_23-2148448803.jpg?_wi=2",
          imageAlt: "elegant customer portrait studio",
        },
        {
          id: "2",
          name: "Julien M.",
          date: "10/02",
          title: "Ravi",
          quote: "Le sac est encore plus beau en vrai.",
          tag: "Style",
          avatarSrc: "http://img.b2bpic.net/free-photo/front-view-people-chatting-classroom_23-2150331688.jpg",
          imageSrc: "http://img.b2bpic.net/free-photo/pretty-adult-caucasian-woman-blonde-black-pajamas-sits-light-room-with-place-text-weekend-enjoyment-concept_197531-31166.jpg?_wi=2",
          imageAlt: "elegant customer portrait studio",
        },
        {
          id: "3",
          name: "Sarah L.",
          date: "05/01",
          title: "Service",
          quote: "Livraison très rapide et emballage soigné.",
          tag: "Service",
          avatarSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-taking-break-after-shopping_23-2148660680.jpg",
          imageSrc: "http://img.b2bpic.net/free-photo/digital-art-style-illustration-fashion-designer_23-2151537690.jpg",
          imageAlt: "elegant customer portrait studio",
        },
        {
          id: "4",
          name: "Karim B.",
          date: "20/12",
          title: "Confort",
          quote: "La texture du cuir est incroyable.",
          tag: "Confort",
          avatarSrc: "http://img.b2bpic.net/free-photo/adult-friends-shopping-clothes-together_23-2148385700.jpg",
          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-posing-street_1303-29727.jpg?_wi=2",
          imageAlt: "elegant customer portrait studio",
        },
        {
          id: "5",
          name: "Elena R.",
          date: "15/11",
          title: "Superbe",
          quote: "Un incontournable de ma garde-robe.",
          tag: "Mode",
          avatarSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-woman-posing-fashionable-outfit_23-2149021812.jpg",
          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-chic-woman-posing_23-2149267441.jpg?_wi=2",
          imageAlt: "elegant customer portrait studio",
        },
      ]}
      title="Ce que disent nos clients"
      description="L'expérience du luxe au quotidien."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "1",
          title: "Comment entretenir le cuir ?",
          content: "Utilisez un baume spécial cuir une fois par mois.",
        },
        {
          id: "2",
          title: "Les retours sont-ils gratuits ?",
          content: "Oui, sous 14 jours après réception.",
        },
        {
          id: "3",
          title: "Puis-je suivre ma commande ?",
          content: "Un lien de suivi est envoyé par email.",
        },
      ]}
      title="Questions Fréquentes"
      description="Tout savoir sur nos services."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={false}
      background={{
        variant: "plain",
      }}
      text="Besoin d'une assistance personnalisée pour votre commande ?"
      buttons={[
        {
          text: "Contactez-nous",
          href: "#",
        },
      ]}
    />
  </div>

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