@extends('layouts.app')
@section('title', 'Contact')

@section('content')

{{-- ═══ CONTACT BANNER ═══ --}}
<div class="relative overflow-hidden min-h-[260px] md:min-h-[300px] flex items-center">
    {{-- Background image --}}
    <div class="absolute inset-0">
        <img src="{{ asset('images/banner-contact.jpg') }}"
             alt="Contactez-nous"
             class="w-full h-full object-cover object-center"
             onerror="this.style.display='none'">
        <div class="absolute inset-0 bg-gradient-to-b from-black/30 via-black/20 to-black/50"></div>
    </div>

    {{-- Decorative blobs --}}
    <div class="absolute right-10 top-0 w-64 h-64 bg-amber-400/10 rounded-full -translate-y-1/3 blur-3xl pointer-events-none"></div>
    <div class="absolute left-0 bottom-0 w-56 h-56 bg-blue-300/10 rounded-full translate-y-1/3 blur-2xl pointer-events-none"></div>

    <div class="relative z-10 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-14">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">

            {{-- Left: title --}}
            <div>
                <nav class="flex items-center gap-2 text-blue-300 text-xs mb-3">
                    <a href="{{ route('home') }}" class="hover:text-amber-400 transition-colors">Accueil</a>
                    <i class="fas fa-chevron-right text-[10px]"></i>
                    <span class="text-white font-medium">Contact</span>
                </nav>
                <h1 class="text-4xl md:text-5xl font-extrabold text-white leading-tight drop-shadow-lg">
                    Nous <span class="text-transparent bg-clip-text bg-gradient-to-r from-amber-300 to-amber-500">Contacter</span>
                </h1>
                <p class="text-blue-100 mt-2 text-base max-w-md drop-shadow">
                    Notre équipe est disponible pour répondre à toutes vos questions.
                </p>
            </div>

            {{-- Right: contact info quick-access --}}
            <div class="flex flex-col gap-3">
                @foreach([
                    ['icon' => 'phone',     'label' => '+225 55 50 00 00 00',      'sub' => 'Appelez-nous',           'color' => 'text-green-300'],
                    ['icon' => 'envelope',  'label' => 'contact@adamservice.dz','sub' => 'Écrivez-nous',           'color' => 'text-amber-300'],
                    ['icon' => 'clock',     'label' => 'Lun – Sam  9h – 18h',  'sub' => "Horaires d'ouverture",   'color' => 'text-sky-300'],
                ] as $info)
                <div class="flex items-center gap-3 bg-white/15 border border-white/25 backdrop-blur-md rounded-xl px-4 py-2.5 shadow-sm">
                    <i class="fas fa-{{ $info['icon'] }} {{ $info['color'] }} w-4 text-center flex-shrink-0 text-base"></i>
                    <div>
                        <p class="text-white text-xs font-bold">{{ $info['label'] }}</p>
                        <p class="text-blue-200 text-xs">{{ $info['sub'] }}</p>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>

<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-14">
    <div class="grid lg:grid-cols-3 gap-10">

        {{-- Contact Info --}}
        <div class="space-y-5">
            <div>
                <h2 class="text-xl font-bold text-gray-900 mb-5">Informations de contact</h2>
                <div class="space-y-4">
                    @foreach([
                        ['icon' => 'map-marker-alt', 'color' => 'blue', 'title' => 'Adresse', 'text' => "Abidjan, Côte d'ivoire"],
                        ['icon' => 'phone', 'color' => 'green', 'title' => 'Téléphone', 'text' => '+225 55 50 00 00 00', 'link' => 'tel:+225 55 50 00 00 00'],
                        ['icon' => 'envelope', 'color' => 'amber', 'title' => 'Email', 'text' => 'contact@adamservice.dz', 'link' => 'mailto:contact@adamservice.dz'],
                        ['icon' => 'clock', 'color' => 'purple', 'title' => 'Horaires', 'text' => 'Lundi – Samedi : 9h00 – 18h00'],
                    ] as $info)
                    <div class="flex items-start gap-4 bg-white rounded-xl p-4 shadow-sm border border-gray-100">
                        <div class="w-10 h-10 bg-{{ $info['color'] }}-100 rounded-lg flex items-center justify-center flex-shrink-0">
                            <i class="fas fa-{{ $info['icon'] }} text-{{ $info['color'] }}-600"></i>
                        </div>
                        <div>
                            <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide">{{ $info['title'] }}</p>
                            @if(isset($info['link']))
                                <a href="{{ $info['link'] }}" class="text-gray-800 font-medium hover:text-blue-600 transition-colors text-sm">{{ $info['text'] }}</a>
                            @else
                                <p class="text-gray-800 font-medium text-sm">{{ $info['text'] }}</p>
                            @endif
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            {{-- Social --}}
            <div class="bg-white rounded-xl p-5 shadow-sm border border-gray-100">
                <h3 class="font-bold text-gray-900 mb-4">Suivez-nous</h3>
                <div class="flex gap-3">
                    <a href="#" class="w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center hover:bg-blue-700 transition-colors">
                        <i class="fab fa-facebook-f text-sm"></i>
                    </a>
                    <a href="#" class="w-10 h-10 bg-gradient-to-br from-pink-500 to-orange-400 text-white rounded-full flex items-center justify-center hover:opacity-90 transition-opacity">
                        <i class="fab fa-instagram text-sm"></i>
                    </a>
                    <a href="#" class="w-10 h-10 bg-green-500 text-white rounded-full flex items-center justify-center hover:bg-green-600 transition-colors">
                        <i class="fab fa-whatsapp text-sm"></i>
                    </a>
                    <a href="#" class="w-10 h-10 bg-sky-500 text-white rounded-full flex items-center justify-center hover:bg-sky-600 transition-colors">
                        <i class="fab fa-telegram text-sm"></i>
                    </a>
                </div>
            </div>
        </div>

        {{-- Contact Form --}}
        <div class="lg:col-span-2">
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 md:p-8">
                <h2 class="text-xl font-bold text-gray-900 mb-6 flex items-center gap-2">
                    <i class="fas fa-paper-plane text-blue-600"></i> Envoyez-nous un message
                </h2>

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

                <form action="{{ route('contact.store') }}" method="POST" class="space-y-5">
                    @csrf

                    <div class="grid sm:grid-cols-2 gap-5">
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-1.5">Nom complet <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-2.5 text-sm focus:ring-2 focus:ring-blue-500 outline-none @error('name') border-red-400 @enderror"
                                   placeholder="Votre nom">
                            @error('name')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-1.5">Email <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-2.5 text-sm focus:ring-2 focus:ring-blue-500 outline-none @error('email') border-red-400 @enderror"
                                   placeholder="votre@email.com">
                            @error('email')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                        </div>
                    </div>

                    <div class="grid sm:grid-cols-2 gap-5">
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-1.5">Téléphone</label>
                            <input type="tel" name="phone" value="{{ old('phone') }}"
                                   class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:ring-2 focus:ring-blue-500 outline-none"
                                   placeholder="+225 55 50 00 00 00">
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-1.5">Sujet <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-2.5 text-sm focus:ring-2 focus:ring-blue-500 outline-none @error('subject') border-red-400 @enderror"
                                   placeholder="Objet de votre message">
                            @error('subject')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-semibold 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-2.5 text-sm focus:ring-2 focus:ring-blue-500 outline-none resize-none @error('message') border-red-400 @enderror"
                                  placeholder="Décrivez votre demande en détail…">{{ old('message') }}</textarea>
                        @error('message')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>

                    <button type="submit" class="btn-primary w-full text-white font-bold py-3 rounded-xl text-base flex items-center justify-center gap-2">
                        <i class="fas fa-paper-plane"></i> Envoyer le message
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection