"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';

export default function ServicesPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="elastic-effect"
        defaultTextAnimation="background-highlight"
        borderRadius="pill"
        contentWidth="medium"
        sizing="largeSmallSizeMediumTitles"
        background="noise"
        cardStyle="subtle-shadow"
        primaryButtonStyle="flat"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="light"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleFullscreen
            navItems={[
              { name: "Models", id: "hero" },
              { name: "Performance", id: "features" },
              { name: "Luxury", id: "about" },
              { name: "Services", id: "/services" },
              { name: "Contact", id: "contact" },
            ]}
            brandName="BENTLEY"
          />
        </div>
        
        <div id="services-hero" data-section="services-hero" style={{ paddingTop: '120px' }}>
            <MetricSplitMediaAbout
              title="Our Services"
              description="Beyond manufacturing, we provide a holistic suite of ownership services to maintain your vehicle's perfection."
              metrics={[]}
              useInvertedBackground={false}
              imageSrc="http://img.b2bpic.net/free-photo/accuracy-leather-work_1098-13413.jpg"
            />
        </div>
        
        <div id="footer" data-section="footer">
          <FooterBaseCard
            logoText="BENTLEY"
            columns={[
              { title: "Company", items: [{ label: "About Us", href: "#" }, { label: "Press", href: "#" }] },
              { title: "Support", items: [{ label: "Contact", href: "#" }, { label: "Retailers", href: "#" }] },
            ]}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}