1f25d20d-51af-44d4-a2d6-19e20b045c35/src/app/page.tsx

"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import { Award, CheckCircle, Shield, Star, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="elastic-effect"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="mediumLarge"
        sizing="large"
        background="circleGradient"
        cardStyle="solid"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="glass"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleFullscreen
            navItems={[
              { name: "Accueil", id: "home" },
              { name: "À Propos", id: "about" },
              { name: "Services", id: "services" },
              { name: "Produits", id: "products" },
              { name: "Contact", id: "contact" },
            ]}
            brandName="MCCMAROC"
          />
        </div>

        <div id="home" data-section="home">
          <HeroSplitTestimonial
            background={{ variant: "gradient-bars" }}
            title="Excellence en Métrologie Industrielle"
            description="Solutions de mesure, étalonnage ISO 17025 et instruments de haute précision pour l'industrie marocaine."
            testimonials={[]}
            imageSrc="http://img.b2bpic.net/free-photo/laboratory-3d-glassware_23-2151560643.jpg?_wi=1"
            imageAlt="Laboratoire de métrologie"
            mediaAnimation="slide-up"
          />
        </div>

        <div id="about" data-section="about">
          <AboutMetric
            useInvertedBackground={false}
            title="Notre Engagement Qualité"
            metrics={[
              { icon: CheckCircle, label: "Instruments Étalonnés", value: "1500+" },
              { icon: Award, label: "Conformité ISO 17025", value: "Certifié" },
              { icon: Shield, label: "Expertise Technique", value: "12 Ans" },
            ]}
            metricsAnimation="slide-up"
          />
        </div>

        <div id="services" data-section="services">
          <FeatureCardTwentyEight
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={true}
            features={[
              { id: "s1", title: "Étalonnage", subtitle: "Conformité aux normes", category: "Métrologie", value: "Précis" },
              { id: "s2", title: "Maintenance", subtitle: "Intervention rapide", category: "Services", value: "Fiable" },
              { id: "s3", title: "Conseil", subtitle: "Expertise sur mesure", category: "Services", value: "Expert" },
            ]}
            title="Nos Services Industriels"
            description="Des solutions techniques adaptées à vos exigences de production."
          />
        </div>

        <div id="products" data-section="products">
          <ProductCardOne
            animationType="slide-up"
            textboxLayout="default"
            gridVariant="three-columns-all-equal-width"
            useInvertedBackground={false}
            products={[
              { id: "p1", name: "Micromètres", price: "Sur demande", imageSrc: "http://img.b2bpic.net/free-photo/laser-level-measuring-tool_93675-128435.jpg" },
              { id: "p2", name: "Scanner Laser", price: "Sur demande", imageSrc: "http://img.b2bpic.net/free-photo/craftswoman-working-workshop_107420-65303.jpg" },
              { id: "p3", name: "Pieds à coulisse", price: "Sur demande", imageSrc: "http://img.b2bpic.net/free-photo/construction-plans-with-helmet-drawing-tools-blueprints_1232-4299.jpg" },
            ]}
            title="Catalogue Instruments"
            description="Équipement de métrologie de classe mondiale."
          />
        </div>

        <div id="metrics" data-section="metrics">
          <MetricCardThree
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={true}
            metrics={[
              { id: "m1", icon: Zap, title: "Clients", value: "300+" },
              { id: "m2", icon: Star, title: "Projets", value: "850+" },
              { id: "m3", icon: Award, title: "Normes", value: "20+" },
            ]}
            title="Chiffres Clés"
            description="La preuve par l'impact."
          />
        </div>

        <div id="testimonials" data-section="testimonials">
          <TestimonialCardSixteen
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            testimonials={[]}
            kpiItems={[
              { value: "100%", label: "Satisfaction" },
              { value: "98%", label: "Conformité" },
              { value: "24h", label: "Réactivité" },
            ]}
            title="Ils nous font confiance"
            description="L'excellence au service de nos partenaires industriels."
          />
        </div>

        <div id="faq" data-section="faq">
          <FaqSplitText
            useInvertedBackground={true}
            faqs={[
              { id: "f1", title: "Domaines d'étalonnage?", content: "Dimensionnel, pression, température." },
              { id: "f2", title: "ISO 17025?", content: "Laboratoire accrédité." },
            ]}
            sideTitle="Support Technique"
            faqsAnimation="slide-up"
          />
        </div>

        <div id="contact" data-section="contact">
          <ContactSplit
            tag="Contact"
            title="Discutons de vos besoins"
            description="Obtenez votre devis personnalisé aujourd'hui."
            background={{ variant: "gradient-bars" }}
            useInvertedBackground={false}
            imageSrc="http://img.b2bpic.net/free-photo/laboratory-3d-glassware_23-2151560643.jpg?_wi=2"
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterLogoReveal
            logoText="MCCMAROC"
            leftLink={{ text: "Contact", href: "#contact" }}
            rightLink={{ text: "Mentions Légales", href: "#" }}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}