@extends('layouts.main')

@section('title', 'Informasi Penyakit Daun Padi - Rice Leaf AI')

@section('content')
<div class="max-w-7xl mx-auto px-6 py-12 flex-grow">

    <div class="text-center mb-16 animate-[fadeInUp_0.8s_ease-out_forwards]">
        <span class="bg-green-100 text-green-700 px-4 py-1.5 rounded-full text-sm font-semibold mb-4 inline-block shadow-sm border border-green-200">
            📚 Ensiklopedia Botani
        </span>
        <h1 class="text-4xl md:text-5xl font-extrabold text-gray-800 mb-4">
            Informasi Penyakit Daun Padi
        </h1>
        <p class="text-gray-500 max-w-2xl mx-auto text-lg">
            Kenali lebih dalam berbagai jenis penyakit, penyebab, gejala, serta cara pengendalian yang tepat untuk menjaga kualitas panen Anda.
        </p>
    </div>

    <div class="grid md:grid-cols-2 gap-10">

        <div class="group bg-white rounded-[2rem] shadow-lg hover:shadow-2xl border border-gray-100 overflow-hidden hover:-translate-y-2 transition-all duration-500 flex flex-col">
            <div class="relative overflow-hidden h-64 shrink-0">
                <img src="{{ asset('images/blast.jpg') }}"
                     class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
                <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
                <div class="absolute bottom-6 left-6">
                    <span class="bg-red-500/90 backdrop-blur text-white px-3 py-1 rounded-lg text-xs font-bold uppercase tracking-wider mb-2 inline-block">Fungi</span>
                    <h2 class="text-4xl font-extrabold text-white drop-shadow-md">
                        Blast
                    </h2>
                </div>
            </div>

            <div class="p-8 flex-grow">
                <div class="grid gap-4 h-full">
                    <div class="bg-red-50/50 p-4 rounded-2xl border border-red-100">
                        <h3 class="font-bold text-red-700 flex items-center gap-2 mb-2">
                            <span class="text-xl">🦠</span> Penyebab
                        </h3>
                        <p class="text-gray-700 text-sm">Jamur <i class="font-semibold">Pyricularia oryzae</i></p>
                    </div>

                    <div class="bg-blue-50/50 p-4 rounded-2xl border border-blue-100">
                        <h3 class="font-bold text-blue-700 flex items-center gap-2 mb-2">
                            <span class="text-xl">🔍</span> Gejala
                        </h3>
                        <ul class="list-none text-gray-700 text-sm space-y-1">
                            <li class="flex items-center gap-2"><span class="w-1.5 h-1.5 bg-blue-400 rounded-full"></span> Bercak berbentuk belah ketupat</li>
                            <li class="flex items-center gap-2"><span class="w-1.5 h-1.5 bg-blue-400 rounded-full"></span> Warna abu-abu kecoklatan</li>
                            <li class="flex items-center gap-2"><span class="w-1.5 h-1.5 bg-blue-400 rounded-full"></span> Daun mengering dari ujung</li>
                        </ul>
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div class="bg-yellow-50/50 p-4 rounded-2xl border border-yellow-100">
                            <h3 class="font-bold text-yellow-700 flex items-center gap-2 mb-2 text-sm">
                                <span>⚠️</span> Dampak
                            </h3>
                            <p class="text-gray-700 text-xs leading-relaxed">Menurunkan hasil panen secara signifikan.</p>
                        </div>

                        <div class="bg-green-50/50 p-4 rounded-2xl border border-green-100">
                            <h3 class="font-bold text-green-700 flex items-center gap-2 mb-2 text-sm">
                                <span>💊</span> Pengendalian
                            </h3>
                            <p class="text-gray-700 text-xs leading-relaxed">Gunakan fungisida dan varietas tahan penyakit.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="group bg-white rounded-[2rem] shadow-lg hover:shadow-2xl border border-gray-100 overflow-hidden hover:-translate-y-2 transition-all duration-500 flex flex-col">
            <div class="relative overflow-hidden h-64 shrink-0">
               <img src="{{ asset('images/blight.jpg') }}"
                     class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
                <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
                <div class="absolute bottom-6 left-6">
                    <span class="bg-yellow-500/90 backdrop-blur text-white px-3 py-1 rounded-lg text-xs font-bold uppercase tracking-wider mb-2 inline-block">Bakteri</span>
                    <h2 class="text-4xl font-extrabold text-white drop-shadow-md">
                        Blight
                    </h2>
                </div>
            </div>

            <div class="p-8 flex-grow">
                <div class="grid gap-4 h-full">
                    <div class="bg-red-50/50 p-4 rounded-2xl border border-red-100">
                        <h3 class="font-bold text-red-700 flex items-center gap-2 mb-2">
                            <span class="text-xl">🦠</span> Penyebab
                        </h3>
                        <p class="text-gray-700 text-sm">Bakteri <i class="font-semibold">Xanthomonas oryzae</i></p>
                    </div>

                    <div class="bg-blue-50/50 p-4 rounded-2xl border border-blue-100">
                        <h3 class="font-bold text-blue-700 flex items-center gap-2 mb-2">
                            <span class="text-xl">🔍</span> Gejala
                        </h3>
                        <ul class="list-none text-gray-700 text-sm space-y-1">
                            <li class="flex items-center gap-2"><span class="w-1.5 h-1.5 bg-blue-400 rounded-full"></span> Daun menguning secara masif</li>
                            <li class="flex items-center gap-2"><span class="w-1.5 h-1.5 bg-blue-400 rounded-full"></span> Tepi daun mengering cepat</li>
                            <li class="flex items-center gap-2"><span class="w-1.5 h-1.5 bg-blue-400 rounded-full"></span> Pertumbuhan tanaman terhambat</li>
                        </ul>
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div class="bg-yellow-50/50 p-4 rounded-2xl border border-yellow-100">
                            <h3 class="font-bold text-yellow-700 flex items-center gap-2 mb-2 text-sm">
                                <span>⚠️</span> Dampak
                            </h3>
                            <p class="text-gray-700 text-xs leading-relaxed">Penurunan produktivitas tanaman drastis.</p>
                        </div>

                        <div class="bg-green-50/50 p-4 rounded-2xl border border-green-100">
                            <h3 class="font-bold text-green-700 flex items-center gap-2 mb-2 text-sm">
                                <span>💊</span> Pengendalian
                            </h3>
                            <p class="text-gray-700 text-xs leading-relaxed">Gunakan benih sehat dan sanitasi lahan rutin.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="group bg-white rounded-[2rem] shadow-lg hover:shadow-2xl border border-gray-100 overflow-hidden hover:-translate-y-2 transition-all duration-500 flex flex-col">
            <div class="relative overflow-hidden h-64 shrink-0">
              <img src="{{ asset('images/tungro.jpg') }}"
                     class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
                <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
                <div class="absolute bottom-6 left-6">
                    <span class="bg-orange-500/90 backdrop-blur text-white px-3 py-1 rounded-lg text-xs font-bold uppercase tracking-wider mb-2 inline-block">Virus</span>
                    <h2 class="text-4xl font-extrabold text-white drop-shadow-md">
                        Tungro
                    </h2>
                </div>
            </div>

            <div class="p-8 flex-grow">
                <div class="grid gap-4 h-full">
                    <div class="bg-red-50/50 p-4 rounded-2xl border border-red-100">
                        <h3 class="font-bold text-red-700 flex items-center gap-2 mb-2">
                            <span class="text-xl">🦠</span> Penyebab
                        </h3>
                        <p class="text-gray-700 text-sm">Virus Tungro <span class="text-gray-500">(ditularkan wereng hijau)</span></p>
                    </div>

                    <div class="bg-blue-50/50 p-4 rounded-2xl border border-blue-100">
                        <h3 class="font-bold text-blue-700 flex items-center gap-2 mb-2">
                            <span class="text-xl">🔍</span> Gejala
                        </h3>
                        <ul class="list-none text-gray-700 text-sm space-y-1">
                            <li class="flex items-center gap-2"><span class="w-1.5 h-1.5 bg-blue-400 rounded-full"></span> Daun menguning oranye terang</li>
                            <li class="flex items-center gap-2"><span class="w-1.5 h-1.5 bg-blue-400 rounded-full"></span> Tanaman menjadi kerdil</li>
                            <li class="flex items-center gap-2"><span class="w-1.5 h-1.5 bg-blue-400 rounded-full"></span> Malai tidak berkembang baik</li>
                        </ul>
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div class="bg-yellow-50/50 p-4 rounded-2xl border border-yellow-100">
                            <h3 class="font-bold text-yellow-700 flex items-center gap-2 mb-2 text-sm">
                                <span>⚠️</span> Dampak
                            </h3>
                            <p class="text-gray-700 text-xs leading-relaxed">Gagal panen jika tidak dikendalikan dini.</p>
                        </div>

                        <div class="bg-green-50/50 p-4 rounded-2xl border border-green-100">
                            <h3 class="font-bold text-green-700 flex items-center gap-2 mb-2 text-sm">
                                <span>💊</span> Pengendalian
                            </h3>
                            <p class="text-gray-700 text-xs leading-relaxed">Kendalikan wereng dan pakai varietas tahan.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="group bg-white rounded-[2rem] shadow-lg hover:shadow-2xl border border-green-200 overflow-hidden hover:-translate-y-2 transition-all duration-500 flex flex-col relative">
            <div class="absolute top-6 right-6 z-10 bg-white/90 backdrop-blur px-4 py-2 rounded-full text-green-600 font-bold shadow-md flex items-center gap-2">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                Kondisi Optimal
            </div>

            <div class="relative overflow-hidden h-64 shrink-0">
                <img src="{{ asset('images/healthy.jpg') }}"
                     class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
                <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
                <div class="absolute bottom-6 left-6">
                    <span class="bg-green-500/90 backdrop-blur text-white px-3 py-1 rounded-lg text-xs font-bold uppercase tracking-wider mb-2 inline-block">Normal</span>
                    <h2 class="text-4xl font-extrabold text-white drop-shadow-md">
                        Healthy
                    </h2>
                </div>
            </div>

            <div class="p-8 flex-grow flex flex-col justify-center">
                <div class="bg-green-50/50 p-6 rounded-3xl border border-green-100 mb-6">
                    <h3 class="font-bold text-gray-800 text-lg mb-3 flex items-center gap-2">
                        <span>🌿</span> Deskripsi Fisik
                    </h3>
                    <p class="text-gray-600 leading-relaxed">
                        Tanaman padi yang sehat memiliki daun hijau segar merata, warna yang cerah, tanpa adanya bercak, dan terbebas dari gejala penyakit atau serangan hama. Tekstur daun normal dan pertumbuhan optimal.
                    </p>
                </div>

                <div class="bg-blue-50/50 p-6 rounded-3xl border border-blue-100">
                    <h3 class="font-bold text-blue-800 text-lg mb-3 flex items-center gap-2">
                        <span>💡</span> Rekomendasi Perawatan
                    </h3>
                    <p class="text-gray-600 leading-relaxed">
                        Untuk mempertahankan kondisi ini, pastikan menjaga pemupukan yang seimbang, manajemen irigasi air yang cukup, serta melakukan pengecekan dan pengendalian hama secara rutin.
                    </p>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection