<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ASGARD - Rekomendasi Jurusan SMAN 4 Jember</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="{{ asset('css/landingpage.css') }}" rel="stylesheet">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Plus Jakarta Sans', sans-serif; }
        .text-gradient {
            background: linear-gradient(to right, #10b981, #059669);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    </style>
</head>
<body x-data="{ atTop: true }" @scroll.window="atTop = (window.pageYOffset > 50 ? false : true)" class="flex flex-col min-h-screen">

    <nav class="fixed w-full z-50 transition-all duration-500 px-6 py-4" :class="atTop ? 'bg-transparent' : 'bg-white/90 backdrop-blur-xl shadow-lg border-b border-green-100'">
        <div class="max-w-7xl mx-auto flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <span class="font-black text-2xl tracking-tighter text-emerald-900 italic">ASGARD<span class="text-green-500">.</span></span>
            </div>
            <div class="hidden md:flex space-x-10 text-[11px] font-bold uppercase tracking-widest text-emerald-900">
                <a href="#tentang" class="hover:text-green-600 transition">Tentang</a>
                <a href="#fitur" class="hover:text-green-600 transition">Variabel</a>
                <a href="#faq" class="hover:text-green-600 transition">FAQ</a>
            </div>
            <a href="{{ route('login') }}" class="bg-emerald-900 text-white px-8 py-3 rounded-full font-bold hover:bg-black hover:scale-105 transition-all">LOGIN</a>
        </div>
    </nav>

    <main class="flex-grow">
        <header class="pt-32 pb-20 overflow-hidden">
            <div class="max-w-7xl mx-auto px-6">
                <div class="swiper heroSwiper" data-aos="fade-up">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide text-center py-12">
                            <h1 class="text-6xl md:text-8xl font-black text-emerald-950 mb-6 leading-none tracking-tighter">
                                Wujudkan Impianmu <br> Bersama <span class="text-gradient">ASGARD.</span>
                            </h1>
                            <p class="max-w-2xl mx-auto text-emerald-900/60 text-lg mb-10 font-medium">
                                Sistem cerdas penentu masa depan siswa SMAN 4 Jember.
                            </p>
                            <a href="{{ route('login') }}" class="bg-green-600 text-white px-12 py-5 rounded-2xl font-bold uppercase text-xs tracking-widest shadow-2xl active:scale-95 transition-all">Mulai Temukan Jurusan</a>
                        </div>
                        <div class="swiper-slide text-center py-12">
                            <h2 class="text-5xl font-black text-emerald-950 mb-6">Kenapa ASGARD?</h2>
                            <p class="max-w-xl mx-auto text-emerald-900/60 mb-8 text-lg italic leading-relaxed">
                                "Membantu 87% mahasiswa yang sering merasa salah jurusan dengan bimbingan berbasis data objektif."
                            </p>
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </header>

        <section id="tentang" class="py-24 px-6">
            <div class="max-w-7xl mx-auto grid md:grid-cols-2 gap-16 items-center">
                <div data-aos="fade-right">
                    <h2 class="text-4xl font-black text-emerald-950 mb-8 uppercase italic tracking-tighter">Apa itu ASGARD?</h2>
                    <p class="text-slate-600 leading-relaxed text-lg mb-6">
                        <strong>ASGARD</strong> adalah singkatan dari <em>AI System for Graduation & Academic Recommendation</em>. Ini adalah platform rekomendasi jurusan kuliah yang dirancang khusus untuk memandu siswa SMAN 4 Jember menemukan jalur karir terbaik.
                    </p>
                    <p class="text-slate-600 leading-relaxed text-lg font-medium border-l-4 border-green-500 pl-6">
                        Sistem ini tidak hanya menebak, tapi menghitung potensi diri berdasarkan variabel nyata yang ada pada profilmu.
                    </p>
                </div>
                <div class="flex justify-center" data-aos="zoom-in">
                    <img src="https://illustrations.popsy.co/emerald/student-going-to-school.svg" alt="Student" class="w-full max-w-sm animate-float">
                </div>
            </div>
        </section>

        <section id="fitur" class="py-24 px-6 bg-green-50/50">
            <div class="max-w-7xl mx-auto">
                <div class="text-center mb-16">
                    <h2 class="text-4xl font-black text-emerald-950 italic uppercase">Variabel Analisis Kami</h2>
                    <p class="text-emerald-900/50 font-bold tracking-widest text-[10px] mt-2 uppercase">Dasar Prediksi Rekomendasi</p>
                </div>
                <div class="grid md:grid-cols-4 gap-6">
                    <div class="bg-white rounded-3xl p-10 flex flex-col justify-between h-80 shadow-sm border border-emerald-100" data-aos="fade-up">
                        <span class="text-4xl">📝</span>
                        <div>
                            <h4 class="font-black text-emerald-950 mb-2 uppercase">Nilai Rapor</h4>
                            <p class="text-sm text-slate-500 leading-relaxed">Analisis performa akademikmu selama 5 semester terakhir.</p>
                        </div>
                    </div>
                    <div class="bg-emerald-900 rounded-3xl p-10 flex flex-col justify-between h-80 text-white shadow-xl" data-aos="fade-up" data-aos-delay="100">
                        <span class="text-4xl">🧠</span>
                        <div>
                            <h4 class="font-black mb-2 uppercase text-green-400">Minat & Bakat</h4>
                            <p class="text-sm text-emerald-100/60 leading-relaxed">Memetakan kecenderungan bakatmu melalui kuesioner psikologi.</p>
                        </div>
                    </div>
                    <div class="bg-yellow-400 rounded-3xl p-10 flex flex-col justify-between h-80 shadow-sm" data-aos="fade-up" data-aos-delay="200">
                        <span class="text-4xl">💰</span>
                        <div>
                            <h4 class="font-black text-emerald-900 mb-2 uppercase">Kondisi Ekonomi</h4>
                            <p class="text-sm text-emerald-900/60 leading-relaxed font-bold">Menyesuaikan pilihan jurusan dengan kesiapan finansial keluarga.</p>
                        </div>
                    </div>
                    <div class="bg-white rounded-3xl p-10 flex flex-col justify-between h-80 shadow-sm border border-emerald-100" data-aos="fade-up" data-aos-delay="300">
                        <span class="text-4xl">🎓</span>
                        <div>
                            <h4 class="font-black text-emerald-950 mb-2 uppercase">Data Alumni</h4>
                            <p class="text-sm text-slate-500 leading-relaxed">Dicocokkan dengan tingkat keberhasilan alumni SMAPA di berbagai PTN.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="faq" class="py-24 px-6">
            <div class="max-w-3xl mx-auto" x-data="{ active: 1 }">
                <h2 class="text-center text-4xl font-black text-emerald-950 mb-16 italic">Pertanyaan Umum</h2>
                <div class="space-y-4">
                    <div class="bg-white rounded-3xl border border-green-100 overflow-hidden shadow-sm">
                        <button @click="active = (active === 1 ? null : 1)" class="w-full px-8 py-6 text-left font-bold text-emerald-900 flex justify-between items-center">
                            <span>Bagaimana cara kerja ASGARD?</span>
                            <svg class="w-5 h-5 transition-transform" :class="active === 1 ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M19 9l-7 7-7-7"></path></svg>
                        </button>
                        <div x-show="active === 1" class="px-8 pb-6 text-slate-500 leading-relaxed">ASGARD memproses semua variabel profilmu menggunakan algoritma AI untuk menghasilkan persentase kecocokan jurusan yang paling optimal.</div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer class="bg-[#062C22] text-white py-16 px-6">
        <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-12">
            <div class="space-y-6">
                <div class="flex items-center gap-4">
                    <span class="font-black text-2xl tracking-tighter uppercase italic">ASGARD.</span>
                </div>
                <p class="text-slate-300 text-sm leading-relaxed max-w-xs">
                    Sistem pakar rekomendasi jurusan kuliah SMAN 4 Jember berbasis data-driven.
                </p>
            </div>
            <div>
                <h5 class="font-bold text-xs uppercase tracking-widest text-emerald-400 mb-6 italic">Informasi</h5>
                <ul class="space-y-4 text-sm text-slate-300">
                    <li><a href="{{ route('panduan') }}" class="hover:text-white transition">Panduan Sistem</a></li>
                    <li><a href="#" class="hover:text-white transition">Kebijakan Privasi</a></li>
                </ul>
            </div>
            <div>
                <h5 class="font-bold text-xs uppercase tracking-widest text-emerald-400 mb-6 italic">Sekolah</h5>
                <ul class="space-y-4 text-sm text-slate-300">
                    <li>SMAN 4 Jember</li>
                    <li>Jl. Wolter Monginsidi No.24</li>
                    <li>Jember, Jawa Timur</li>
                </ul>
            </div>
        </div>
        <div class="max-w-7xl mx-auto mt-16 pt-8 border-t border-white/10 text-center">
            <p class="text-[10px] font-medium uppercase tracking-[0.5em] text-slate-400">© 2026 GALANG SEFIAN ADJI - POLITEKNIK NEGERI JEMBER</p>
        </div>
    </footer>

    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script>
        AOS.init({ duration: 1000, once: true });
        new Swiper(".heroSwiper", {
            pagination: { el: ".swiper-pagination", clickable: true },
            autoplay: { delay: 4000 },
            loop: true,
        });
    </script>
</body>
</html>