<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beranda | Sistem Monitoring CP — RSUD Waras Wiris</title>
    <link rel="icon" type="image/png" href="{{ asset('asset/logo/favicon.png') }}">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: { extend: { fontFamily: { sans: ['Inter','sans-serif'] } } }
        }
    </script>
    <style>
        body { font-family:'Inter',sans-serif; }
        .hero-bg { background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 60%, #0d4f6f 100%); }
        .glass { background:rgba(255,255,255,0.07); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.12); }
        .card-hover { transition: transform .25s, box-shadow .25s; }
        .card-hover:hover { transform:translateY(-4px); box-shadow:0 20px 40px rgba(0,0,0,.12); }
        @keyframes fadeUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
        .fade-up { animation: fadeUp .7s ease forwards; }
        .blob { position:absolute; border-radius:50%; filter:blur(80px); opacity:.15; }
        @keyframes pulse-slow { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
        .blob { animation: pulse-slow 8s ease-in-out infinite; }
    </style>
</head>
<body>

{{-- NAVBAR --}}
<nav class="hero-bg sticky top-0 z-50 border-b border-white/10">
    <div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
        <div class="flex items-center gap-3 text-white">
            <div class="w-10 h-10 bg-white rounded-xl flex items-center justify-center shadow">
                <img src="{{ asset('asset/logo/rs-waras-wiris.png') }}" class="w-7 h-7 object-contain" alt="Logo">
            </div>
            <div>
                <div class="font-bold text-sm leading-tight">RSUD Waras Wiris</div>
                <div class="text-white/60 text-xs">Sistem Monitoring CP</div>
            </div>
        </div>
        <a href="{{ route('login') }}"
           class="px-5 py-2 bg-teal-500 hover:bg-teal-400 text-white text-sm font-semibold rounded-xl shadow transition-all hover:scale-105"
           style="background:#14b8a6">
            Login Sistem
        </a>
    </div>
</nav>

{{-- HERO --}}
<section class="hero-bg min-h-screen flex items-center relative overflow-hidden">
    <div class="blob w-[500px] h-[500px]" style="background:#3b82f6;top:-100px;left:-150px;animation-delay:0s"></div>
    <div class="blob w-[400px] h-[400px]" style="background:#14b8a6;bottom:-80px;right:-100px;animation-delay:3s"></div>
    <div class="blob w-[300px] h-[300px]" style="background:#6366f1;top:40%;right:10%;animation-delay:6s"></div>

    <div class="relative w-full max-w-7xl mx-auto px-6 py-24">
        <div class="grid lg:grid-cols-2 gap-16 items-center">

            {{-- LEFT --}}
            <div class="fade-up text-white" style="animation-delay:0s">

                <div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-sm font-medium mb-6"
                     style="background:rgba(20,184,166,.2);color:#5eead4">
                    Sistem Internal Rumah Sakit Umum Daerah
                </div>

                <h1 class="text-5xl lg:text-6xl font-black leading-tight mb-6">
                    Monitoring<br>
                    <span style="background:linear-gradient(90deg,#14b8a6,#6366f1);-webkit-background-clip:text;-webkit-text-fill-color:transparent">
                        Perkembangan
                    </span><br>
                    Pasien CP
                </h1>

                <p class="text-white/70 text-lg leading-relaxed mb-10 max-w-xl">
                    Platform pencatatan dan evaluasi terapi Gross Motor Function Measure (GMFM)
                    yang terintegrasi untuk pasien Cerebral Palsy di RSUD Waras Wiris.
                </p>

                <a href="{{ route('login') }}"
                   class="inline-flex items-center gap-3 px-8 py-4 text-white font-bold text-lg rounded-2xl shadow-xl transition-all hover:scale-105 hover:shadow-2xl"
                   style="background:linear-gradient(135deg,#1e3a5f,#2563eb)">
                    Masuk ke Sistem
                </a>
            </div>

            {{-- RIGHT: Feature cards --}}
            <div class="fade-up grid grid-cols-2 gap-4" style="animation-delay:.2s">

                @php
                $features = [
                    ['title'=>'Penilaian GMFM','desc'=>'Input terstruktur 5 dimensi gerakan motorik kasar'],
                    ['title'=>'Grafik Kemajuan','desc'=>'Visualisasi perkembangan skor dari waktu ke waktu'],
                    ['title'=>'Laporan PDF','desc'=>'Download laporan lengkap dengan grafik perkembangan'],
                    ['title'=>'Data Terpusat','desc'=>'Seluruh rekam medis tersimpan aman dan terstruktur'],
                ];
                @endphp

                @foreach($features as $f)
                <div class="glass rounded-2xl p-5 card-hover">
                    <div class="w-8 h-1 rounded-full mb-3" style="background:#14b8a6"></div>
                    <h3 class="text-white font-semibold mb-1">{{ $f['title'] }}</h3>
                    <p class="text-white/60 text-sm leading-relaxed">{{ $f['desc'] }}</p>
                </div>
                @endforeach

            </div>
        </div>
    </div>
</section>

{{-- STATS STRIP --}}
<section style="background:#0f172a" class="py-12 border-t border-white/10">
    <div class="max-w-5xl mx-auto px-6 grid grid-cols-3 gap-8 text-center">
        @php $stats = [['val'=>'5','label'=>'Dimensi GMFM'],['val'=>'25','label'=>'Item Penilaian'],['val'=>'1–7','label'=>'Skala Skor']]; @endphp
        @foreach($stats as $s)
        <div>
            <div class="text-4xl font-black" style="color:#14b8a6">{{ $s['val'] }}</div>
            <div class="text-slate-400 text-sm mt-1">{{ $s['label'] }}</div>
        </div>
        @endforeach
    </div>
</section>

{{-- FOOTER --}}
<footer style="background:#0a0f1e" class="py-6 text-center text-slate-500 text-sm">
    © {{ date('Y') }} Rumah Sakit Umum Daerah Waras Wiris
</footer>

</body>
</html>
