@extends('layouts.app')
@section('title', 'Contact')
@section('meta_description', 'Contactez GAMA SAC — Fabricant tunisien de sacs en papier. ZI 4030 Enfidha, Sousse, Tunis. Réponse sous 24h.')

@section('content')

{{-- Hero --}}
<section class="bg-gradient-to-r from-primary-dark to-primary pt-24 pb-14 text-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <nav class="text-sm text-white/60 mb-4 flex items-center gap-2">
            <a href="{{ route('home') }}" class="hover:text-white">Accueil</a>
            <span>/</span>
            <span class="text-white">Contact</span>
        </nav>
        <h1 class="text-4xl md:text-5xl font-black mb-2">Parlons de votre projet</h1>
        <p class="text-white/80 text-lg">Notre équipe répond à toutes vos questions sous 24h ouvrées.</p>
    </div>
</section>

{{-- Infos + Carte --}}
<section class="py-16 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-10">

            {{-- Infos contact --}}
            <div>
                <h2 class="text-2xl font-black text-gray-900 mb-8">Nos coordonnées</h2>

                <div class="space-y-4 mb-8">
                    @foreach([
                        ['fas fa-map-marker-alt','#1a7a4a','Adresse','ZI 4030 Enfidha, Sousse, Tunis, Tunisie'],
                        ['fas fa-phone-alt','#d4a843','Téléphone','+216  73 250 211'],
                        ['fas fa-envelope','#1a7a4a','Email','contact@gamasac.tn'],
                        ['fab fa-whatsapp','#25D366','WhatsApp','+216 29 437 777'],
                    ] as [$icon,$color,$label,$value])
                    <div class="bg-white rounded-2xl border border-gray-100 p-5 flex items-center gap-4 shadow-sm hover:shadow-md transition-shadow">
                        <div class="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0" style="background:{{ $color }}20">
                            <i class="{{ $icon }} text-lg" style="color:{{ $color }}"></i>
                        </div>
                        <div>
                            <p class="text-xs font-bold uppercase tracking-widest text-gray-400 mb-0.5">{{ $label }}</p>
                            <p class="font-semibold text-gray-900">{{ $value }}</p>
                        </div>
                    </div>
                    @endforeach
                </div>

                {{-- Horaires --}}
                <div class="bg-white rounded-2xl border border-gray-100 p-6 shadow-sm mb-6">
                    <h3 class="font-black text-gray-900 mb-4 flex items-center gap-2">
                        <i class="fas fa-clock text-primary"></i> Horaires d'ouverture
                    </h3>
                    <div class="space-y-2">
                        @foreach([['Lundi — Vendredi','8h00 — 18h00',false],['Samedi','9h00 — 13h00',false],['Dimanche','Fermé',true]] as [$day,$hours,$closed])
                        <div class="flex justify-between items-center py-2 border-b border-gray-50 last:border-0">
                            <span class="text-sm text-gray-600">{{ $day }}</span>
                            <span class="text-sm font-bold {{ $closed ? 'text-red-500' : 'text-gray-900' }}">{{ $hours }}</span>
                        </div>
                        @endforeach
                    </div>
                </div>

                {{-- Réseaux sociaux --}}
                <div class="flex gap-3">
                    @foreach([['fab fa-facebook-f','https://facebook.com/gamasac'],['fab fa-instagram','https://instagram.com/gamasac'],['fab fa-linkedin-in','https://linkedin.com/company/gamasac'],['fab fa-youtube','#']] as [$icon,$url])
                    <a href="{{ $url }}" target="_blank"
                       class="w-10 h-10 rounded-xl bg-white border border-gray-200 flex items-center justify-center text-gray-500 hover:bg-primary hover:text-white hover:border-primary transition-all">
                        <i class="{{ $icon }} text-sm"></i>
                    </a>
                    @endforeach
                </div>
            </div>

            {{-- Carte + CTA --}}
            <div class="space-y-6">
                {{-- Google Maps --}}
                <div class="rounded-2xl overflow-hidden border border-gray-100 shadow-sm" style="height:360px">
                    <iframe
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3223.040949201328!2d10.38085837485956!3d36.11686010592255!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12fd9d876b4cadcb%3A0xdee5ce5759063c21!2sGAMA%20SAC!5e0!3m2!1sfr!2stn!4v1777287853917!5m2!1sfr!2stn"
                        width="100%" height="100%" style="border:0" allowfullscreen loading="lazy">
                    </iframe>
                </div>

                {{-- CTA devis --}}
                <div class="bg-primary rounded-2xl p-6 text-white">
                    <h3 class="font-black text-xl mb-2">Demander un devis gratuit</h3>
                    <p class="text-white/80 text-sm mb-5">Réponse garantie sous 24h. À partir de 500 unités.</p>
                    <div class="flex flex-col sm:flex-row gap-3">
                        <a href="{{ route('quote') }}"
                           class="flex-1 bg-accent hover:bg-accent-dark text-white font-black py-3 px-5 rounded-xl text-center text-sm transition-colors">
                            <i class="fas fa-file-alt mr-2"></i>Formulaire de devis
                        </a>
                        <a href="https://wa.me/+21600000000" target="_blank"
                           class="flex-1 bg-green-500 hover:bg-green-400 text-white font-bold py-3 px-5 rounded-xl text-center text-sm transition-colors flex items-center justify-center gap-2">
                            <i class="fab fa-whatsapp"></i> WhatsApp direct
                        </a>
                    </div>
                </div>

                {{-- Garanties --}}
                <div class="bg-white rounded-2xl border border-gray-100 p-6 shadow-sm">
                    <h3 class="font-bold text-gray-900 mb-4">Nos engagements</h3>
                    <ul class="space-y-3">
                        @foreach(['Réponse sous 24h ouvrées','Devis gratuit et sans engagement','BAT avant toute impression','Livraison partout en Tunisie','Tarifs dégressifs selon quantité'] as $g)
                        <li class="flex items-center gap-3 text-sm text-gray-600">
                            <div class="w-5 h-5 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-check text-green-600" style="font-size:9px"></i>
                            </div>
                            {{ $g }}
                        </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection