<?php $__env->startSection('title', 'Potensi Desa Suka Baru'); ?>
<?php $__env->startSection('meta_description', 'Potensi Desa Suka Baru meliputi perdagangan, peribadatan, kesehatan, olahraga, pemerintahan, pendidikan, pariwisata, dan perkebunan.'); ?>

<?php $__env->startSection('content'); ?>


<div style="background: linear-gradient(135deg, #1E3A8A 0%, #1e40af 50%, #0f172a 100%);" class="py-14 text-white relative overflow-hidden">
    <div class="absolute inset-0 opacity-10 bg-[radial-gradient(#3b82f6_1px,transparent_1px)] [background-size:16px_16px]"></div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <nav class="text-blue-200 text-sm mb-4 flex items-center gap-2">
            <a href="<?php echo e(route('home')); ?>" class="hover:text-white transition-colors">Beranda</a>
            <span class="text-blue-400">/</span>
            <span class="text-white font-semibold">Potensi Desa</span>
        </nav>
        <div class="flex flex-col md:flex-row md:items-end justify-between gap-6">
            <div>
                <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-semibold bg-blue-500/20 text-blue-200 border border-blue-400/30 mb-3">
                    📍 Kecamatan Marga Sakti Sebelat
                </span>
                <h1 class="text-3xl sm:text-5xl font-black tracking-tight text-white drop-shadow-sm">
                    Potensi & Sarana Desa Suka Baru
                </h1>
                <p class="text-blue-100 text-sm sm:text-base mt-2 font-light max-w-2xl leading-relaxed">
                    Dokumentasi foto dan rincian potensi wilayah, sarana publik, lembaga pemerintahan, serta tempat kegiatan usaha masyarakat Desa Suka Baru.
                </p>
            </div>
            <div class="bg-white/10 backdrop-blur-md border border-white/20 px-5 py-3 rounded-2xl flex items-center gap-3">
                <span class="text-3xl">📸</span>
                <div>
                    <div class="text-2xl font-black text-white leading-none"><?php echo e($allPotentials->count()); ?></div>
                    <div class="text-xs text-blue-200 font-medium">Total Potensi & Tempat</div>
                </div>
            </div>
        </div>
    </div>
</div>

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

    
    <?php
        $grouped = $allPotentials->groupBy('kategori');
        $kategoriConfig = [
            'perdagangan'  => ['label' => 'Perdagangan & Jasa',  'icon' => '🏪', 'color' => '#f59e0b', 'bg' => '#fffbeb', 'border' => '#fde68a'],
            'pemerintahan' => ['label' => 'Pemerintahan',        'icon' => '🏛️', 'color' => '#1d4ed8', 'bg' => '#eff6ff', 'border' => '#93c5fd'],
            'peribadatan'  => ['label' => 'Tempat Peribadatan',  'icon' => '🕌', 'color' => '#059669', 'bg' => '#ecfdf5', 'border' => '#6ee7b7'],
            'olahraga'     => ['label' => 'Arena Olahraga',      'icon' => '⚽', 'color' => '#7c3aed', 'bg' => '#f5f3ff', 'border' => '#c4b5fd'],
            'kesehatan'    => ['label' => 'Kesehatan',           'icon' => '🏥', 'color' => '#dc2626', 'bg' => '#fef2f2', 'border' => '#fca5a5'],
            'pendidikan'   => ['label' => 'Pendidikan',          'icon' => '📚', 'color' => '#ea580c', 'bg' => '#fff7ed', 'border' => '#fdba74'],
            'pariwisata'   => ['label' => 'Pariwisata & Alam',   'icon' => '🌿', 'color' => '#0891b2', 'bg' => '#ecfeff', 'border' => '#67e8f9'],
            'perkebunan'   => ['label' => 'Perkebunan',          'icon' => '🌴', 'color' => '#15803d', 'bg' => '#f0fdf4', 'border' => '#86efac'],
        ];
    ?>



    
    <div class="flex items-center justify-between border-b border-gray-200 pb-4 mb-8 gap-4 flex-wrap">
        <div class="flex items-center gap-2 overflow-x-auto pb-1 max-w-full no-scrollbar">
            <a href="<?php echo e(route('potensi')); ?>"
               class="px-4 py-2 rounded-full text-xs font-bold transition-all flex-shrink-0 <?php echo e(!$kategori ? 'bg-blue-900 text-white shadow-sm' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'); ?>">
                🌐 Semua (<?php echo e($allPotentials->count()); ?>)
            </a>
            <?php $__currentLoopData = $kategoriConfig; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $kat => $cfg): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <?php if($grouped->has($kat)): ?>
                <a href="<?php echo e(route('potensi', ['kategori' => $kat])); ?>"
                   class="px-4 py-2 rounded-full text-xs font-bold transition-all flex-shrink-0 <?php echo e($kategori === $kat ? 'text-white shadow-sm' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'); ?>"
                   style="<?php echo e($kategori === $kat ? 'background:' . $cfg['color'] . ';' : ''); ?>">
                    <span><?php echo e($cfg['icon']); ?></span> <?php echo e($cfg['label']); ?> (<?php echo e($grouped->get($kat)->count()); ?>)
                </a>
                <?php endif; ?>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
        <?php if($kategori): ?>
        <a href="<?php echo e(route('potensi')); ?>" class="text-xs font-semibold text-blue-600 hover:text-blue-800 underline">
            Reset Filter ✕
        </a>
        <?php endif; ?>
    </div>

    
    <?php if($potentials->count() > 0): ?>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            <?php $__currentLoopData = $potentials; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $pot): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <?php
                $cfg = $kategoriConfig[$pot->kategori] ?? ['icon' => '📌', 'color' => '#2563eb', 'bg' => '#eff6ff', 'border' => '#93c5fd', 'label' => $pot->kategori_label];
            ?>
            <div class="bg-white border border-gray-100 rounded-3xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 flex flex-col group hover:-translate-y-1">

                
                <a href="<?php echo e(route('potensi.show', $pot->id)); ?>" class="relative aspect-[4/3] bg-slate-100 overflow-hidden block">
                    <?php if($pot->foto_url): ?>
                        <img src="<?php echo e($pot->foto_url); ?>"
                             alt="<?php echo e($pot->nama); ?>"
                             class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                             loading="lazy">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-3">
                            <span class="text-white text-xs font-medium flex items-center gap-1.5 bg-black/40 backdrop-blur-md px-3 py-1.5 rounded-full border border-white/20">
                                📖 Baca Artikel & Detail
                            </span>
                        </div>
                    <?php else: ?>
                        <div class="w-full h-full flex flex-col items-center justify-center p-6 text-center" style="background: <?php echo e($cfg['bg']); ?>;">
                            <div class="text-5xl mb-2 group-hover:scale-110 transition-transform duration-300"><?php echo e($cfg['icon']); ?></div>
                            <div class="text-[10px] font-extrabold uppercase tracking-wider" style="color: <?php echo e($cfg['color']); ?>;">
                                <?php echo e($cfg['label']); ?>

                            </div>
                        </div>
                    <?php endif; ?>

                    
                    <div class="absolute top-3 left-3 bg-white/90 backdrop-blur-md border border-gray-200 text-gray-900 text-[10px] font-extrabold px-3 py-1 rounded-full uppercase tracking-wider shadow-sm flex items-center gap-1">
                        <span><?php echo e($cfg['icon']); ?></span>
                        <span><?php echo e($pot->kategori_label); ?></span>
                    </div>
                </a>

                
                <div class="p-5 flex-1 flex flex-col justify-between gap-3">
                    <div>
                        <a href="<?php echo e(route('potensi.show', $pot->id)); ?>" class="block">
                            <h3 class="text-base font-bold text-gray-900 leading-snug group-hover:text-blue-600 transition-colors">
                                <?php echo e($pot->nama); ?>

                            </h3>
                        </a>
                        <p class="text-xs text-gray-600 leading-relaxed mt-2 line-clamp-3">
                            <?php echo e($pot->deskripsi); ?>

                        </p>
                    </div>

                    <div class="pt-3 border-t border-gray-100 flex items-center justify-between gap-2 mt-auto">
                        <?php if($pot->lokasi): ?>
                        <div class="flex items-center gap-1.5 text-xs text-gray-500">
                            <svg class="w-3.5 h-3.5 text-blue-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a2 2 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                            </svg>
                            <span class="font-medium line-clamp-1"><?php echo e($pot->lokasi); ?></span>
                        </div>
                        <?php endif; ?>
                        <a href="<?php echo e(route('potensi.show', $pot->id)); ?>"
                           class="text-xs font-bold text-blue-600 hover:text-blue-800 flex items-center gap-1 ml-auto flex-shrink-0 bg-blue-50 hover:bg-blue-100 px-3 py-1.5 rounded-full transition-colors">
                            Detail ➔
                        </a>
                    </div>
                </div>
            </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>

        
        <div class="mt-10">
            <?php echo e($potentials->appends(request()->query())->links()); ?>

        </div>

    <?php else: ?>
        <div class="text-center py-16 bg-white border border-gray-100 rounded-3xl p-8">
            <div class="text-6xl mb-3">🔍</div>
            <h3 class="text-lg font-bold text-gray-800">Tidak ada potensi ditemukan</h3>
            <p class="text-xs text-gray-500 mt-1">Belum ada data untuk kategori yang dipilih.</p>
            <a href="<?php echo e(route('potensi')); ?>" class="inline-block mt-4 px-5 py-2 bg-blue-900 text-white text-xs font-bold rounded-full hover:bg-blue-800 transition-colors">
                Tampilkan Semua Potensi
            </a>
        </div>
    <?php endif; ?>

    
    <div class="mt-12 bg-slate-50 border border-slate-200 rounded-3xl p-6 flex flex-col sm:flex-row items-start gap-4">
        <div class="text-3xl p-3 bg-white border border-slate-200 rounded-2xl shadow-sm">🗺️</div>
        <div>
            <h4 class="text-xs font-extrabold uppercase tracking-wider text-slate-800">Sumber Data Potensi Desa</h4>
            <p class="text-xs text-slate-600 mt-1 leading-relaxed">
                Data dan lokasi potensi desa bersumber dari <strong>Peta Potensi Desa Suka Baru Seblat</strong>, Kecamatan Marga Sakti Sebelat, Kabupaten Bengkulu Utara.
                Skala 1:15.000, Koordinat GCS WGS 1984.
                Disusun dan dikembangkan oleh <strong>PPK Ormawa HIMA Sylva PCSI Universitas Bengkulu</strong>.
            </p>
        </div>
    </div>

</div>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH F:\web Desa Suka Baru\website-desa-suka-baru\resources\views/public/potensi.blade.php ENDPATH**/ ?>