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

{{-- <div id="spinner" class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
    <div class="spinner-grow text-primary" style="width: 3rem; height: 3rem;" role="status">
        <span class="sr-only">Loading...</span>
    </div>
</div> --}}

<div class="container-fluid header bg-primary p-0 mb-5">
    <div class="row g-0 align-items-center flex-column-reverse flex-lg-row">
        <div class="col-lg-6 p-5 wow fadeIn" data-wow-delay="0.1s">
            <h1 class="display-4 text-white mb-5">HeartChoice</h1>
            <div class="row g-4">
                <div class="col-sm-4">
                    <div class="border-start border-light ps-4">
                        <h2 class="text-white mb-1" data-toggle="counter-up">{{ $totalData }}</h2>
                        <p class="text-light mb-0">Data Yang Diperoleh</p>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="border-start border-light ps-4">
                        <h2 class="text-white mb-1" data-toggle="counter-up">{{ $totalKriteria }}</h2>
                        <p class="text-light mb-0">Kriteria</p>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="border-start border-light ps-4">
                        <h2 class="text-white mb-1" data-toggle="counter-up">{{ $totalUser }}</h2>
                        <p class="text-light mb-0">Total User</p>
                    </div>
                </div>
            </div>            
        </div>
        <div class="col-lg-6 wow fadeIn" data-wow-delay="0.5s">
            <div class="owl-carousel header-carousel">
                <div class="owl-carousel-item position-relative">
                    <img class="img-fluid" src="{{ asset('assetss/img/carousel-1.jpg')}}" alt="">
                    <div class="owl-carousel-text">
                        <h1 class="display-1 text-white mb-0">Cardiology</h1>
                    </div>
                </div>
                <div class="owl-carousel-item position-relative">
                    <img class="img-fluid" src="{{ asset('assetss/img/carousel-2.jpg')}}" alt="">
                    <div class="owl-carousel-text">
                        <h1 class="display-1 text-white mb-0">Neurology</h1>
                    </div>
                </div>
                <div class="owl-carousel-item position-relative">
                    <img class="img-fluid" src="{{ asset('assetss/img/carousel-3.jpg')}}" alt="">
                    <div class="owl-carousel-text">
                        <h1 class="display-1 text-white mb-0">Pulmonary</h1>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container-xxl py-5">
    <div class="container">
        <div class="row g-5">
            <div class="col-lg-6 wow fadeIn" data-wow-delay="0.1s">
                <div class="d-flex flex-column">
                    <img class="img-fluid rounded w-75 align-self-end" src="{{ asset('assetss/img/about-1.jpg')}}" alt="">
                    <img class="img-fluid rounded w-50 bg-white pt-3 pe-3" src="{{ asset('assetss/img/about-2.jpg')}}" alt="" style="margin-top: -25%;">
                </div>
            </div>
            <div class="col-lg-6 wow fadeIn" data-wow-delay="0.5s">
                <p class="d-inline-block border rounded-pill py-1 px-4">About Us</p>
                <h1 class="mb-4">Mengapa Anda Harus Mempercayai Sistem Kami</h1>
                <p>HeartChoice ini merupakan sebuah Sistem Pendukung Keputusan untuk membantu penderita penyakit jantung dalam memilih menu makanan yang sesuai dengan kriteria kesehatan mereka. Dengan menggunakan metode AHP (Analytic Hierarchy Process), kami memberikan rekomendasi yang tepat berdasarkan berbagai kriteria gizi yang penting.</p>
                <p class="mb-4">Aplikasi ini menggunakan pendekatan berbasis web yang mudah diakses oleh siapa saja, memberikan pemahaman yang jelas mengenai perbandingan kriteria seperti lemak, natrium, energi, dan karbohidrat dalam menu makanan. Dengan sistem ini, penderita penyakit jantung dapat membuat keputusan yang lebih sehat dan aman dalam memilih makanan mereka.</p>
                <p><i class="far fa-check-circle text-primary me-3"></i>Mempermudah Pemilihan Makanan yang Sehat</p>
                <p><i class="far fa-check-circle text-primary me-3"></i>Memanfaatkan Metode AHP untuk Keputusan yang Lebih Tepat</p>
                <p><i class="far fa-check-circle text-primary me-3"></i>Aplikasi yang Mudah Digunakan dan Aksesible</p>
                <a class="btn btn-primary rounded-pill py-3 px-5 mt-3" href="{{ route('userabout') }}">Lihat Selengkapnya</a>

            </div>
        </div>
    </div>
</div>
<!-- About End -->


<!-- fEATURES Start -->
<!-- Latar belakang biru lembut -->
<div class="container-xxl py-5" style="background: linear-gradient(to bottom, #e3f2fd, #bbdefb);">
    <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">
                <!-- Tombol "Read More" tanpa garis -->
                <a href="{{ url('/userfeatures/' . $feature['id']) }}" class="text-decoration-none">
                    <div class="p-3 rounded shadow-sm bg-white hover-shadow transition" style="cursor: pointer; border: none;">
                        <i class="{{ $feature['icon'] }} text-primary fs-4 mb-2"></i>
                        <h6 class="text-dark mb-0">{{ $feature['label'] }}</h6>
                        <p class="text-primary mb-0" style="font-size: 0.8rem;">Lihat Selengkapnya ></p>
                    </div>
                </a>                
            </div>
            @endforeach
        </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;
    }
</style>

<!-- fEATURES End -->


<div class="container-xxl py-5">
    <div class="container">
        <div class="row g-5">
            <div class="col-lg-6 wow fadeIn" data-wow-delay="0.1s">
                <div class="d-flex flex-column">
                    <img class="img-fluid rounded w-75 align-self-end" src="{{ asset('assetss/img/about-1.jpg')}}" alt="">
                    <img class="img-fluid rounded w-50 bg-white pt-3 pe-3" src="{{ asset('assetss/img/about-2.jpg')}}" alt="" style="margin-top: -25%;">
                </div>
            </div>
            <div class="col-lg-6 wow fadeIn" data-wow-delay="0.5s">
                <p class="d-inline-block border rounded-pill py-1 px-4">Menu Makanan</p>
                <p class="mb-4">Eksplorasi pilihan menu makanan yang sehat dan bergizi, lengkap dengan informasi tentang kandungan gizi yang dapat membantu Anda membuat pilihan terbaik untuk diet dan kesehatan.</p>
                <a class="btn btn-primary rounded-pill py-3 px-5 mt-3" href="{{ route('userdata') }}">Lihat Selengkapnya</a>
            </div>
        </div>
    </div>
</div>

@endsection