@extends('front/layouts.app')

@section('title', __('messages.accueil.titre_page'))

@section('content')

    <section class="hero-section">
        <div class="hero-sliders">
            @foreach ($sliders as $slider)
                <div class="hero-item">
                    <img src="{{ $slider->image }}" alt="{{ $slider->titre }}">
                    <div class="content">
                        <h2 class="title">{{ $slider->titre }}</h2>
                        <p class="subtitle">{{ $slider->description }}</p>
                        <span class="scroll">
                            <i class="fas fa-arrow-down"></i>
                        </span>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="delimiter"></div>
    </section>

    <section class="why-section">
        <div class="container">
            <div class="section-title-wrap text-center">
                <h2 class="title">{{ __('messages.accueil.pourquoi') }}</h2>
                <p class="text">
                    {!! __('messages.accueil.pourquoi_text') !!}
                </p>
            </div>
            <div class="why-wrap pb-5">
                <ul class="nav nav-pills w-100" id="pills-tab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="pills-programme-tab" data-bs-toggle="pill"
                            data-bs-target="#pills-programme" type="button" role="tab" aria-controls="pills-potentiel"
                            aria-selected="true">
                            {{ __('messages.accueil.raison0') }}
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="pills-potentiel-tab" data-bs-toggle="pill"
                            data-bs-target="#pills-potentiel" type="button" role="tab"
                            aria-controls="pills-potentiel" aria-selected="false">
                            {{ __('messages.accueil.raison1') }}
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="pills-ressources-tab" data-bs-toggle="pill"
                            data-bs-target="#pills-ressources" type="button" role="tab"
                            aria-controls="pills-ressources" aria-selected="false">
                            {{ __('messages.accueil.raison2') }}
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="pills-secteurs-tab" data-bs-toggle="pill"
                            data-bs-target="#pills-secteurs" type="button" role="tab" aria-controls="pills-secteurs"
                            aria-selected="false">
                            {{ __('messages.accueil.raison3') }}
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="pills-cadre-tab" data-bs-toggle="pill" data-bs-target="#pills-cadre"
                            type="button" role="tab" aria-controls="pills-cadre" aria-selected="false">
                            {{ __('messages.accueil.raison4') }}
                        </button>
                    </li>
                </ul>

                <div class="tab-content" id="pills-tabContent">
                    <div class="tab-pane fade show active" id="pills-programme" role="tabpanel"
                        aria-labelledby="pills-programme-tab" tabindex="0">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="why-content">
                                    <div class="text">
                                        <p>
                                            {!! __('messages.accueil.raison0_text') !!}
                                        </p>
                                        <a href="{{ route('simandou') }}" class="btn main-btn-outline">{{ __('messages.accueil.decouvrir_simandou') }}</a>
                                    </div>
                                    <img src="/images/content/home-0.jpg">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="pills-potentiel" role="tabpanel" aria-labelledby="pills-potentiel-tab"
                        tabindex="0">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="why-content">
                                    <div class="text">
                                        <p>
                                            {!! __('messages.accueil.raison1_text') !!}
                                        </p>
                                        <a href="{{ route('investir') }}" class="btn main-btn-outline">{{ __('messages.accueil.investir') }}</a>
                                    </div>
                                    <img src="/images/content/home-1.jpg">
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="tab-pane fade" id="pills-ressources" role="tabpanel" aria-labelledby="pills-ressources-tab"
                        tabindex="0">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="why-content">
                                    <div class="text">
                                        <p>
                                            {!! __('messages.accueil.raison2_text') !!}
                                        </p>
                                        <a href="{{ route('investir') }}" class="btn main-btn-outline">{{ __('messages.accueil.investir') }}</a>
                                    </div>
                                    <img src="/images/content/home-2.jpg">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="pills-secteurs" role="tabpanel" aria-labelledby="pills-secteurs-tab"
                        tabindex="0">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="why-content">
                                    <div class="text">
                                        <p>
                                            {!! __('messages.accueil.raison3_text') !!}
                                        </p>
                                        <a href="{{ route('investir') }}" class="btn main-btn-outline">{{ __('messages.accueil.investir') }}</a>
                                    </div>
                                    <img src="/images/content/home-3.jpg">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="pills-cadre" role="tabpanel" aria-labelledby="pills-cadre-tab"
                        tabindex="0">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="why-content">
                                    <div class="text">
                                        <p>
                                            {!! __('messages.accueil.raison4_text') !!}
                                        </p>
                                        <a href="{{ route('investir') }}" class="btn main-btn-outline">{{ __('messages.accueil.investir') }}</a>
                                    </div>
                                    <img src="/images/content/home-4.jpg">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="bg-blue">
        <div class="container">
            <div class="section-title-wrap white">
                <h2 class="title">{{ __('messages.accueil.apip_title') }}</h2>
                <p class="text">
                    {{ __('messages.accueil.apip_text') }}
                </p>
            </div>
            <div class="links">
                <a class="card-link" href="{{ route('investir') }}">
                    <div class="illustration">
                        <img src="/images/content/home-promotion-min.jpg" alt="{{ __('messages.accueil.link1') }}">
                    </div>
                    <div class="content">
                        <h3 class="title">
                            {{ __('messages.accueil.link1') }}
                        </h3>
                        <span>
                            <i class="fas fa-arrow-up"></i>
                        </span>
                    </div>
                </a>
                <a class="card-link" href="{{ route('creer') }}">
                    <div class="illustration">
                        <img src="/images/content/home-creation-min.jpg" alt="{{ __('messages.accueil.link3') }}">
                    </div>
                    <div class="content">
                        <h3 class="title">
                            {{ __('messages.accueil.link3') }}
                        </h3>
                        <span>
                            <i class="fas fa-arrow-up"></i>
                        </span>
                    </div>
                </a>
                <a class="card-link" href="{{ route('accompagnements') }}">
                    <div class="illustration">
                        <img src="/images/content/home-accompagnement-min.jpg" alt="{{ __('messages.accueil.link2') }}">
                    </div>
                    <div class="content">
                        <h3 class="title">
                            {{ __('messages.accueil.link2') }}
                        </h3>
                        <span>
                            <i class="fas fa-arrow-up"></i>
                        </span>
                    </div>
                </a>
            </div>
        </div>
    </section>

    <section class="pb-0">
        <div class="container">
            <div class="section-title-wrap">
                <h2 class="title">{{ __('messages.accueil.stats') }}</h2>
            </div>
            <div class="row stat-row">
                <div class="col-lg-6 col-md-6 pb-3">
                   <img src="/images/content/stat-1.svg" alt="Stat 1"> 
                </div>
                <div class="col-lg-6 pb-3 col-md-6">
                    <img src="/images/content/stat-2.svg" alt="Stat 1"> 
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="container">
            <div class="section-title-wrap center">
                <h2 class="title">{{ __('messages.accueil.actualites') }}</h2>
            </div>
            <div class="articles">
                @foreach ($articles as $article)
                @if ($article->slug)
                @include('front/blog/_blog-card')
                @endif
                @endforeach
            </div>
        </div>
    </section>

    <section class="bg-gray">
        <div class="container">
            <div class="section-title-wrap center">
                <h2 class="title">{{ __('messages.accueil.partenaires') }}</h2>
            </div>
            <div class="partners">
                <div class="partner-item">
                    <img src="/images/partners/partner-1.jpg" alt="Partenaire">
                </div>
                <div class="partner-item">
                    <img src="/images/partners/partner-2.jpg" alt="Partenaire">
                </div>
                <div class="partner-item">
                    <img src="/images/partners/partner-3.jpg" alt="Partenaire">
                </div>
                <div class="partner-item">
                    <img src="/images/partners/partner-4.jpg" alt="Partenaire">
                </div>
                <div class="partner-item">
                    <img src="/images/partners/partner-5.jpg" alt="Partenaire">
                </div>
                <div class="partner-item">
                    <img src="/images/partners/partner-6.jpg" alt="Partenaire">
                </div>
            </div>
        </div>
    </section>

    {{--
    <section>
        <div class="container">
            <div class="row image-text-wrap">
                <div class="col-lg-6 col-md-6">
                    <img src="/images/content/apip-mobile.png" alt="Image">
                </div>
                <div class="col-lg-6 col-md-6">
                    <h3 class="title">APIP MOBILE</h3>
                    <p class="desc">
                        L'APIP Mobile est un projet innovant qui rapproche l'administration publique au grand public. C'est
                        un bureau multiservices, mobile et connecté. Il sert de centre d'informations, d'espace de conseils
                        et de formalisation itinérante.
                        <br>
                        L'APIP Mobile vise à rencontrer les personnes du secteur informel sur leur lieu de travail, de
                        loisir ou d'habitation pour les informer des services de l'agence. Femmes et jeunes sont les cibles
                        prioritaires de ce programme.
                    </p>
                    <a class="btn main-btn" href="{{ route('apip_mobile') }}">En savoir plus</a>
                </div>
            </div>
        </div>
    </section>

    <section class="guif-section">
        <div class="container">
            <div class="row image-text-wrap">
                <div class="col-lg-6 col-md-6">
                    <h3 class="title">L’Agence de Promotion des Investissements Privés</h3>
                    <p class="desc">
                        Placée sous la tutelle technique du Ministère du Commerce, de l'Industrie et des PME et sous la
                        tutelle financière du Ministère de l'Économie et des Finances, l’Agence de Promotion des
                        Investissements privés (APIP Guinée) est un Établissement public à caractère administratif, doté de
                        la personnalité juridique et jouissant de l'autonomie financière et de gestion.
                    </p>
                    <a class="btn main-btn" href="{{ route('guif') }}">En savoir plus</a>
                </div>
                <div class="col-lg-6 col-md-6">
                    <img src="/images/content/guif.png" alt="Image">
                </div>
            </div>
        </div>
    </section>

    --}}

    

@endsection