@extends('layouts.app')

@section('title', 'Contactez-nous | OraFresh Beauty')

@section('content')
    <div class="bg-gradient-to-b from-rose-50/30 to-white min-h-screen">
        <div class="max-w-6xl mx-auto px-6 py-12 pt-4">
            <div class="text-center mb-16">
                <span class="text-rose-600 uppercase tracking-[0.4em] text-[10px] mb-3 block">Contact</span>
                <h1 class="font-serif text-4xl md:text-5xl italic text-gray-900 mb-4">Nous Contacter</h1>
                <p class="text-gray-600 text-sm max-w-2xl mx-auto">Une question ? Une suggestion ? Notre équipe est à votre écoute</p>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
                <!-- Formulaire -->
                <div class="bg-white rounded-3xl p-8 shadow-sm border border-rose-100">
                    @if(session('success'))
                        <div class="bg-green-50 border border-green-200 text-green-800 px-6 py-4 rounded-2xl mb-6 flex items-center gap-3">
                            <i data-lucide="check-circle" class="w-5 h-5 text-green-600"></i>
                            <span class="text-sm">{{ session('success') }}</span>
                        </div>
                    @endif

                    <form action="{{ route('contact.store') }}" method="POST" class="space-y-6">
                        @csrf
                        <div>
                            <label class="text-[10px] uppercase tracking-wider text-gray-500 mb-2 block">Nom complet</label>
                            <div class="relative">
                                <i data-lucide="user" class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-rose-400"></i>
                                <input type="text" name="name" required
                                    class="w-full bg-rose-50/30 border border-rose-100 rounded-full py-4 pl-12 pr-4 text-sm focus:border-rose-400 focus:ring-2 focus:ring-rose-100 outline-none transition-all"
                                    placeholder="Votre nom">
                            </div>
                            @error('name')<span class="text-xs text-red-500 mt-1">{{ $message }}</span>@enderror
                        </div>

                        <div>
                            <label class="text-[10px] uppercase tracking-wider text-gray-500 mb-2 block">Email</label>
                            <div class="relative">
                                <i data-lucide="mail" class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-rose-400"></i>
                                <input type="email" name="email" required
                                    class="w-full bg-rose-50/30 border border-rose-100 rounded-full py-4 pl-12 pr-4 text-sm focus:border-rose-400 focus:ring-2 focus:ring-rose-100 outline-none transition-all"
                                    placeholder="votre@email.com">
                            </div>
                            @error('email')<span class="text-xs text-red-500 mt-1">{{ $message }}</span>@enderror
                        </div>

                        <div>
                            <label class="text-[10px] uppercase tracking-wider text-gray-500 mb-2 block">Téléphone (optionnel)</label>
                            <div class="relative">
                                <i data-lucide="phone" class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-rose-400"></i>
                                <input type="text" name="phone"
                                    class="w-full bg-rose-50/30 border border-rose-100 rounded-full py-4 pl-12 pr-4 text-sm focus:border-rose-400 focus:ring-2 focus:ring-rose-100 outline-none transition-all"
                                    placeholder="+216 XX XXX XXX">
                            </div>
                        </div>

                        <div>
                            <label class="text-[10px] uppercase tracking-wider text-gray-500 mb-2 block">Sujet</label>
                            <div class="relative">
                                <i data-lucide="tag" class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-rose-400"></i>
                                <input type="text" name="subject" required
                                    class="w-full bg-rose-50/30 border border-rose-100 rounded-full py-4 pl-12 pr-4 text-sm focus:border-rose-400 focus:ring-2 focus:ring-rose-100 outline-none transition-all"
                                    placeholder="Objet de votre message">
                            </div>
                            @error('subject')<span class="text-xs text-red-500 mt-1">{{ $message }}</span>@enderror
                        </div>

                        <div>
                            <label class="text-[10px] uppercase tracking-wider text-gray-500 mb-2 block">Message</label>
                            <div class="relative">
                                <i data-lucide="message-square" class="absolute left-4 top-6 w-4 h-4 text-rose-400"></i>
                                <textarea name="message" rows="5" required
                                    class="w-full bg-rose-50/30 border border-rose-100 rounded-2xl py-4 pl-12 pr-4 text-sm focus:border-rose-400 focus:ring-2 focus:ring-rose-100 outline-none transition-all resize-none"
                                    placeholder="Votre message..."></textarea>
                            </div>
                            @error('message')<span class="text-xs text-red-500 mt-1">{{ $message }}</span>@enderror
                        </div>

                        <button type="submit"
                            class="w-full bg-gradient-to-r from-rose-500 to-pink-600 text-white py-5 text-[11px] uppercase tracking-[0.3em] hover:shadow-xl hover:scale-105 transition-all duration-300 rounded-full flex items-center justify-center gap-2">
                            <i data-lucide="send" class="w-4 h-4"></i>
                            Envoyer le message
                        </button>
                    </form>
                </div>

                <!-- Infos Contact -->
                <div class="space-y-8">
                    <div class="bg-gradient-to-br from-rose-50 to-pink-50 rounded-3xl p-8 border border-rose-100">
                        <div class="flex items-start gap-4 mb-6">
                            <div class="bg-rose-500 p-3 rounded-full">
                                <i data-lucide="map-pin" class="w-6 h-6 text-white"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-gray-900 mb-2">Adresse</h3>
                                <p class="text-sm text-gray-600">Avenue Habib Bourguiba<br>Tunis, Tunisie</p>
                            </div>
                        </div>
                        <div class="flex items-start gap-4 mb-6">
                            <div class="bg-rose-500 p-3 rounded-full">
                                <i data-lucide="phone" class="w-6 h-6 text-white"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-gray-900 mb-2">Téléphone</h3>
                                <p class="text-sm text-gray-600">+216 XX XXX XXX</p>
                            </div>
                        </div>
                        <div class="flex items-start gap-4">
                            <div class="bg-rose-500 p-3 rounded-full">
                                <i data-lucide="mail" class="w-6 h-6 text-white"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-gray-900 mb-2">Email</h3>
                                <p class="text-sm text-gray-600">contact@orafresh.tn</p>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white rounded-3xl p-8 shadow-sm border border-rose-100">
                        <h3 class="font-semibold text-gray-900 mb-4 flex items-center gap-2">
                            <i data-lucide="clock" class="w-5 h-5 text-rose-500"></i>
                            Horaires d'ouverture
                        </h3>
                        <div class="space-y-2 text-sm text-gray-600">
                            <div class="flex justify-between">
                                <span>Lundi - Vendredi</span>
                                <span class="font-medium">9h00 - 18h00</span>
                            </div>
                            <div class="flex justify-between">
                                <span>Samedi</span>
                                <span class="font-medium">9h00 - 13h00</span>
                            </div>
                            <div class="flex justify-between text-gray-400">
                                <span>Dimanche</span>
                                <span class="font-medium">Fermé</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection