@extends('layouts.app')
@section('title', 'Actualités — Excellis Invest Group')

@section('extra_css')
<style>
.article-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    overflow: hidden;
    transition: transform .3s, box-shadow .3s;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 36px rgba(0,0,0,0.11);
}
.article-card__header {
    padding: 28px 28px 0;
}
.article-card__cat {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 4px 12px;
    border-radius: 20px;
    background: #1a5c6e18;
    color: #1a5c6e;
    margin-bottom: 14px;
}
.article-card__date {
    font-size: 0.78rem;
    color: #bbb;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.article-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.45;
    margin-bottom: 12px;
}
.article-card__body {
    padding: 16px 28px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.article-card p {
    font-size: 0.86rem;
    color: #666;
    line-height: 1.7;
    flex: 1;
    margin-bottom: 18px;
}
.article-card .link-btn {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1a5c6e;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap .2s;
}
.article-card .link-btn:hover { gap: 10px; color: #c9922a; }
.article-divider {
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #1a5c6e, #c9922a);
    border-radius: 3px;
    margin-bottom: 0;
}
</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">Actualité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">Actualités</span>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section-py-130">
    <div class="container">
        <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">Nos dernières nouvelles</span>
                    <h2 class="title">La vie du <span>Groupe Coris Invest</span></h2>
                    <p class="mt-20" style="color:#666;">Suivez l'actualité de Excellis Invest Group et de ses filiales : performances, innovations, événements et développements stratégiques.</p>
                </div>
            </div>
        </div>

        {{-- article vedette (premier article) --}}
        @if(!empty($articles))
        @php $vedette = $articles[0]; @endphp
        <div class="row mb-50">
            <div class="col-12">
                <div style="background:linear-gradient(135deg,#1a5c6e,#0d3a47);border-radius:20px;padding:50px 48px;display:flex;align-items:center;gap:40px;flex-wrap:wrap;position:relative;overflow:hidden;">
                    <img src="{{ $t }}/img/images/cta_shape01.svg" alt="" style="position:absolute;right:60px;top:-20px;opacity:0.06;width:220px;">
                    <img src="{{ $t }}/img/images/cta_shape02.svg" alt="" style="position:absolute;left:0;bottom:0;opacity:0.05;width:150px;">
                    <div style="flex:1;min-width:280px;position:relative;z-index:2;">
                        <span style="font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:#c9922a;display:block;margin-bottom:12px;">{{ $vedette['cat'] }} · À la une</span>
                        <h2 style="color:#fff;font-size:1.5rem;font-weight:800;line-height:1.4;margin-bottom:16px;">{{ $vedette['titre'] }}</h2>
                        <p style="color:rgba(255,255,255,0.75);font-size:0.9rem;line-height:1.7;margin-bottom:24px;">{{ $vedette['extrait'] }}</p>
                        <div style="display:flex;align-items:center;gap:16px;flex-wrap:wrap;">
                            <span style="font-size:0.78rem;color:rgba(255,255,255,0.5);"><i class="fas fa-calendar me-1"></i>{{ $vedette['date'] }}</span>
                            <a href="#" class="tg-btn" style="font-size:0.82rem;padding:10px 20px;">
                                Lire l'article <img src="{{ $t }}/img/icons/right_arrow.svg" alt="" class="injectable">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif

        {{-- grille articles --}}
        <div class="row gutter-y-30">
            @foreach(array_slice($articles, 1) as $article)
            <div class="col-lg-4 col-md-6">
                <div class="article-card">
                    <div class="article-divider"></div>
                    <div class="article-card__header">
                        <span class="article-card__cat">{{ $article['cat'] }}</span>
                        <div class="article-card__date">
                            <i class="fas fa-calendar-alt"></i> {{ $article['date'] }}
                        </div>
                        <h3>{{ $article['titre'] }}</h3>
                    </div>
                    <div class="article-card__body">
                        <p>{{ $article['extrait'] }}</p>
                        <a href="#" class="link-btn">
                            Lire la suite <i class="fas fa-arrow-right" style="font-size:0.75rem;"></i>
                        </a>
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        {{-- newsletter --}}
        <div class="row justify-content-center mt-80">
            <div class="col-lg-9">
                <div style="background:#f8f8f8;border-radius:20px;padding:50px 40px;display:flex;align-items:center;gap:40px;flex-wrap:wrap;">
                    <div style="flex:1;min-width:240px;">
                        <span class="sub-title" style="display:block;margin-bottom:8px;">Newsletter</span>
                        <h3 style="color:#1a5c6e;font-size:1.4rem;font-weight:800;margin-bottom:6px;">Restez informé</h3>
                        <p style="color:#666;font-size:0.88rem;margin:0;line-height:1.6;">Recevez les actualités de Excellis Invest Group directement dans votre boîte mail.</p>
                    </div>
                    <div style="flex:2;min-width:280px;">
                        <form action="#" style="display:flex;gap:10px;flex-wrap:wrap;">
                            <input type="email" placeholder="Votre adresse e-mail" required
                                style="flex:1;min-width:200px;border:1px solid #e0e0e0;border-radius:8px;padding:13px 18px;font-size:0.9rem;outline:none;background:#fff;">
                            <button type="submit" class="tg-btn" style="white-space:nowrap;">
                                S'abonner <img src="{{ $t }}/img/icons/right_arrow.svg" alt="" class="injectable">
                            </button>
                        </form>
                        <p style="font-size:0.75rem;color:#aaa;margin-top:10px;margin-bottom:0;">En vous abonnant, vous acceptez de recevoir nos communications. Désabonnement possible à tout moment.</p>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

@endsection