@extends('layouts.app')

@section('title', 'À propos — Le cabinet HAndipartner')
@section('description', 'HAndipartner, cabinet expert en optimisation de la contribution AGEFIPH et conformité OETH. Notre mission, nos valeurs, notre approche.')

@section('content')

@include('partials.legal', [
    'eyebrow' => 'Le cabinet',
    'title' => 'Expertise & engagement',
    'lead' => 'HAndipartner accompagne les entreprises pour transformer leur obligation d\'emploi en levier de performance — et de sens.',
])

{{-- Mission --}}
<section class="hp-sec" style="background:#fff">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div style="display:grid;grid-template-columns:1fr;gap:3rem;align-items:center" class="lg:grid-cols-2">
            <div class="reveal">
                <div style="display:inline-flex;align-items:center;gap:.6rem;margin-bottom: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:#1A4B9C">Notre mission</span></div>
                <h2 style="font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:800;color:#091E42;margin:0 0 1.25rem;letter-spacing:-.02em">Concilier conformité, performance et inclusion</h2>
                <p class="lead" style="margin:0 0 1rem"><strong style="color:#091E42">HAndipartner est l'activité de conseil de HANDIVIA</strong>, dédiée à l'optimisation de la contribution AGEFIPH et à la conformité OETH des entreprises.</p>
                <p style="font-size:.92rem;color:#5A6B85;line-height:1.8;margin:0">L'obligation d'emploi des travailleurs handicapés est trop souvent vécue comme une contrainte administrative. Née de la conviction que l'inclusion et la performance avancent ensemble, notre équipe la transforme en une démarche maîtrisée, rentable et porteuse de sens — en alliant une rigueur réglementaire sans faille à une écoute sincère de vos équipes et des personnes concernées.</p>
            </div>
            <div class="reveal reveal-right" style="border-radius:18px;overflow:hidden;box-shadow:0 18px 48px rgba(13,43,94,.14)">
                <img loading="lazy" decoding="async" src="/storage/wp-media/blog/blog-20251127-110827.png" alt="Conseil HAndipartner en optimisation AGEFIPH" style="width:100%;height:auto;display:block">
            </div>
        </div>
    </div>
</section>

{{-- Valeurs --}}
<section class="hp-sec" style="background:#F4F8FE">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="reveal" style="max-width:600px;margin-bottom:3rem">
            <div style="display:inline-flex;align-items:center;gap:.6rem;margin-bottom: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:#1A4B9C">Nos valeurs</span></div>
            <h2 style="font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:800;color:#091E42;margin:0;letter-spacing:-.02em">Ce qui guide notre accompagnement</h2>
        </div>
        <div class="hp-grid lg:cols-3">
            @foreach([
                ['<path d="M12 2 4 5v6c0 5 3.4 7.7 8 9 4.6-1.3 8-4 8-9V5z"/><path d="M9 12l2 2 4-4"/>','Rigueur','Une expertise réglementaire pointue et une veille permanente pour sécuriser chacune de vos déclarations.'],
                ['<path d="M17 21v-2a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M21 21v-2a4 4 0 0 0-3-3.87"/>','Proximité','Un interlocuteur dédié, disponible et à l\'écoute de la réalité de votre entreprise.'],
                ['<circle cx="12" cy="12" r="9"/><path d="M8 12l2.5 2.5L16 9"/>','Transparence','Des recommandations claires, chiffrées et sans jargon — pour des décisions éclairées.'],
            ] as [$icon,$title,$desc])
            <div class="card-lift reveal" style="background:#fff;border:1px solid #E6ECF5;border-radius:14px;padding:2rem">
                <div style="width:46px;height:46px;border-radius:11px;background:#EEF3FB;display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem">
                    <svg width="22" height="22" fill="none" stroke="#0D2B5E" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">{!! $icon !!}</svg>
                </div>
                <h3 style="font-size:1.05rem;font-weight:700;color:#091E42;margin:0 0 .6rem">{{ $title }}</h3>
                <p style="font-size:.86rem;color:#5A6B85;line-height:1.7;margin:0">{{ $desc }}</p>
            </div>
            @endforeach
        </div>
    </div>
</section>

{{-- Dirigeant / interlocuteur --}}
<section class="hp-sec" style="background:#fff">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="reveal" style="background:#0D2B5E;border-radius:20px;padding:clamp(2rem,4vw,3rem);display:grid;grid-template-columns:1fr;gap:2rem;align-items:center" >
            <div>
                <div style="font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#7FA7E0;margin-bottom:1.25rem">Le mot du président</div>
                <p style="font-size:1.08rem;color:#fff;line-height:1.8;font-style:italic;margin:0 0 1.75rem">« Derrière chaque obligation d'emploi, il y a d'abord des femmes et des hommes. Ma conviction est simple&nbsp;: la conformité n'a de valeur que si elle sert l'humain autant que la performance de l'entreprise. Nous mettons notre expertise au service d'un accompagnement exigeant, transparent et profondément respectueux — celui que j'aimerais qu'on me réserve. Faire de l'inclusion un moteur, et non une contrainte&nbsp;: voilà ce qui nous anime chaque jour. »</p>
                <div style="font-size:.92rem;font-weight:700;color:#fff"><span class="todo" style="background:rgba(245,130,10,.18);border:1px dashed #F5820A;border-radius:6px;padding:1px 7px;color:#F5C070;font-weight:600;font-size:.86rem">[Nom du président]</span></div>
                <div style="font-size:.78rem;color:#9FB8DC;margin-top:3px">Président — HAndipartner</div>
            </div>
        </div>
    </div>
</section>

{{-- CTA --}}
<section style="background:#091E42">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8" style="padding:4rem 0;text-align:center">
        <h2 class="reveal" style="font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;color:#fff;margin:0 0 1rem">Discutons de votre situation</h2>
        <p class="reveal lead" style="color:#9FB8DC;margin:0 auto 2rem;max-width:500px">Un premier échange sans engagement pour évaluer votre potentiel d'optimisation.</p>
        <div class="reveal" style="display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center">
            <a href="{{ route('simulateur') }}" class="btn-primary">Demander un audit gratuit
                <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.25" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
            </a>
            <a href="{{ route('contact') }}" style="display:inline-flex;align-items:center;gap:9px;padding:14px 28px;border-radius:8px;font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff;text-decoration:none;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2)">Nous contacter</a>
        </div>
    </div>
</section>

@endsection