@php
    $items = collect($projectItems ?? []);
@endphp

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

        {{-- Section Header --}}
        <div class="flex flex-col md:flex-row md:items-end justify-between gap-6 border-b border-white/10 pb-8">
            <div>
                <span class="font-mono-tech text-[11px] tracking-[0.24em] text-[#ff8000] uppercase block mb-2">
                    03 // TELEMETRY &mdash; SELECTED WORK
                </span>
                <h2 class="font-oswald font-bold text-4xl sm:text-5xl uppercase tracking-tight text-white">
                    FEATURED <span class="text-[#ff8000]">PROJECTS</span>
                </h2>
            </div>
            <p class="font-mono-tech text-xs text-white/60 max-w-md leading-relaxed">
                Sistem web, aplikasi mobile, dan simulasi mikrokontroler utama yang dirancang dan dibangun secara end-to-end.
            </p>
        </div>

        {{-- Projects Grid --}}
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @forelse($items as $item)
                @php
                    $rawProject = $dbProjects[$loop->index] ?? null;
                    $imagePath  = $rawProject->image ?? null;
                @endphp

                <article class="f1-float-card group bg-[#111317] border border-white/10 f1-chamfer flex flex-col justify-between overflow-hidden">
                    <div>
                        @if(!empty($imagePath))
                            <div class="aspect-video w-full overflow-hidden border-b border-white/10 bg-[#0a0b0d]">
                                <img src="{{ asset('storage/' . ltrim($imagePath, '/')) }}"
                                     alt="{{ $item['title'] }}"
                                     loading="lazy"
                                     class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
                            </div>
                        @endif

                        <div class="p-6 space-y-4">
                            <div class="flex items-center justify-between gap-2 font-mono-tech text-[10px] tracking-[0.18em] uppercase">
                                <span class="text-[#ff8000] font-bold">
                                    PRJ-{{ $item['num'] }} // {{ $item['category'] }}
                                </span>
                                <span class="text-white/45">{{ $item['year'] }}</span>
                            </div>

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

                            <p class="text-sm text-white/70 leading-relaxed line-clamp-3">
                                {{ $item['short'] }}
                            </p>

                            @if(!empty($item['stack']))
                                <div class="flex flex-wrap gap-2 pt-1">
                                    @foreach($item['stack'] as $tech)
                                        <span class="px-2.5 py-1 bg-[#0a0b0d] border border-white/10 font-mono-tech text-[10px] tracking-[0.12em] uppercase text-white/75">
                                            {{ $tech }}
                                        </span>
                                    @endforeach
                                </div>
                            @endif
                        </div>
                    </div>

                    {{-- Card Footer (Tanpa Ikon Eksternal, Hanya Tombol Detail Specs) --}}
                    <div class="px-6 py-4 border-t border-white/10 bg-[#0a0b0d]/60 flex items-center justify-between gap-3 font-mono-tech text-[11px] uppercase">
                        <button type="button"
                                onclick="if (typeof openProjectModal === 'function') openProjectModal({{ \Illuminate\Support\Js::from($item) }})"
                                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>DETAIL SPECS</span>
                            <svg class="w-3.5 h-3.5 transition-transform duration-200 group-hover:translate-x-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                <line x1="5" y1="12" x2="19" y2="12"></line>
                                <polyline points="12 5 19 12 12 19"></polyline>
                            </svg>
                        </button>
                    </div>
                </article>
            @empty
                <div class="col-span-full bg-[#111317] border border-white/10 p-8 text-center font-mono-tech text-xs text-white/50 uppercase tracking-[0.18em]">
                    BELUM ADA DATA PROYEK YANG DIPUBLIKASIKAN.
                </div>
            @endforelse
        </div>
    </div>
</section>