'use client';

import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import AnimatedAuroraBackground from '@/components/background/AnimatedAuroraBackground';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import ButtonIconArrow from '@/components/button/ButtonIconArrow';
import { Instagram } from 'lucide-react';
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Contact Hala Diamonds',
  description: "Reach out to Hala Diamonds for inquiries, custom orders, or any assistance. We're here to help you find the perfect diamond."
};

export default function ContactUs() {
  const navItems = [
    { name: 'Home', id: '/' },
    { name: 'About Us', id: '/about' },
    { name: 'Contact Us', id: '/contact' },
    { name: 'Bracelets', id: '/bracelets' },
    { name: 'Earrings', id: '/earrings' },
    { name: 'Necklaces', id: '/necklaces' },
    { name: 'Rings', id: '/rings-collection' }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="large"
      background="none"
      cardStyle="solid"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen navItems={navItems} brandName="Hala Diamonds" />
      </div>

      <div id="contact-us" data-section="contact-us">
        <ContactSplitForm
          title="Get in Touch"
          description="Reach out to us for inquiries, custom orders, or any assistance. We're here to help you find the perfect diamond."
          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
          }}
          useInvertedBackground={false}
          imageSrc="https://images.unsplash.com/photo-1542601901-b28670725a3a?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" // Placeholder, elegant contact image
          imageAlt="Contact Us"
          mediaPosition="left"
          buttonText="Send Message"
          onSubmit={(data) => console.log('Contact form submitted:', data)}
        />
        <div className="flex flex-col md:flex-row gap-4 items-center justify-center py-10 px-4 max-w-7xl mx-auto">
            <ButtonIconArrow
                text="Chat on WhatsApp"
                href="https://wa.me/1234567890" // Placeholder WhatsApp number
                className="bg-green-500 hover:bg-green-600 text-white rounded-md px-6 py-3 flex items-center justify-center gap-2"
                ariaLabel="Chat with us on WhatsApp"
            />
            <a
                href="https://www.instagram.com/haladiamonds" // Placeholder Instagram username
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center gap-2 text-foreground hover:text-primary-cta transition-colors p-3 rounded-md border border-card"
                aria-label="Follow us on Instagram"
            >
                <Instagram size={24} />
                <span>Follow us on Instagram</span>
            </a>
        </div>
      </div>

      <AnimatedAuroraBackground invertColors={false} className="-z-10" />

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            { title: 'Company', items: [{ label: 'Home', href: '/' }, { label: 'About Us', href: '/about' }] },
            { title: 'Support', items: [{ label: 'Contact Us', href: '/contact' }] }
          ]}
          bottomLeftText="© 2024 Hala Diamonds. All rights reserved."
          bottomRightText="Privacy Policy  Terms of Service"
        />
      </div>
    </ThemeProvider>
  );
}
