"use client";

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

export default function ContactPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="medium"
        sizing="medium"
        background="circleGradient"
        cardStyle="glass-elevated"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="normal"
    >
      <ReactLenis root>
        <NavbarLayoutFloatingOverlay
            navItems={[
                { name: "Home", id: "/" },
                { name: "About", id: "/about" },
                { name: "Contact", id: "/contact" },
            ]}
            brandName="Websites Solutions "
        />
        
        <div id="contact" data-section="contact">
            <ContactSplitForm
                title="Join Our Platform"
                description="Sign up today to start your journey with us and access exclusive features."
                inputs={[
                    { name: "name", type: "text", placeholder: "Full Name", required: true },
                    { name: "email", type: "email", placeholder: "Work Email", required: true }
                ]}
                buttonText="Create Account"
                imageSrc="http://img.b2bpic.net/free-photo/modern-minimalist-office_23-2151780713.jpg"
                useInvertedBackground={false}
            />
        </div>

        <FooterMedia
            logoText="Websites Solutions "
            videoSrc="https://videos.pexels.com/video-files/5527376/5527376-sd_506_960_25fps.mp4"
            columns={[
                { title: "Company", items: [{ label: "About", href: "/about" }, { label: "Services", href: "/#features" }] },
                { title: "Resources", items: [{ label: "FAQs", href: "/#faq" }, { label: "Contact", href: "/contact" }] },
            ]}
        />
      </ReactLenis>
    </ThemeProvider>
  );
}