@extends('layouts.ppdb')

@section('title', 'Penerimaan Siswa Baru | Smart Cendekia')

@section('content')
    {{-- HERO SECTION --}}
    <section class="hero-section text-center text-white position-relative overflow-hidden"
             style="background: linear-gradient(135deg, #064E3B 0%, #10B981 100%); padding: 120px 0 180px; margin-bottom: -100px; border-radius: 0 0 50% 50% / 40px;">

        <div class="position-absolute" style="top: -50px; left: -50px; width: 200px; height: 200px; background: rgba(255,255,255,0.05); border-radius: 50%;"></div>
        <div class="position-absolute" style="bottom: 50px; right: -50px; width: 300px; height: 300px; background: rgba(255,255,255,0.05); border-radius: 50%;"></div>

        <div class="container position-relative" style="z-index: 2;">
            <h1 class="display-4 fw-bold mb-3 font-poppins animate__animated animate__fadeInDown">
                Bergabunglah Menjadi <br> Generasi Rabbani
            </h1>
            <p class="lead mb-5 opacity-90 animate__animated animate__fadeInUp animate__delay-1s" style="max-width: 700px; margin: 0 auto; color: #ECFDF5;">
                Penerimaan Peserta Didik Baru (PPDB) Tahun Ajaran
                <strong>{{ date('Y') }}/{{ date('Y')+1 }}</strong> telah dibuka.
                Mari wujudkan pendidikan berkarakter islami dan berprestasi.
            </p>

            {{-- LOGIKA DINAMIS GELOMBANG --}}
            @if(isset($activeWave) && $activeWave)
                <div class="animate__animated animate__zoomIn animate__delay-1s">
                    <a href="{{ route('ppdb.register') }}" class="btn btn-light text-pesantren btn-lg shadow-lg rounded-pill px-5 py-3 font-weight-bold hover-scale transition-all">
                        <i class="fas fa-user-plus mr-2"></i> Daftar Sekarang
                    </a>

                    <div class="mt-4">
                        {{-- PERUBAHAN DI SINI: Badge Putih, Teks Hijau Dominan --}}
                        <span class="badge bg-white text-pesantren px-4 py-2 rounded-pill shadow-sm border border-white-50">
                            <i class="fas fa-bullhorn mr-2"></i> Gelombang:
                            <strong class="font-weight-bold" style="font-size: 1.1em;">{{ $activeWave->nama_gelombang }}</strong>
                        </span>

                        <p class="mt-2 small mb-0 font-monospace" style="color: #D1FAE5;">
                            Berakhir pada: {{ \Carbon\Carbon::parse($activeWave->tgl_selesai)->translatedFormat('d F Y') }}
                        </p>
                    </div>
                </div>
            @else
                <div class="animate__animated animate__shakeX">
                    <button class="btn btn-secondary btn-lg rounded-pill px-5 py-3 disabled shadow-none" style="cursor: not-allowed; opacity: 0.8;">
                        <i class="fas fa-lock mr-2"></i> Pendaftaran Ditutup
                    </button>
                    <div class="mt-3 text-white-50 small bg-dark bg-opacity-25 d-inline-block px-3 py-1 rounded-pill">
                        <i class="fas fa-info-circle mr-1"></i> Belum ada gelombang pendaftaran yang aktif.
                    </div>
                </div>
            @endif
        </div>
    </section>

    {{-- ALUR PENDAFTARAN SECTION (Assuming this was added in previous turn, keeping it for context or just the info cards if user didn't ask to remove) --}}
    {{-- The prompt asks to change colors, imply keeping structure. I will keep the Info Cards section as provided in the previous turn's final output before the Alur Pendaftaran addition, or integrate. Let's stick to the structure of the last code block provided by the user in the prompt, but applying changes. Wait, the user provided the FULL code in the prompt which includes Navbar and Footer inside `layout` usually, but here they provided a standalone HTML structure in the *first* prompt, but the *last* response I generated used `extends layout`. The user is asking to modify `landing.blade.php`.
    I will provide the full `landing.blade.php` content and the specific CSS to put in `@push('css')`.
    The user's prompt implies they want to change the *look* of header and footer via CSS injected into this view, or by assuming the layout uses classes I can override. Since I can't edit the layout file directly in this turn effectively (unless I instruct them), I will add CSS overrides in the `@push('css')` section of the landing page to target the navbar and footer, assuming they use standard Bootstrap classes or the classes from the HTML provided in the very first prompt context.
    Actually, the previous response used `@extends('layouts.ppdb')`. I will assume standard Bootstrap classes for Navbar (`.navbar`) and Footer (`footer` tag).
    --}}

    {{-- INFO CARDS SECTION --}}
    <div class="container mb-5" style="position: relative; z-index: 10;">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="row text-center g-4">
                    {{-- Card 1 --}}
                    <div class="col-md-4 mb-4 mb-md-0">
                        <div class="card border-0 shadow-lg h-100 p-4 hover-top bg-white" style="border-radius: 20px;">
                            <div class="card-body">
                                <div class="mb-4 mx-auto bg-light-pesantren text-pesantren rounded-circle d-flex align-items-center justify-content-center icon-box shadow-sm">
                                    <i class="fas fa-laptop-code fa-2x"></i>
                                </div>
                                <h5 class="font-weight-bold text-dark mb-3">Daftar Online</h5>
                                <p class="text-muted small mb-0">Isi formulir pendaftaran dari rumah dengan mudah melalui perangkat apa saja.</p>
                            </div>
                        </div>
                    </div>

                    {{-- Card 2 --}}
                    <div class="col-md-4 mb-4 mb-md-0">
                        <div class="card border-0 shadow-lg h-100 p-4 hover-top bg-white" style="border-radius: 20px;">
                            <div class="card-body">
                                <div class="mb-4 mx-auto bg-light-pesantren text-pesantren rounded-circle d-flex align-items-center justify-content-center icon-box shadow-sm">
                                    <i class="fas fa-quran fa-2x"></i>
                                </div>
                                <h5 class="font-weight-bold text-dark mb-3">Seleksi Akademik</h5>
                                <p class="text-muted small mb-0">Tes potensi akademik dan baca tulis Al-Qur'an secara transparan.</p>
                            </div>
                        </div>
                    </div>

                    {{-- Card 3 --}}
                    <div class="col-md-4">
                        <div class="card border-0 shadow-lg h-100 p-4 hover-top bg-white" style="border-radius: 20px;">
                            <div class="card-body">
                                <div class="mb-4 mx-auto bg-light-pesantren text-pesantren rounded-circle d-flex align-items-center justify-content-center icon-box shadow-sm">
                                    <i class="fas fa-bell fa-2x"></i>
                                </div>
                                <h5 class="font-weight-bold text-dark mb-3">Info Realtime</h5>
                                <p class="text-muted small mb-0">Pantau status verifikasi berkas dan hasil kelulusan langsung dari dashboard.</p>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- CTA Login --}}
                <div class="text-center mt-5 animate__animated animate__fadeInUp animate__delay-2s">
                    <p class="text-muted mb-3 font-weight-medium">Sudah memiliki akun pendaftaran?</p>
                    <a href="{{ route('login') }}" class="btn btn-outline-pesantren rounded-pill px-5 py-2 font-weight-bold shadow-sm transition-all hover-fill">
                        <i class="fas fa-sign-in-alt mr-2"></i> Masuk ke Akun Saya
                    </a>
                </div>

            </div>
        </div>
    </div>
@endsection

@push('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<style>
    /* TYPOGRAPHY */
    .font-poppins { font-family: 'Poppins', sans-serif; }

    /* === PALET WARNA PESANTREN (HIJAU DOMINAN) === */
    .text-pesantren { color: #064E3B !important; } /* Hijau Tua Gelap */
    .bg-light-pesantren { background-color: #D1FAE5 !important; color: #064E3B; } /* Hijau Mint Muda */

    /* Badge Gelombang: Latar Putih, Teks Hijau (Kontras Jelas) */
    .badge.bg-white.text-pesantren {
        background-color: #ffffff !important;
        color: #064E3B !important;
    }

    /* Custom Button: Hijau Outline */
    .btn-outline-pesantren {
        color: #064E3B;
        border: 2px solid #064E3B;
        background: transparent;
    }
    .btn-outline-pesantren:hover {
        background-color: #064E3B;
        color: white;
        border-color: #064E3B;
        box-shadow: 0 5px 15px rgba(6, 78, 59, 0.3);
    }

    /* === HEADER & FOOTER OVERRIDE === */
    /* Menargetkan Navbar Bootstrap */
    .navbar {
        background-color: #064E3B !important; /* Hijau Dominan */
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }
    .navbar .navbar-brand,
    .navbar .nav-link {
        color: #ffffff !important; /* Teks Putih agar kontras */
    }
    .navbar .nav-link:hover {
        color: #D1FAE5 !important; /* Hijau Mint saat hover */
    }

    /* Menargetkan Footer */
    footer, .footer {
        background-color: #064E3B !important; /* Hijau Dominan */
        color: #ffffff !important;
        border-top: 5px solid #10B981; /* Aksen Hijau Emerald di atas footer */
    }
    footer a, .footer a {
        color: #D1FAE5 !important; /* Link footer hijau muda */
        text-decoration: none;
    }
    footer a:hover, .footer a:hover {
        color: #ffffff !important;
        text-decoration: underline;
    }

    /* === EFEK KARTU & BUTTON === */
    .hover-top { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease; }
    .hover-top:hover { transform: translateY(-10px); box-shadow: 0 1.5rem 4rem rgba(16, 185, 129, 0.15)!important; }

    .icon-box { width: 80px; height: 80px; transition: all 0.3s; }
    .hover-top:hover .icon-box {
        transform: scale(1.1) rotate(5deg);
        background-color: #064E3B !important;
        color: white !important;
    }

    .hover-scale { transition: transform 0.2s; color: #064E3B !important; }
    .hover-scale:hover { transform: scale(1.05); color: #047857 !important; }
</style>
@endpush