@extends('layouts.app')
@section('title', 'Gouvernance — Excellis Invest Group')

@section('extra_css')
<style>
.dirigeant-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
    overflow: hidden;
    transition: transform .3s;
    height: 100%;
}
.dirigeant-card:hover { transform: translateY(-5px); }
.dirigeant-card__top {
    background: linear-gradient(135deg, #1a5c6e, #0d3a47);
    padding: 36px 28px 24px;
    text-align: center;
    position: relative;
}
.dirigeant-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(201,146,42,0.25);
    border: 3px solid #c9922a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 800;
    color: #c9922a;
    margin: 0 auto 16px;
    letter-spacing: 1px;
}
.dirigeant-card__top h3 {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.35;
}
.dirigeant-card__body {
    padding: 24px 28px;
}
.dirigeant-card__body p {
    font-size: 0.88rem;
    color: #666;
    line-height: 1.7;
    margin: 0;
}

.organe-card {
    background: #fff;
    border-radius: 14px;
    padding: 32px 28px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    border-left: 5px solid #1a5c6e;
    height: 100%;
}
.organe-card h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a5c6e;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.organe-card h4 i { color: #c9922a; font-size: 1.3rem; }
.organe-card > p {
    font-size: 0.88rem;
    color: #666;
    line-height: 1.7;
    margin-bottom: 18px;
}
.organe-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.organe-card ul li {
    font-size: 0.82rem;
    color: #555;
    padding: 5px 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border-bottom: 1px solid #f5f5f5;
    line-height: 1.5;
}
.organe-card ul li:last-child { border-bottom: none; }
</style>
@endsection

@section('content')
@php $t = '/beekohtm-30/beeko-v-3.0/assets'; @endphp

{{-- breadcrumb --}}
<section class="breadcrumb__area">
    <div class="breadcrumb__bg" data-background="{{ $t }}/img/bg/breadcrumb__bg.jpg"></div>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="breadcrumb__content">
                    <h2 class="title">Gouvernance</h2>
                    <nav class="breadcrumb">
                        <span property="itemListElement" typeof="ListItem"><a href="{{ route('accueil') }}">Accueil</a></span>
                        <span class="breadcrumb-separator"><i class="fas fa-angle-right"></i></span>
                        <span property="itemListElement" typeof="ListItem"><a href="{{ route('groupe') }}">À Propos</a></span>
                        <span class="breadcrumb-separator"><i class="fas fa-angle-right"></i></span>
                        <span property="itemListElement" typeof="ListItem">Gouvernance</span>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section-py-130">
    <div class="container">

        {{-- intro --}}
        <div class="row justify-content-center">
            <div class="col-xl-7 col-lg-9">
                <div class="section__title text-center mb-60">
                    <span class="sub-title">Leadership & Direction</span>
                    <h2 class="title">Une gouvernance <span>solide et transparente</span></h2>
                    <p class="mt-20" style="color:#666;">Excellis Invest Group est dirigé par une équipe de professionnels expérimentés engagés à créer de la valeur pour l'ensemble des parties prenantes, dans le respect des meilleures pratiques de gouvernance d'entreprise.</p>
                </div>
            </div>
        </div>

        {{-- dirigeants --}}
        <div class="row gutter-y-30 justify-content-center mb-80">
            @foreach($dirigeants as $d)
            <div class="col-lg-4 col-md-6">
                <div class="dirigeant-card">
                    <div class="dirigeant-card__top">
                        <div class="dirigeant-avatar">{{ $d['initiales'] }}</div>
                        <h3>{{ $d['titre'] }}</h3>
                    </div>
                    <div class="dirigeant-card__body">
                        <p>{{ $d['bio'] }}</p>
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        {{-- séparateur --}}
        <div class="row justify-content-center mb-60">
            <div class="col-xl-7 col-lg-9">
                <div class="section__title text-center">
                    <span class="sub-title">Structure de contrôle</span>
                    <h2 class="title">Organes de <span>pilotage et de contrôle</span></h2>
                </div>
            </div>
        </div>

        {{-- organes --}}
        <div class="row gutter-y-30">
            @foreach($organes as $organe)
            <div class="col-lg-4">
                <div class="organe-card">
                    <h4><i class="{{ $organe['icon'] }}"></i> {{ $organe['titre'] }}</h4>
                    <p>{{ $organe['desc'] }}</p>
                    <ul>
                        @foreach($organe['responsabilites'] as $r)
                        <li>
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none" style="flex-shrink:0;margin-top:3px;"><path d="M11.5252 3.5L5.30301 9.72222L2.47473 6.89394" stroke="#1a5c6e" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                            {{ $r }}
                        </li>
                        @endforeach
                    </ul>
                </div>
            </div>
            @endforeach
        </div>

        {{-- principes de gouvernance --}}
        <div class="row mt-80">
            <div class="col-12">
                <div class="section__title text-center mb-40">
                    <span class="sub-title">Notre engagement</span>
                    <h3 class="title" style="font-size:1.6rem;">Nos principes de <span>bonne gouvernance</span></h3>
                </div>
            </div>
            @foreach([
                ['icon'=>'fas fa-balance-scale','titre'=>'Conformité & Éthique','desc'=>'Respect strict des réglementations en vigueur dans chaque pays d\'opération. Tolérance zéro pour la corruption et les conflits d\'intérêts.'],
                ['icon'=>'fas fa-chart-bar','titre'=>'Transparence financière','desc'=>'Publication régulière des états financiers consolidés. Audit externe indépendant et reporting rigoureux aux actionnaires.'],
                ['icon'=>'fas fa-handshake','titre'=>'Responsabilité envers les parties prenantes','desc'=>'Prise en compte des intérêts des actionnaires, salariés, clients, partenaires et communautés locales dans toutes les décisions stratégiques.'],
                ['icon'=>'fas fa-globe-africa','titre'=>'Impact & RSE','desc'=>'Contribution active au développement économique et social des pays où le Groupe opère, à travers des investissements responsables et durables.'],
            ] as $principe)
            <div class="col-lg-3 col-md-6 mb-20">
                <div style="background:#f8f8f8;border-radius:14px;padding:28px;height:100%;text-align:center;border-top:3px solid #c9922a;">
                    <div style="width:56px;height:56px;border-radius:14px;background:#1a5c6e;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;">
                        <i class="{{ $principe['icon'] }}" style="font-size:1.4rem;color:#fff;"></i>
                    </div>
                    <h5 style="font-size:0.95rem;font-weight:700;color:#1a5c6e;margin-bottom:10px;">{{ $principe['titre'] }}</h5>
                    <p style="font-size:0.83rem;color:#666;line-height:1.65;margin:0;">{{ $principe['desc'] }}</p>
                </div>
            </div>
            @endforeach
        </div>

    </div>
</section>

{{-- cta --}}
<section class="cta__area">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8">
                <div class="cta__content">
                    <div class="section__title white-title">
                        <h2 class="title">Ensemble, construisons l'Afrique de demain</h2>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="cta__btn">
                    <a href="{{ route('contact') }}" class="tg-btn tg-hover-btn">Nous contacter <img src="{{ $t }}/img/icons/right_arrow.svg" alt="" class="injectable"></a>
                </div>
            </div>
        </div>
    </div>
    <div class="cta__shape-wrap">
        <img src="{{ $t }}/img/images/cta_shape01.svg" alt="shape" data-aos="fade-up-right" data-aos-delay="400">
        <img src="{{ $t }}/img/images/cta_shape02.svg" alt="shape" data-aos="fade-up" data-aos-delay="400">
        <img src="{{ $t }}/img/images/cta_shape03.svg" alt="shape">
    </div>
</section>

@endsection