{{-- Homepage News Section (LastNews) — Featured article + 4 secondary cards --}}
@php
$mainArticle = __('home.news_section.main_article');
$newsCards = __('home.news_section.cards');

// Main article media
$mainArticleImage = 'images/news/citeo-innovation-day.webp';
$mainArticleLink = 'https://www.linkedin.com/posts/citeo-france_et-si-lintelligence-artificielle-permettait-activity-7353079792583307264-ovD6/';

// News card images and links (matching React source)
$newsMedia = [
['image' => 'images/news/pollutec.webp', 'link' => 'https://www.pollutec.com/fr-fr/qui-participe/liste-exposants/profil.wasoria.org-e8d1e8b2-1540-4fa5-a35a-22bb60acbd1a.html#/'],
['image' => 'images/news/french-tech.webp', 'link' => 'https://lafrenchtechbfc.fr/'],
['image' => 'images/news/japon.webp', 'link' => 'https://www.tc-iaip.org/qcav/2025/'],
['image' => 'images/news/prefet-hub-and-go.webp', 'link' => 'https://www.lejsl.com/economie/2025/09/10/un-ecosysteme-qui-favorise-les-echanges-le-prefet-a-la-rencontre-de-l-economie-et-l-innovation-creusotines'],
];
@endphp

<section class="w-full px-4">
    <div class="w-full h-full px-4 pt-20 pb-30 bg-background rounded-lg">
        <div class="w-full max-w-7xl mx-auto">
            <x-atoms.title
                :subject="__('home.news_section.subject')"
                :title="__('home.news_section.title')"
                align="left" />

            {{-- Main featured article --}}
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                <a href="{{ $mainArticleLink }}" target="_blank" rel="noopener noreferrer" class="no-underline" data-display-wrapped>
                    <div class="relative w-full rounded-lg overflow-hidden aspect-square md:aspect-video">
                        <img
                            src="{{ asset($mainArticleImage) }}"
                            alt="{{ $mainArticle['image_alt'] }}"
                            class="w-full h-full object-cover"
                            loading="lazy">
                    </div>
                </a>
                <div class="flex flex-col justify-end">
                    @if($mainArticle['date'])
                    <x-atoms.subject class="mb-2">{{ $mainArticle['date'] }}</x-atoms.subject>
                    @endif
                    @if($mainArticle['title'])
                    <h3 class="text-2xl font-normal mb-2">{{ $mainArticle['title'] }}</h3>
                    @endif
                </div>
            </div>

            {{-- Secondary news cards --}}
            <ul class="grid grid-cols-1 md:grid-cols-4 gap-4">
                @foreach($newsCards as $index => $card)
                <li class="w-full" data-display-wrapped>
                    <a href="{{ $newsMedia[$index]['link'] ?? '#' }}" target="_blank" rel="noopener noreferrer" class="no-underline">
                        <x-molecules.image-block
                            :image="$newsMedia[$index]['image'] ?? ''"
                            :subject="$card['date']"
                            :description="$card['title']"
                            :alt="$card['image_alt']" />
                    </a>
                </li>
                @endforeach
            </ul>
        </div>
    </div>
</section>