"use client";

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

export default function AboutPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="smallMedium"
        sizing="largeSmallSizeLargeTitles"
        background="fluid"
        cardStyle="gradient-radial"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="solid"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingInline
            navItems={[
              {
                name: "Home",                id: "/"},
              {
                name: "About Us",                id: "/about"},
              {
                name: "Features",                id: "/features"},
              {
                name: "Products",                id: "/products"},
              {
                name: "Pricing",                id: "#pricing"},
              {
                name: "Testimonials",                id: "#testimonials"},
              {
                name: "FAQ",                id: "#faq"},
              {
                name: "Contact",                id: "#contact"},
            ]}
            brandName="SMESolutions"
            button={{
              text: "Get a Quote",              href: "#contact"}}
          />
        </div>

        <div id="about" data-section="about">
          <MetricSplitMediaAbout
            useInvertedBackground={true}
            title="Your Partner in Digital Transformation"
            description="At SMESolutions, we provide comprehensive services that empower small and medium enterprises to thrive in the digital age. From optimizing operations to enhancing customer engagement, we're dedicated to your success, delivering real results and sustainable growth."
            metrics={[
              {
                value: "150+",                title: "Projects Completed"},
              {
                value: "98%",                title: "Client Satisfaction"},
              {
                value: "10+",                title: "Years Experience"},
            ]}
            imageSrc="http://img.b2bpic.net/free-photo/people-table-office-meeting_23-2148817063.jpg?_wi=2"
            imageAlt="Business professionals collaborating in a modern office"
            mediaAnimation="slide-up"
            metricsAnimation="slide-up"
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterMedia
            imageSrc="http://img.b2bpic.net/free-photo/high-rise-buildings-modern-city_1359-899.jpg?_wi=2"
            imageAlt="Panoramic cityscape at night"
            logoText="SMESolutions"
            columns={[
              {
                title: "Solutions",                items: [
                  {
                    label: "CRM & Sales",                    href: "/features"},
                  {
                    label: "Analytics",                    href: "/features"},
                  {
                    label: "Cloud & Security",                    href: "/features"},
                  {
                    label: "Products",                    href: "/products"},
                ],
              },
              {
                title: "Company",                items: [
                  {
                    label: "About Us",                    href: "/about"},
                  {
                    label: "Pricing",                    href: "#pricing"},
                  {
                    label: "Contact",                    href: "#contact"},
                  {
                    label: "Testimonials",                    href: "#testimonials"},
                ],
              },
              {
                title: "Resources",                items: [
                  {
                    label: "FAQ",                    href: "#faq"},
                  {
                    label: "Support",                    href: "#contact"},
                  {
                    label: "Terms of Service",                    href: "#"},
                  {
                    label: "Privacy Policy",                    href: "#"},
                ],
              },
            ]}
            copyrightText="© 2024 SMESolutions. All rights reserved."
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
