@extends('layouts.main')

@section('content')

<!-- HERO -->
<section class="hero">
    <div data-aos="zoom-in">
        <h1>Pelaporan Hama Pertanian</h1>
        <p>Laporkan serangan hama secara cepat dan akurat berbasis sistem AHP & TOPSIS</p>

        <br>

        @if(auth()->check())
            <a href="/lapor/create" class="btn">+ Buat Laporan</a>
        @else
            <a href="/login" class="btn">Login untuk Melapor</a>
        @endif
    </div>
</section>

<!-- ALUR -->
<section class="section">
    <h2 data-aos="fade-up">Cara Kerja Sistem</h2>

    <div class="grid">
        <div class="card"><h3>1. Input Data</h3><p>Petani mengisi laporan</p></div>
        <div class="card"><h3>2. Analisis AHP</h3><p>Bobot kriteria</p></div>
        <div class="card"><h3>3. Ranking TOPSIS</h3><p>Prioritas penanganan</p></div>
        <div class="card"><h3>4. Tindak Lanjut</h3><p>Penyuluh menangani</p></div>
    </div>
</section>

<!-- STATISTIK -->
<section class="section">
    <h2>Statistik Laporan</h2>

    <div class="grid">
        <div class="card"><h3>{{ $total ?? 0 }}</h3><p>Total</p></div>
        <div class="card"><h3>{{ $ringan ?? 0 }}</h3><p>Ringan</p></div>
        <div class="card"><h3>{{ $sedang ?? 0 }}</h3><p>Sedang</p></div>
        <div class="card"><h3>{{ $berat ?? 0 }}</h3><p>Berat</p></div>
    </div>
</section>

<!-- HAMA -->
<section class="section">
    <h2 data-aos="fade-up">Jenis Hama</h2>

    <div class="grid">

        <div class="card" data-aos="fade-up">
            <img src="wereng.png" style="width:100%; border-radius:10px;">
            <h3>🐛 Wereng</h3>
            <p><b>Ciri:</b> Tanaman menguning</p>
            <p><b>Dampak:</b> Gagal panen</p>
        </div>

        <div class="card" data-aos="fade-up" data-aos-delay="200">
            <img src="tikus.png" style="width:100%; border-radius:10px;">
            <h3>🐀 Tikus</h3>
            <p><b>Ciri:</b> Batang terpotong</p>
            <p><b>Dampak:</b> Kerusakan luas</p>
        </div>

        <div class="card" data-aos="fade-up" data-aos-delay="400">
            <img src="walang sangit.png" style="width:100%; border-radius:10px;">
            <h3>🪲 Walang Sangit</h3>
            <p><b>Ciri:</b> Bulir kosong</p>
            <p><b>Dampak:</b> Kualitas turun</p>
        </div>

        <div class="card" data-aos="fade-up" data-aos-delay="600">
            <img src="penggerek batang.png" style="width:100%; border-radius:10px;">
            <h3>🪱 Penggerek Batang</h3>
            <p><b>Ciri:</b> Batang kosong</p>
            <p><b>Dampak:</b> Tanaman mati</p>
        </div>

    </div>
</section>
@endsection
