"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';

export default function AboutPage() {
  return (
    <ThemeProvider defaultButtonVariant="icon-arrow" defaultTextAnimation="reveal-blur" borderRadius="rounded" contentWidth="medium" sizing="medium" background="none" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
      <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline 
        navItems={[{name: "Home", id: "/"}, {name: "About", id: "/about"}, {name: "Contact", id: "/contact"}]} 
        brandName="Chandigi"
        button={{ text: "Get Growth Plan", href: "/contact" }}
      />
      </div>
      <MetricSplitMediaAbout 
        title="About Chandigi"
        description="We are a digital growth agency helping businesses scale through data-driven strategies."
        metrics={[{value: "100+", title: "Projects"}, {value: "90%", title: "Retention"}]}
        mediaAnimation="slide-up"
        metricsAnimation="slide-up"
        useInvertedBackground={false}
      />
      <div id="footer" data-section="footer">
      <FooterBaseReveal 
        logoText="Chandigi" 
        columns={[{ title: "Links", items: [{ label: "Home", href: "/" }, { label: "About", href: "/about" }] }]} 
      />
      </div>
    </ThemeProvider>
  );
}