"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';

export default function ContactPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="small"
      sizing="largeSmall"
      background="floatingGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Luxe Dubai Properties"
          navItems={[
            { name: "Properties", id: "properties" },
            { name: "About", id: "about" },
            { name: "Market", id: "metrics" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Schedule Tour",
            href: "contact"
          }}
        />
      </div>

      <div id="contact-form" data-section="contact-form">
        <ContactSplit
          tag="Get In Touch"
          title="Connect With Our Real Estate Experts"
          description="Whether you're looking to buy, sell, or invest in Dubai's luxury property market, our experienced team is here to guide you through every step of the process. Schedule a consultation today."
          useInvertedBackground="noInvert"
          inputPlaceholder="Enter your email address"
          buttonText="Schedule Consultation"
          termsText="Your privacy is important to us. We'll never share your information with third parties."
          mediaPosition="right"
        />
      </div>

      <div id="newsletter-signup" data-section="newsletter-signup">
        <ContactSplit
          tag="Newsletter"
          title="Exclusive Property Opportunities"
          description="Join our VIP list and be the first to know about off-market properties, exclusive listings, and prime investment opportunities in Dubai's most sought-after locations."
          useInvertedBackground="invertDefault"
          inputPlaceholder="Enter your email for exclusive access"
          buttonText="Join VIP List"
          termsText="Unsubscribe anytime. We respect your privacy and send only valuable property insights."
          mediaPosition="left"
        />
      </div>

      <div id="office-location" data-section="office-location">
        <MediaAbout
          title="Visit Our Dubai Office"
          description="Located in the heart of Dubai's business district, our modern office provides a premium environment for property consultations. Meet our expert team and explore our exclusive property portfolio in person. Appointments available seven days a week."
          tag="Our Location"
          buttons={[
            { text: "Book Appointment", href: "contact" },
            { text: "View Properties", href: "/" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/landmark-sea-waterfront-dusk-modern_1203-6139.jpg"
          imageAlt="Luxe Dubai Properties office with Dubai skyline view"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="Luxe Dubai Properties"
          columns={[
            {
              title: "Properties",
              items: [
                { label: "Apartments", href: "/#properties" },
                { label: "Villas", href: "/#properties" },
                { label: "Commercial", href: "/#properties" },
                { label: "Land", href: "/#properties" }
              ]
            },
            {
              title: "Company",
              items: [
                { label: "About Us", href: "/about" },
                { label: "Our Team", href: "/about" },
                { label: "Market Reports", href: "/#metrics" },
                { label: "Blog", href: "#blog" }
              ]
            },
            {
              title: "Services",
              items: [
                { label: "Buy Property", href: "/#properties" },
                { label: "Sell Property", href: "/contact" },
                { label: "Rent Property", href: "/#properties" },
                { label: "Investment Consultation", href: "/contact" }
              ]
            },
            {
              title: "Legal",
              items: [
                { label: "Privacy Policy", href: "/privacy" },
                { label: "Terms of Service", href: "/terms" },
                { label: "Cookie Policy", href: "/cookies" },
                { label: "Contact Us", href: "/contact" }
              ]
            }
          ]}
          copyrightText="© 2025 Luxe Dubai Properties. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}