"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import Link from "next/link";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Mail, Facebook, Instagram, Linkedin, Twitter } from 'lucide-react';

export default function ContactPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="medium"
      background="circleGradient"
      cardStyle="gradient-radial"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Prestige Realty Dubai"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Properties", id: "/properties" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{
            text: "Schedule Viewing",
            href: "/contact"
          }}
          className="bg-white/80 backdrop-blur-md"
          navItemClassName="text-foreground font-semibold hover:text-primary-cta transition-colors"
          buttonClassName="bg-primary-cta hover:bg-primary-cta/90 text-white"
          buttonTextClassName="font-semibold"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Newsletter"
          tagIcon={Mail}
          title="Stay Updated on Exclusive Listings"
          description="Subscribe to receive curated property updates, market insights, and exclusive investment opportunities delivered directly to your inbox."
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/positive-business-team-discussing-report-sitting-meeting-table-with-monitor-holding-looking-documents-business-meeting-teamwork-concept_74855-11909.jpg"
          imageAlt="Prestige Realty Dubai modern office"
          mediaPosition="right"
          inputPlaceholder="Enter your email address"
          buttonText="Subscribe"
          termsText="We respect your privacy. You can unsubscribe anytime. For details, see our Privacy Policy."
          className="w-full"
          containerClassName="py-20 px-6"
          titleClassName="text-3xl md:text-4xl font-extrabold text-foreground"
          descriptionClassName="text-base text-foreground/75"
        />
      </div>

      <FooterCard
        logoText="Prestige Realty Dubai"
        copyrightText="© 2025 Prestige Realty Dubai. All rights reserved. | Premium Real Estate Solutions"
        socialLinks={[
          { icon: Facebook, href: "https://facebook.com/prestigerealtydubai", ariaLabel: "Visit our Facebook page" },
          { icon: Instagram, href: "https://instagram.com/prestigerealtydubai", ariaLabel: "Follow us on Instagram" },
          { icon: Linkedin, href: "https://linkedin.com/company/prestigerealtydubai", ariaLabel: "Connect with us on LinkedIn" },
          { icon: Twitter, href: "https://twitter.com/prestigedubai", ariaLabel: "Follow us on Twitter" }
        ]}
        className="w-full"
        containerClassName="py-12 px-6"
        cardClassName="rounded-2xl"
        logoClassName="text-2xl font-extrabold text-foreground"
        copyrightTextClassName="text-foreground/70 text-sm"
      />
    </ThemeProvider>
  );
}