@extends('layouts.app')

@section('title', 'Contact - ' . \App\Models\Setting::get('site_title', 'Hannah Arinaitwe'))

@section('nav-class', 'nav-transparent-dark')

@section('content')
<div class="relative bg-theme-900 pt-36 md:pt-44 pb-32 overflow-hidden">
    <!-- Decorative background elements -->
    <div class="absolute inset-0 opacity-10">
        <div class="absolute -top-40 -right-40 w-96 h-96 rounded-full bg-pink-500 blur-3xl"></div>
        <div class="absolute top-40 -left-20 w-80 h-80 rounded-full bg-theme-300 blur-3xl"></div>
    </div>
    
    <div class="max-w-7xl mx-auto px-6 md:px-12 relative z-10 text-center">
        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold font-heading text-white mb-6">Let's Create Together</h1>
        <p class="text-xl text-white/80 max-w-2xl mx-auto leading-relaxed">Whether you're looking for speaking engagements, podcast sponsorships, or just want to say hello, I'd love to hear from you.</p>
    </div>
</div>

<div class="bg-gray-50 pb-24 pt-12 md:pt-20 relative z-20">
    <div class="max-w-7xl mx-auto px-6 md:px-12">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-16">
            
            <!-- Contact Info -->
            <div class="lg:col-span-5 pt-4 order-2 lg:order-1">
                <h2 class="text-3xl font-bold text-gray-900 mb-8 font-heading">Get in Touch</h2>
                
                <div class="space-y-8">
                    <div class="flex items-start gap-4">
                        <div class="w-12 h-12 bg-white rounded-full shadow-sm flex items-center justify-center flex-shrink-0 text-theme-600">
                            <svg class="w-6 h-6" 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>
                        <div>
                            <h4 class="text-lg font-bold text-gray-900">Email Me</h4>
                            <p class="text-gray-500 mt-1">hannah@example.com</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start gap-4">
                        <div class="w-12 h-12 bg-white rounded-full shadow-sm flex items-center justify-center flex-shrink-0 text-theme-600">
                            <svg class="w-6 h-6" 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>
                        <div>
                            <h4 class="text-lg font-bold text-gray-900">Location</h4>
                            <p class="text-gray-500 mt-1">Kampala, Uganda</p>
                        </div>
                    </div>
                </div>

                <div class="mt-12 pt-12 border-t border-gray-200">
                    <h4 class="text-lg font-bold text-gray-900 mb-4">Follow Me</h4>
                    <div class="flex gap-4">
                        <a href="https://x.com/arinaitwehannah" target="_blank" class="w-10 h-10 bg-white rounded-full shadow-sm flex items-center justify-center text-gray-500 hover:text-theme-600 hover:shadow-md transition-all">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></svg>
                        </a>
                        <a href="https://www.linkedin.com/in/hannah-arinaitwe-b510861a6?utm_source=share_via&utm_content=profile&utm_medium=member_android" target="_blank" class="w-10 h-10 bg-white rounded-full shadow-sm flex items-center justify-center text-gray-500 hover:text-theme-600 hover:shadow-md transition-all">
                            <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-.924 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>
                        </a>
                        <a href="https://www.instagram.com/arinaitwe_hannah?igsh=dnBqODdlbHR5YzYw" target="_blank" class="w-10 h-10 bg-white rounded-full shadow-sm flex items-center justify-center text-gray-500 hover:text-theme-600 hover:shadow-md transition-all">
                            <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-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.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.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
                        </a>
                        <a href="https://www.tiktok.com/@arinaitwehannah?_r=1&_t=ZS-97jHAJ2w1wG" target="_blank" class="w-10 h-10 bg-white rounded-full shadow-sm flex items-center justify-center text-gray-500 hover:text-theme-600 hover:shadow-md transition-all">
                            <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>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Contact Form -->
            <div class="lg:col-span-7 order-1 lg:order-2">
                <div class="bg-white rounded-3xl shadow-xl p-8 md:p-12 border border-gray-100 mt-2">
                    @if(session('success'))
                        <div class="bg-green-50 border border-green-100 rounded-xl p-6 mb-8 flex items-start gap-4">
                            <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0 text-green-600">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                            </div>
                            <div>
                                <h4 class="text-green-800 font-bold text-lg mb-1">Message Sent!</h4>
                                <p class="text-green-700">{{ session('success') }}</p>
                            </div>
                        </div>
                    @endif

                    <form action="{{ route('contact.submit') }}" method="POST" class="space-y-6">
                        @csrf
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label for="name" class="block text-sm font-bold text-gray-700 mb-2">Your Name</label>
                                <input type="text" name="name" id="name" class="form-input rounded-xl bg-gray-50 border-gray-200 focus:bg-white @error('name') border-red-500 @enderror" value="{{ old('name') }}" placeholder="John Doe" required>
                                @error('name')
                                    <p class="text-red-500 text-xs mt-2 font-medium">{{ $message }}</p>
                                @enderror
                            </div>
                            <div>
                                <label for="email" class="block text-sm font-bold text-gray-700 mb-2">Email Address</label>
                                <input type="email" name="email" id="email" class="form-input rounded-xl bg-gray-50 border-gray-200 focus:bg-white @error('email') border-red-500 @enderror" value="{{ old('email') }}" placeholder="john@example.com" required>
                                @error('email')
                                    <p class="text-red-500 text-xs mt-2 font-medium">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div>
                            <label for="reason" class="block text-sm font-bold text-gray-700 mb-2">Reason for Contacting</label>
                            <select name="reason" id="reason" class="form-input rounded-xl bg-gray-50 border-gray-200 focus:bg-white @error('reason') border-red-500 @enderror" required>
                                <option value="" disabled {{ old('reason') ? '' : 'selected' }}>Please select an option...</option>
                                <option value="Podcast Guest" {{ old('reason') == 'Podcast Guest' ? 'selected' : '' }}>Podcast Guest Inquiry</option>
                                <option value="TV Guest" {{ old('reason') == 'TV Guest' ? 'selected' : '' }}>TV Guest / Appearance</option>
                                <option value="Event" {{ old('reason') == 'Event' ? 'selected' : '' }}>Event Invitation</option>
                                <option value="Partnership" {{ old('reason') == 'Partnership' ? 'selected' : '' }}>Partnership / Sponsorship</option>
                                <option value="Networking" {{ old('reason') == 'Networking' ? 'selected' : '' }}>Networking & Connecting</option>
                                <option value="Feedback" {{ old('reason') == 'Feedback' ? 'selected' : '' }}>General Feedback</option>
                                <option value="Complaint" {{ old('reason') == 'Complaint' ? 'selected' : '' }}>Complaint</option>
                                <option value="Other" {{ old('reason') == 'Other' ? 'selected' : '' }}>Other</option>
                            </select>
                            @error('reason')
                                <p class="text-red-500 text-xs mt-2 font-medium">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="subject" class="block text-sm font-bold text-gray-700 mb-2">Subject</label>
                            <input type="text" name="subject" id="subject" class="form-input rounded-xl bg-gray-50 border-gray-200 focus:bg-white @error('subject') border-red-500 @enderror" value="{{ old('subject') }}" placeholder="How can I help you?" required>
                            @error('subject')
                                <p class="text-red-500 text-xs mt-2 font-medium">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="message" class="block text-sm font-bold text-gray-700 mb-2">Message</label>
                            <textarea name="message" id="message" rows="5" class="form-input rounded-xl bg-gray-50 border-gray-200 focus:bg-white @error('message') border-red-500 @enderror" placeholder="Tell me about your project, event, or inquiry..." required>{{ old('message') }}</textarea>
                            @error('message')
                                <p class="text-red-500 text-xs mt-2 font-medium">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="pt-2">
                            <button type="submit" class="w-full bg-theme-900 hover:bg-theme-800 text-white font-bold py-4 px-8 rounded-xl transition-all shadow-lg shadow-theme-900/30 flex items-center justify-center gap-2">
                                Send Message
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection