"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';

export default function ContactPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="compact"
        sizing="largeSmallSizeMediumTitles"
        background="blurBottom"
        cardStyle="glass-elevated"
        primaryButtonStyle="flat"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
            <NavbarStyleFullscreen
              navItems={[
                { name: "Home", id: "/" },
                { name: "Services", id: "/#services" },
                { name: "About", id: "/#about" },
                { name: "Reviews", id: "/#testimonials" },
                { name: "Contact", id: "/contact" },
              ]}
              brandName="DB Plumbing"
            />
        </div>

        <div id="contact" data-section="contact">
            <ContactCenter
              useInvertedBackground={false}
              background={{ variant: "animated-grid" }}
              tag="Contact Us"
              title="Get in Touch"
              description="We are here to help with your plumbing and heating needs. Fill out the form below or call us directly."
            />
        </div>

        <div id="footer" data-section="footer">
            <FooterBaseReveal
              logoText="DB Plumbing & Heating"
              columns={[
                { title: "Services", items: [{ label: "Plumbing", href: "/#services" }, { label: "Heating", href: "/#services" }, { label: "Bathrooms", href: "/#services" }] },
                { title: "Company", items: [{ label: "About", href: "/#about" }, { label: "Contact", href: "/contact" }, { label: "Privacy Policy", href: "#" }] },
              ]}
            />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}