@extends('layouts.user')

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

@section('content')
{{-- Hero Section --}}
<section class="relative h-[250px] md:h-[300px] flex items-center justify-center overflow-hidden">
    <img src="{{ asset('images/tampilan-awal.jpeg') }}" 
         class="absolute inset-0 w-full h-full object-cover" 
         alt="Banner Infografis">
    
    <div class="absolute inset-0 bg-black/20"></div>
    
    <div class="relative z-10 text-center">
        <h1 class="text-white text-4xl md:text-5xl font-black uppercase tracking-tight drop-shadow-lg">
            Infografis Proyek
        </h1>
    </div>
</section>

<section class="py-16 bg-white min-h-screen">
    <div class="container mx-auto px-6">
        
        {{-- Header Section --}}
        <div class="flex flex-col md:flex-row justify-between items-end mb-12">
            <div>
                <span class="text-orange-500 font-black uppercase tracking-[0.4em] text-[10px]">Project Distribution</span>
                <h2 class="text-4xl md:text-5xl font-black text-blue-900 uppercase tracking-tighter mt-2">
                    Infografis <span class="text-orange-500">Wilayah</span>
                </h2>
                <div class="w-20 h-1.5 bg-blue-900 mt-4"></div>
            </div>
            <div class="hidden md:block text-right">
                <p class="text-slate-400 text-xs font-bold uppercase tracking-widest">Update Terakhir</p>
                <p class="text-blue-900 font-black italic">{{ now()->translatedFormat('F Y') }}</p>
            </div>
        </div>

        <div class="grid lg:grid-cols-3 gap-12">
            
            {{-- Map Display Side --}}
            <div class="lg:col-span-2 space-y-8">
                {{-- Map Container --}}

                {{-- Statistik Utama --}}
                <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
                    @php
                        $stats = [
                            ['label' => 'Total Provinsi', 'value' => $data->total_provinsi ?? '0'],
                            ['label' => 'Proyek Selesai', 'value' => $data->total_proyek_selesai ?? '0'],
                            ['label' => 'Mitra Aktif', 'value' => $data->total_mitra_aktif ?? '0'],
                            ['label' => 'Tahun Pengalaman', 'value' => date('Y') - ($data->tahun_berdiri ?? date('Y'))],
                        ];
                    @endphp
                    @foreach($stats as $s)
                    <div class="bg-white p-6 rounded-[2rem] border border-slate-100 shadow-sm text-center">
                        <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-2">{{ $s['label'] }}</p>
                        <p class="text-2xl font-black text-blue-900">{{ $s['value'] }}</p>
                    </div>
                    @endforeach
                </div>
            </div>

            {{-- Info Side (Wilayah Operasional) --}}
            <div class="lg:col-span-1">
                <div class="bg-blue-900 rounded-[3rem] p-10 text-white relative overflow-hidden h-full">
                    <div class="relative z-10">
                        <h4 class="text-xl font-black uppercase italic text-orange-500 mb-6">Wilayah Operasional</h4>
                        
                        {{-- Daftar Wilayah Dinamis dari Database --}}
                        <div class="flex flex-wrap gap-2">
                            @php 
                                $wilayahArray = explode(',', $data->daftar_jangkauan_proyek ?? 'Sumatera,Jawa,Kalimantan,Sulawesi'); 
                            @endphp
                            @foreach($wilayahArray as $w)
                            <span class="bg-white/10 border border-white/20 text-[11px] font-bold uppercase px-4 py-2 rounded-full hover:bg-orange-500 transition-colors cursor-default">
                                {{ trim($w) }}
                            </span>
                            @endforeach
                        </div>

                        <p class="text-[11px] leading-relaxed text-blue-100 mt-10 italic">
                            CV. Amelia Langgeng Jaya terus berkomitmen memperluas jangkauan layanan armada alat berat dan konstruksi sipil untuk mendukung pertumbuhan infrastruktur di seluruh Indonesia.
                        </p>
                    </div>
                    
                    {{-- Aksen Dekoratif --}}
                    <div class="absolute -bottom-10 -right-10 w-40 h-40 bg-white/5 rounded-full"></div>
                    <div class="absolute top-20 -left-10 w-20 h-20 bg-orange-500/10 rounded-full blur-2xl"></div>
                </div>
            </div>

        </div>
    </div>
</section>
@endsection