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

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

{{-- hero carousel --}}
<section class="hero-carousel fix" style="position:relative;overflow:hidden;">
    <div class="swiper hero-swiper" style="width:100%;height:100vh;min-height:600px;">
        <div class="swiper-wrapper">

            {{-- Slide 1 --}}
            <div class="swiper-slide" style="background:linear-gradient(120deg,#0d3a47 0%,#1a5c6e 60%,#1a7a6e 100%);">
                <div style="position:absolute;inset:0;background:url('{{ $t }}/img/banner/hero_bg.jpg') center/cover no-repeat;opacity:0.18;"></div>
                <div class="container h-100" style="position:relative;z-index:2;display:flex;align-items:center;height:100%;">
                    <div class="row justify-content-center w-100">
                        <div class="col-lg-9 col-xl-8 text-center text-lg-start">
                            <span class="sub-title" style="color:#c9922a;font-weight:700;text-transform:uppercase;letter-spacing:2px;font-size:1.1rem;display:block;margin-bottom:20px;">Holding d'investissement panafricaine</span>
                            <h1 style="color:#fff;font-size:clamp(2.5rem,6vw,5rem);font-weight:800;line-height:1.1;margin-bottom:28px;">Investir autrement,<br> bâtir <span style="color:#c9922a;">l'Afrique de demain</span></h1>
                            <p style="color:rgba(255,255,255,0.82);font-size:1.2rem;line-height:1.8;max-width:700px;margin:0 auto 40px;">Excellis Invest Group est une holding d'investissement stratégique panafricaine au capital de 20 milliards FCFA, dédiée à l'acquisition et au développement d'entreprises à fort potentiel.</p>
                            <div style="display:flex;gap:16px;flex-wrap:wrap;justify-content:center;justify-content:flex-start;">
                                <a href="{{ route('contact') }}" class="tg-btn">Nous contacter <img src="{{ $t }}/img/icons/right_arrow.svg" alt="" class="injectable"></a>
                                <a href="{{ route('groupe') }}" class="tg-btn tg-btn-two">Qui sommes-nous <img src="{{ $t }}/img/icons/right_arrow.svg" alt="" class="injectable"></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Slide 2 --}}
            <div class="swiper-slide" style="background:linear-gradient(120deg,#0a2e3a 0%,#1a5c6e 50%,#c9922a 100%);">
                <div style="position:absolute;inset:0;background:url('{{ $t }}/img/bg/breadcrumb__bg.jpg') center/cover no-repeat;opacity:0.15;"></div>
                <div class="container h-100" style="position:relative;z-index:2;display:flex;align-items:center;height:100%;">
                    <div class="row justify-content-center w-100">
                        <div class="col-lg-9 col-xl-8 text-center text-lg-start">
                            <span class="sub-title" style="color:#c9922a;font-weight:700;text-transform:uppercase;letter-spacing:2px;font-size:1.1rem;display:block;margin-bottom:20px;">Notre portefeuille</span>
                            <h1 style="color:#fff;font-size:clamp(2.5rem,6vw,5rem);font-weight:800;line-height:1.1;margin-bottom:28px;">7 filiales, <span style="color:#c9922a;">un seul groupe</span></h1>
                            <p style="color:rgba(255,255,255,0.82);font-size:1.2rem;line-height:1.8;max-width:700px;margin:0 auto 40px;">De la finance à l'hôtellerie, de l'assurance aux technologies, EIG détient et développe des entreprises leaders dans leurs secteurs à travers l'Afrique de l'Ouest.</p>
                            <div style="display:flex;gap:16px;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>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Slide 3 --}}
            <div class="swiper-slide" style="background:linear-gradient(120deg,#0d3a47 0%,#134554 60%,#1a5c6e 100%);">
                <div style="position:absolute;inset:0;background:url('{{ $t }}/img/banner/hero_bg.jpg') center 30%/cover no-repeat;opacity:0.12;filter:hue-rotate(20deg);"></div>
                <div class="container h-100" style="position:relative;z-index:2;display:flex;align-items:center;height:100%;">
                    <div class="row justify-content-center w-100">
                        <div class="col-lg-9 col-xl-8 text-center text-lg-start">
                            <span class="sub-title" style="color:#c9922a;font-weight:700;text-transform:uppercase;letter-spacing:2px;font-size:1.1rem;display:block;margin-bottom:20px;">Impact & développement</span>
                            <h1 style="color:#fff;font-size:clamp(2.5rem,6vw,5rem);font-weight:800;line-height:1.1;margin-bottom:28px;">Construire l'Afrique <span style="color:#c9922a;">de l'intérieur</span></h1>
                            <p style="color:rgba(255,255,255,0.82);font-size:1.2rem;line-height:1.8;max-width:700px;margin:0 auto 40px;">À travers ses investissements responsables, EIG contribue activement à la création d'emplois, au renforcement des capacités locales et au développement économique durable en Afrique de l'Ouest.</p>
                            <div style="display:flex;gap:16px;flex-wrap:wrap;">
                                <a href="{{ route('groupe') }}" class="tg-btn">En savoir plus <img src="{{ $t }}/img/icons/right_arrow.svg" alt="" class="injectable"></a>
                                <a href="{{ route('contact') }}" class="tg-btn tg-btn-two">Nous contacter <img src="{{ $t }}/img/icons/right_arrow.svg" alt="" class="injectable"></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        {{-- navigation --}}
        <div class="swiper-button-next" style="color:#fff;"></div>
        <div class="swiper-button-prev" style="color:#fff;"></div>
        {{-- pagination --}}
        <div class="swiper-pagination" style="bottom:32px;"></div>
    </div>

    <script>
    document.addEventListener('DOMContentLoaded', function () {
        new Swiper('.hero-swiper', {
            loop: true,
            autoplay: { delay: 5000, disableOnInteraction: false },
            speed: 900,
            effect: 'fade',
            fadeEffect: { crossFade: true },
            navigation: { nextEl: '.hero-swiper .swiper-button-next', prevEl: '.hero-swiper .swiper-button-prev' },
            pagination: { el: '.hero-swiper .swiper-pagination', clickable: true },
        });
    });
    </script>
</section>

{{-- about --}}
<section class="about__area section-py-130">
    <div class="container">
        <div class="row align-items-center justify-content-center">
            <div class="col-lg-6 col-md-9">
                <div class="about__img-wrap">
                    <div class="about__images">
                        <img src="{{ $t }}/img/images/about_img01.jpg" alt="img">
                        <img src="{{ $t }}/img/images/about_img02.jpg" alt="img" data-aos="fade-up" data-aos-delay="200">
                    </div>
                    <div class="experience__wrap" data-aos="fade-left" data-aos-delay="200">
                        <h2 class="count">20<span style="font-size:1.2rem">Mds</span></h2>
                        <span>Capital FCFA <br> investi en Afrique</span>
                    </div>
                    <div class="shape">
                        <img src="{{ $t }}/img/images/about_shape01.svg" alt="shape" data-aos="fade-up-right" data-aos-delay="600">
                        <img src="{{ $t }}/img/images/about_shape02.svg" alt="shape" class="alltuchtopdown">
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="about__content">
                    <div class="section__title mb-15">
                        <span class="sub-title">À propos du Groupe</span>
                        <h2 class="title">Une holding panafricaine au service du <span>développement économique</span> du continent.</h2>
                    </div>
                    <p>Excellis Invest Group est une entité autonome du Groupe Coris, née de la volonté de disposer d'une structure dédiée à la gestion et au développement d'un portefeuille d'entreprises diversifié, couvrant 9 secteurs stratégiques.</p>
                    <div class="about__inner-wrap">
                        <div class="about__list-box">
                            <div class="about__list-box-item">
                                <div class="icon"><i class="flaticon-growth"></i></div>
                                <div class="content"><h4 class="title">Investissement <br> Stratégique</h4></div>
                            </div>
                            <div class="about__list-box-item">
                                <div class="icon"><i class="flaticon-pie-chart-1"></i></div>
                                <div class="content"><h4 class="title">Portefeuille <br> Multi-sectoriel</h4></div>
                            </div>
                        </div>
                        <div class="about__inner-content">
                            <ul class="list-wrap about__list-item">
                                <li>
                                    <div class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M11.5252 3.5L5.30301 9.72222L2.47473 6.89394" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
                                    Acquisition d'entreprises à fort potentiel
                                </li>
                                <li>
                                    <div class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M11.5252 3.5L5.30301 9.72222L2.47473 6.89394" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
                                    Développement de synergies inter-filiales
                                </li>
                                <li>
                                    <div class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M11.5252 3.5L5.30301 9.72222L2.47473 6.89394" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
                                    Présence dans 9 secteurs d'activités clés
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="about__content-bottom">
                        <a href="{{ route('groupe') }}" class="tg-btn">Découvrir le groupe <img src="{{ $t }}/img/icons/right_arrow.svg" alt="" class="injectable"></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- secteurs --}}
<section class="services__area fix section-py-130 services__bg" data-background="{{ $t }}/img/bg/services_bg.png">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-6 col-lg-8">
                <div class="section__title text-center mb-50">
                    <span class="sub-title">Nos domaines d'activité</span>
                    <h2 class="title">9 secteurs stratégiques pour un investissement diversifié</h2>
                </div>
            </div>
        </div>
        <div class="swiper-container services-active fix">
            <div class="swiper-wrapper">
                @php
                    $svc_icons = ['flaticon-investment','flaticon-report','flaticon-target','flaticon-accountant','flaticon-growth','flaticon-pie-chart-1','flaticon-briefcase','flaticon-success','flaticon-business'];
                    $svc_imgs  = ['services_img01.jpg','services_img02.jpg','services_img03.jpg','services_img04.jpg','services_img01.jpg','services_img02.jpg','services_img03.jpg','services_img04.jpg','services_img01.jpg'];
                @endphp
                @foreach($secteurs as $i => $secteur)
                <div class="swiper-slide">
                    <div class="services__item shine__animate-item">
                        <div class="services__thumb shine__animate-link">
                            <a href="{{ route('secteurs') }}"><img src="{{ $t }}/img/services/{{ $svc_imgs[$i % count($svc_imgs)] }}" alt="{{ $secteur['titre'] }}"></a>
                            <div class="services__icon">
                                <i class="{{ $svc_icons[$i % count($svc_icons)] }}"></i>
                            </div>
                        </div>
                        <div class="services__content">
                            <h3 class="title"><a href="{{ route('secteurs') }}">{{ $secteur['titre'] }}</a></h3>
                            <p>{{ Str::limit($secteur['description'], 100) }}</p>
                            <a href="{{ route('secteurs') }}" class="link-btn">En savoir plus <img src="{{ $t }}/img/icons/right_arrow.svg" alt="" class="injectable"></a>
                        </div>
                        <div class="services__item-shape">
                            <img src="{{ $t }}/img/services/services_item_shape.svg" alt="shape">
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        <div class="services__bottom-content text-center mt-70">
            <p>Découvrez tous nos secteurs d'investissement. <a href="{{ route('secteurs') }}">Voir tous les secteurs</a></p>
        </div>
    </div>
    <div class="services__shape-wrap">
        <img src="{{ $t }}/img/services/services_shape01.svg" alt="shape" data-aos="fade-down-left" data-aos-delay="400">
        <img src="{{ $t }}/img/services/services_shape02.svg" alt="shape" data-aos="fade-up-right" data-aos-delay="400">
    </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">Vous avez un projet d'investissement ? Parlons-en ensemble !</h2>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="cta__btn">
                    <a href="{{ route('contact') }}" class="tg-btn tg-hover-btn">Prendre contact <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>

{{-- counter --}}
<section class="counter__area">
    <div class="container">
        <div class="counter__wrap">
            <div class="row">
                <div class="col-lg-3 col-6">
                    <div class="counter__item">
                        <h2 class="count"><span class="odometer" data-count="20"></span> Mds</h2>
                        <p>Capital FCFA</p>
                    </div>
                </div>
                <div class="col-lg-3 col-6">
                    <div class="counter__item">
                        <h2 class="count"><span class="odometer" data-count="7"></span>+</h2>
                        <p>Filiales actives</p>
                    </div>
                </div>
                <div class="col-lg-3 col-6">
                    <div class="counter__item">
                        <h2 class="count"><span class="odometer" data-count="9"></span></h2>
                        <p>Secteurs d'activité</p>
                    </div>
                </div>
                <div class="col-lg-3 col-6">
                    <div class="counter__item">
                        <h2 class="count"><span class="odometer" data-count="4"></span>+</h2>
                        <p>Pays de présence</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="counter__shape">
        <img src="{{ $t }}/img/images/counter__shape.svg" alt="shape" data-aos="fade-up-left" data-aos-delay="400">
    </div>
</section>

{{-- filiales highlight --}}
<section class="project__area section-py-130 project__bg" data-background="{{ $t }}/img/bg/project_bg.jpg">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-6 col-lg-8">
                <div class="section__title text-center mb-50">
                    <span class="sub-title">Notre portefeuille</span>
                    <h2 class="title">Des filiales leaders dans leurs secteurs</h2>
                </div>
            </div>
        </div>
    </div>
    <div class="swiper-container project-active fix">
        <div class="swiper-wrapper">
            @php $proj_imgs = ['project_img01.jpg','project_img02.jpg','project_img03.jpg','project_img04.jpg']; @endphp
            @foreach($filiales_highlight as $i => $filiale)
            <div class="swiper-slide">
                <div class="project__item">
                    <div class="project__thumb">
                        <img src="{{ $t }}/img/project/{{ $proj_imgs[$i % count($proj_imgs)] }}" alt="{{ $filiale['nom'] }}">
                    </div>
                    <div class="project__content">
                        <div class="project__content-left">
                            <span>{{ $filiale['secteur'] }}</span>
                            <h2 class="title"><a href="{{ route('filiale', $filiale['slug']) }}">{{ $filiale['nom'] }}</a></h2>
                        </div>
                        <div class="project__content-arrow">
                            <a href="{{ route('filiale', $filiale['slug']) }}"><img src="{{ $t }}/img/icons/right_arrow.svg" alt="" class="injectable"></a>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        <div class="project__nav-wrap">
            <button class="project-button-prev"><img src="{{ $t }}/img/icons/right_arrow.svg" alt="" class="injectable"></button>
            <button class="project-button-next"><img src="{{ $t }}/img/icons/right_arrow.svg" alt="" class="injectable"></button>
        </div>
    </div>
    <div class="container mt-50 text-center">
        <a href="{{ route('filiales') }}" class="tg-btn">Voir toutes nos filiales <img src="{{ $t }}/img/icons/right_arrow.svg" alt="" class="injectable"></a>
    </div>
</section>

{{-- carrieres teaser --}}
<section class="section-py-130">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <div class="history__img-wrap">
                    <img src="{{ $t }}/img/images/history_img01.jpg" alt="img">
                    <img src="{{ $t }}/img/images/history_img02.jpg" alt="img" data-aos="fade-up" data-aos-delay="400">
                    <img src="{{ $t }}/img/images/history_shape.svg" alt="shape" class="shape" data-aos="fade-down-right" data-aos-delay="400">
                </div>
            </div>
            <div class="col-lg-6">
                <div class="history__content">
                    <div class="section__title mb-20">
                        <span class="sub-title">Rejoignez le groupe</span>
                        <h2 class="title">Construisez votre carrière au sein d'un groupe panafricain en pleine croissance</h2>
                    </div>
                    <p>Excellis Invest Group offre un environnement stimulant, des défis variés et de réelles perspectives d'évolution. Rejoignez une équipe passionnée qui dynamise l'économie africaine.</p>
                    <div class="progress__wrap">
                        <div class="progress__item">
                            <h6 class="title">Développement professionnel</h6>
                            <div class="progress" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">
                                <div class="progress-bar wow slideInLeft" data-wow-delay=".2s" style="width: 85%"><span>85%</span></div>
                            </div>
                        </div>
                        <div class="progress__item">
                            <h6 class="title">Impact panafricain</h6>
                            <div class="progress" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
                                <div class="progress-bar wow slideInLeft" data-wow-delay=".2s" style="width: 90%"><span>90%</span></div>
                            </div>
                        </div>
                        <div class="progress__item">
                            <h6 class="title">Environnement multi-sectoriel</h6>
                            <div class="progress" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100">
                                <div class="progress-bar wow slideInLeft" data-wow-delay=".2s" style="width: 95%"><span>95%</span></div>
                            </div>
                        </div>
                    </div>
                    <a href="{{ route('carrieres') }}" class="tg-btn mt-30">Voir les opportunités <img src="{{ $t }}/img/icons/right_arrow.svg" alt="" class="injectable"></a>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection