@if(count($announcements) > 0)
<div class="mx-auto container mt-8">
    @php
        $onIndexPage = Route::currentRouteName() === 'announcements.index';
        $displayedAnnouncements = $onIndexPage ? $announcements : $announcements->take(3);
    @endphp

    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-3xl font-bold text-color-base">{{ __('Announcements') }}</h1>
            <p class="text-color-muted text-sm">{{ __('Stay informed with the latest platform updates and notices.') }}</p>
        </div>
        <div class="hidden md:flex items-center gap-2 text-color-muted text-sm">
            <x-ri-notification-3-line class="size-4" />
            <span>{{ count($announcements) }} {{ Str::plural('announcement', count($announcements)) }}</span>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @foreach($displayedAnnouncements as $announcement)
        <div class="bg-background-secondary hover:bg-background-secondary/80 border border-neutral/70 rounded-2xl p-6 shadow-lg transition-all duration-300 hover:shadow-xl">
            <div class="flex items-center justify-between mb-4">
                <div class="inline-flex items-center gap-2 text-primary text-xs font-semibold uppercase tracking-wide">
                    <div class="size-2 bg-primary rounded-full animate-pulse"></div>
                    <span>{{ __('Update') }}</span>
                </div>
                <span class="text-color-muted text-xs">
                    {{ optional($announcement->published_at)->format('M d, Y') ?? $announcement->created_at->format('M d, Y') }}
                </span>
            </div>

            <h2 class="text-xl font-bold text-color-base mb-2 line-clamp-2">{{ $announcement->title }}</h2>
            <p class="text-color-muted text-sm mb-4 line-clamp-3">{{ $announcement->description }}</p>

            <a href="{{ route('announcements.show', $announcement) }}" wire:navigate
               class="inline-flex items-center gap-2 bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg font-medium transition-all duration-300 hover:shadow-lg hover:scale-105">
                {{ __('general.view') }}
                <x-ri-arrow-right-line class="size-4 transition-transform duration-300 group-hover:translate-x-1" />
            </a>
        </div>
        @endforeach
    </div>

    @if(!$onIndexPage)
    <div class="mt-10 text-center">
        <a href="{{ route('announcements.index') }}"
           class="inline-flex items-center gap-2 bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg font-medium transition-all duration-300 hover:shadow-lg hover:scale-105">
            {{ __('View More Announcements') }}
            <x-ri-arrow-right-line class="size-5 transform transition-transform duration-300 hover:translate-x-1" />
        </a>
    </div>
    @endif
    
    <style>
        .line-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .line-clamp-3 {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
    </style>
</div>
@endif