"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
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';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="mediumSmall"
        sizing="largeSizeMediumTitles"
        background="noise"
        cardStyle="glass-elevated"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="layered"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        { name: "Accueil", id: "hero" },
        { name: "Services", id: "features" },
        { name: "À propos", id: "about" },
        { name: "FAQ", id: "faq" },
      ]}
      brandName="9rib"
      button={{
        text: "Publier une mission",        href: "#contact"}}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroOverlay
      title="Trouvez de l'aide de confiance près de chez vous"
      description="Postez votre mission, connectez-vous avec des travailleurs locaux à Casablanca, et get things done fast (Bghiti tsalhiha, 9rib!)."
      buttons={[
        { text: "Publier une mission", href: "#contact" },
        { text: "Trouver un pro", href: "#catalog" },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/female-engineers-gesturing-thumb-up_23-2147771750.jpg"
      avatarText="Approuvé par 500+ habitants au Maroc"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentyThree
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        { id: "f1", title: "Publication rapide", tags: ["Simple", "Instant"] },
        { id: "f2", title: "Pros vérifiés", tags: ["Trusted", "Safe"] },
        { id: "f3", title: "Intégration WhatsApp", tags: ["Direct", "Fast"] },
      ]}
      title="Pourquoi choisir 9rib?"
      description="Conçu pour le marché marocain, c'est Dima 9rib!"
    />
  </div>

  <div id="about" data-section="about">
      <TextAbout
      useInvertedBackground={true}
      title="Notre savoir-faire marocain"
      buttons={[{ text: "En savoir plus", href: "#" }]}
    />
  </div>

  <div id="catalog" data-section="catalog">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      gridVariant="three-columns-all-equal-width"
      products={[
        { id: "p1", name: "Plomberie", price: "Dès 150 MAD", imageSrc: "http://img.b2bpic.net/free-photo/cell-phone-shopping-cart-online-shopping-mobile-shopping-concept_1387-918.jpg" },
        { id: "p2", name: "Électricité", price: "Dès 100 MAD", imageSrc: "http://img.b2bpic.net/free-vector/gradient-patented-label-collection_23-2149733574.jpg" },
        { id: "p3", name: "Ménage", price: "Dès 200 MAD", imageSrc: "http://img.b2bpic.net/free-vector/flat-e-commerce-elements_1051-481.jpg" },
      ]}
      title="Services locaux"
      description="Des pros pour chaque maison, mlih o bghiti!"
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardFourteen
      useInvertedBackground={true}
      title="Confiance nationale"
      tag="Croissance 9rib"
      metrics={[
        { id: "m1", value: "100+", description: "Experts vérifiés (tbarkallah)" },
        { id: "m2", value: "500+", description: "Projets réalisés (khedma nqiya)" },
        { id: "m3", value: "95%", description: "Clients satisfaits (kolchi mlih)" },
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTen
      textboxLayout="split"
      useInvertedBackground={false}
      testimonials={[
        { id: "t1", title: "Excellent service", quote: "Professionnel, khedma nqiya!", name: "Ahmed", role: "Résident Casa" },
        { id: "t2", title: "Solution rapide", quote: "Help, dakchi bghito 9rib!", name: "Fatima", role: "Local Business" },
      ]}
      title="Notre communauté"
      description="Témoignages de nos utilisateurs"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={true}
      faqs={[
        { id: "q1", title: "La plateforme est-elle locale?", content: "Oui, on se concentre sur les villes marocaines, 9rib lik!" },
        { id: "q2", title: "Les travailleurs sont-ils vérifiés?", content: "Oui, vérification stricte, ma tkhfch!" },
      ]}
      sideTitle="Besoin d'aide ?"
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      background={{ variant: "sparkles-gradient" }}
      useInvertedBackground={false}
      tag="Connectez-vous"
      title="Démarrez votre projet aujourd'hui"
      description="Rejoignez le réseau le plus rapide au Maroc. Bghiti khedma? 9rib!"
      buttons={[{ text: "Publier une mission", href: "#" }]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoReveal
      logoText="9rib"
      leftLink={{ text: "Conditions d'utilisation (Lqanoun)", href: "#" }}
      rightLink={{ text: "Politique de confidentialité", href: "#" }}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}