@extends('layoutuser.app')
@section('content')

<!-- Latar belakang biru gradasi penuh -->
<div style="background: linear-gradient(to bottom, #e3f2fd, #bbdefb); min-height: 100vh; padding-top: 5rem; padding-bottom: 5rem;">
    <div class="container">
        <div class="text-center mb-5">
            <p class="d-inline-block border rounded-pill bg-primary text-light py-1 px-4">Fitur Unggulan</p>
            <h1 class="text-dark mb-4">Kenali Fitur-fitur Utama Kami</h1>
            <p class="text-dark mb-4 pb-2">
                Sistem ini dirancang khusus untuk membantu penderita penyakit jantung memilih menu makanan terbaik dengan pendekatan ilmiah dan teknologi yang mudah digunakan.
            </p>

        </div>

        <!-- Daftar Fitur Horizontal -->
        <div class="row row-cols-2 row-cols-md-3 row-cols-lg-5 g-4 text-center mb-5">
            @php
                $features = [
                    ['id' => 'feature1', 'icon' => 'fas fa-heartbeat', 'label' => 'Rekomendasi Sehat'],
                    ['id' => 'feature2', 'icon' => 'fas fa-brain', 'label' => 'Pendekatan Ilmiah'],
                    ['id' => 'feature3', 'icon' => 'fas fa-desktop', 'label' => 'Tampilan Responsif'],
                    ['id' => 'feature4', 'icon' => 'fas fa-database', 'label' => 'Keamanan Data'],
                    ['id' => 'feature5', 'icon' => 'fas fa-hands-helping', 'label' => 'Dukungan Penuh'],
                ];
            @endphp

            @foreach ($features as $feature)
                <div class="col">
                    <div class="p-3 rounded shadow-sm bg-white hover-shadow transition" data-bs-toggle="collapse" href="#{{ $feature['id'] }}" style="cursor: pointer;">
                        <i class="{{ $feature['icon'] }} text-primary fs-4 mb-2"></i>
                        <h6 class="text-dark mb-0">{{ $feature['label'] }}</h6>
                    </div>
                </div>
            @endforeach
        </div>

        <!-- Penjelasan Fitur -->
        <div class="row justify-content-center">
            <div class="col-lg-10">
        
                <!-- Fitur 1 -->
                <div class="collapse" id="feature1">
                    <div class="p-4 rounded shadow-sm mb-3" style="background-color: #e3f2fd;">
                        <button type="button" class="btn-close position-absolute top-0 end-0 m-3" data-bs-toggle="collapse" data-bs-target="#feature1" aria-label="Close"></button>
                        <p class="text-dark mb-0">
                            Sistem ini memberikan <strong>rekomendasi makanan khusus untuk penderita penyakit jantung</strong> berdasarkan nutrisi seperti <strong>lemak, natrium, energi, dan karbohidrat</strong>. 
                            Data makanan bersumber dari <a href="https://www.panganku.org/id-ID/beranda" target="_blank"><strong>Panganku.org</strong></a>, sehingga akurat dan terpercaya.  
                        </p>
                    </div>
                </div>
        
                <!-- Fitur 2 -->
                <div class="collapse" id="feature2">
                    <div class="p-4 rounded shadow-sm mb-3" style="background-color: #bbdefb;">
                        <button type="button" class="btn-close position-absolute top-0 end-0 m-3" data-bs-toggle="collapse" data-bs-target="#feature2" aria-label="Close"></button>
                        <p class="text-dark mb-2">
                            Metode <strong>AHP (Analytical Hierarchy Process)</strong> digunakan untuk menilai dan membandingkan makanan berdasarkan berbagai kriteria gizi.
                        </p>
                        <p class="text-dark mb-2">
                            AHP memecah masalah menjadi hierarki dan memungkinkan perbandingan berpasangan secara sistematis. Ini menghasilkan bobot dan peringkat akhir yang objektif.
                        </p>
                        <ul class="text-dark mb-2">
                            <li>Memperhatikan konsistensi penilaian pengguna.</li>
                            <li>Cocok untuk keputusan berbasis preferensi manusia.</li>
                            <li>Dapat menangani data kuantitatif dan kualitatif.</li>
                        </ul>
                        <p class="text-dark">
                            🔗 Referensi lebih lanjut:
                            <ul class="text-dark">
                                <li><a href="https://www.1000minds.com/decision-making/analytic-hierarchy-process-ahp" target="_blank">1000Minds: Penjelasan AHP</a></li>
                                <li><a href="https://informatika.ciputra.ac.id/2023/03/analytical-hierarchy-process-ahp/" target="_blank">Universitas Ciputra: AHP dalam SPK</a></li>
                            </ul>
                        </p>
                        <p class="text-dark mb-0">
                            Anda tidak perlu memahami rumusnya — sistem kami melakukan perhitungannya secara otomatis untuk membantu keputusan yang tepat dan sehat.
                        </p>
                    </div>
                </div>
        
                <!-- Fitur 3 -->
                <div class="collapse" id="feature3">
                    <div class="p-4 rounded shadow-sm mb-3" style="background-color: #c8e6c9;">
                        <button type="button" class="btn-close position-absolute top-0 end-0 m-3" data-bs-toggle="collapse" data-bs-target="#feature3" aria-label="Close"></button>
                        <p class="text-dark mb-0">
                            Tampilan antarmuka dirancang sederhana dan responsif. Siapa pun dapat menggunakannya dengan mudah, termasuk pasien, keluarga, dan tenaga medis.
                        </p>
                    </div>
                </div>
        
                <!-- Fitur 4 -->
                <div class="collapse" id="feature4">
                    <div class="p-4 rounded shadow-sm mb-3" style="background-color: #fff9c4;">
                        <button type="button" class="btn-close position-absolute top-0 end-0 m-3" data-bs-toggle="collapse" data-bs-target="#feature4" aria-label="Close"></button>
                        <p class="text-dark mb-0">
                            Data hasil rekomendasi disimpan otomatis, sehingga bisa diakses kembali dan digunakan dalam diskusi dengan ahli gizi untuk evaluasi lanjutan.
                        </p>
                    </div>
                </div>
        
                <!-- Fitur 5 -->
                <div class="collapse" id="feature5">
                    <div class="p-4 rounded shadow-sm mb-3" style="background-color: #e1bee7;">
                        <button type="button" class="btn-close position-absolute top-0 end-0 m-3" data-bs-toggle="collapse" data-bs-target="#feature5" aria-label="Close"></button>
                        <p class="text-dark mb-0">
                            Fitur ini dikembangkan untuk mendampingi Anda menjalani gaya hidup lebih sehat. Kami percaya bahwa informasi yang baik menghasilkan keputusan yang baik pula.
                        </p>
                    </div>
                </div>
        
            </div>
        </div>        
    </div>
</div>

<!-- Animasi Hover CSS -->
<style>
    .hover-shadow:hover {
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
        transform: translateY(-5px);
        transition: all 0.3s ease;
    }

    .transition {
        transition: all 0.3s ease;
    }

    body {
        background: linear-gradient(to bottom, #e3f2fd, #bbdefb) !important;
    }
</style>

@endsection