"use client";

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

export default function AboutPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="bounce-effect"
        defaultTextAnimation="background-highlight"
        borderRadius="pill"
        contentWidth="medium"
        sizing="medium"
        background="circleGradient"
        cardStyle="glass-elevated"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="normal"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingInline
            navItems={[{ name: "Home", id: "/" }, { name: "Gallery", id: "/galeria" }]}
            brandName="Aura"
            button={{ text: "Get Started", href: "/contato" }}
          />
        </div>
        <div id="footer" data-section="footer">
          <FooterMedia
            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcjL3H1ybCovkOfMqiUW8DmX8M/abstract-dark-textured-background-minima-1774795232830-733abf77.png?_wi=3"
            columns={[{ title: "Archives", items: [{ label: "Gallery", href: "/galeria" }] }, { title: "Studio", items: [{ label: "About", href: "/sobre" }] }]}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}