<!DOCTYPE html>
<html lang="id" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ASGARD - Rekomendasi Jurusan SMAN 4 Jember</title>

    <!-- Library -->
    <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;500;600;700;800;900&display=swap" rel="stylesheet">

    <style>
        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
        }

        html {
            scroll-behavior: smooth;
            scroll-padding-top: 95px;
        }

        [x-cloak] {
            display: none !important;
        }

        /* Background halaman */
        .soft-bg {
            background:
                radial-gradient(circle at top left, rgba(16, 185, 129, 0.14), transparent 35%),
                radial-gradient(circle at bottom right, rgba(234, 179, 8, 0.10), transparent 35%),
                #ffffff;
        }

        /* Teks gradasi */
        .text-gradient {
            background: linear-gradient(to right, #10b981, #059669);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* Jarak section */
        .section-space {
            padding-top: 90px;
            padding-bottom: 90px;
        }

        @media (max-width: 768px) {
            .section-space {
                padding-top: 70px;
                padding-bottom: 70px;
            }
        }

        /* Animasi gambar */
        .student-animation {
            animation: floatStudent 3.5s ease-in-out infinite;
            filter: drop-shadow(0 18px 18px rgba(6, 44, 34, 0.14));
        }

        @keyframes floatStudent {
            0% {
                transform: translateY(0) rotate(0deg);
            }

            50% {
                transform: translateY(-16px) rotate(1.5deg);
            }

            100% {
                transform: translateY(0) rotate(0deg);
            }
        }

        /* Hover seluruh card */
        .full-hover-card {
            cursor: pointer;
            transition: all 0.35s ease;
        }

        .full-hover-card:hover {
            transform: translateY(-10px) scale(1.015);
            box-shadow: 0 25px 50px rgba(6, 44, 34, 0.16);
        }

        /* Hover card putih */
        .card-white:hover {
            background-color: #ecfdf5 !important;
            border-color: #22c55e !important;
        }

        /* Hover card hijau */
        .card-dark:hover {
            background-color: #022c22 !important;
            border-color: #34d399 !important;
        }

        /* Hover card kuning */
        .card-yellow:hover {
            background-color: #facc15 !important;
            border-color: #eab308 !important;
        }

        /* Efek isi card */
        .number-box,
        .card-icon,
        .card-title,
        .card-text {
            transition: all 0.35s ease;
        }

        .full-hover-card:hover .number-box {
            background-color: #10b981;
            color: white;
            transform: scale(1.08);
        }

        .full-hover-card:hover .card-icon {
            transform: scale(1.15) rotate(-6deg);
        }

        .full-hover-card:hover .card-title {
            color: #059669;
        }

        .full-hover-card:hover .card-text {
            color: #334155;
        }

        .card-dark:hover .card-title {
            color: #86efac;
        }

        .card-dark:hover .card-text {
            color: #d1fae5;
        }

        .card-yellow:hover .card-title {
            color: #064e3b;
        }

        .card-yellow:hover .card-text {
            color: #064e3b;
        }

        /* Hover seluruh FAQ */
        .faq-card {
            cursor: pointer;
            transition: all 0.35s ease;
        }

        .faq-card:hover {
            background-color: #ecfdf5 !important;
            border-color: #22c55e !important;
            transform: translateY(-6px);
            box-shadow: 0 22px 40px rgba(6, 44, 34, 0.12);
        }

        .faq-card:hover button {
            color: #059669;
        }
    </style>
</head>

<body
    x-data="{ atTop: true, openMenu: false }"
    @scroll.window="atTop = (window.pageYOffset > 50 ? false : true)"
    class="flex flex-col min-h-screen bg-white"
>

    <!-- NAVBAR -->
    <nav
        class="fixed w-full z-50 transition-all duration-500 px-6 py-4"
        :class="atTop ? 'bg-transparent' : 'bg-white/95 backdrop-blur-xl shadow-lg border-b border-green-100'"
    >
        <div class="max-w-7xl mx-auto flex items-center justify-between">

            <!-- Logo -->
            <a href="{{ route('landingpage') }}" 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>
            </a>

            <!-- Menu desktop -->
            <div class="hidden md:flex space-x-10 text-[11px] font-bold uppercase tracking-widest text-emerald-900">
                <a href="{{ route('landingpage') }}#tentang" class="hover:text-green-600 transition">
                    Tentang
                </a>

                <a href="{{ route('landingpage') }}#cara-kerja" class="hover:text-green-600 transition">
                    Cara Kerja
                </a>

                <a href="{{ route('landingpage') }}#faq" class="hover:text-green-600 transition">
                    FAQ
                </a>
            </div>

            <!-- Login desktop -->
            <div class="hidden md:block">
                <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>

            <!-- Tombol mobile -->
            <button
                @click="openMenu = !openMenu"
                class="md:hidden text-emerald-900 font-black text-2xl"
                type="button"
            >
                ☰
            </button>
        </div>

        <!-- Menu mobile -->
        <div
            x-show="openMenu"
            x-transition
            x-cloak
            class="md:hidden mt-4 bg-white rounded-3xl shadow-xl border border-green-100 p-5 space-y-4 text-sm font-bold uppercase tracking-widest text-emerald-900"
        >
            <a href="{{ route('landingpage') }}#tentang" @click="openMenu = false" class="block hover:text-green-600">
                Tentang
            </a>

            <a href="{{ route('landingpage') }}#cara-kerja" @click="openMenu = false" class="block hover:text-green-600">
                Cara Kerja
            </a>

            <a href="{{ route('landingpage') }}#faq" @click="openMenu = false" class="block hover:text-green-600">
                FAQ
            </a>

            <a href="{{ route('login') }}" class="block text-center bg-emerald-900 text-white px-6 py-3 rounded-full">
                LOGIN
            </a>
        </div>
    </nav>

    <main class="flex-grow">

        <!-- HERO -->
        <header class="soft-bg pt-32 pb-24 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-5xl 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 rekomendasi jurusan kuliah untuk membantu siswa SMAN 4 Jember menentukan pilihan jurusan berdasarkan profil siswa.
                            </p>

                            <a
                                href="{{ route('login') }}"
                                class="inline-block bg-green-600 text-white px-12 py-5 rounded-2xl font-bold uppercase text-xs tracking-widest shadow-2xl hover:bg-emerald-900 hover:-translate-y-1 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">
                                Kenali Potensimu Lebih Awal
                            </h2>

                            <p class="max-w-xl mx-auto text-emerald-900/60 mb-8 text-lg italic leading-relaxed">
                                ASGARD membantu siswa melihat kecocokan jurusan berdasarkan data nilai, minat, bakat, ekonomi, dan data pendukung alumni.
                            </p>
                        </div>

                    </div>

                    <div class="swiper-pagination"></div>
                </div>

            </div>
        </header>

        <!-- TENTANG -->
        <section id="tentang" class="section-space px-6 bg-white">
            <div class="max-w-7xl mx-auto grid md:grid-cols-2 gap-16 items-center">

                <div data-aos="fade-right">
                    <p class="text-green-600 font-black uppercase tracking-[0.3em] text-xs mb-4">
                        Tentang Sistem
                    </p>

                    <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 sistem rekomendasi jurusan kuliah yang dirancang untuk membantu siswa SMAN 4 Jember dalam menentukan pilihan jurusan yang sesuai dengan profil siswa.
                    </p>

                    <p class="text-slate-600 leading-relaxed text-lg font-medium border-l-4 border-green-500 pl-6">
                        Sistem ini memanfaatkan data siswa sebagai dasar analisis, sehingga rekomendasi yang diberikan tidak hanya berdasarkan perkiraan, tetapi berdasarkan pola data yang telah diproses oleh sistem.
                    </p>
                </div>

                <!-- Gambar animasi -->
                <div class="flex justify-center" data-aos="zoom-in">
                    <img
                        src="https://illustrations.popsy.co/emerald/student-going-to-school.svg"
                        alt="Ilustrasi siswa"
                        class="student-animation w-full max-w-sm"
                    >
                </div>

            </div>
        </section>

        <!-- CARA KERJA -->
        <section id="cara-kerja" class="section-space px-6 bg-green-50/50">
            <div class="max-w-7xl mx-auto">

                <!-- Judul cara kerja -->
                <div class="text-center mb-14">
                    <p class="text-green-600 font-black uppercase tracking-[0.3em] text-xs mb-4">
                        Alur Sistem
                    </p>

                    <h2 class="text-4xl font-black text-emerald-950 italic uppercase">
                        Cara Kerja ASGARD
                    </h2>

                    <p class="max-w-2xl mx-auto text-emerald-900/60 font-medium mt-4">
                        Sistem bekerja dengan mengolah data profil siswa, kemudian menghasilkan rekomendasi jurusan kuliah yang paling sesuai.
                    </p>
                </div>

                <!-- Card alur sistem -->
                <div class="grid md:grid-cols-3 gap-6 mb-16">

                    <div class="full-hover-card card-white bg-white rounded-3xl p-8 shadow-sm border border-emerald-100" data-aos="fade-up">
                        <div class="number-box w-12 h-12 rounded-2xl bg-green-100 text-green-700 flex items-center justify-center font-black mb-6">
                            1
                        </div>

                        <h3 class="card-title font-black text-emerald-950 text-xl mb-3">
                            Siswa Mengisi Data
                        </h3>

                        <p class="card-text text-slate-500 leading-relaxed text-sm">
                            Siswa mengisi data yang dibutuhkan, seperti nilai rapor, minat dan bakat, serta informasi pendukung lainnya.
                        </p>
                    </div>

                    <div class="full-hover-card card-dark bg-emerald-900 rounded-3xl p-8 shadow-xl text-white border border-emerald-900" data-aos="fade-up" data-aos-delay="100">
                        <div class="number-box w-12 h-12 rounded-2xl bg-green-500 text-white flex items-center justify-center font-black mb-6">
                            2
                        </div>

                        <h3 class="card-title font-black text-xl mb-3 text-white">
                            Sistem Memproses Data
                        </h3>

                        <p class="card-text text-emerald-100/70 leading-relaxed text-sm">
                            Data yang sudah dimasukkan akan diproses oleh sistem menggunakan model Random Forest untuk membaca pola kecocokan jurusan.
                        </p>
                    </div>

                    <div class="full-hover-card card-white bg-white rounded-3xl p-8 shadow-sm border border-emerald-100" data-aos="fade-up" data-aos-delay="200">
                        <div class="number-box w-12 h-12 rounded-2xl bg-green-100 text-green-700 flex items-center justify-center font-black mb-6">
                            3
                        </div>

                        <h3 class="card-title font-black text-emerald-950 text-xl mb-3">
                            Rekomendasi Ditampilkan
                        </h3>

                        <p class="card-text text-slate-500 leading-relaxed text-sm">
                            Sistem menampilkan hasil rekomendasi jurusan kuliah yang dapat digunakan siswa sebagai bahan pertimbangan.
                        </p>
                    </div>

                </div>

                <!-- Judul data analisis -->
                <div class="text-center mb-10">
                    <h3 class="text-2xl font-black text-emerald-950 italic uppercase">
                        Data yang Dianalisis
                    </h3>

                    <p class="text-emerald-900/50 font-bold tracking-widest text-[10px] mt-2 uppercase">
                        Dasar Pembentukan Rekomendasi
                    </p>
                </div>

                <!-- Card data analisis -->
                <div class="grid md:grid-cols-4 gap-6">

                    <div class="full-hover-card card-white 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="card-icon text-4xl">📝</span>

                        <div>
                            <h4 class="card-title font-black text-emerald-950 mb-2 uppercase">
                                Nilai Rapor
                            </h4>

                            <p class="card-text text-sm text-slate-500 leading-relaxed">
                                Digunakan untuk melihat kemampuan akademik siswa pada beberapa mata pelajaran.
                            </p>
                        </div>
                    </div>

                    <div class="full-hover-card card-dark bg-emerald-900 rounded-3xl p-10 flex flex-col justify-between h-80 text-white shadow-xl border border-emerald-900" data-aos="fade-up" data-aos-delay="100">
                        <span class="card-icon text-4xl">🧠</span>

                        <div>
                            <h4 class="card-title font-black mb-2 uppercase text-green-400">
                                Minat & Bakat
                            </h4>

                            <p class="card-text text-sm text-emerald-100/60 leading-relaxed">
                                Digunakan untuk mengetahui kecenderungan minat siswa terhadap bidang tertentu.
                            </p>
                        </div>
                    </div>

                    <div class="full-hover-card card-yellow bg-yellow-400 rounded-3xl p-10 flex flex-col justify-between h-80 shadow-sm border border-yellow-400" data-aos="fade-up" data-aos-delay="200">
                        <span class="card-icon text-4xl">💰</span>

                        <div>
                            <h4 class="card-title font-black text-emerald-900 mb-2 uppercase">
                                Ekonomi
                            </h4>

                            <p class="card-text text-sm text-emerald-900/70 leading-relaxed font-bold">
                                Digunakan sebagai data pendukung dalam menyesuaikan pilihan jurusan dengan kondisi keluarga.
                            </p>
                        </div>
                    </div>

                    <div class="full-hover-card card-white 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="card-icon text-4xl">🎓</span>

                        <div>
                            <h4 class="card-title font-black text-emerald-950 mb-2 uppercase">
                                Data Alumni
                            </h4>

                            <p class="card-text text-sm text-slate-500 leading-relaxed">
                                Digunakan sebagai data pendukung untuk melihat pola jurusan dari alumni sebelumnya.
                            </p>
                        </div>
                    </div>

                </div>

            </div>
        </section>

        <!-- FAQ -->
        <section id="faq" class="section-space px-6 bg-white">
            <div class="max-w-3xl mx-auto" x-data="{ active: 1 }">

                <!-- Judul FAQ -->
                <div class="text-center mb-14">
                    <p class="text-green-600 font-black uppercase tracking-[0.3em] text-xs mb-4">
                        FAQ
                    </p>

                    <h2 class="text-4xl font-black text-emerald-950 italic">
                        Pertanyaan Umum
                    </h2>
                </div>

                <!-- Isi FAQ -->
                <div class="space-y-4">

                    <div class="faq-card 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 transition"
                            type="button"
                        >
                            <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"
                            x-transition
                            class="px-8 pb-6 text-slate-500 leading-relaxed"
                        >
                            ASGARD memproses data profil siswa, seperti nilai rapor, minat dan bakat, ekonomi, serta data pendukung alumni. Data tersebut kemudian dianalisis oleh sistem untuk menghasilkan rekomendasi jurusan kuliah.
                        </div>
                    </div>

                    <div class="faq-card bg-white rounded-3xl border border-green-100 overflow-hidden shadow-sm">
                        <button
                            @click="active = (active === 2 ? null : 2)"
                            class="w-full px-8 py-6 text-left font-bold text-emerald-900 flex justify-between items-center transition"
                            type="button"
                        >
                            <span>Apakah hasil rekomendasi harus diikuti sepenuhnya?</span>

                            <svg class="w-5 h-5 transition-transform" :class="active === 2 ? '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 === 2"
                            x-transition
                            class="px-8 pb-6 text-slate-500 leading-relaxed"
                        >
                            Tidak. Hasil rekomendasi digunakan sebagai bahan pertimbangan. Siswa tetap dapat berdiskusi dengan guru BK, orang tua, atau wali kelas sebelum menentukan pilihan jurusan.
                        </div>
                    </div>

                    <div class="faq-card bg-white rounded-3xl border border-green-100 overflow-hidden shadow-sm">
                        <button
                            @click="active = (active === 3 ? null : 3)"
                            class="w-full px-8 py-6 text-left font-bold text-emerald-900 flex justify-between items-center transition"
                            type="button"
                        >
                            <span>Siapa yang dapat menggunakan sistem ini?</span>

                            <svg class="w-5 h-5 transition-transform" :class="active === 3 ? '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 === 3"
                            x-transition
                            class="px-8 pb-6 text-slate-500 leading-relaxed"
                        >
                            Sistem ini digunakan oleh siswa dan admin sekolah. Siswa dapat melihat rekomendasi jurusan, sedangkan admin dapat mengelola data yang dibutuhkan oleh sistem.
                        </div>
                    </div>

                </div>

            </div>
        </section>

    </main>

    <!-- FOOTER -->
    <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 rekomendasi jurusan kuliah SMAN 4 Jember berbasis data.
                </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="{{ route('landingpage') }}#faq" class="hover:text-white transition">
                            FAQ
                        </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 animasi -->
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

    <!-- Script slider -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

    <script>
        // Animasi saat scroll
        AOS.init({
            duration: 1000,
            once: true
        });

        // Slider pada hero
        new Swiper(".heroSwiper", {
            pagination: {
                el: ".swiper-pagination",
                clickable: true
            },
            autoplay: {
                delay: 4000
            },
            loop: true,
        });
    </script>

</body>
</html>