@extends('layouts.app')
@section('title', 'Secteurs d\'activités — Excellis Invest Group')

@section('extra_css')
<style>
.secteur-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    padding: 32px 28px;
    height: 100%;
    transition: transform .3s, box-shadow .3s;
    border-top: 4px solid transparent;
    position: relative;
    overflow: hidden;
}
.secteur-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 40px rgba(0,0,0,0.11);
}
.secteur-card__icon-wrap {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}
.secteur-card__icon-wrap i {
    font-size: 1.6rem;
    color: #fff;
}
.secteur-card__sous-titre {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
    display: block;
}
.secteur-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 12px;
    line-height: 1.3;
}
.secteur-card p {
    font-size: 0.86rem;
    color: #666;
    line-height: 1.65;
    margin-bottom: 18px;
}
.secteur-card__points {
    list-style: none;
    padding: 0;
    margin: 0;
}
.secteur-card__points li {
    font-size: 0.82rem;
    color: #555;
    padding: 5px 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.5;
    border-bottom: 1px solid #f5f5f5;
}
.secteur-card__points li:last-child { border-bottom: none; }
.secteur-card__badge {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    background: #f0f0f0;
    color: #888;
}
.secteur-card__badge.has-filiales {
    background: #1a5c6e18;
    color: #1a5c6e;
}
</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">Secteurs d'activités</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">Secteurs</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">Notre diversification sectorielle</span>
                    <h2 class="title">9 secteurs stratégiques pour un <span>investissement durable</span></h2>
                    <p class="mt-20" style="color:#666;">Excellis Invest Group structure ses investissements autour de secteurs porteurs, couvrant l'ensemble des besoins essentiels des économies africaines en pleine transformation.</p>
                </div>
            </div>
        </div>

        {{-- grille secteurs --}}
        <div class="row gutter-y-30">
            @foreach($secteurs as $secteur)
            <div class="col-lg-4 col-md-6">
                <div class="secteur-card" style="border-top-color: {{ $secteur['couleur'] }};">
                    @if($secteur['filiales_count'] > 0)
                    <span class="secteur-card__badge has-filiales">{{ $secteur['filiales_count'] }} filiale{{ $secteur['filiales_count'] > 1 ? 's' : '' }}</span>
                    @else
                    <span class="secteur-card__badge">En développement</span>
                    @endif

                    <div class="secteur-card__icon-wrap" style="background:{{ $secteur['couleur'] }};"><i class="{{ $secteur['icon'] }}"></i></div>
                    <span class="secteur-card__sous-titre" style="color:{{ $secteur['couleur'] }};">{{ $secteur['sous_titre'] }}</span>
                    <h3>{{ $secteur['titre'] }}</h3>
                    <p>{{ $secteur['description'] }}</p>

                    <ul class="secteur-card__points">
                        @foreach($secteur['points'] as $point)
                        <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="{{ $secteur['couleur'] }}" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                            {{ $point }}
                        </li>
                        @endforeach
                    </ul>

                    @if($secteur['filiales_count'] > 0)
                    <div style="margin-top:20px;">
                        <a href="{{ route('filiales') }}" style="font-size:0.82rem;font-weight:600;color:{{ $secteur['couleur'] }};text-decoration:none;display:inline-flex;align-items:center;gap:6px;">
                            Voir nos filiales <i class="fas fa-arrow-right" style="font-size:0.75rem;"></i>
                        </a>
                    </div>
                    @endif
                </div>
            </div>
            @endforeach
        </div>

        {{-- bloc récapitulatif --}}
        <div class="row mt-80">
            <div class="col-12">
                <div style="background:linear-gradient(135deg,#1a5c6e,#0d3a47);border-radius:20px;padding:50px 40px;text-align:center;position:relative;overflow:hidden;">
                    <img src="{{ $t }}/img/images/cta_shape01.svg" alt="" style="position:absolute;left:20px;bottom:20px;opacity:0.1;width:160px;">
                    <img src="{{ $t }}/img/images/cta_shape02.svg" alt="" style="position:absolute;right:20px;top:20px;opacity:0.1;width:120px;">
                    <div style="position:relative;z-index:2;">
                        <span style="font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:#c9922a;display:block;margin-bottom:12px;">Notre stratégie</span>
                        <h3 style="color:#fff;font-size:1.8rem;font-weight:800;margin-bottom:16px;">Un portefeuille diversifié, une vision unifiée</h3>
                        <p style="color:rgba(255,255,255,0.75);max-width:620px;margin:0 auto 28px;font-size:0.95rem;line-height:1.7;">La diversification sectorielle de Excellis Invest Group garantit la résilience du portefeuille et la capture d'opportunités de croissance dans l'ensemble des segments de l'économie africaine.</p>
                        <div style="display:flex;gap:14px;justify-content:center;flex-wrap:wrap;">
                            <a href="{{ route('filiales') }}" class="tg-btn">Voir nos filiales <img src="{{ $t }}/img/icons/right_arrow.svg" alt="" class="injectable"></a>
                            <a href="{{ route('contact') }}" style="display:inline-flex;align-items:center;gap:8px;border:2px solid rgba(255,255,255,0.4);color:#fff;padding:12px 24px;border-radius:6px;font-weight:600;font-size:0.88rem;text-decoration:none;transition:all .2s;" onmouseover="this.style.background='rgba(255,255,255,0.1)'" onmouseout="this.style.background='transparent'">
                                Nous contacter <i class="fas fa-arrow-right"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection