"use client";

import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroCarouselLogo from "@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo";
import FeatureCardTwentyOne from "@/components/sections/feature/FeatureCardTwentyOne";
import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
import ContactCenter from "@/components/sections/contact/ContactCenter";

export default function WebAgency2Page() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="medium"
      sizing="medium"
      background="none"
      cardStyle="glass-elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingOverlay
            brandName="Switzerweb"
            navItems={[
              { name: "Home", id: "/" },
              { name: "Work", id: "work" },
              { name: "Services", id: "services" },
              { name: "Contact", id: "contact" }
            ]}
            button={{ text: "Démarrer", href: "#contact" }}
          />
        </div>
        <div id="hero" data-section="hero">
          <HeroCarouselLogo
            logoText="Switzerweb"
            description="Innovation Digitale & Excellence Créative. Nous transformons vos visions en solutions numériques percutantes."
            buttons={[{ text: "View Our Projects", href: "#work" }]}
            slides={[
              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B1CZ8wJvEJetEx867dlBUUa9fk/uploaded-1778862157558-53z96op4.png", imageAlt: "Hero Image 1" }
            ]}
          />
        </div>
        <div id="services" data-section="services">
          <FeatureCardTwentyOne
            title="Nos Services"
            description="Nous proposons une gamme ciblée de services numériques pour maximiser votre impact."
            useInvertedBackground={false}
            accordionItems={[
              { id: "seo", title: "SEO", content: "Optimisation pour moteurs de recherche." },
              { id: "web", title: "Dév Web", content: "Des sites personnalisés, rapides et responsifs." }
            ]}
            videoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/assets/placeholder.mp4"
          />
        </div>
        <div id="testimonials" data-section="testimonials">
           <TestimonialCardFifteen
              testimonial="Un travail exceptionnel, une équipe réactive et des résultats au-delà de mes espérances."
              rating={5}
              author="Maria Santos"
              avatars={[{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B1CZ8wJvEJetEx867dlBUUa9fk/uploaded-1778862157558-53z96op4.png", alt: "Maria Santos" }]}
              ratingAnimation="slide-up"
              avatarsAnimation="slide-up"
              useInvertedBackground={false}
           />
        </div>
        <div id="metrics" data-section="metrics">
          <MetricCardTwo
            title="Approuvé par les leaders"
            description="Des années d'expérience dans la création de produits numériques orientés résultats."
            gridVariant="uniform-all-items-equal"
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            metrics={[
              { id: "projects", value: "100+", description: "Projets livrés avec succès" },
              { id: "satisfaction", value: "99%", description: "Taux de satisfaction client" },
            ]}
          />
        </div>
        <div id="contact" data-section="contact">
          <ContactCenter
            tag="Entrer en contact"
            title="Prêt à transformer votre présence numérique ?"
            description="Construisons quelque chose d'extraordinaire ensemble. Contactez-nous pour discuter de votre projet."
            background={{ variant: "rotated-rays-animated" }}
            useInvertedBackground={false}
          />
        </div>
        <div id="footer" data-section="footer">
          <FooterBaseReveal
            logoText="Switzerweb"
            columns={[
              { title: "Entreprise", items: [{ label: "À Propos", href: "#" }, { label: "Contact", href: "#contact" }] },
              { title: "Services", items: [{ label: "Dév Web", href: "#services" }, { label: "SEO", href: "#services" }] },
            ]}
            copyrightText="© 2026 | Switzerweb"
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
