@extends('layouts.app')

@section('title', 'Contact — Artisanal')

@section('content')

{{-- ── Hero ── --}}
<section class="relative text-white overflow-hidden" style="min-height: 380px;">
    {{-- Image de fond --}}
    <div class="absolute inset-0">
        <img src="https://images.unsplash.com/photo-1539635278303-d4002c07eae3?w=1600&q=80&fit=crop&crop=center"
             alt="Contact artisanal"
             class="w-full h-full object-cover object-center">
        <div class="absolute inset-0" style="background: linear-gradient(to bottom, rgba(107,66,38,0.82) 0%, rgba(139,94,60,0.65) 60%, rgba(0,0,0,0.40) 100%);"></div>
    </div>
    {{-- Contenu --}}
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-28 text-center">
        <span class="inline-block bg-white/15 border border-white/30 text-white text-sm font-medium px-4 py-1.5 rounded-full mb-5 backdrop-blur-sm">
            <i class="fas fa-envelope mr-1 text-blue-200"></i> Nous contacter
        </span>
        <h1 class="font-serif text-4xl md:text-5xl font-bold mb-4 drop-shadow-lg">Contactez-nous</h1>
        <p class="text-white/90 text-lg max-w-xl mx-auto drop-shadow">
            Une question, une commande personnalisée ? Nous sommes là pour vous.
        </p>
    </div>
    {{-- Wave divider --}}
    <div class="absolute bottom-0 left-0 right-0">
        <svg viewBox="0 0 1440 50" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
            <path d="M0 50L1440 50L1440 15C1200 50 960 0 720 15C480 30 240 0 0 15L0 50Z" fill="#FDF6EC"/>
        </svg>
    </div>
</section>

<section class="py-16 bg-cream">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-5 gap-12">

            {{-- ── Informations de contact ── --}}
            <div class="lg:col-span-2 space-y-6">
                <div>
                    <h2 class="font-serif text-2xl font-bold text-gray-800 mb-6">Nos coordonnées</h2>
                </div>

                @foreach([
                    ['fas fa-map-marker-alt','Adresse','123 Rue de l\'Artisanat<br>Marrakech, Maroc'],
                    ['fas fa-phone','Téléphone','+212 6XX XXX XXX'],
                    ['fas fa-envelope','Email','contact@artisanal.ma'],
                    ['fas fa-clock','Horaires','Lun–Sam : 9h00 – 18h00<br>Dim : Fermé']
                ] as [$icon, $title, $value])
                <div class="flex items-start gap-4 bg-white rounded-2xl p-5 shadow-sm border border-orange-50">
                    <div class="w-12 h-12 bg-cream rounded-xl flex items-center justify-center flex-shrink-0">
                        <i class="{{ $icon }} text-primary text-xl"></i>
                    </div>
                    <div>
                        <h3 class="font-semibold text-gray-800 mb-1">{{ $title }}</h3>
                        <p class="text-gray-500 text-sm leading-relaxed">{!! $value !!}</p>
                    </div>
                </div>
                @endforeach

                {{-- Réseaux sociaux --}}
                @if($socialLinks->count())
                <div class="bg-white rounded-2xl p-5 shadow-sm border border-orange-50">
                    <h3 class="font-semibold text-gray-800 mb-4">Suivez-nous</h3>
                    <div class="flex flex-wrap gap-3">
                        @foreach($socialLinks as $link)
                        <a href="{{ $link->url }}" target="_blank" rel="noopener"
                           class="flex items-center gap-2 bg-cream px-4 py-2 rounded-full text-sm font-medium text-gray-700 hover:bg-primary hover:text-white transition-all">
                            <i class="{{ $link->icon }}"></i> {{ $link->platform }}
                        </a>
                        @endforeach
                    </div>
                </div>
                @endif
            </div>

            {{-- ── Formulaire de contact ── --}}
            <div class="lg:col-span-3">
                <div class="bg-white rounded-3xl shadow-md p-8 border border-orange-50">
                    <h2 class="font-serif text-2xl font-bold text-gray-800 mb-2">Envoyez-nous un message</h2>
                    <p class="text-gray-500 text-sm mb-6">Nous vous répondrons dans les 24 heures.</p>

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

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">
                                    Nom complet *
                                </label>
                                <input type="text" name="name" required
                                       value="{{ old('name') }}"
                                       class="w-full border border-gray-200 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition @error('name') border-red-300 @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-medium 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-3 text-sm focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition"
                                       placeholder="+212 6XX XXX XXX">
                            </div>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1.5">Email *</label>
                            <input type="email" name="email" required
                                   value="{{ old('email') }}"
                                   class="w-full border border-gray-200 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition @error('email') border-red-300 @enderror"
                                   placeholder="votre@email.com">
                            @error('email')<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">Sujet *</label>
                            <select name="subject" required
                                    class="w-full border border-gray-200 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition bg-white @error('subject') border-red-300 @enderror">
                                <option value="">Sélectionnez un sujet</option>
                                <option value="Commande personnalisée" {{ old('subject') == 'Commande personnalisée' ? 'selected' : '' }}>Commande personnalisée</option>
                                <option value="Information produit" {{ old('subject') == 'Information produit' ? 'selected' : '' }}>Information produit</option>
                                <option value="Livraison et délais" {{ old('subject') == 'Livraison et délais' ? 'selected' : '' }}>Livraison et délais</option>
                                <option value="Partenariat" {{ old('subject') == 'Partenariat' ? 'selected' : '' }}>Partenariat</option>
                                <option value="Autre" {{ old('subject') == 'Autre' ? 'selected' : '' }}>Autre</option>
                            </select>
                            @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 *</label>
                            <textarea name="message" required rows="5"
                                      class="w-full border border-gray-200 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition resize-none @error('message') border-red-300 @enderror"
                                      placeholder="Décrivez votre demande...">{{ 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-primary text-white py-3.5 rounded-xl font-semibold hover:bg-primary-dark transition-all shadow-md hover:shadow-lg flex items-center justify-center gap-2 text-base">
                            <i class="fas fa-paper-plane"></i> Envoyer le message
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection