<?php
session_start();

// Redirect jika sudah login sesuai role
if(isset($_SESSION['login'])){
    $role = $_SESSION['role'] ?? '';
    if($role === 'admin')   { header("Location: dashboard.php"); exit(); }
    if($role === 'guru')    { header("Location: dashboard_guru.php");  exit(); }
    if(in_array($role, ['staff','tu']))  { header("Location: dashboard_staff.php"); exit(); }
}

date_default_timezone_set('Asia/Jakarta');
$year = date('Y');
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>MA As-Syafi'iyah 02 Bekasi — Portal Akademik</title>
<link rel="icon" href="assets/sekolah.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Outfit:wght@300;400;500;600;700;800;900&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
/* ══ CSS VARIABLES (mirroring dashboard) ══ */
:root {
    --ob:    #080C14;
    --ob-m:  #0E1520;
    --ob-l:  #141D2E;
    --ob-ll: #1C2840;
    --g:     #C9A84C;
    --g-l:   #E0C06A;
    --g-d:   #A8893A;
    --g-fg:  #FDF0C8;
    --bg:    #F7F5F2;
    --sf:    #FFFFFF;
    --bd:    #E8E4DC;
    --tx:    #131820;
    --txm:   #5A6478;
    --txl:   #9BA4B5;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
    font-family: 'Outfit', sans-serif;
    background: var(--ob);
    color: #fff;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ══ LOADER ══ */
.loader {
    position: fixed; inset: 0; z-index: 9999;
    background: var(--ob);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2rem;
    transition: opacity .7s ease, visibility .7s ease;
}
.loader.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-ring { width: 90px; height: 90px; position: relative; }
.loader-ring::before, .loader-ring::after { content: ''; position: absolute; border-radius: 50%; }
.loader-ring::before { inset: 0; border: 2px solid rgba(201,168,76,.15); }
.loader-ring::after  { inset: 4px; border: 2px solid transparent; border-top-color: var(--g); animation: spin 1s linear infinite; }
.loader-inner {
    position: absolute; inset: 18px;
    background: var(--ob-l); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; border: 1px solid rgba(201,168,76,.2);
}
.loader-inner img { width: 34px; height: 34px; object-fit: contain; }
.loader-txt { font-family: 'DM Serif Display', serif; font-size: 1.1rem; color: rgba(255,255,255,.5); }
.loader-dots { display: flex; gap: .5rem; margin-top: -.5rem; }
.loader-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--g); animation: ldot .8s ease-in-out infinite; }
.loader-dot:nth-child(2){animation-delay:.15s}.loader-dot:nth-child(3){animation-delay:.3s}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ldot { 0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1} }

/* ══ BACKGROUND MESH ══ */
.bg-layer {
    position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
}
.bg-layer::before {
    content: '';
    position: absolute; width: 800px; height: 800px;
    top: -200px; right: -200px;
    background: radial-gradient(circle, rgba(201,168,76,.1) 0%, transparent 60%);
    animation: meshDrift 14s ease-in-out infinite;
}
.bg-layer::after {
    content: '';
    position: absolute; width: 600px; height: 600px;
    bottom: -150px; left: -100px;
    background: radial-gradient(circle, rgba(29,78,216,.09) 0%, transparent 60%);
    animation: meshDrift 11s ease-in-out infinite reverse;
}
.bg-grid {
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background-image:
        linear-gradient(rgba(201,168,76,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201,168,76,.035) 1px, transparent 1px);
    background-size: 40px 40px;
}
@keyframes meshDrift { 0%,100%{transform:translate(0,0)} 50%{transform:translate(40px,-30px)} }

/* ══ LAYOUT ══ */
.page {
    position: relative; z-index: 1;
    min-height: 100vh;
    display: flex; flex-direction: column;
}

/* ══ NAVBAR ══ */
.navbar {
    padding: 1.5rem 3rem;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid rgba(201,168,76,.1);
    backdrop-filter: blur(12px);
    background: rgba(8,12,20,.6);
    position: sticky; top: 0; z-index: 100;
    animation: fadeDown .6s ease both;
}
.nav-brand {
    display: flex; align-items: center; gap: .875rem;
    text-decoration: none;
}
.nav-logo {
    width: 44px; height: 44px; border-radius: 12px;
    background: var(--ob-l); border: 1.5px solid var(--g-d);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    box-shadow: 0 0 0 3px rgba(201,168,76,.12), 0 6px 16px rgba(0,0,0,.3);
    flex-shrink: 0;
}
.nav-logo img { width: 30px; height: 30px; object-fit: contain; }
.nav-name { font-family: 'DM Serif Display', serif; font-size: .95rem; color: var(--g-fg); line-height: 1.2; }
.nav-short { font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.3); }
.nav-cta {
    display: flex; align-items: center; gap: .625rem;
    padding: .7rem 1.5rem;
    background: linear-gradient(135deg, var(--g-d), var(--g));
    color: var(--ob); border: none; border-radius: 10px;
    font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    font-family: 'Outfit', sans-serif; text-decoration: none; cursor: pointer;
    box-shadow: 0 4px 18px rgba(201,168,76,.3);
    transition: all .28s cubic-bezier(.34,1.56,.64,1);
}
.nav-cta:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 8px 28px rgba(201,168,76,.4); }

/* ══ HERO SECTION ══ */
.hero-section {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    padding: 5rem 3rem 4rem;
    text-align: center;
    position: relative;
}
.hero-inner { max-width: 760px; width: 100%; }

/* Floating badge */
.hero-badge {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .45rem 1.25rem;
    background: rgba(201,168,76,.1);
    border: 1px solid rgba(201,168,76,.22);
    border-radius: 50px;
    font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--g-l); margin-bottom: 1.75rem;
    animation: fadeUp .6s .1s ease both;
}
.badge-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--g);
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.7)} }

.hero-title {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(2.5rem, 6vw, 4.25rem);
    color: #fff;
    line-height: 1.08; letter-spacing: -.02em;
    margin-bottom: 1.125rem;
    animation: fadeUp .65s .18s ease both;
}
.hero-title em { color: var(--g-l); font-style: italic; }
.hero-title .line2 { display: block; color: rgba(255,255,255,.55); font-size: .72em; margin-top: .2rem; }

.hero-sub {
    font-size: 1.0625rem; font-weight: 400;
    color: rgba(255,255,255,.45); line-height: 1.7;
    max-width: 560px; margin: 0 auto 2.5rem;
    animation: fadeUp .65s .26s ease both;
}

/* CTA buttons */
.hero-actions {
    display: flex; align-items: center; justify-content: center;
    gap: 1rem; flex-wrap: wrap;
    animation: fadeUp .65s .34s ease both;
    margin-bottom: 3.5rem;
}
.btn-primary {
    display: flex; align-items: center; gap: .625rem;
    padding: 1rem 2.25rem;
    background: linear-gradient(135deg, var(--g-d), var(--g-l));
    color: var(--ob); border: none; border-radius: 14px;
    font-size: .925rem; font-weight: 800; letter-spacing: .04em;
    font-family: 'Outfit', sans-serif; text-decoration: none; cursor: pointer;
    box-shadow: 0 6px 24px rgba(201,168,76,.35);
    transition: all .3s cubic-bezier(.34,1.56,.64,1);
}
.btn-primary:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 12px 36px rgba(201,168,76,.45); }
.btn-secondary {
    display: flex; align-items: center; gap: .625rem;
    padding: 1rem 2rem;
    background: rgba(255,255,255,.05);
    border: 1.5px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.7); border-radius: 14px;
    font-size: .925rem; font-weight: 600;
    font-family: 'Outfit', sans-serif; text-decoration: none; cursor: pointer;
    transition: all .3s ease;
}
.btn-secondary:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); color: #fff; transform: translateY(-3px); }

/* ══ STAT STRIP ══ */
.stat-strip {
    display: flex; align-items: center; justify-content: center;
    gap: 0; flex-wrap: wrap;
    animation: fadeUp .6s .42s ease both;
}
.stat-item {
    padding: 1.25rem 2.5rem;
    border-right: 1px solid rgba(255,255,255,.08);
    text-align: center;
}
.stat-item:last-child { border-right: none; }
.stat-n {
    font-family: 'DM Mono', monospace;
    font-size: 2rem; font-weight: 500; color: #fff;
    line-height: 1; margin-bottom: .3rem;
}
.stat-n span { color: var(--g-l); }
.stat-l { font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.3); }

/* ══ DIVIDER ══ */
.divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,168,76,.2), transparent);
    margin: 0 3rem;
}

/* ══ FEATURES SECTION ══ */
.features-section {
    padding: 5rem 3rem;
}
.features-header {
    text-align: center; margin-bottom: 3.5rem;
    animation: fadeUp .6s ease both;
}
.features-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .35rem .875rem;
    background: rgba(201,168,76,.08);
    border: 1px solid rgba(201,168,76,.15);
    border-radius: 50px; margin-bottom: .875rem;
    font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--g-l);
}
.features-title {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    color: #fff; line-height: 1.2;
}
.features-title em { color: var(--g-l); font-style: italic; }

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    max-width: 1100px; margin: 0 auto;
}
.feat-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 20px;
    padding: 2rem 1.75rem;
    position: relative; overflow: hidden;
    transition: all .35s cubic-bezier(.34,1.56,.64,1);
    animation: fadeUp .6s ease both;
}
.feat-card:nth-child(1){animation-delay:.07s}.feat-card:nth-child(2){animation-delay:.13s}
.feat-card:nth-child(3){animation-delay:.19s}.feat-card:nth-child(4){animation-delay:.25s}
.feat-card:nth-child(5){animation-delay:.31s}.feat-card:nth-child(6){animation-delay:.37s}
.feat-card::before {
    content: '';position: absolute; top: 0; left: 0; right: 0; height: 3px;
    border-radius: 20px 20px 0 0; transition: height .3s;
}
.feat-card:hover { transform: translateY(-8px); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); }
.feat-card:hover::before { height: 5px; }
.fc1::before{background:linear-gradient(90deg,#4F46E5,#7C3AED)}
.fc2::before{background:linear-gradient(90deg,#0C6B58,#059669)}
.fc3::before{background:linear-gradient(90deg,#1D4ED8,#0EA5E9)}
.fc4::before{background:linear-gradient(90deg,#F97316,#EF4444)}
.fc5::before{background:linear-gradient(90deg,#7C3AED,#EC4899)}
.fc6::before{background:linear-gradient(90deg,#F59E0B,#D97706)}

.feat-ico {
    width: 52px; height: 52px; border-radius: 14px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.1);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; margin-bottom: 1.25rem;
    transition: all .3s cubic-bezier(.34,1.56,.64,1);
}
.feat-card:hover .feat-ico { transform: scale(1.15) rotate(-8deg); }
.feat-name {
    font-family: 'DM Serif Display', serif;
    font-size: 1.125rem; color: #fff;
    margin-bottom: .625rem;
}
.feat-desc {
    font-size: .825rem; font-weight: 400;
    color: rgba(255,255,255,.4); line-height: 1.65;
}

/* ══ FOOTER ══ */
.footer {
    padding: 2rem 3rem;
    border-top: 1px solid rgba(201,168,76,.1);
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 1rem;
    background: rgba(8,12,20,.5);
}
.footer-brand { display: flex; align-items: center; gap: .875rem; }
.footer-logo {
    width: 38px; height: 38px; border-radius: 10px;
    background: var(--ob-l); border: 1.5px solid var(--g-d);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; flex-shrink: 0;
}
.footer-logo img { width: 26px; height: 26px; object-fit: contain; }
.footer-name { font-family: 'DM Serif Display', serif; font-size: .9rem; color: var(--g-fg); line-height: 1.2; }
.footer-sub { font-size: .68rem; font-weight: 500; letter-spacing: .06em; color: rgba(255,255,255,.3); }
.footer-copy { font-size: .72rem; font-weight: 500; color: rgba(255,255,255,.25); }
.footer-login {
    display: flex; align-items: center; gap: .5rem;
    padding: .6rem 1.25rem;
    background: rgba(201,168,76,.1);
    border: 1px solid rgba(201,168,76,.2);
    color: var(--g-l); border-radius: 9px;
    font-size: .75rem; font-weight: 700; letter-spacing: .06em;
    text-decoration: none; transition: all .25s ease;
}
.footer-login:hover { background: rgba(201,168,76,.18); transform: translateY(-2px); }

/* ══ ANIMATIONS ══ */
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeDown { from{opacity:0;transform:translateY(-16px)} to{opacity:1;transform:translateY(0)} }

/* ══ RESPONSIVE ══ */
@media(max-width:1024px) {
    .features-grid { grid-template-columns: repeat(2,1fr); }
    .navbar, .features-section, .footer { padding-left: 2rem; padding-right: 2rem; }
    .hero-section { padding: 4rem 2rem 3rem; }
    .divider { margin: 0 2rem; }
}
@media(max-width:768px) {
    .navbar { padding: 1.125rem 1.25rem; }
    .nav-name { font-size: .85rem; }
    .hero-section { padding: 3rem 1.25rem 2.5rem; }
    .hero-title { font-size: clamp(2rem,8vw,2.75rem); }
    .stat-item { padding: 1rem 1.5rem; }
    .stat-n { font-size: 1.625rem; }
    .features-section { padding: 3.5rem 1.25rem; }
    .features-grid { grid-template-columns: 1fr; }
    .footer { padding: 1.5rem 1.25rem; flex-direction: column; align-items: flex-start; }
    .divider { margin: 0 1.25rem; }
}
@media(max-width:480px) {
    .hero-actions { flex-direction: column; align-items: stretch; }
    .btn-primary, .btn-secondary { justify-content: center; }
    .stat-strip { gap: 0; }
    .stat-item { padding: .875rem 1.125rem; flex: 1 1 33%; }
    .stat-n { font-size: 1.375rem; }
}
</style>
</head>
<body>

<!-- Loader -->
<div class="loader" id="ldr">
    <div class="loader-ring">
        <div class="loader-inner">
            <img src="assets/sekolah.png" alt="" onerror="this.parentNode.innerHTML='🏛'">
        </div>
    </div>
    <div class="loader-txt">Memuat Portal</div>
    <div class="loader-dots">
        <div class="loader-dot"></div>
        <div class="loader-dot"></div>
        <div class="loader-dot"></div>
    </div>
</div>

<!-- Background effects -->
<div class="bg-grid"></div>
<div class="bg-layer"></div>

<div class="page">

    <!-- NAVBAR -->
    <nav class="navbar">
        <a href="index.php" class="nav-brand">
            <div class="nav-logo">
                <img src="assets/sekolah.png" alt="" onerror="this.parentNode.innerHTML='🏛'">
            </div>
            <div>
                <div class="nav-name">MA As-Syafi'iyah 02</div>
                <div class="nav-short">Bekasi · Portal Akademik</div>
            </div>
        </a>
        <a href="login.php" class="nav-cta">🔐 &nbsp;Masuk ke Sistem</a>
    </nav>

    <!-- HERO SECTION -->
    <section class="hero-section">
        <div class="hero-inner">
            <div class="hero-badge">
                <span class="badge-dot"></span>
                Sistem Informasi Akademik Terpadu
            </div>

            <h1 class="hero-title">
                Portal Akademik<br>
                <em>MA As-Syafi'iyah 02</em>
                <span class="line2">Bekasi · Terpercaya · Terintegrasi</span>
            </h1>

            <p class="hero-sub">
                Kelola seluruh kegiatan akademik sekolah dalam satu platform — dari absensi, nilai, SPP, hingga arsip surat dan laporan statistik.
            </p>

            <div class="hero-actions">
                <a href="login.php" class="btn-primary">
                    🔐 &nbsp;Masuk ke Sistem
                </a>
                <a href="#fitur" class="btn-secondary">
                    📖 &nbsp;Lihat Fitur
                </a>
            </div>

            <!-- Stat strip -->
            <div class="stat-strip">
                <div class="stat-item">
                    <div class="stat-n">9<span>+</span></div>
                    <div class="stat-l">Modul Sistem</div>
                </div>
                <div class="stat-item">
                    <div class="stat-n">3<span>+</span></div>
                    <div class="stat-l">Tipe Pengguna</div>
                </div>
                <div class="stat-item">
                    <div class="stat-n">100<span>%</span></div>
                    <div class="stat-l">Berbasis Web</div>
                </div>
            </div>
        </div>
    </section>

    <div class="divider"></div>

    <!-- FEATURES SECTION -->
    <section class="features-section" id="fitur">
        <div class="features-header">
            <div class="features-eyebrow">✨ Fitur Unggulan</div>
            <h2 class="features-title">Semua yang Anda Butuhkan,<br><em>Dalam Satu Portal</em></h2>
        </div>

        <div class="features-grid">
            <div class="feat-card fc1">
                <div class="feat-ico">📬</div>
                <div class="feat-name">Arsip Surat</div>
                <div class="feat-desc">Kelola surat masuk & keluar, pantau status, dan arsipkan seluruh persuratan sekolah secara digital.</div>
            </div>
            <div class="feat-card fc2">
                <div class="feat-ico">💰</div>
                <div class="feat-name">Pembayaran SPP</div>
                <div class="feat-desc">Pantau dan catat pembayaran SPP siswa secara real-time lengkap dengan laporan bulanan otomatis.</div>
            </div>
            <div class="feat-card fc3">
                <div class="feat-ico">👨‍🎓</div>
                <div class="feat-name">Buku Induk Siswa</div>
                <div class="feat-desc">Kelola biodata, data orang tua, dan riwayat akademik seluruh siswa secara terpusat dan aman.</div>
            </div>
            <div class="feat-card fc4">
                <div class="feat-ico">✅</div>
                <div class="feat-name">Absensi Siswa</div>
                <div class="feat-desc">Catat kehadiran siswa setiap hari dengan sistem absensi digital yang terintegrasi dengan laporan.</div>
            </div>
            <div class="feat-card fc5">
                <div class="feat-ico">📝</div>
                <div class="feat-name">Nilai Akademik</div>
                <div class="feat-desc">Input dan kelola nilai ujian, tugas, serta cetak raport siswa setiap semester dengan mudah.</div>
            </div>
            <div class="feat-card fc6">
                <div class="feat-ico">📊</div>
                <div class="feat-name">Laporan & Statistik</div>
                <div class="feat-desc">Laporan komprehensif dan grafik statistik dari seluruh aktivitas akademik dan keuangan sekolah.</div>
            </div>
        </div>
    </section>

    <div class="divider"></div>

    <!-- FOOTER -->
    <footer class="footer">
        <div class="footer-brand">
            <div class="footer-logo">
                <img src="assets/sekolah.png" alt="" onerror="this.parentNode.innerHTML='🏛'">
            </div>
            <div>
                <div class="footer-name">MA As-Syafi'iyah 02 Bekasi</div>
                <div class="footer-sub">Sistem Informasi Akademik · <?=$year?></div>
            </div>
        </div>
        <div class="footer-copy">Dibuat dengan ❤️ dan ☕</div>
        <a href="login.php" class="footer-login">🔐 Masuk →</a>
    </footer>

</div><!-- /page -->

<script>
// Loader
window.addEventListener('load', () => {
    setTimeout(() => document.getElementById('ldr').classList.add('gone'), 700);
});

// Smooth scroll untuk anchor link
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if(target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
    });
});
</script>
</body>
</html>