"use client";

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

export default function ContactPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="mediumLarge"
      sizing="large"
      background="none"
      cardStyle="glass-elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleFullscreen
            brandName="Beach House Landscaping"
            navItems={[
              { name: "Home", id: "/" },
              { name: "Services", id: "/#services" },
              { name: "About", id: "/#about" },
              { name: "Team", id: "/#team" },
              { name: "Reviews", id: "/#testimonials" },
              { name: "Contact", id: "/contact" },
            ]}
            button={{ text: "Get a Quote", href: "/contact" }}
          />
        </div>

        <div id="contact" data-section="contact" className="pt-20 pb-20">
          <ContactSplitForm
            title="Contact Us"
            description="Reach out to our team at +447399858598 to start your project or discuss your vision."
            useInvertedBackground={false}
            mediaAnimation="none"
            imageSrc="http://img.b2bpic.net/free-photo/luxury-holiday-home_23-2151918242.jpg"
            buttonText="Submit Enquiry"
            inputs={[
              { name: "name", type: "text", placeholder: "Full Name", required: true },
              { name: "email", type: "email", placeholder: "Email Address", required: true },
              { name: "address", type: "text", placeholder: "Project Address" }
            ]}
            textarea={{ name: "message", placeholder: "Tell us about your garden vision...", rows: 4, required: true }}
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterSimple
            columns={[
              { title: "Services", items: [{ label: "Patio Installation" }, { label: "Garden Clearance" }, { label: "Softscaping" }] },
              { title: "Company", items: [{ label: "About" }, { label: "Reviews" }, { label: "Contact", href: "/contact" }] },
              { title: "Connect", items: [{ label: "Instagram" }, { label: "Facebook" }] }
            ]}
            bottomLeftText="© 2026 Beach House Landscaping"
            bottomRightText="Designed for Excellence"
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
