@extends('layouts.app')

@section('title', 'Contact Us - ECA Networks')

@section('content')

<!-- Hero -->
<div class="bg-gradient-to-r from-navy to-blue-900 text-white py-16">
    <div class="max-w-4xl mx-auto px-4 text-center">
        <h1 class="text-4xl font-bold mb-3">Get In Touch</h1>
        <p class="text-blue-200 text-lg">We'd love to hear from you. Send us a message and we'll respond as soon as possible.</p>
    </div>
</div>

<section class="py-16">
    <div class="max-w-7xl mx-auto px-4">
        <!-- Contact Info Cards -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-12">
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 text-center hover:shadow-md transition-shadow">
                <div class="w-12 h-12 bg-electric-blue/10 rounded-xl flex items-center justify-center mx-auto mb-3">
                    <i class="fas fa-phone text-electric-blue text-xl"></i>
                </div>
                <h3 class="font-semibold text-navy mb-1 text-sm">Phone</h3>
                <a href="tel:+254720309309" class="text-gray-600 text-sm hover:text-electric-blue">+254 720 309 309</a>
            </div>
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 text-center hover:shadow-md transition-shadow">
                <div class="w-12 h-12 bg-electric-blue/10 rounded-xl flex items-center justify-center mx-auto mb-3">
                    <i class="fas fa-envelope text-electric-blue text-xl"></i>
                </div>
                <h3 class="font-semibold text-navy mb-1 text-sm">Email</h3>
                <a href="mailto:info@ecanetworks.com" class="text-gray-600 text-sm hover:text-electric-blue">info@ecanetworks.com</a>
            </div>
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 text-center hover:shadow-md transition-shadow">
                <div class="w-12 h-12 bg-electric-blue/10 rounded-xl flex items-center justify-center mx-auto mb-3">
                    <i class="fas fa-map-marker-alt text-electric-blue text-xl"></i>
                </div>
                <h3 class="font-semibold text-navy mb-1 text-sm">Location</h3>
                <p class="text-gray-600 text-sm">21, Amee Properties, Embasaki, Nairobi</p>
            </div>
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 text-center hover:shadow-md transition-shadow">
                <div class="w-12 h-12 bg-electric-blue/10 rounded-xl flex items-center justify-center mx-auto mb-3">
                    <i class="fas fa-clock text-electric-blue text-xl"></i>
                </div>
                <h3 class="font-semibold text-navy mb-1 text-sm">Business Hours</h3>
                <p class="text-gray-600 text-sm">Mon - Fri: 8am - 5pm</p>
                <p class="text-gray-600 text-sm">Sat: 8am - 2pm</p>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-10">
            <!-- Contact Form -->
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-8">
                <h2 class="text-2xl font-bold text-navy mb-6">Send Us a Message</h2>

                @if(session('success'))
                <div class="bg-green-50 border border-green-200 text-green-800 rounded-xl p-4 mb-6 flex items-center gap-2">
                    <i class="fas fa-check-circle text-green-600"></i>
                    {{ session('success') }}
                </div>
                @endif

                <form action="{{ route('contact.submit') }}" method="POST" class="space-y-5">
                    @csrf
                    <input type="hidden" name="form_time" value="{{ $formTime }}">
                    <div style="position:absolute; left:-9999px; top:-9999px;" aria-hidden="true">
                        <label for="website">Leave this field empty</label>
                        <input type="text" name="website" id="website" tabindex="-1" autocomplete="off">
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1.5">Your Name <span class="text-red-500">*</span></label>
                            <input type="text" name="name" value="{{ old('name') }}" required
                                class="w-full border border-gray-200 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-electric-blue @error('name') border-red-500 @enderror"
                                placeholder="John Doe">
                            @error('name')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1.5">Email Address <span class="text-red-500">*</span></label>
                            <input type="email" name="email" value="{{ old('email') }}" required
                                class="w-full border border-gray-200 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-electric-blue @error('email') border-red-500 @enderror"
                                placeholder="you@example.com">
                            @error('email')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1.5">Subject <span class="text-red-500">*</span></label>
                        <input type="text" name="subject" value="{{ old('subject') }}" required
                            class="w-full border border-gray-200 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-electric-blue @error('subject') border-red-500 @enderror"
                            placeholder="How can we help?">
                        @error('subject')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1.5">Message <span class="text-red-500">*</span></label>
                        <textarea name="message" rows="5" required
                            class="w-full border border-gray-200 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-electric-blue @error('message') border-red-500 @enderror"
                            placeholder="Tell us more about your inquiry...">{{ old('message') }}</textarea>
                        @error('message')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>
                    <button type="submit" class="w-full bg-electric-blue text-white py-3.5 rounded-xl font-bold hover:bg-blue-dark transition-colors shadow-lg">
                        <i class="fas fa-paper-plane mr-2"></i> Send Message
                    </button>
                </form>
            </div>

            <!-- Map & Info -->
            <div class="space-y-6">
                <!-- Google Maps Embed Placeholder -->
                <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
                    <div class="h-80 bg-gray-100 flex items-center justify-center">
                        <!-- Replace src below with actual Google Maps embed URL -->
                        <iframe
                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15955.084498834458!2d36.81395!3d-1.28333!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x182f10d22f42bf41%3A0xf4d1c4e29a7d0f9b!2sNairobi%20CBD!5e0!3m2!1sen!2ske!4v1610000000000!5m2!1sen!2ske"
                            width="100%"
                            height="320"
                            style="border:0;"
                            allowfullscreen=""
                            loading="lazy"
                            class="grayscale hover:grayscale-0 transition-all duration-300">
                        </iframe>
                    </div>
                </div>

                <!-- WhatsApp CTA -->
                <div class="bg-green-50 rounded-2xl border border-green-200 p-6">
                    <div class="flex items-center gap-4">
                        <div class="w-14 h-14 bg-green-500 rounded-2xl flex items-center justify-center shadow-md flex-shrink-0">
                            <i class="fab fa-whatsapp text-white text-3xl"></i>
                        </div>
                        <div>
                            <h3 class="font-bold text-gray-800 mb-1">Chat on WhatsApp</h3>
                            <p class="text-sm text-gray-600 mb-2">Get instant support via WhatsApp</p>
                            <a href="https://wa.me/254700000000?text=Hello%20ECA Networks" target="_blank" class="inline-block bg-green-500 text-white px-5 py-2 rounded-xl text-sm font-semibold hover:bg-green-600 transition-colors">
                                Start Chat
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Social -->
                <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
                    <h3 class="font-bold text-navy mb-4">Follow Us</h3>
                    <div class="flex gap-3">
                        <a href="#" class="w-10 h-10 bg-blue-600 text-white rounded-xl flex items-center justify-center hover:opacity-80 transition-opacity">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-sky-500 text-white rounded-xl flex items-center justify-center hover:opacity-80 transition-opacity">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-gradient-to-br from-purple-600 to-pink-600 text-white rounded-xl flex items-center justify-center hover:opacity-80 transition-opacity">
                            <i class="fab fa-instagram"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-red-600 text-white rounded-xl flex items-center justify-center hover:opacity-80 transition-opacity">
                            <i class="fab fa-youtube"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection