@extends('base_html')
@push('GA')
    @vite(['resources/js/gaManager.js'])
@endpush
@section('title', 'Actualités')
@section('meta_content_description', 'Découvrez nos projets réalisés et actualités : créations en acier sur mesure,
    ameublement, pergolas, escaliers et autres réalisations innovantes.')
@section('meta_robots', 'index, follow')

@section('content')
    @include('partial.titlebanner', [
        'firstPartTitle' => 'Actualités',
    ])
    @include('partial.navigation.breadcrumb', [
        'pages' => [
            ['name' => 'Atelier Steel Art', 'url' => '/', 'disabled' => false],
            ['name' => 'Actualités', 'url' => '/actualites', 'disabled' => false],
        ],
    ])


    <section id="portfolio" class="portfolio-section py-16 px-4">
        <div class="container mx-auto">
            <div class="flex justify-center">
                @include('partial.pageSubTitle', [
                    'smallTextPart' => 'projets',
                    'titleFirstPart' => 'Toute notre ',
                    'titleSecondPart' => 'actualité',
                    'textFirstPart' => 'découvrez',
                    'textSecondPart' => 'nos projets',
                ])
            </div>
            @include('partial.textWrapedBorder', [
                'text' => 'Nos dernières réalisations',
            ])
            <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
                @foreach ($latestActualities as $latestActuality)
                    <div class="group portfolio-item relative hover:shadow-lg shadow-md rounded-lg overflow-hidden bg-ultraLight">
                        <a href="{{ route('actualities.detail', $latestActuality->id) }}">
                            <div class="flex justify-center">
                                <img class="h-100 py-2 w-full object-contain rounded-lg mt-5 shadow-lg" loading="lazy"
                                    src="{{ asset('storage/' . $latestActuality->images_url[0]) }}"
                                    alt="{{ $latestActuality->title }} — {{ $latestActuality->category->name }}">
                            </div>
                            <div
                                class="absolute top-0 left-0 right-0 bottom-0 bg-linear-to-r from-dark to-ultraLight opacity-0 transition duration-300 ease-in-out group-hover:opacity-70">
                            </div>
                            <div class="p-4 flex flex-col items-center justify-between relative z-10">
                                <h3 class="text-lg font-medium text-dark 4xl:text-3xl 5xl:text-5xl">{{ $latestActuality->title }}</h3>
                                <span
                                    class="text-sm font-bold text-accent group-hover:text-ultraLight 4xl:text-xl 5xl:text-3xl">{{ $latestActuality->category->name }}</span>
                            </div>
                        </a>
                    </div>
                @endforeach
                <div class="w-full text-center md:col-span-3">
                    @include('partial.emptyElements', ['collection' => $latestActualities])
                </div>
            </div>

            @include('partial.textWrapedBorder', [
                'text' => 'Nos réalisations',
            ])
            <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
                @foreach ($otherActualities as $otherActuality)
                    <div class="group portfolio-item relative hover:shadow-lg shadow-md rounded-lg overflow-hidden bg-ultraLight">
                        <a href="{{ route('actualities.detail', $otherActuality->id) }}">
                            <div class="flex justify-center">
                                <img class="h-100 py-2 w-full object-contain rounded-lg mt-5 shadow-lg" loading="lazy"
                                    src="{{ asset('storage/' . $otherActuality->images_url[0]) }}"
                                    alt="{{ $otherActuality->title }} — {{ $otherActuality->category->name }}">
                            </div>
                            <div
                                class="absolute top-0 left-0 right-0 bottom-0 bg-linear-to-r from-dark to-ultraLight opacity-0 transition duration-300 ease-in-out group-hover:opacity-70">
                            </div>
                            <div class="p-4 flex flex-col items-center justify-between relative z-10">
                                <h3 class="text-lg font-medium text-dark 4xl:text-3xl 5xl:text-5xl">{{ $otherActuality->title }}</h3>
                                <span
                                    class="text-sm font-bold text-accent group-hover:text-ultraLight 4xl:text-xl 5xl:text-3xl">{{ $otherActuality->category->name }}</span>
                            </div>
                        </a>
                    </div>
                @endforeach
                <div class="w-full text-center md:col-span-3">
                    @include('partial.emptyElements', ['collection' => $otherActualities])
                </div>
            </div>
        </div>
    </section>
@endsection