'use client';

import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Instagram, Facebook } from 'lucide-react';

const navItems = [
  { name: 'Home', id: '/' },
  { name: 'About', id: '/about' },
  { name: 'Contact', id: '/contact' }
];

export default function ContactPage() {
  return (
    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen navItems={navItems} brandName="Webild" />
      </div>
      <div id="location" data-section="location">
        <ContactSplitForm
          title="Get in Touch"
          description="We'd love to hear from you."
          inputs={[{ name: "name", type: "text", placeholder: "Name" }, { name: "email", type: "email", placeholder: "Email" }]}
          imageSrc="https://images.unsplash.com/photo-1507041957456-9c39a439c730?q=80&w=800"
          useInvertedBackground={false}
        />
      </div>
      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Webild"
          socialLinks={[{ icon: Instagram, href: "#", ariaLabel: "Instagram" }, { icon: Facebook, href: "#", ariaLabel: "Facebook" }]}
        />
      </div>
    </ThemeProvider>
  );
}