"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import Link from "next/link";

interface FooterProps {
  brandName?: string;
  navItems: Array<{ name: string; href: string; }>;
}

const Footer: React.FC<FooterProps> = ({ brandName = "Nexsoft Australia", navItems }) => {
  return (
    <footer className="w-full py-8 bg-card text-foreground border-t border-accent mt-16">
      <div className="mx-auto px-4 md:px-6 max-w-7xl flex flex-col md:flex-row justify-between items-center gap-4">
        <div className="text-lg font-bold">
          {brandName}
        </div>
        <nav className="flex flex-wrap justify-center gap-6">
          {navItems.map((item) => (
            <Link key={item.href} href={item.href} className="text-foreground hover:text-primary-cta">
              {item.name}
            </Link>
          ))}
        </nav>
        <div className="text-sm text-foreground/80">
          © {new Date().getFullYear()} {brandName}. All rights reserved.
        </div>
      </div>
    </footer>
  );
};

export default function ContactPage() {
  const navItems = [
    {name: "Home", id: "home", href: "/"},
    {name: "Contact us", id: "contact", href: "/contact"}
  ];

  const navbarProps = {
    brandName: "Nexsoft Australia",    navItems: navItems,
    button: {text: "Get a Quote", href: "/contact"}
  };

  const handleFormSubmit = (data: Record<string, string>) => {
    console.log("Form submitted:", data);
    alert("Thank you for your message! We will get back to you soon.");
  };

  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="medium"
      sizing="largeSmall"
      background="blurBottom"
      cardStyle="gradient-radial"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay {...navbarProps} />
      </div>
      <div id="contact-form" data-section="contact-form">
        <ContactSplitForm
          title="Get in Touch"
          description="We'd love to hear from you! Fill out the form below or find us on the map."
          inputs={[
            { name: "name", type: "text", placeholder: "Your Name", required: true },
            { name: "email", type: "email", placeholder: "Your Email", required: true }
          ]}
          textarea={{ name: "message", placeholder: "Your Message", rows: 5, required: true }}
          buttonText="Send Message"
          imageSrc="https://picsum.photos/id/1083/800/600?grayscale&blur=2" 
          imageAlt="Office location map"
          mediaPosition="right"
          useInvertedBackground={false}
          onSubmit={handleFormSubmit}
          className="pt-24 md:pt-32 pb-16"
        />
      </div>
      <Footer brandName="Nexsoft Australia" navItems={navItems} />
    </ThemeProvider>
  );
}