@extends('layouts.publik')

@section('content')
<div class="container py-5">
    
    <!-- HEADER -->
    <div class="text-center mb-5">
        <h3 class="fw-bold text-dark display-6 mb-2">POTENSI DESA</h3>
        <p class="text-muted">Keunggulan di bidang Pertanian, UMKM, dan Pariwisata</p>
    </div>

    <!-- DAFTAR POTENSI DESA -->
    <div class="row row-cols-1 row-cols-md-3 g-4">
        @forelse($potensi as $item)
            <div class="col">
                <div class="card border-0 shadow-sm rounded-4 h-100 bg-white overflow-hidden p-3 d-flex flex-column">
                    <!-- Bagian Gambar / Icon -->
                    <div class="rounded-3 overflow-hidden mb-3 bg-light text-center d-flex align-items-center justify-content-center" style="height: 180px;">
                        @if($item->gambar)
                            <img src="{{ $item->gambar_url }}" alt="{{ $item->nama_potensi }}" class="w-100 h-100" style="object-fit: cover;">
                        @else
                            <div class="text-success opacity-50">
                                <i class="fa-solid fa-wheat-awn fa-3x"></i>
                            </div>
                        @endif
                    </div>
                    <!-- Bagian Teks Card -->
                    <div class="card-body p-0 d-flex flex-column flex-grow-1">
                        <span class="badge bg-success bg-opacity-10 text-success fw-semibold mb-2 align-self-start">{{ $item->kategori }}</span>
                        <h5 class="fw-bold text-dark mb-2">{{ $item->nama_potensi }}</h5>
                        <p class="text-secondary small mb-0 flex-grow-1">{{ $item->deskripsi }}</p>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-12 text-center py-5">
                <i class="fa-solid fa-seedling text-muted fa-3x mb-3 opacity-50"></i>
                <p class="text-muted">Belum ada data potensi desa yang ditambahkan.</p>
            </div>
        @endforelse
    </div>

</div>
@endsection