@php
    $recentList = $projects->count() > 3 ? $projects->skip(3)->values() : $projects;
@endphp

<section id="recent-projects" class="relative py-20 px-6 border-t border-white/10">
    <div class="max-w-6xl mx-auto space-y-10">

        {{-- Section Header --}}
        <div class="flex flex-col sm:flex-row sm:items-end justify-between gap-4 border-b border-white/10 pb-6">
            <div>
                <span class="font-mono-tech text-[10px] tracking-[0.24em] text-[#ff8000] uppercase block mb-1.5">
                    ARCHIVE // REPOSITORY LOGS
                </span>
                <h2 class="font-oswald font-bold text-3xl sm:text-4xl uppercase tracking-tight text-white">
                    RECENT <span class="text-[#ff8000]">BUILDS</span>
                </h2>
            </div>
            <span class="font-mono-tech text-[11px] text-white/50 uppercase">
                TOTAL RECORDS: {{ $recentList->count() }}
            </span>
        </div>

        {{-- Recent Projects Grid --}}
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @forelse($recentList as $index => $project)
                @php
                    $rawTags = $project->tags ?? '';
                    if (is_string($rawTags) && str_starts_with(trim($rawTags), '[')) {
                        $tagList = json_decode($rawTags, true) ?: [];
                    } elseif (is_array($rawTags)) {
                        $tagList = $rawTags;
                    } else {
                        $tagList = array_filter(array_map('trim', explode(',', (string) $rawTags)));
                    }
                @endphp

                <article class="f1-float-card group bg-[#111317] border border-white/10 f1-chamfer-sm flex flex-col justify-between overflow-hidden">
                    {{-- Top Papaya Indicator Bar --}}
                    <div class="f1-card-accent-bar h-[3px] w-full bg-[#ff8000]"></div>

                    <div class="p-6 space-y-3.5">
                        <div class="flex items-center justify-between gap-2 font-mono-tech text-[10px] tracking-[0.18em] uppercase">
                            <span class="text-[#ff8000] font-bold">
                                LOG-{{ str_pad((string) ($index + 1), 2, '0', STR_PAD_LEFT) }} // {{ $project->category ?? 'SYSTEM' }}
                            </span>
                            <span class="text-white/45">{{ $project->year ?? date('Y') }}</span>
                        </div>

                        <h3 class="font-oswald font-bold text-xl uppercase tracking-wide text-white group-hover:text-[#ff8000] transition-colors duration-200">
                            {{ $project->title }}
                        </h3>

                        <p class="text-sm text-white/65 leading-relaxed line-clamp-2">
                            {{ $project->short_description ?: $project->description }}
                        </p>

                        @if(count($tagList) > 0)
                            <div class="flex flex-wrap gap-1.5 pt-1">
                                @foreach(array_slice($tagList, 0, 4) as $tag)
                                    <span class="px-2 py-0.5 bg-[#0a0b0d] border border-white/10 font-mono-tech text-[10px] uppercase text-white/70">
                                        {{ $tag }}
                                    </span>
                                @endforeach
                            </div>
                        @endif
                    </div>

                    <div class="px-6 py-3.5 border-t border-white/10 bg-[#0a0b0d]/50 flex items-center justify-between gap-3 font-mono-tech text-[10px] uppercase">
                        <button type="button"
                                onclick="if (typeof openProjectModal === 'function') openProjectModal({{ \Illuminate\Support\Js::from($project) }})"
                                class="inline-flex items-center gap-1.5 text-white group-hover:text-[#ff8000] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#ff8000] font-bold tracking-[0.14em] cursor-pointer transition-colors">
                            <span>INSPECT</span>
                            <span aria-hidden="true">&rarr;</span>
                        </button>

                        @if(!empty($project->github_url))
                            <a href="{{ $project->github_url }}"
                                target="_blank"
                                rel="noopener noreferrer"
                                class="text-white/55 hover:text-[#ff8000] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#ff8000] transition-colors">
                                GITHUB &nearr;
                            </a>
                        @endif
                    </div>
                </article>
            @empty
                <div class="col-span-full bg-[#111317] border border-white/10 p-6 text-center font-mono-tech text-xs text-white/50">
                    BELUM ADA ARSIP PROYEK TAMBAHAN.
                </div>
            @endforelse
        </div>
    </div>
</section>