"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import TextAbout from "@/components/sections/about/TextAbout";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
import Link from "next/link";

const navItems = [
  { name: "Home", id: "home" },
  { name: "About", id: "about" },
  { name: "Portfolio", id: "portfolio" },
  { name: "Services", id: "services" },
  { name: "Contact", id: "contact" },
];

const navButton = {
  text: "Check Availability",  href: "/contact"};

export default function ContactPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="medium"
      sizing="medium"
      background="circleGradient"
      cardStyle="gradient-mesh"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={navItems}
          button={navButton}
          brandName="Overthemoonstory"
        />
      </div>

      <div id="contact-intro" data-section="contact-intro">
        <TextAbout
          tag="Get In Touch"
          title="Let's discuss your wedding vision and check our availability for your special date."
          useInvertedBackground={false}
          buttons={[]}
        />
      </div>

      <div id="contact-form" data-section="contact-form">
        <ContactCenter
          tag="Limited Bookings"
          title="Let's Capture Your Forever"
          description="We take on a limited number of weddings each season to ensure exceptional quality and personal attention. Get in touch today to check availability and discuss your wedding vision."
          background={{ variant: "rotated-rays-animated" }}
          useInvertedBackground={false}
          inputPlaceholder="your@email.com"
          buttonText="Check Availability"
          termsText="By submitting your information, you agree to be contacted about your wedding. We respect your privacy and will never share your details."
        />
      </div>

      <div id="contact-info" data-section="contact-info">
        <TextAbout
          tag="Contact Methods"
          title="Reach out to us via phone, email, WhatsApp, or visit our studio in BTM Layout, Bengaluru to discuss your wedding cinematography needs."
          useInvertedBackground={false}
          buttons={[]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Navigation",              items: [
                { label: "Home", href: "/" },
                { label: "About", href: "/about" },
                { label: "Portfolio", href: "/portfolio" },
                { label: "Services", href: "/services" },
              ],
            },
            {
              title: "Contact",              items: [
                { label: "Call Now", href: "tel:+919876543210" },
                { label: "Email", href: "mailto:hello@overthemoonstory.com" },
                { label: "WhatsApp", href: "https://wa.me/919876543210" },
                { label: "Address", href: "#" },
              ],
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Booking Terms", href: "#" },
              ],
            },
          ]}
          copyrightText="© 2025 Overthemoonstory. All rights reserved. | Bengaluru, Karnataka"
        />
      </div>
    </ThemeProvider>
  );
}