@php
    $groups = $achievements->getCollection()->groupBy(fn ($a) => $a->achieved_at->format('Y'));
@endphp

<style>
    .ach-head { text-align: center; }
    .ach-count { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem; padding: .35rem .9rem; border-radius: 9999px; font-size: .8rem; font-weight: 600;
        color: #92400e; background: #fef3c7; }
    .dark .ach-count { color: #fcd34d; background: rgba(245, 158, 11, .15); }

    .ach-year { display: flex; align-items: center; gap: 1rem; margin: 2.75rem 0 1.25rem; }
    .ach-year:first-of-type { margin-top: 2rem; }
    .ach-year span { font-size: 1.6rem; font-weight: 800; color: #2563eb; }
    .dark .ach-year span { color: #93c5fd; }
    .ach-year::after { content: ""; flex: 1; border-top: 2px dotted #bfdbfe; }
    .dark .ach-year::after { border-top-color: #334155; }

    .ach-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    @media (min-width: 640px) { .ach-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (min-width: 1024px) { .ach-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

    .ach-empty { padding: 3rem 1rem; text-align: center; color: #64748b; }
</style>

<x-layouts.public title="Achievements">
    <section class="section">
        <div class="ach-head">
            <x-section-title title="Achievements" subtitle="Contest results, hackathons and awards earned by our members." center />
            @if($achievements->total() > 0)
                <span class="ach-count">
                    <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 4h8v5a4 4 0 0 1-8 0V4Z"/><path d="M8 6H4v1a3 3 0 0 0 3 3M16 6h4v1a3 3 0 0 1-3 3M12 13v4M8 21h8M10 17h4"/></svg>
                    {{ $achievements->total() }} {{ \Illuminate\Support\Str::plural('achievement', $achievements->total()) }}
                </span>
            @endif
        </div>

        @if($achievements->isEmpty())
            <div class="card ach-empty mt-8">Achievements will appear here soon.</div>
        @else
            @foreach($groups as $year => $items)
                <div class="ach-year"><span>{{ $year }}</span></div>
                <div class="ach-grid">
                    @foreach($items as $achievement)
                        <div data-aos="fade-up" data-aos-delay="{{ ($loop->index % 3) * 80 }}">
                            <x-achievement-card :achievement="$achievement" />
                        </div>
                    @endforeach
                </div>
            @endforeach

            <div class="mt-10">{{ $achievements->links() }}</div>
        @endif
    </section>
</x-layouts.public>