"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import FooterBase from '@/components/sections/footer/FooterBase';

export default function ContactPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="pill"
        contentWidth="mediumSmall"
        sizing="mediumSizeLargeTitles"
        background="aurora"
        cardStyle="gradient-radial"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="solid"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
            <NavbarLayoutFloatingOverlay
            navItems={[
                { name: "Home", id: "/" },
                { name: "Services", id: "/features" },
                { name: "Work", id: "/products" },
                { name: "Contact", id: "/contact" },
            ]}
            brandName="Digital Plus"
            />
        </div>

        <div id="contact" data-section="contact">
            <ContactSplit
                tag="Kontakt"
                title="Sprechen Sie mit uns"
                description="Wir freuen uns darauf, von Ihrem Projekt zu hören. Senden Sie uns eine Nachricht oder buchen Sie einen Beratungstermin."
                background={{ variant: "radial-gradient" }}
            />
        </div>

        <div id="footer" data-section="footer">
            <FooterBase
            columns={[
                { title: "Agentur", items: [{ label: "Home", href: "/" }] },
            ]}
            logoText="Digital Plus GmbH"
            />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}