"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";

import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBase from '@/components/sections/footer/FooterBase';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';

export default function ContactUsPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="bounce-effect"
        defaultTextAnimation="background-highlight"
        borderRadius="pill"
        contentWidth="compact"
        sizing="largeSizeMediumTitles"
        background="blurBottom"
        cardStyle="inset"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="layered"
        headingFontWeight="light"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingOverlay
            navItems={[
              { name: "Home", id: "/" },
              { name: "About", id: "/#about" },
              { name: "Services", id: "/#services" },
              { name: "Products", id: "/#products" },
              { name: "Testimonials", id: "/#testimonials" },
              { name: "Contact", id: "/contact-us" }
            ]}
            brandName="Aetheria Luxuries"
            button={{ text: "Get a Quote", href: "/contact-us" }}
          />
        </div>

        <div id="contact" data-section="contact">
          <ContactCenter
            useInvertedBackground={true}
            background={{
              variant: "radial-gradient"
            }}
            tag="Connect With Us"
            title="Begin Your Journey to Luxury"
            description="Contact us for bespoke services, personal consultations, or inquiries about our exclusive collections."
            tagAnimation="none"
            inputPlaceholder="Your Email Address"
            buttonText="Send Inquiry"
            termsText="By clicking Send Inquiry, you agree to our Privacy Policy."
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterBase
            columns={[
              {
                title: "Company",                items: [
                  { label: "About Us", href: "/#about" },
                  { label: "Our Services", href: "/#services" },
                  { label: "Our Portfolio", href: "/#products" }
                ]
              },
              {
                title: "Support",                items: [
                  { label: "Contact", href: "/contact-us" },
                  { label: "FAQs", href: "#" },
                  { label: "Client Portal", href: "#" }
                ]
              },
              {
                title: "Legal",                items: [
                  { label: "Privacy Policy", href: "#" },
                  { label: "Terms of Service", href: "#" }
                ]
              }
            ]}
            logoText="Aetheria Luxuries"
            copyrightText="© 2024 Aetheria Luxuries. All rights reserved."
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}