@extends('layouts.user')

@section('title', 'Panduan Penggunaan')

@section('content')

<div class="max-w-6xl mx-auto space-y-8">

    <!-- HEADER -->
    <div>
        <h1 class="text-3xl font-bold text-gray-800">
            Panduan Penggunaan Sistem
        </h1>

        <p class="text-gray-500 mt-2 leading-7">
            Halaman ini berisi tata cara penggunaan aplikasi
            rekomendasi makanan sehat untuk penderita gastritis
            menggunakan metode Simple Additive Weighting (SAW).
        </p>
    </div>

    <!-- STEP -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

        <!-- STEP 1 -->
        <div class="bg-white rounded-3xl border border-gray-100 p-6 shadow-sm">

            <div class="flex items-center gap-4 mb-4">

                <div class="w-14 h-14 rounded-2xl bg-green-100 flex items-center justify-center text-green-700 text-2xl">
                    <i class="ri-login-circle-line"></i>
                </div>

                <div>
                    <h2 class="text-xl font-bold text-gray-800">
                        1. Login Sistem
                    </h2>

                    <p class="text-sm text-gray-500">
                        Masuk menggunakan username dan password.
                    </p>
                </div>

            </div>

            <p class="text-gray-600 leading-7">
                Pengguna melakukan login untuk mengakses seluruh fitur sistem.
            </p>

        </div>

        <!-- STEP 2 -->
        <div class="bg-white rounded-3xl border border-gray-100 p-6 shadow-sm">

            <div class="flex items-center gap-4 mb-4">

                <div class="w-14 h-14 rounded-2xl bg-emerald-100 flex items-center justify-center text-emerald-700 text-2xl">
                    <i class="ri-team-line"></i>
                </div>

                <div>
                    <h2 class="text-xl font-bold text-gray-800">
                        2. Input Data Diri
                    </h2>

                    <p class="text-sm text-gray-500">
                        Tambahkan data diri anda.
                    </p>
                </div>

            </div>

            <p class="text-gray-600 leading-7">
                Input data diri meliputi umur, berat badan,
                tinggi badan, gejala, dan aktivitas harian pasien.
            </p>

        </div>

        <!-- STEP 3 -->
        <div class="bg-white rounded-3xl border border-gray-100 p-6 shadow-sm">

            <div class="flex items-center gap-4 mb-4">

                <div class="w-14 h-14 rounded-2xl bg-cyan-100 flex items-center justify-center text-cyan-700 text-2xl">
                    <i class="ri-calculator-line"></i>
                </div>

                <div>
                    <h2 class="text-xl font-bold text-gray-800">
                        3. Proses SAW
                    </h2>

                    <p class="text-sm text-gray-500">
                        Melakukan perhitungan rekomendasi.
                    </p>
                </div>

            </div>

            <p class="text-gray-600 leading-7">
                Sistem akan menghitung nilai SAW berdasarkan
                kondisi pasien dan data makanan yang tersedia.
            </p>

        </div>

        <!-- STEP 4 -->
        <div class="bg-white rounded-3xl border border-gray-100 p-6 shadow-sm">

            <div class="flex items-center gap-4 mb-4">

                <div class="w-14 h-14 rounded-2xl bg-cyan-100 flex items-center justify-center text-cyan-700 text-2xl">
                    <i class="ri-calculator-line"></i>
                </div>

                <div>
                    <h2 class="text-xl font-bold text-gray-800">
                        4. Lihat Hasil Rekomendasi dan Laporan
                    </h2>

                    <p class="text-sm text-gray-500">
                        Menampilkan hasil ranking makanan.
                    </p>
                </div>

            </div>

            <p class="text-gray-600 leading-7">
                Sistem menampilkan rekomendasi makanan terbaik,
                ranking makanan, nilai SAW, kebutuhan kalori,
                dan detail nutrisi makanan.
            </p>

        </div>

    </div>   

</div>

@endsection