"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import TeamCardFive from '@/components/sections/team/TeamCardFive';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="background-highlight"
        borderRadius="pill"
        contentWidth="mediumLarge"
        sizing="medium"
        background="noise"
        cardStyle="glass-depth"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="layered"
        headingFontWeight="medium"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleApple
            navItems={[
              { name: "Home", id: "#hero" },
              { name: "About", id: "#about" },
              { name: "Features", id: "#features" },
              { name: "Performance", id: "#metrics" },
              { name: "Team", id: "#team" },
              { name: "Testimonials", id: "#testimonials" }
            ]}
            brandName="CLSF Technical Services"
          />
        </div>

        <div id="hero" data-section="hero">
          <HeroBillboardScroll
            title="CLSF Technical Services L.L.C"
            description="Delivering excellence through premium technical maintenance and professional facility solutions."
            background={{ variant: "plain" }}
            imageSrc="http://img.b2bpic.net/free-photo/modern-office-building-with-glass-facade_23-2148705353.jpg"
          />
        </div>

        <div id="about" data-section="about">
          <MediaAbout
            title="Our Commitment to Excellence"
            description="With years of experience in technical facility management, we bridge the gap between complex infrastructure needs and reliable, efficient maintenance."
            imageSrc="http://img.b2bpic.net/free-photo/close-up-professional-cleaning-tools_23-2149535102.jpg"
            useInvertedBackground={false}
          />
        </div>

        <div id="features" data-section="features">
          <FeatureCardNine
            title="Precision Maintenance Features"
            description="Our advanced technical workflows ensure your environment remains safe, clean, and fully operational 24/7."
            showStepNumbers={true}
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            features={[
              { 
                title: "Smart Cleaning", 
                description: "Automated and precision-based maintenance solutions.",                phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/cleaner-holding-spray-bottle_23-2148530325.jpg" },
                phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/vacuum-cleaning-floor_23-2148744040.jpg" }
              }
            ]}
          />
        </div>

        <div id="metrics" data-section="metrics">
          <MetricCardEleven
            title="Measurable Success"
            description="Our performance-driven approach is backed by data and client results."
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            metrics={[
              {
                id: "metric-1",                value: "99%",                title: "Efficiency Rate",                description: "Optimization of all facility operations.",                imageSrc: "http://img.b2bpic.net/free-photo/close-up-diagram-growth_23-2148858177.jpg"
              },
              {
                id: "metric-2",                value: "500+",                title: "Satisfied Clients",                description: "Partners across various sectors.",                imageSrc: "http://img.b2bpic.net/free-photo/happy-team-working_23-2148858177.jpg"
              }
            ]}
          />
        </div>

        <div id="team" data-section="team">
          <TeamCardFive
            title="Meet Our Technical Experts"
            description="Our team comprises highly-trained professionals dedicated to facility excellence."
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            team={[
              { id: "t1", name: "Alex Rivera", role: "Technical Manager", imageSrc: "http://img.b2bpic.net/free-photo/portrait-professional-man_23-2148923485.jpg" },
              { id: "t2", name: "Sarah Chen", role: "Operations Lead", imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-woman_23-2148923485.jpg" }
            ]}
          />
        </div>

        <div id="testimonials" data-section="testimonials">
          <TestimonialCardFifteen
            testimonial="CLSF Technical Services has completely transformed our facility's maintenance standards. Their precision and reliability are unmatched."
            author="Jonathan V., Facilities Director"
            rating={5}
            ratingAnimation="slide-up"
            avatarsAnimation="slide-up"
            useInvertedBackground={false}
            avatars={[{ src: "http://img.b2bpic.net/free-photo/happy-smiling-businessman_23-2148858177.jpg", alt: "Jonathan V" }]}
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterBase
            logoText="CLSF Technical Services"
            columns={[
              { title: "Services", items: [{ label: "Cleaning", href: "#" }, { label: "Maintenance", href: "#" }] },
              { title: "Company", items: [{ label: "About", href: "#" }, { label: "Contact", href: "#" }] }
            ]}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}