@extends('layouts.app')

@section('title', 'Contact — HAndipartner')
@section('description', 'Contactez les experts HAndipartner pour un accompagnement personnalisé sur votre obligation AGEFIPH.')

@section('content')

<section style="background:#0D2B5E;padding:clamp(3rem,6vw,4.5rem) 0">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <div style="display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.1rem">
            <span style="width:26px;height:1.5px;background:#F5820A"></span>
            <span style="font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#7FA7E0">Contact</span>
        </div>
        <h1 style="font-size:clamp(2rem,4vw,3rem);font-weight:800;color:#fff;margin:0 0 1rem;letter-spacing:-.022em">Échangeons sur votre situation</h1>
        <p style="font-size:1.02rem;color:#9FB8DC;line-height:1.7;max-width:540px;margin:0 auto">Une question sur votre obligation AGEFIPH ? Un expert vous répond sous 48&nbsp;heures.</p>
    </div>
</section>

<style>
    .ct-wrap { max-width:1080px; margin:0 auto; display:grid; grid-template-columns:1fr; gap:1.5rem; align-items:start; }
    @media (min-width:900px) { .ct-wrap { grid-template-columns:340px 1fr; gap:2rem; } }
    .ct-row2 { display:grid; grid-template-columns:1fr; gap:1rem; margin-bottom:1rem; }
    @media (min-width:560px) { .ct-row2 { grid-template-columns:1fr 1fr; } }
    .ct-label { display:block; font-size:.74rem; font-weight:700; color:#374151; margin-bottom:.35rem; }
    .ct-field { width:100%; padding:.65rem .9rem; border:1.5px solid #D1D9E6; border-radius:9px; font-size:.88rem; outline:none; background:#fff; box-sizing:border-box; transition:border-color .2s; font-family:inherit; }
    .ct-field:focus { border-color:#1A4B9C; }
    .ct-err { font-size:.72rem; color:#F5820A; }
</style>

<section style="padding:3rem 0 4rem;background:#fff">
    <div class="ct-wrap px-4 sm:px-6 lg:px-8">

        {{-- Colonne gauche : coordonnées (panneau navy) --}}
        <aside style="background:#0D2B5E;border-radius:18px;padding:1.85rem 1.6rem">
            <h2 style="font-size:1rem;font-weight:700;color:#fff;margin:0 0 1.4rem;letter-spacing:-.01em">Nos coordonnées</h2>
            @foreach([
                ['<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>','Adresse','77 avenue du Général Leclerc<br>33200 Bordeaux',''],
                ['<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/>','Téléphone','01 83 75 40 70<br>05 32 26 12 44','tel:+33183754070'],
                ['<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/>','Email','contact@handipartner.fr','mailto:contact@handipartner.fr'],
            ] as $i => [$icon,$label,$val,$href])
            <div style="display:flex;gap:.9rem;align-items:flex-start;padding:.95rem 0;{{ $i<2 ? 'border-bottom:1px solid rgba(255,255,255,.10);' : '' }}">
                <span style="width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;flex-shrink:0">
                    <svg width="18" height="18" fill="none" stroke="#7FA7E0" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">{!! $icon !!}</svg>
                </span>
                <div>
                    <div style="font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7FA7E0;margin-bottom:.25rem">{{ $label }}</div>
                    @if($href)
                    <a href="{{ $href }}" style="font-size:.88rem;font-weight:600;color:#fff;text-decoration:none;line-height:1.5">{!! $val !!}</a>
                    @else
                    <div style="font-size:.88rem;font-weight:600;color:#fff;line-height:1.5">{!! $val !!}</div>
                    @endif
                </div>
            </div>
            @endforeach
            <p style="font-size:.74rem;color:#8CAED8;line-height:1.6;margin:1.25rem 0 0">Réponse sous 48&nbsp;heures ouvrées. Échange sans engagement.</p>
        </aside>

        {{-- Colonne droite : formulaire --}}
        <div>
            @if(session('success'))
            <div style="background:#F0FFF8;border:1px solid #00A86B40;border-radius:12px;padding:1.1rem 1.4rem;margin-bottom:1.5rem;display:flex;align-items:flex-start;gap:.75rem">
                <svg width="18" height="18" fill="none" stroke="#00A86B" stroke-width="2.5" viewBox="0 0 24 24" style="flex-shrink:0;margin-top:1px"><polyline points="20 6 9 17 4 12"/></svg>
                <p style="font-size:.88rem;color:#052B18;margin:0">{{ session('success') }}</p>
            </div>
            @endif

            <form method="POST" action="{{ route('contact.submit') }}" style="background:#F8FBFF;border-radius:18px;padding:1.85rem;border:1px solid #E6ECF5">
                @csrf
                <div class="ct-row2">
                    <div>
                        <label class="ct-label">Prénom *</label>
                        <input type="text" name="prenom" value="{{ old('prenom') }}" required class="ct-field" style="{{ $errors->has('prenom') ? 'border-color:#F5820A' : '' }}">
                        @error('prenom')<span class="ct-err">{{ $message }}</span>@enderror
                    </div>
                    <div>
                        <label class="ct-label">Nom *</label>
                        <input type="text" name="nom" value="{{ old('nom') }}" required class="ct-field" style="{{ $errors->has('nom') ? 'border-color:#F5820A' : '' }}">
                        @error('nom')<span class="ct-err">{{ $message }}</span>@enderror
                    </div>
                </div>
                <div class="ct-row2">
                    <div>
                        <label class="ct-label">Email *</label>
                        <input type="email" name="email" value="{{ old('email') }}" required class="ct-field" style="{{ $errors->has('email') ? 'border-color:#F5820A' : '' }}">
                        @error('email')<span class="ct-err">{{ $message }}</span>@enderror
                    </div>
                    <div>
                        <label class="ct-label">Téléphone</label>
                        <input type="tel" name="phone" value="{{ old('phone') }}" class="ct-field">
                    </div>
                </div>
                <div style="margin-bottom:1rem">
                    <label class="ct-label">Société</label>
                    <input type="text" name="societe" value="{{ old('societe') }}" class="ct-field">
                </div>
                <div style="margin-bottom:1.4rem">
                    <label class="ct-label">Message *</label>
                    <textarea name="message" rows="4" required class="ct-field" style="resize:vertical;min-height:96px;{{ $errors->has('message') ? 'border-color:#F5820A' : '' }}">{{ old('message') }}</textarea>
                    @error('message')<span class="ct-err">{{ $message }}</span>@enderror
                </div>
                <button type="submit"
                        style="width:100%;padding:14px;border-radius:8px;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:white;border:none;cursor:pointer;background:#F5820A;transition:background .2s ease"
                        onmouseenter="this.style.background='#E06A00'" onmouseleave="this.style.background='#F5820A'">
                    Envoyer le message
                </button>
            </form>
        </div>
    </div>
</section>

@endsection