@extends('layouts.app')
@section('title', $potential->nama . ' - Potensi Desa Suka Baru')
@section('meta_description', Str::limit($potential->deskripsi, 150))

@section('content')

{{-- HERO / HEADER BREADCRUMB --}}
<div style="background: linear-gradient(135deg, #1E3A8A 0%, #1e40af 50%, #0f172a 100%);" class="py-10 text-white relative">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        <nav class="text-blue-200 text-xs sm:text-sm mb-3 flex items-center gap-2 flex-wrap">
            <a href="{{ route('home') }}" class="hover:text-white transition-colors">Beranda</a>
            <span class="text-blue-400">/</span>
            <a href="{{ route('potensi') }}" class="hover:text-white transition-colors">Potensi Desa</a>
            <span class="text-blue-400">/</span>
            <span class="text-white font-semibold line-clamp-1">{{ $potential->nama }}</span>
        </nav>
        <div class="flex items-center gap-3 mt-2">
            <span class="px-3 py-1 rounded-full text-xs font-extrabold bg-blue-500/20 text-blue-200 border border-blue-400/30 uppercase tracking-wider">
                {{ $potential->kategori_label }}
            </span>
            @if($potential->lokasi)
            <span class="text-xs text-blue-200 font-medium flex items-center gap-1">
                📍 {{ $potential->lokasi }}
            </span>
            @endif
        </div>
        <h1 class="text-2xl sm:text-4xl font-black text-white mt-2 tracking-tight">
            {{ $potential->nama }}
        </h1>
    </div>
</div>

<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-10">

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">

        {{-- MAIN ARTICLE CONTENT --}}
        <div class="lg:col-span-2 space-y-8">

            {{-- FOTO UTAMA POTENSI --}}
            <div class="bg-white rounded-3xl overflow-hidden shadow-lg border border-gray-100">
                @if($potential->foto_url)
                    <div class="relative bg-slate-900 aspect-[16/10] overflow-hidden flex items-center justify-center">
                        <img src="{{ $potential->foto_url }}"
                             alt="{{ $potential->nama }}"
                             class="w-full h-full object-cover">
                    </div>
                @else
                    <div class="py-16 bg-blue-50 flex flex-col items-center justify-center text-center p-6 border-b border-blue-100">
                        <div class="text-6xl mb-3">📍</div>
                        <span class="text-xs font-extrabold text-blue-600 uppercase tracking-wider">
                            {{ $potential->kategori_label }}
                        </span>
                        <p class="text-xs text-gray-500 mt-1">Foto dokumentasi sarana ini dalam proses pembaharuan</p>
                    </div>
                @endif

                {{-- DESKRIPSI & ARTIKEL PENJELASAN --}}
                <div class="p-6 sm:p-8">
                    <div class="flex items-center justify-between border-b border-gray-100 pb-4 mb-6">
                        <span class="text-xs font-bold uppercase tracking-wider text-gray-400">Deskripsi & Rincian Potensi</span>
                        <span class="text-xs font-semibold text-blue-600 bg-blue-50 px-3 py-1 rounded-full">
                            Desa Suka Baru
                        </span>
                    </div>

                    <div class="prose prose-blue max-w-none text-gray-800 leading-relaxed space-y-4">
                        <p class="text-base sm:text-lg font-medium text-gray-900 leading-relaxed">
                            {{ $potential->deskripsi }}
                        </p>

                        <p class="text-sm text-gray-600 leading-relaxed">
                            Fasilitas dan sarana <strong>{{ $potential->nama }}</strong> merupakan salah satu potensi penting yang berada di kawasan {{ $potential->lokasi ?? 'Desa Suka Baru' }}, Kecamatan Marga Sakti Sebelat, Kabupaten Bengkulu Utara. Sarana ini berperan aktif dalam mendukung kegiatan kemasyarakatan, pelayanan publik, serta perputaran roda perekonomian desa.
                        </p>

                        <div class="my-6 bg-slate-50 border border-slate-200 rounded-2xl p-5 space-y-3">
                            <h4 class="text-xs font-extrabold uppercase tracking-wider text-slate-700">Ringkasan Informasi Sarana</h4>
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-xs">
                                <div class="bg-white p-3 rounded-xl border border-slate-200 flex items-center gap-2">
                                    <span class="text-base">📌</span>
                                    <div>
                                        <div class="text-gray-400 font-semibold">Kategori</div>
                                        <div class="font-bold text-gray-800">{{ $potential->kategori_label }}</div>
                                    </div>
                                </div>
                                <div class="bg-white p-3 rounded-xl border border-slate-200 flex items-center gap-2">
                                    <span class="text-base">📍</span>
                                    <div>
                                        <div class="text-gray-400 font-semibold">Lokasi</div>
                                        <div class="font-bold text-gray-800">{{ $potential->lokasi ?? 'Desa Suka Baru' }}</div>
                                    </div>
                                </div>
                                <div class="bg-white p-3 rounded-xl border border-slate-200 flex items-center gap-2">
                                    <span class="text-base">🏛️</span>
                                    <div>
                                        <div class="text-gray-400 font-semibold">Kecamatan</div>
                                        <div class="font-bold text-gray-800">Marga Sakti Sebelat</div>
                                    </div>
                                </div>
                                <div class="bg-white p-3 rounded-xl border border-slate-200 flex items-center gap-2">
                                    <span class="text-base">🗺️</span>
                                    <div>
                                        <div class="text-gray-400 font-semibold">Kabupaten</div>
                                        <div class="font-bold text-gray-800">Bengkulu Utara</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <p class="text-sm text-gray-600 leading-relaxed">
                            Pemerintah Desa Suka Baru bersama masyarakat secara berkelanjutan senantiasa merawat dan mengoptimalkan potensi {{ $potential->nama }} agar terus memberikan manfaat nyata bagi seluruh warga.
                        </p>
                    </div>

                    {{-- NAVIGASI BACK --}}
                    <div class="mt-8 pt-6 border-t border-gray-100 flex items-center justify-between flex-wrap gap-4">
                        <a href="{{ route('potensi') }}" class="inline-flex items-center gap-2 px-5 py-2.5 bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs font-bold rounded-full transition-colors">
                            ⬅ Kembali ke Daftar Potensi
                        </a>
                        <a href="{{ route('peta') }}" class="inline-flex items-center gap-2 px-5 py-2.5 bg-blue-900 hover:bg-blue-800 text-white text-xs font-bold rounded-full transition-colors shadow-sm">
                            🗺️ Lihat di Peta Desa
                        </a>
                    </div>
                </div>
            </div>

        </div>

        {{-- SIDEBAR: POTENSI TERKAIT --}}
        <div class="space-y-6">

            <div class="bg-white rounded-3xl p-6 shadow-sm border border-gray-100">
                <h3 class="text-sm font-black uppercase tracking-wider text-gray-900 border-b border-gray-100 pb-3 mb-4 flex items-center justify-between">
                    <span>Potensi Kategori Sama</span>
                    <span class="text-xs text-blue-600 font-bold bg-blue-50 px-2 py-0.5 rounded-full">{{ $related->count() }}</span>
                </h3>

                @if($related->count() > 0)
                    <div class="space-y-4">
                        @foreach($related as $rel)
                        <a href="{{ route('potensi.show', $rel->id) }}" class="flex items-center gap-3 group hover:bg-slate-50 p-2.5 rounded-2xl transition-colors">
                            <div class="w-16 h-14 bg-slate-100 rounded-xl overflow-hidden flex-shrink-0 border border-gray-200 flex items-center justify-center">
                                @if($rel->foto_url)
                                    <img src="{{ $rel->foto_url }}" alt="{{ $rel->nama }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform">
                                @else
                                    <span class="text-xl">📍</span>
                                @endif
                            </div>
                            <div class="flex-1 min-w-0">
                                <h4 class="text-xs font-bold text-gray-900 group-hover:text-blue-600 transition-colors line-clamp-1">
                                    {{ $rel->nama }}
                                </h4>
                                <p class="text-[11px] text-gray-500 line-clamp-1 mt-0.5">
                                    {{ $rel->lokasi ?? 'Desa Suka Baru' }}
                                </p>
                            </div>
                        </a>
                        @endforeach
                    </div>
                @else
                    <p class="text-xs text-gray-400 italic">Belum ada potensi lain di kategori ini.</p>
                @endif
            </div>

            {{-- BANNER INFORMASI DOKUMENTASI --}}
            <div class="bg-gradient-to-br from-blue-900 to-indigo-900 text-white rounded-3xl p-6 shadow-md relative overflow-hidden">
                <div class="relative z-10">
                    <span class="text-2xl mb-2 block">🗺️</span>
                    <h4 class="text-sm font-bold">Peta Potensi Wilayah</h4>
                    <p class="text-xs text-blue-200 mt-1 leading-relaxed">
                        Data disesuaikan berdasarkan Peta Potensi Desa Suka Baru oleh PPK Ormawa HIMA Sylva PCSI Universitas Bengkulu.
                    </p>
                    <a href="{{ route('peta') }}" class="inline-block mt-4 text-xs font-bold text-white bg-white/20 hover:bg-white/30 backdrop-blur-md px-4 py-2 rounded-full border border-white/30 transition-colors">
                        Buka Peta Interaktif ➔
                    </a>
                </div>
            </div>

        </div>

    </div>

</div>
@endsection
