@extends('layouts.app')

@section('title', 'WebGIS Produksi Padi - Tentang')

@section('content')

    <!-- Konten Utama -->
    <main class="flex-grow max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 md:py-10 w-full">
        
        <!-- Judul Halaman -->
        <div class="mb-8 md:mb-10 text-center md:text-left border-b border-gray-200 pb-5 md:pb-6">
            <h2 class="font-display text-2xl md:text-3xl font-bold text-gray-900 inline-block relative">
                TENTANG
                <span class="absolute bottom-0 left-0 w-1/2 h-1 bg-padi-500 rounded-full -mb-2.5 md:-mb-3 md:left-0 md:transform-none left-1/2 -translate-x-1/2"></span>
            </h2>
        </div>

        <!-- Grid Layout (1 Kolom di Mobile, 3 Kolom di Desktop) -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-12">
            
            <!-- KOLOM KIRI (Konten Utama - Lebar 2/3 di Desktop) -->
            <div class="lg:col-span-2 space-y-10">
                
                <!-- Deskripsi -->
                <div class="prose max-w-none">
                    <p class="text-gray-600 text-lg leading-relaxed text-justify md:text-left">
                        <strong class="text-agri-700">WebGIS Produksi Padi Kecamatan Burau</strong> merupakan sistem informasi geografis berbasis web yang menyajikan informasi sebaran dan data produksi padi di setiap desa yang berada di Kecamatan Burau, Kabupaten Luwu Timur.
                    </p>
                </div>

                <!-- Tujuan -->
                <div class="bg-white p-6 md:p-8 rounded-2xl shadow-sm border border-gray-100">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 rounded-full bg-agri-100 text-agri-600 flex items-center justify-center mr-4">
                            <i class="fa-solid fa-bullseye text-xl"></i>
                        </div>
                        <h3 class="font-display text-xl font-semibold text-gray-900">TUJUAN</h3>
                    </div>
                    <p class="text-gray-600 mb-4">Sistem ini dibuat dengan tujuan untuk:</p>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa-solid fa-check text-agri-500 mt-1 mr-3"></i>
                            <span class="text-gray-600">Menyediakan informasi produksi padi secara spasial dan terstruktur.</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa-solid fa-check text-agri-500 mt-1 mr-3"></i>
                            <span class="text-gray-600">Memudahkan visualisasi data produksi padi berdasarkan wilayah desa.</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa-solid fa-check text-agri-500 mt-1 mr-3"></i>
                            <span class="text-gray-600">Mendukung pengambilan keputusan dalam perencanaan dan pengelolaan pertanian.</span>
                        </li>
                    </ul>
                </div>

                <!-- Sumber Data -->
                <div class="bg-white p-6 md:p-8 rounded-2xl shadow-sm border border-gray-100">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center mr-4">
                            <i class="fa-solid fa-database text-xl"></i>
                        </div>
                        <h3 class="font-display text-xl font-semibold text-gray-900">SUMBER DATA</h3>
                    </div>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa-solid fa-caret-right text-gray-400 mt-1 mr-3"></i>
                            <span class="text-gray-700"><strong>Data Produksi Padi:</strong> Dinas Pertanian Kabupaten Luwu Timur</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa-solid fa-caret-right text-gray-400 mt-1 mr-3"></i>
                            <span class="text-gray-700"><strong>Data Wilayah:</strong> Batas administrasi desa Kecamatan Burau</span>
                        </li>
                    </ul>
                </div>

                <!-- Teknologi -->
                <div class="bg-white p-6 md:p-8 rounded-2xl shadow-sm border border-gray-100">
                    <div class="flex items-center mb-6">
                        <div class="w-10 h-10 rounded-full bg-purple-50 text-purple-600 flex items-center justify-center mr-4">
                            <i class="fa-solid fa-laptop-code text-xl"></i>
                        </div>
                        <h3 class="font-display text-xl font-semibold text-gray-900">TEKNOLOGI YANG DIGUNAKAN</h3>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <!-- Tech Item -->
                        <div class="flex items-start p-3 bg-gray-50 rounded-lg">
                            <div class="min-w-[120px] font-semibold text-gray-800">QGIS</div>
                            <div class="text-gray-600 text-sm">: Pengolahan dan pengeditan data peta</div>
                        </div>
                        <!-- Tech Item -->
                        <div class="flex items-start p-3 bg-gray-50 rounded-lg">
                            <div class="min-w-[120px] font-semibold text-gray-800">Leaflet</div>
                            <div class="text-gray-600 text-sm">: Library JavaScript untuk menampilkan peta web</div>
                        </div>
                        <!-- Tech Item -->
                        <div class="flex items-start p-3 bg-gray-50 rounded-lg">
                            <div class="min-w-[120px] font-semibold text-gray-800">ArcGIS Online</div>
                            <div class="text-gray-600 text-sm">: Alternatif WebGIS berbasis cloud</div>
                        </div>
                        <!-- Tech Item -->
                        <div class="flex items-start p-3 bg-gray-50 rounded-lg">
                            <div class="min-w-[120px] font-semibold text-gray-800">Microsoft Excel</div>
                            <div class="text-gray-600 text-sm">: Pengolahan data produksi padi</div>
                        </div>
                    </div>
                </div>

            </div>

            <!-- KOLOM KANAN (Sidebar Cards - Lebar 1/3 di Desktop) -->
            <div class="lg:col-span-1 space-y-6">
                
                <!-- Card Informasi Sistem -->
                <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 relative overflow-hidden">
                    <!-- Dekorasi Hiasan -->
                    <div class="absolute top-0 right-0 w-16 h-16 bg-agri-50 rounded-bl-full -mr-2 -mt-2"></div>
                    
                    <h3 class="font-display font-semibold text-lg text-gray-900 mb-5 border-b border-gray-100 pb-3">INFORMASI SISTEM</h3>
                    
                    <div class="space-y-5">
                        <div class="flex items-start">
                            <i class="fa-regular fa-calendar text-gray-400 mt-1 w-6 text-center"></i>
                            <div class="ml-3">
                                <p class="text-xs text-gray-500 font-medium">Tahun Pembuatan</p>
                                <p class="text-sm font-semibold text-gray-800">2024</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <i class="fa-regular fa-user text-gray-400 mt-1 w-6 text-center"></i>
                            <div class="ml-3">
                                <p class="text-xs text-gray-500 font-medium">Pengembang</p>
                                <p class="text-sm font-semibold text-gray-800">Peneliti</p>
                            </div>
                        </div>

                        <div class="flex items-start">
                            <i class="fa-solid fa-location-dot text-gray-400 mt-1 w-6 text-center"></i>
                            <div class="ml-3">
                                <p class="text-xs text-gray-500 font-medium">Lokasi</p>
                                <p class="text-sm font-semibold text-gray-800">Kecamatan Burau,<br>Kabupaten Luwu Timur</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Card Keterangan (Disclaimer) -->
                <div class="bg-amber-50 p-6 rounded-2xl shadow-sm border border-amber-100">
                    <h3 class="font-display font-semibold text-lg text-amber-900 mb-3 flex items-center">
                        <i class="fa-solid fa-circle-exclamation mr-2 text-amber-500"></i> KETERANGAN
                    </h3>
                    <p class="text-sm text-amber-800 leading-relaxed text-justify">
                        Data yang ditampilkan pada sistem ini bersifat informatif dan dapat digunakan sebagai referensi dalam analisis dan perencanaan sektor pertanian.
                    </p>
                </div>

            </div>

        </div>
    </main>

 

    <!-- Script untuk Toggle Menu Mobile dengan Animasi Halus -->
    <script>
        function toggleMobileMenu() {
            const menu = document.getElementById('mobile-menu');
            const icon = document.getElementById('mobile-menu-icon');
            
            if (menu.classList.contains('hidden')) {
                // Proses membuka menu
                menu.classList.remove('hidden');
                // Beri sedikit jeda agar display block aktif sebelum animasi dimulai
                setTimeout(() => {
                    menu.classList.remove('opacity-0', '-translate-y-2');
                    menu.classList.add('opacity-100', 'translate-y-0');
                }, 10);
                
                // Ubah icon hamburger menjadi 'X'
                icon.classList.remove('fa-bars');
                icon.classList.add('fa-xmark');
            } else {
                // Proses menutup menu
                menu.classList.remove('opacity-100', 'translate-y-0');
                menu.classList.add('opacity-0', '-translate-y-2');
                
                // Tunggu animasi selesai baru sembunyikan elemennya
                setTimeout(() => {
                    menu.classList.add('hidden');
                }, 300); // 300ms sesuai dengan duration-300 di class Tailwind
                
                // Ubah kembali icon menjadi hamburger
                icon.classList.remove('fa-xmark');
                icon.classList.add('fa-bars');
            }
        }
    </script>
@endsection