@extends('layouts.app')

@section('content')
<div class="container py-5">
    <div class="mb-5 text-center">
        <h1 class="fw-bold text-success text-uppercase">Potensi Desa</h1>
        <p class="text-secondary fs-5">Mengenal komoditas unggulan, sektor pariwisata, dan penggerak ekonomi di Desa Kadumbul</p>
        <div class="mx-auto bg-success" style="width: 80px; height: 4px; border-radius: 2px;"></div>
    </div>

    <div class="row g-4">
        
        <div class="col-md-4">
            <div class="card border-0 shadow-sm rounded-4 h-100 overflow-hidden custom-card-hover">
                <div style="height: 220px; overflow: hidden; position: relative;">
                    <img src="{{ asset('images/k_tani.jpeg') }}" class="w-100 h-100" style="object-fit: cover; object-position: center;" alt="BUMDES Kadumbul">
                    <span class="position-absolute top-0 start-0 bg-success text-white px-3 py-1 small rounded-bottom-end fw-bold shadow-sm">
                        BUMDES
                    </span>
                </div>
                <div class="card-body p-4 d-flex flex-column">
                    <span class="text-success small fw-semibold mb-2">Pengembangan Bersama TNI</span>
                    <h5 class="fw-bold text-dark mb-2">Lahan Pertanian Batalion</h5>
                    <p class="text-secondary small flex-grow-1 mb-0">
                        Optimalisasi sektor hulu pertanian melalui pengelolaan pupuk Bokasi dan peninjauan berkala area tanaman pangan untuk meningkatkan ketahanan ekonomi masyarakat desa.
                    </p>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card border-0 shadow-sm rounded-4 h-100 overflow-hidden custom-card-hover">
                <div style="height: 220px; overflow: hidden; position: relative;">
                    <img src="{{ asset('images/sawah.jpeg') }}" class="w-100 h-100" style="object-fit: cover; object-position: center;" alt="Pariwisata Desa">
                    <span class="position-absolute top-0 start-0 bg-primary text-white px-3 py-1 small rounded-bottom-end fw-bold shadow-sm">
                        Pariwisata
                    </span>
                </div>
                <div class="card-body p-4 d-flex flex-column">
                    <span class="text-primary small fw-semibold mb-2">Wisata Alam & Agrowisata</span>
                    <h5 class="fw-bold text-dark mb-2">Pesona Sawah Dusun Karawatu</h5>
                    <p class="text-secondary small flex-grow-1 mb-0">
                        Keindahan bentangan hijau persawahan dengan sistem pengairan tradisional yang menawarkan potensi agrowisata alam yang asri bagi para pengunjung luar daerah.
                    </p>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card border-0 shadow-sm rounded-4 h-100 overflow-hidden custom-card-hover">
                <div style="height: 220px; overflow: hidden; position: relative;">
                    <img src="{{ asset('images/bg_desa.jpeg') }}" class="w-100 h-100" style="object-fit: cover; object-position: center;" alt="UMKM Desa">
                    <span class="position-absolute top-0 start-0 bg-warning text-dark px-3 py-1 small rounded-bottom-end fw-bold shadow-sm">
                        UMKM Lokal
                    </span>
                </div>
                <div class="card-body p-4 d-flex flex-column">
                    <span class="text-warning text-dark small fw-semibold mb-2">Kerajinan & Kuliner</span>
                    <h5 class="fw-bold text-dark mb-2">Produk Unggulan Kadumbul</h5>
                    <p class="text-secondary small flex-grow-1 mb-0">
                        Wadah kreativitas warga dalam memproduksi kain tenun khas Sumba Timur serta berbagai olahan pangan mandiri demi mendongkrak pendapatan lokal.
                    </p>
                </div>
            </div>
        </div>

    </div>
</div>

<style>
    .custom-card-hover {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .custom-card-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 24px rgba(0,0,0,0.12) !important;
    }
</style>
@endsection