'use client';

import { ThemeProvider } from '@/components/ThemeProvider';
import { NavbarStyleApple } from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import { ContactSplitForm } from '@/components/sections/contact/ContactSplitForm';
import { AnimatedAuroraBackground } from '@/components/background/AnimatedAuroraBackground';
import { FooterLogoEmphasis } from '@/components/sections/footer/FooterLogoEmphasis';
import { ButtonBounceEffect } from '@/components/button/ButtonBounceEffect/ButtonBounceEffect';
import { Instagram, MessageCircleMore } 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' },
  ];

  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"
    >
      <NavbarStyleApple navItems={navItems} brandName="Hala Diamonds" />

      <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">
            <ButtonBounceEffect
                text="Chat on WhatsApp"
                href="https://wa.me/1234567890" // Placeholder WhatsApp number
                target="_blank"
                rel="noopener noreferrer"
                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" />

      <FooterLogoEmphasis
        logoSrc="/path/to/hala-diamonds-logo.png" // Placeholder, update with actual logo path
        logoAlt="Hala Diamonds Logo"
        logoText="Hala Diamonds"
        columns={[
          { items: [{ label: 'Home', href: '/' }, { label: 'About Us', href: '/about' }] },
          { items: [{ label: 'Contact Us', href: '/contact' }] },
        ]}
      />
    </ThemeProvider>
  );
}
