@extends('layouts.public')

@section('title', 'Contact Us - M-Ajira')

@section('content')

<!-- Hero Section -->
<section class="relative min-h-[250px] overflow-hidden bg-gradient-to-br from-blue-700 via-blue-800 to-blue-900">
    <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTM2IDE2YzAtNi42MjcgNS4zNzMtMTIgMTItMTJzMTIgNS4zNzMgMTIgMTItNS4zNzMgMTItMTIgMTItMTItNS4zNzMtMTItMTJ6bTAgMzZjMC02LjYyNyA1LjM3My0xMiAxMi0xMnMxMiA1LjM3MyAxMiAxMi01LjM3MyAxMi0xMiAxMi0xMi01LjM3My0xMi0xMnoiLz48L2c+PC9nPjwvc3ZnPg==')] opacity-10"></div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10 py-20">
        <!-- <div class="inline-block bg-white/10 backdrop-blur-sm px-6 py-3 rounded-full mb-6 border border-white/20">
            <span class="text-white font-semibold text-sm">Get In Touch</span>
        </div> -->
        
        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-4">Contact Us</h1>
        <!-- <p class="text-xl text-white/90 max-w-3xl mx-auto">
            Have questions? We're here to help! Reach out to our team and we'll get back to you as soon as possible.
        </p> -->
    </div>
</section>

<!-- Main Content -->
<section class="py-20 bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        @if(session('success'))
            <div class="bg-green-50 border-2 border-green-400 rounded-2xl p-6 mb-8">
                <div class="flex items-center space-x-4">
                    <div class="w-12 h-12 bg-green-500 rounded-xl flex items-center justify-center flex-shrink-0">
                        <svg class="w-6 h-6 text-white" 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>
                        <h3 class="text-xl font-bold text-green-800 mb-1">Message Sent Successfully!</h3>
                        <p class="text-green-700">{{ session('success') }}</p>
                    </div>
                </div>
            </div>
        @endif>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
            
            <!-- Contact Form -->
            <div class="bg-white rounded-2xl p-10 shadow-xl">
                <div class="mb-8">
                    <div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center mb-6">
                        <svg class="w-8 h-8 text-white" 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>
                    <h2 class="text-3xl font-bold text-gray-900 mb-3">Send Us a Message</h2>
                    <p class="text-gray-700 text-lg">Fill out the form below and we'll respond within 24 hours</p>
                </div>
                
                <form method="POST" action="{{ route('contact.submit') }}" class="space-y-6">
                    @csrf
                    
                    <div>
                        <label class="block text-sm font-bold text-gray-900 mb-2">Full Name *</label>
                        <input type="text" name="name" required
                            class="w-full px-6 py-4 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition text-lg">
                    </div>

                    <div>
                        <label class="block text-sm font-bold text-gray-900 mb-2">Email Address *</label>
                        <input type="email" name="email" required
                            class="w-full px-6 py-4 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition text-lg">
                    </div>

                    <div>
                        <label class="block text-sm font-bold text-gray-900 mb-2">Phone Number *</label>
                        <input type="text" name="phone" required placeholder="+254 700 000 000"
                            class="w-full px-6 py-4 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition text-lg">
                    </div>

                    <div>
                        <label class="block text-sm font-bold text-gray-900 mb-2">Subject *</label>
                        <input type="text" name="subject" required
                            class="w-full px-6 py-4 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition text-lg">
                    </div>

                    <div>
                        <label class="block text-sm font-bold text-gray-900 mb-2">Your Message *</label>
                        <textarea name="message" rows="6" required
                            class="w-full px-6 py-4 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition text-lg resize-none"></textarea>
                    </div>

                    <button type="submit" class="w-full btn-primary text-white font-bold py-5 rounded-xl hover:shadow-2xl text-xl inline-flex items-center justify-center group">
                        <span>Send Message</span>
                        <svg class="w-6 h-6 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
                        </svg>
                    </button>
                </form>
            </div>

            <!-- Contact Information -->
            <div class="space-y-6">
                <div class="bg-white rounded-2xl p-10 shadow-xl">
                    <div class="mb-8">
                        <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-xl flex items-center justify-center mb-6">
                            <svg class="w-8 h-8 text-white" 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>
                        <h2 class="text-3xl font-bold text-gray-900 mb-3">Contact Information</h2>
                        <p class="text-gray-700 text-lg">Reach us through any of these channels</p>
                    </div>
                    
                    <div class="space-y-8">
                        <!-- Email -->
                        <div class="flex items-start space-x-4">
                            <div class="w-14 h-14 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center flex-shrink-0">
                                <svg class="w-7 h-7 text-white" 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>
                                <h3 class="font-bold text-gray-900 text-xl mb-1">Email</h3>
                                <a href="mailto: info@m-ajira.co.ke" class="text-purple-600 text-lg hover:underline">info@m-ajira.co.ke</a>
                                <p class="text-gray-600 text-sm mt-1">We reply within 24 hours</p>
                            </div>
                        </div>

                        <!-- Phone -->
                        <div class="flex items-start space-x-4">
                            <div class="w-14 h-14 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-xl flex items-center justify-center flex-shrink-0">
                                <svg class="w-7 h-7 text-white" 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>
                            <div>
                                <h3 class="font-bold text-gray-900 text-xl mb-1">Phone</h3>
                                <p class="text-purple-600 text-lg">Call: +254 709 488881</p>
                                <!-- <p class="text-purple-600 text-lg">WhatsApp: +254 721 592292</p> -->
                                <p class="text-gray-600 text-sm mt-1">Mon-Fri, 8AM - 6PM EAT</p>
                            </div>
                        </div>

                        <!-- Office -->
                        <div class="flex items-start space-x-4">
                            <div class="w-14 h-14 bg-gradient-to-br from-green-500 to-emerald-500 rounded-xl flex items-center justify-center flex-shrink-0">
                                <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                                </svg>
                            </div>
                            <div>
                                <h3 class="font-bold text-gray-900 text-xl mb-1">Office Kenya</h3>
                                <p class="text-gray-700 text-lg">12th Floor, View Park Towers</p>
                                <p class="text-gray-700 text-lg">Utalii Lane, Nairobi, Kenya</p>
                            </div>
                            <div>
                                <h3 class="font-bold text-gray-900 text-xl mb-1">Office Dubai</h3>
                                <p class="text-gray-700 text-lg">Spaces Commercity</p>
                                <p class="text-gray-700 text-lg">Umm Ramool, 11020, Dubai</p>
                            </div>
                        </div>

                        <!-- Business Hours -->
                        <div class="flex items-start space-x-4">
                            <div class="w-14 h-14 bg-gradient-to-br from-orange-500 to-red-500 rounded-xl flex items-center justify-center flex-shrink-0">
                                <svg class="w-7 h-7 text-white" 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>
                            <div>
                                <h3 class="font-bold text-gray-900 text-xl mb-1">Business Hours</h3>
                                <p class="text-gray-700 text-lg">Monday - Friday: 8AM - 6PM</p>
                                <p class="text-gray-700 text-lg">Saturday: 9AM - 2PM</p>
                                <p class="text-gray-600 text-sm mt-1">Closed on Sundays & Public Holidays</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Social Media -->
                <div class="bg-white rounded-2xl p-8 shadow-xl">
                    <h3 class="text-2xl font-bold text-gray-900 mb-6">Follow Us</h3>
                    <div class="flex space-x-4">
                        <a href="https://www.facebook.com/profile.php?id=61584699119649" class="w-14 h-14 bg-gradient-to-br from-blue-600 to-blue-700 rounded-xl flex items-center justify-center hover:scale-110 transition-transform" aria-label="Facebook">
                            <svg class="w-7 h-7 text-white" 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"></path>
                            </svg>
                        </a>

                        <a href="https://www.tiktok.com/@m.ajira.digital" class="w-14 h-14 bg-gradient-to-br from-gray-900 to-black rounded-xl flex items-center justify-center hover:scale-110 transition-transform" aria-label="TikTok">
                            <svg class="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.17-2.86-.6-4.12-1.31a8.11 8.11 0 01-1.87-1.41v7.14c0 2.1-.51 4.21-1.76 5.8-1.55 2.03-4.13 3.12-6.62 2.83-2.61-.25-5.06-2.22-5.74-4.79-.79-3.11.81-6.57 3.75-7.85.83-.37 1.74-.55 2.65-.56V14.3c-1.01.12-2.01.59-2.67 1.36-.78.89-1 2.18-.58 3.3.41 1.17 1.55 2.02 2.79 2.03 1.25.03 2.47-.7 2.97-1.84.29-.62.39-1.31.38-2V0h.02z"></path>
                            </svg>
                        </a>
                    </div>
                </div>

                <!-- Quick Help -->
                <div class="bg-gradient-to-br from-purple-500 to-pink-500 rounded-2xl p-8 text-white shadow-xl">
                    <div class="w-14 h-14 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center mb-4">
                        <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold mb-3">Need Quick Help?</h3>
                    <p class="text-white/90 mb-6">Our team is available during business hours to assist you with any questions.</p>
                    <a href="tel:+254709488881" class="inline-flex items-center bg-white text-purple-600 font-bold px-6 py-3 rounded-xl hover:shadow-lg transition group">
                        <span>Call Us Now</span>
                        <svg class="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-20 bg-gradient-to-br from-slate-100 via-gray-100 to-zinc-100">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <!-- <span class="inline-block px-4 py-2 bg-gray-800 text-white rounded-full font-semibold text-sm uppercase tracking-wider mb-4">Location</span> -->
            <h2 class="inline-block px-5 py-2 bg-gray-800 text-white rounded-full text-2xl md:text-3xl font-semibold mb-4">Find Us Here</h2>
            <p class="text-xl text-gray-700">Our office is conveniently located in Nairobi</p>
        </div>

        <div class="bg-white p-6 rounded-3xl shadow-xl">
            <div class="w-full h-96 bg-gray-200 rounded-2xl overflow-hidden relative">
                <iframe 
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d127641.06649884523!2d36.75841416801977!3d-1.291778170293627!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x182f1172d84d49a7%3A0xf7cf0254b297924c!2sNairobi!5e0!3m2!1sen!2ske!4v1709210000000!5m2!1sen!2ske" 
                    width="100%" 
                    height="100%" 
                    style="border:0;" 
                    allowfullscreen="" 
                    loading="lazy" 
                    referrerpolicy="no-referrer-when-downgrade">
                </iframe>
            </div>
        </div>
    </div>
</section>

@endsection