@extends('layouts.app')

@section('title', 'Contact Us')

@section('content')
<div class="container mx-auto px-4 py-12">
    <x-breadcrumbs :items="[
        ['label' => 'Home', 'url' => route('home')],
        ['label' => 'Contact']
    ]" />
    <div class="max-w-4xl mx-auto">
        <h1 class="text-5xl font-serif font-bold mb-12 text-center text-black">Contact Us</h1>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <!-- Contact Form -->
            <div class="bg-white p-8 rounded-2xl shadow-md border border-[#d1d5db]">
                <h2 class="text-2xl font-serif font-bold mb-6 text-black">Send us a Message</h2>
                <form id="contact-form" class="space-y-5">
                    @csrf
                    <div>
                        <label for="contact-name" class="block text-sm font-semibold mb-2 text-black">Name</label>
                        <input type="text" id="contact-name" name="name" required 
                            class="w-full px-4 py-3 border-2 border-[#d1d5db] rounded-xl focus:ring-2 focus:ring-black focus:border-black transition-all outline-none text-black">
                    </div>
                    <div>
                        <label for="contact-email" class="block text-sm font-semibold mb-2 text-black">Email</label>
                        <input type="email" id="contact-email" name="email" required 
                            class="w-full px-4 py-3 border-2 border-[#d1d5db] rounded-xl focus:ring-2 focus:ring-black focus:border-black transition-all outline-none text-black">
                    </div>
                    <div>
                        <label for="contact-message" class="block text-sm font-semibold mb-2 text-black">Message</label>
                        <textarea id="contact-message" name="message" rows="5" required 
                            class="w-full px-4 py-3 border-2 border-[#d1d5db] rounded-xl focus:ring-2 focus:ring-black focus:border-black transition-all outline-none text-black resize-none"></textarea>
                    </div>
                    <button type="submit" class="w-full bg-black text-white px-6 py-3 rounded-full hover:bg-[#1a1a1a] transition-all font-semibold shadow-lg hover:shadow-xl transform hover:scale-105">
                        Send Message
                    </button>
                </form>
            </div>
            
            <!-- Contact Info -->
            <div class="bg-white p-8 rounded-2xl shadow-md border border-[#d1d5db]">
                <h2 class="text-2xl font-serif font-bold mb-6 text-black">Get in Touch</h2>
                <div class="space-y-6">
                    <div class="flex items-start gap-3">
                        <svg class="w-5 h-5 text-[#e6d5b8] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                        </svg>
                        <div>
                            <h3 class="font-semibold mb-2 text-black">Email</h3>
                            <p class="text-black"><a href="mailto:memoryclosetmedia@gmail.com" class="text-[#e6d5b8] hover:text-black transition-colors">memoryclosetmedia@gmail.com</a></p>
                        </div>
                    </div>
                    <div class="flex items-start gap-3">
                        <svg class="w-5 h-5 text-[#e6d5b8] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                        </svg>
                        <div>
                            <h3 class="font-semibold mb-2 text-black">Phone</h3>
                            <p class="text-black"><a href="tel:+27818352564" class="text-[#e6d5b8] hover:text-black transition-colors">+27 81 835 2564</a></p>
                        </div>
                    </div>
                    <div class="flex items-start gap-3">
                        <svg class="w-5 h-5 text-[#e6d5b8] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                        </svg>
                        <div>
                            <h3 class="font-semibold mb-2 text-black">Address</h3>
                            <p class="text-black">
                                <a href="https://www.google.com/maps?q=Ray+Phiri+Street,+Musina,+Limpopo,+0900,+South+Africa"
                                   target="_blank"
                                   rel="noopener"
                                   class="underline hover:text-[#4b5563]">
                                    Ray Phiri Street<br>Musina, Limpopo, 0900<br>South Africa
                                </a>
                            </p>
                        </div>
                    </div>
                    <div class="flex items-start gap-3">
                        <svg class="w-5 h-5 text-[#e6d5b8] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        <div>
                            <h3 class="font-semibold mb-2 text-black">Business Hours</h3>
                            <p class="text-black">08:00 to 17:00</p>
                        </div>
                    </div>
                    <div>
                        <h3 class="font-semibold mb-3 text-black">Social Media</h3>
                        <div class="flex flex-col space-y-3">
                            <a href="https://www.facebook.com/Memoryclosetphotography" target="_blank" class="text-[#e6d5b8] hover:text-black transition-colors flex items-center gap-2" aria-label="Facebook">
                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                                </svg>
                                <span>Facebook</span>
                            </a>
                            <a href="https://www.instagram.com/memoryclosetmedia?igsh=YzljYTk1ODg3Zg==" target="_blank" class="text-[#e6d5b8] hover:text-black transition-colors flex items-center gap-2" aria-label="Instagram">
                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
                                </svg>
                                <span>Instagram</span>
                            </a>
                            <a href="https://x.com/memorycloset" target="_blank" class="text-[#e6d5b8] hover:text-black transition-colors flex items-center gap-2" aria-label="Twitter/X">
                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
                                </svg>
                                <span>Twitter/X</span>
                            </a>
                            <a href="https://www.linkedin.com/company/108191448/admin/page-posts/published/" target="_blank" class="text-[#e6d5b8] hover:text-black transition-colors flex items-center gap-2" aria-label="LinkedIn">
                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
                                </svg>
                                <span>LinkedIn</span>
                            </a>
                            <a href="https://www.youtube.com/@MemoryclosetMedia" target="_blank" class="text-[#e6d5b8] hover:text-black transition-colors flex items-center gap-2" aria-label="YouTube">
                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
                                </svg>
                                <span>YouTube</span>
                            </a>
                            <a href="https://www.tiktok.com/@memory_closet" target="_blank" class="text-[#e6d5b8] hover:text-black transition-colors flex items-center gap-2" aria-label="TikTok">
                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"/>
                                </svg>
                                <span>TikTok</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.getElementById('contact-form')?.addEventListener('submit', async function(e) {
    e.preventDefault();
    const formData = new FormData(this);
    const response = await fetch('{{ route("contact.store") }}', {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        }
    });
    const data = await response.json();
    if (data.success) {
        showToast(data.message, 'success');
        this.reset();
    } else {
        showToast(data.message || 'Submission failed. Please try again.', 'error');
    }
});
</script>
@endpush