@extends('layouts.user')

@section('title', 'Portofolio Proyek - CV. Amelia Langgeng Jaya')

@section('content')
<section class="relative h-[250px] flex items-center justify-center overflow-hidden">
    <img src="{{ asset('images/proyek2.jpeg') }}" class="absolute inset-0 w-full h-full object-cover" alt="Banner">
    <div class="absolute inset-0 bg-black/30"></div>
    <h1 class="relative z-10 text-white text-4xl font-black uppercase">Portofolio</h1>
</section>

<section class="py-12 bg-white">
    <div class="container mx-auto px-6">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            @forelse($portofolio as $p)
            <div class="bg-white rounded-3xl overflow-hidden shadow-lg border border-slate-100 flex flex-col group transition-all">
                <div class="relative h-60 overflow-hidden p-4">
                    <img src="{{ asset('storage/' . $p->gambar_portofolio) }}" class="w-full h-full object-cover rounded-2xl group-hover:scale-105 transition-transform" alt="{{ $p->judul_pekerjaan }}">
                </div>
                <div class="px-8 pb-10 flex-grow flex flex-col">
                    <h4 class="text-blue-900 font-bold text-xl uppercase mb-4 leading-tight">{{ $p->judul_pekerjaan }}</h4>
                    <div class="space-y-4">
                        <div class="flex items-center gap-2">
                            <span class="text-[10px] font-bold text-slate-400 uppercase">Lokasi:</span>
                            <span class="text-[12px] font-bold text-blue-900 uppercase">{{ $p->lokasi_proyek }}</span>
                        </div>
                        <div class="text-[11px] text-slate-500 italic">{{ $p->deskripsi_paket_kerja }}</div>
                        <div class="flex justify-between items-center bg-slate-50 p-3 rounded-xl border">
                            <div>
                                <p class="text-[8px] font-bold text-slate-400 uppercase">Nilai Kontrak</p>
                                <p class="text-[11px] font-bold text-orange-600">
                                    {{ $p->nilai_kontrak > 0 ? 'Rp ' . number_format($p->nilai_kontrak, 0, ',', '.') : '-' }}
                                </p>
                            </div>
                            <div class="text-right">
                                <p class="text-[8px] font-bold text-slate-400 uppercase">Tahun</p>
                                <p class="text-[11px] font-bold text-slate-700">{{ $p->tahun_proyek_selesai }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @empty
            <p class="col-span-full text-center text-slate-400">Belum ada portofolio.</p>
            @endforelse
        </div>
    </div>
</section>
@endsection