<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>SIPENA - E Learning SD</title>

    <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=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        :root {
            --primary: #2563eb;
            --primary-dark: #1d4ed8;
            --primary-light: #eff6ff;
            --accent: #0f766e;
            --success: #16a34a;
            --warning: #f59e0b;
            --danger: #dc2626;
            --text: #0f172a;
            --muted: #64748b;
            --line: #e2e8f0;
            --body: #f8fafc;
            --white: #ffffff;
            --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
            --shadow-md: 0 12px 30px rgba(15, 23, 42, 0.08);
            --radius: 8px;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            background: var(--body);
            color: var(--text);
            font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            overflow-x: hidden;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        .container {
            width: min(1120px, calc(100% - 40px));
            margin: 0 auto;
        }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 50;
            background: rgba(255, 255, 255, 0.94);
            border-bottom: 1px solid rgba(226, 232, 240, 0.9);
            backdrop-filter: blur(14px);
        }

        .navbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            min-height: 76px;
            padding: 12px 0;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            min-width: max-content;
            color: var(--primary);
            font-size: 1.25rem;
            font-weight: 800;
        }

        .brand-icon,
        .section-icon,
        .feature-icon,
        .role-icon {
            display: grid;
            place-items: center;
            flex: 0 0 auto;
        }

        .brand-icon {
            width: 42px;
            height: 42px;
            color: var(--white);
            background: var(--primary);
            border-radius: 10px;
            box-shadow: 0 10px 20px rgba(37, 99, 235, 0.22);
        }

        .nav-links {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 8px;
            flex: 1;
            flex-wrap: wrap;
        }

        .nav-links a {
            border-radius: var(--radius);
            color: #475569;
            font-size: 0.93rem;
            font-weight: 700;
            padding: 10px 12px;
            transition: background 0.2s ease, color 0.2s ease;
        }

        .nav-links a:hover {
            background: var(--primary-light);
            color: var(--primary);
        }

        .nav-links .login-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            color: var(--white);
            background: var(--primary);
            padding: 10px 16px;
            box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18);
        }

        .nav-links .login-link:hover {
            color: var(--white);
            background: var(--primary-dark);
        }

        .hero {
            position: relative;
            overflow: hidden;
            padding: 72px 0 44px;
            background:
                radial-gradient(circle at 12% 12%, rgba(37, 99, 235, 0.14), transparent 34%),
                linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
        }

        .hero-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
            gap: 32px;
            align-items: center;
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 18px;
            padding: 8px 12px;
            border: 1px solid #bfdbfe;
            border-radius: 999px;
            color: var(--primary-dark);
            background: var(--primary-light);
            font-size: 0.85rem;
            font-weight: 800;
        }

        .school-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 24px 0 0;
        }

        .school-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-height: 36px;
            padding: 8px 12px;
            border: 1px solid #bfdbfe;
            border-radius: 999px;
            color: var(--primary-dark);
            background: rgba(239, 246, 255, 0.86);
            font-size: 0.84rem;
            font-weight: 800;
        }

        .hero h1 {
            max-width: 780px;
            color: var(--text);
            font-size: clamp(2.1rem, 5vw, 4.2rem);
            line-height: 1.06;
            letter-spacing: 0;
            margin-bottom: 18px;
        }

        .hero p {
            max-width: 690px;
            color: var(--muted);
            font-size: 1.05rem;
            line-height: 1.8;
        }

        .hero-actions {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            margin-top: 28px;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            min-height: 46px;
            border-radius: var(--radius);
            font-weight: 800;
            padding: 12px 18px;
            transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
        }

        .btn:hover {
            transform: translateY(-1px);
        }

        .btn-primary {
            color: var(--white);
            background: var(--primary);
            box-shadow: 0 14px 28px rgba(37, 99, 235, 0.22);
        }

        .btn-primary:hover {
            background: var(--primary-dark);
        }

        .btn-outline {
            color: #334155;
            background: var(--white);
            border: 1px solid var(--line);
            box-shadow: var(--shadow-sm);
        }

        .btn-outline:hover {
            color: var(--primary);
            background: var(--primary-light);
        }

        .hero-panel {
            position: relative;
            border: 1px solid rgba(226, 232, 240, 0.9);
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.9);
            box-shadow: var(--shadow-md);
            padding: 24px;
        }

        .school-media {
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: 12px;
            background: #f8fafc;
            margin-bottom: 18px;
        }

        .school-media img,
        .gallery-photo img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .school-media {
            aspect-ratio: 16 / 10;
        }

        .photo-placeholder {
            display: grid;
            place-items: center;
            min-height: 220px;
            padding: 24px;
            text-align: center;
            color: var(--muted);
            background:
                linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(15, 118, 110, 0.08)),
                #f8fafc;
        }

        .photo-placeholder i {
            display: grid;
            place-items: center;
            width: 64px;
            height: 64px;
            margin: 0 auto 14px;
            border-radius: 16px;
            color: var(--primary);
            background: var(--primary-light);
            font-size: 1.7rem;
        }

        .photo-placeholder strong {
            display: block;
            color: var(--text);
            font-size: 1rem;
            margin-bottom: 6px;
        }

        .photo-placeholder span {
            color: var(--muted);
            font-size: 0.88rem;
            line-height: 1.6;
        }

        .hero-panel-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            padding-bottom: 18px;
            border-bottom: 1px solid var(--line);
        }

        .hero-panel-title {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .hero-panel-title i {
            display: grid;
            place-items: center;
            width: 44px;
            height: 44px;
            border-radius: 10px;
            color: var(--primary);
            background: var(--primary-light);
            font-size: 1.15rem;
        }

        .hero-panel-title strong,
        .learning-list strong,
        .role-card h3,
        .feature-card h3,
        .info-card strong {
            color: var(--text);
        }

        .hero-panel-title span,
        .learning-list span,
        .info-card span {
            display: block;
            color: var(--muted);
            font-size: 0.86rem;
            margin-top: 3px;
        }

        .status-pill {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            color: var(--success);
            background: #dcfce7;
            border-radius: 999px;
            font-size: 0.78rem;
            font-weight: 800;
            padding: 7px 10px;
            white-space: nowrap;
        }

        .learning-list {
            display: grid;
            gap: 14px;
            margin-top: 18px;
        }

        .learning-item {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 14px;
            border: 1px solid var(--line);
            border-left: 4px solid var(--primary);
            border-radius: var(--radius);
            background: #f8fafc;
        }

        .learning-item i {
            color: var(--primary);
        }

        .section {
            padding: 70px 0;
        }

        .section-muted {
            background: var(--white);
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
        }

        .section-header {
            max-width: 720px;
            margin-bottom: 28px;
        }

        .section-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--primary);
            font-size: 0.86rem;
            font-weight: 800;
            margin-bottom: 10px;
        }

        .section h2 {
            color: var(--text);
            font-size: clamp(1.65rem, 3vw, 2.35rem);
            line-height: 1.2;
            letter-spacing: 0;
            margin-bottom: 12px;
        }

        .section-header p,
        .profile-copy p,
        .footer-brand p {
            color: var(--muted);
            line-height: 1.8;
        }

        .profile-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
            gap: 24px;
            align-items: start;
        }

        .profile-copy,
        .role-card,
        .feature-card,
        .stat-card,
        .footer-card {
            background: var(--white);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            box-shadow: var(--shadow-sm);
        }

        .profile-copy {
            padding: 28px;
        }

        .profile-list {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 14px;
        }

        .info-card {
            display: flex;
            align-items: center;
            gap: 12px;
            min-height: 86px;
            padding: 16px;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: var(--white);
            box-shadow: var(--shadow-sm);
        }

        .info-card i {
            display: grid;
            place-items: center;
            width: 40px;
            height: 40px;
            border-radius: 10px;
            color: var(--primary);
            background: var(--primary-light);
        }

        .stats-grid,
        .feature-grid,
        .student-grid,
        .facility-grid,
        .quality-grid,
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 16px;
        }

        .stat-card {
            padding: 20px;
        }

        .stat-card strong {
            display: block;
            color: var(--primary);
            font-size: 1.8rem;
            line-height: 1;
            margin-bottom: 8px;
        }

        .stat-card span {
            color: var(--muted);
            font-size: 0.9rem;
            font-weight: 700;
        }

        .student-grid,
        .facility-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .quality-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .gallery-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .gallery-card {
            overflow: hidden;
            background: var(--white);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            box-shadow: var(--shadow-sm);
        }

        .gallery-photo {
            aspect-ratio: 4 / 3;
            background: #f8fafc;
        }

        .gallery-card .photo-placeholder {
            min-height: 100%;
            padding: 18px;
        }

        .gallery-card .photo-placeholder i {
            width: 52px;
            height: 52px;
            border-radius: 12px;
            font-size: 1.35rem;
        }

        .gallery-body {
            padding: 16px;
        }

        .gallery-body strong {
            display: block;
            color: var(--text);
            margin-bottom: 6px;
        }

        .gallery-body span {
            color: var(--muted);
            font-size: 0.88rem;
            line-height: 1.6;
        }

        .student-card,
        .facility-card,
        .quality-card {
            background: var(--white);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            box-shadow: var(--shadow-sm);
            padding: 18px;
        }

        .student-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
        }

        .student-card span,
        .facility-card span,
        .quality-card span {
            color: var(--muted);
            font-size: 0.9rem;
            font-weight: 700;
        }

        .student-card strong {
            color: var(--primary);
            font-size: 1.55rem;
        }

        .facility-card i {
            display: grid;
            place-items: center;
            width: 42px;
            height: 42px;
            border-radius: 10px;
            color: var(--primary);
            background: var(--primary-light);
            margin-bottom: 14px;
        }

        .facility-card strong,
        .quality-card strong {
            display: block;
            color: var(--text);
            font-size: 1.08rem;
            margin-bottom: 6px;
        }

        .quality-card strong {
            color: var(--primary);
            font-size: 1.45rem;
        }

        .quality-card {
            position: relative;
            overflow: hidden;
        }

        .quality-card::after {
            content: "";
            position: absolute;
            left: 18px;
            right: 18px;
            bottom: 14px;
            height: 4px;
            border-radius: 999px;
            background: var(--primary-light);
        }

        .quality-card .quality-line {
            display: block;
            width: var(--value, 70%);
            height: 4px;
            border-radius: 999px;
            background: var(--primary);
            margin-top: 16px;
            position: relative;
            z-index: 1;
        }

        .feature-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .feature-card,
        .role-card {
            padding: 22px;
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
        }

        .feature-card:hover,
        .role-card:hover {
            border-color: #bfdbfe;
            box-shadow: var(--shadow-md);
            transform: translateY(-2px);
        }

        .feature-icon,
        .role-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            color: var(--primary);
            background: var(--primary-light);
            font-size: 1.2rem;
            margin-bottom: 18px;
        }

        .feature-card h3,
        .role-card h3 {
            font-size: 1.05rem;
            margin-bottom: 9px;
        }

        .feature-card p {
            color: var(--muted);
            font-size: 0.93rem;
            line-height: 1.65;
        }

        .role-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 18px;
        }

        .role-card ul {
            display: grid;
            gap: 10px;
            margin-top: 16px;
            list-style: none;
        }

        .role-card li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            color: #475569;
            line-height: 1.5;
        }

        .role-card li i {
            color: var(--success);
            margin-top: 3px;
        }

        .cta-strip {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            padding: 28px;
            border-radius: 12px;
            color: var(--white);
            background: linear-gradient(135deg, #1e40af 0%, #2563eb 62%, #0f766e 100%);
            box-shadow: var(--shadow-md);
        }

        .cta-strip h2 {
            color: var(--white);
            font-size: clamp(1.4rem, 3vw, 2rem);
            margin-bottom: 8px;
        }

        .cta-strip p {
            color: rgba(255, 255, 255, 0.84);
            line-height: 1.7;
        }

        .cta-strip .btn {
            background: var(--white);
            color: var(--primary);
            min-width: 170px;
        }

        .site-footer {
            padding: 56px 0 28px;
            color: #cbd5e1;
            background: #0f172a;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.25fr) minmax(190px, 0.55fr) minmax(260px, 0.75fr);
            gap: 28px;
            align-items: start;
            margin-bottom: 34px;
        }

        .footer-brand .brand {
            color: #60a5fa;
            margin-bottom: 14px;
        }

        .footer-brand .brand-icon {
            background: #2563eb;
        }

        .footer-card {
            padding: 20px;
            color: #cbd5e1;
            background: rgba(255, 255, 255, 0.04);
            border-color: rgba(226, 232, 240, 0.12);
        }

        .footer-card h3 {
            color: var(--white);
            font-size: 1rem;
            margin-bottom: 14px;
        }

        .footer-links,
        .contact-list {
            display: grid;
            gap: 10px;
            list-style: none;
        }

        .footer-links a {
            color: #cbd5e1;
        }

        .footer-links a:hover {
            color: #60a5fa;
        }

        .contact-list li {
            display: flex;
            gap: 10px;
            line-height: 1.6;
        }

        .contact-list i {
            color: #60a5fa;
            margin-top: 4px;
        }

        .footer-bottom {
            padding-top: 22px;
            border-top: 1px solid rgba(226, 232, 240, 0.12);
            color: #94a3b8;
            font-size: 0.9rem;
            text-align: center;
        }

        @media (max-width: 980px) {
            .hero-grid,
            .profile-grid,
            .footer-grid {
                grid-template-columns: 1fr;
            }

            .stats-grid,
            .feature-grid,
            .student-grid,
            .facility-grid,
            .quality-grid,
            .gallery-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .role-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 720px) {
            .container {
                width: min(100% - 28px, 1120px);
            }

            .navbar {
                align-items: flex-start;
                flex-direction: column;
                gap: 12px;
            }

            .nav-links {
                justify-content: flex-start;
                width: 100%;
            }

            .nav-links a {
                padding: 9px 10px;
            }

            .nav-links .login-link {
                width: 100%;
            }

            .hero {
                padding: 46px 0 34px;
            }

            .hero-grid {
                gap: 24px;
            }

            .hero-actions .btn {
                width: 100%;
            }

            .hero-panel {
                padding: 18px;
            }

            .hero-panel-head {
                align-items: flex-start;
                flex-direction: column;
            }

            .section {
                padding: 50px 0;
            }

            .profile-list,
            .stats-grid,
            .feature-grid,
            .student-grid,
            .facility-grid,
            .quality-grid,
            .gallery-grid {
                grid-template-columns: 1fr;
            }

            .profile-copy,
            .feature-card,
            .role-card,
            .student-card,
            .facility-card,
            .quality-card,
            .cta-strip {
                padding: 20px;
            }

            .cta-strip {
                align-items: flex-start;
                flex-direction: column;
            }

            .cta-strip .btn {
                width: 100%;
            }
        }
    </style>
</head>

<body>
    <header class="site-header">
        <div class="container">
            <nav class="navbar" aria-label="Navigasi utama">
                <a class="brand" href="#beranda" aria-label="SIPENA beranda">
                    <span class="brand-icon"><i class="fa-solid fa-graduation-cap"></i></span>
                    <span>SIPENA</span>
                </a>

                <div class="nav-links">
                    <a href="#beranda">Beranda</a>
                    <a href="#profil">Profil Sekolah</a>
                    <a href="#galeri-sekolah">Galeri</a>
                    <a href="#fitur">Fitur</a>
                    <a href="#pengguna">Pengguna</a>
                    <a href="#kontak">Kontak</a>
                    <a class="login-link" href="/login">
                        <i class="fa-solid fa-arrow-right-to-bracket"></i>
                        Login
                    </a>
                </div>
            </nav>
        </div>
    </header>

    <main id="beranda">
        <?php
            // Ganti file ini dengan foto sekolah asli jika sudah tersedia.
            $schoolPhoto = 'img/sekolah/sd-cigugur-tengah-mandiri-2.jpg';
            $schoolPhotoExists = file_exists(public_path($schoolPhoto));
            $schoolGallery = [
                [
                    'title' => 'Gedung Sekolah',
                    'label' => 'Foto Gedung Sekolah',
                    'description' => 'Tampak depan atau area utama sekolah.',
                    'path' => 'img/sekolah/gedung-sekolah.jpg',
                    'icon' => 'fa-school',
                ],
                [
                    'title' => 'Ruang Kelas',
                    'label' => 'Foto Ruang Kelas',
                    'description' => 'Ruang belajar umum tanpa close-up wajah siswa.',
                    'path' => 'img/sekolah/ruang-kelas.jpg',
                    'icon' => 'fa-door-open',
                ],
                [
                    'title' => 'Perpustakaan',
                    'label' => 'Foto Perpustakaan',
                    'description' => 'Fasilitas literasi dan ruang baca sekolah.',
                    'path' => 'img/sekolah/perpustakaan.jpg',
                    'icon' => 'fa-book',
                ],
                [
                    'title' => 'Kegiatan Pembelajaran',
                    'label' => 'Foto Kegiatan Pembelajaran',
                    'description' => 'Dokumentasi kegiatan belajar dengan angle umum.',
                    'path' => 'img/sekolah/kegiatan-pembelajaran.jpg',
                    'icon' => 'fa-chalkboard-user',
                ],
            ];
        ?>

        <section class="hero">
            <div class="container">
                <div class="hero-grid">
                    <div>
                        <div class="eyebrow">
                            <i class="fa-solid fa-school"></i>
                            SIPENA - E Learning SD
                        </div>

                        <h1>SIPENA - E Learning SD</h1>
                        <p>
                            Platform pembelajaran digital untuk SD NEGERI CIGUGUR TENGAH MANDIRI 2 yang membantu
                            kegiatan belajar mengajar menjadi lebih tertata, mudah diakses, dan terintegrasi.
                        </p>

                        <div class="school-badges" aria-label="Identitas singkat sekolah">
                            <span class="school-badge"><i class="fa-solid fa-award"></i> Akreditasi A</span>
                            <span class="school-badge"><i class="fa-solid fa-building-columns"></i> Sekolah Negeri</span>
                            <span class="school-badge"><i class="fa-solid fa-book-open-reader"></i> Kurikulum SD Merdeka</span>
                        </div>

                        <div class="hero-actions">
                            <a class="btn btn-primary" href="/login">
                                <i class="fa-solid fa-arrow-right-to-bracket"></i>
                                Masuk ke Aplikasi
                            </a>
                            <a class="btn btn-outline" href="#fitur">
                                <i class="fa-solid fa-list-check"></i>
                                Lihat Fitur
                            </a>
                        </div>
                    </div>

                    <aside class="hero-panel" aria-label="Ringkasan SIPENA">
                        
                        <div class="school-media">
                            <?php if($schoolPhotoExists): ?>
                                <img src="<?php echo e(asset($schoolPhoto)); ?>" alt="Foto SD NEGERI CIGUGUR TENGAH MANDIRI 2">
                            <?php else: ?>
                                <div class="photo-placeholder" role="img" aria-label="Placeholder foto sekolah">
                                    <div>
                                        <i class="fa-solid fa-school"></i>
                                        <strong>Foto Gedung Sekolah</strong>
                                        <span>Letakkan foto di public/img/sekolah/sd-cigugur-tengah-mandiri-2.jpg</span>
                                    </div>
                                </div>
                            <?php endif; ?>
                        </div>

                        <div class="hero-panel-head">
                            <div class="hero-panel-title">
                                <i class="fa-solid fa-book-open-reader"></i>
                                <div>
                                    <strong>SD NEGERI CIGUGUR TENGAH MANDIRI 2</strong>
                                    <span>NPSN 20224173 - Cimahi Tengah</span>
                                </div>
                            </div>
                            <span class="status-pill">
                                <i class="fa-solid fa-circle-check"></i>
                                Akreditasi A
                            </span>
                        </div>

                        <div class="learning-list">
                            <div class="learning-item">
                                <i class="fa-solid fa-users"></i>
                                <div>
                                    <strong>533 Siswa</strong>
                                    <span>265 siswa laki-laki dan 268 siswa perempuan.</span>
                                </div>
                            </div>
                            <div class="learning-item">
                                <i class="fa-solid fa-chalkboard-user"></i>
                                <div>
                                    <strong>25 Guru</strong>
                                    <span>Mendukung pembelajaran digital berbasis web.</span>
                                </div>
                            </div>
                            <div class="learning-item">
                                <i class="fa-solid fa-school"></i>
                                <div>
                                    <strong>19 Rombongan Belajar</strong>
                                    <span>Didukung 10 ruang kelas dan 1 perpustakaan.</span>
                                </div>
                            </div>
                        </div>
                    </aside>
                </div>
            </div>
        </section>

        <section class="section section-muted" id="galeri-sekolah">
            <div class="container">
                <div class="section-header">
                    <div class="section-kicker">
                        <i class="fa-solid fa-images"></i>
                        Galeri Sekolah
                    </div>
                    <h2>Persiapan foto gedung dan fasilitas sekolah</h2>
                    <p>Area ini disiapkan untuk foto publik sekolah seperti gedung, ruang kelas, perpustakaan, dan kegiatan pembelajaran umum.</p>
                </div>

                <div class="gallery-grid">
                    <?php $__currentLoopData = $schoolGallery; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <?php
                            $galleryPhotoExists = file_exists(public_path($item['path']));
                        ?>
                        <article class="gallery-card">
                            <div class="gallery-photo">
                                
                                <?php if($galleryPhotoExists): ?>
                                    <img src="<?php echo e(asset($item['path'])); ?>" alt="<?php echo e($item['title']); ?> SD NEGERI CIGUGUR TENGAH MANDIRI 2">
                                <?php else: ?>
                                    <div class="photo-placeholder" role="img" aria-label="<?php echo e($item['label']); ?>">
                                        <div>
                                            <i class="fa-solid <?php echo e($item['icon']); ?>"></i>
                                            <strong><?php echo e($item['label']); ?></strong>
                                            <span>Placeholder aman sampai foto asli tersedia.</span>
                                        </div>
                                    </div>
                                <?php endif; ?>
                            </div>
                            <div class="gallery-body">
                                <strong><?php echo e($item['title']); ?></strong>
                                <span><?php echo e($item['description']); ?></span>
                            </div>
                        </article>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
            </div>
        </section>

        <section class="section" id="profil">
            <div class="container">
                <div class="section-header">
                    <div class="section-kicker">
                        <i class="fa-solid fa-building-columns"></i>
                        Profil Sekolah
                    </div>
                    <h2>SD NEGERI CIGUGUR TENGAH MANDIRI 2</h2>
                    <p>Identitas resmi sekolah dan peran SIPENA sebagai pendukung pembelajaran digital.</p>
                </div>

                <div class="profile-grid">
                    <div class="profile-copy">
                        <p>
                            SD NEGERI CIGUGUR TENGAH MANDIRI 2 merupakan sekolah dasar negeri yang berlokasi di
                            Kecamatan Cimahi Tengah, Kota Cimahi, Provinsi Jawa Barat. Melalui SIPENA, sekolah dapat
                            mendukung proses pembelajaran digital bagi admin, guru, dan siswa, mulai dari pengelolaan
                            data akademik, materi, tugas, ujian, nilai, hingga presensi.
                        </p>
                    </div>

                    <div class="profile-list">
                        <div class="info-card">
                            <i class="fa-solid fa-school"></i>
                            <div>
                                <strong>NPSN</strong>
                                <span>20224173</span>
                            </div>
                        </div>
                        <div class="info-card">
                            <i class="fa-solid fa-award"></i>
                            <div>
                                <strong>Akreditasi</strong>
                                <span>A</span>
                            </div>
                        </div>
                        <div class="info-card">
                            <i class="fa-solid fa-building-columns"></i>
                            <div>
                                <strong>Status</strong>
                                <span>Negeri</span>
                            </div>
                        </div>
                        <div class="info-card">
                            <i class="fa-solid fa-graduation-cap"></i>
                            <div>
                                <strong>Bentuk Pendidikan</strong>
                                <span>SD</span>
                            </div>
                        </div>
                        <div class="info-card">
                            <i class="fa-solid fa-book-open-reader"></i>
                            <div>
                                <strong>Kurikulum</strong>
                                <span>Kurikulum SD Merdeka</span>
                            </div>
                        </div>
                        <div class="info-card">
                            <i class="fa-solid fa-clock"></i>
                            <div>
                                <strong>Penyelenggaraan</strong>
                                <span>Sehari Penuh / 5 hari</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="section section-muted" aria-label="Statistik ringkas">
            <div class="container">
                <div class="stats-grid">
                    <div class="stat-card">
                        <strong>25</strong>
                        <span>Guru</span>
                    </div>
                    <div class="stat-card">
                        <strong>533</strong>
                        <span>Siswa</span>
                    </div>
                    <div class="stat-card">
                        <strong>19</strong>
                        <span>Rombongan Belajar</span>
                    </div>
                    <div class="stat-card">
                        <strong>10</strong>
                        <span>Ruang Kelas</span>
                    </div>
                    <div class="stat-card">
                        <strong>1</strong>
                        <span>Perpustakaan</span>
                    </div>
                    <div class="stat-card">
                        <strong>A</strong>
                        <span>Akreditasi</span>
                    </div>
                </div>
            </div>
        </section>

        <section class="section" id="data-siswa">
            <div class="container">
                <div class="section-header">
                    <div class="section-kicker">
                        <i class="fa-solid fa-user-graduate"></i>
                        Data Siswa
                    </div>
                    <h2>Distribusi siswa per tingkat kelas</h2>
                    <p>Jumlah siswa SD NEGERI CIGUGUR TENGAH MANDIRI 2 tersebar pada enam tingkat kelas.</p>
                </div>

                <div class="student-grid">
                    <div class="student-card"><span>Kelas 1</span><strong>107</strong></div>
                    <div class="student-card"><span>Kelas 2</span><strong>67</strong></div>
                    <div class="student-card"><span>Kelas 3</span><strong>86</strong></div>
                    <div class="student-card"><span>Kelas 4</span><strong>103</strong></div>
                    <div class="student-card"><span>Kelas 5</span><strong>72</strong></div>
                    <div class="student-card"><span>Kelas 6</span><strong>98</strong></div>
                </div>
            </div>
        </section>

        <section class="section section-muted" id="kurikulum-fasilitas">
            <div class="container">
                <div class="section-header">
                    <div class="section-kicker">
                        <i class="fa-solid fa-screwdriver-wrench"></i>
                        Kurikulum dan Fasilitas
                    </div>
                    <h2>Dukungan pembelajaran dan sarana sekolah</h2>
                    <p>Informasi ringkas mengenai kurikulum, penyelenggaraan, konektivitas, dan fasilitas utama sekolah.</p>
                </div>

                <div class="facility-grid">
                    <article class="facility-card">
                        <i class="fa-solid fa-book-open-reader"></i>
                        <strong>Kurikulum SD Merdeka</strong>
                        <span>Kurikulum</span>
                    </article>
                    <article class="facility-card">
                        <i class="fa-solid fa-calendar-check"></i>
                        <strong>Sehari Penuh / 5 hari</strong>
                        <span>Penyelenggaraan</span>
                    </article>
                    <article class="facility-card">
                        <i class="fa-solid fa-wifi"></i>
                        <strong>Dedicated</strong>
                        <span>Akses Internet</span>
                    </article>
                    <article class="facility-card">
                        <i class="fa-solid fa-bolt"></i>
                        <strong>PLN 2.200 VA</strong>
                        <span>Sumber dan daya listrik</span>
                    </article>
                    <article class="facility-card">
                        <i class="fa-solid fa-map-location-dot"></i>
                        <strong>1.221 m&sup2;</strong>
                        <span>Luas Tanah</span>
                    </article>
                    <article class="facility-card">
                        <i class="fa-solid fa-book"></i>
                        <strong>1 Perpustakaan</strong>
                        <span>Fasilitas literasi</span>
                    </article>
                    <article class="facility-card">
                        <i class="fa-solid fa-flask"></i>
                        <strong>0 Laboratorium</strong>
                        <span>Laboratorium</span>
                    </article>
                    <article class="facility-card">
                        <i class="fa-solid fa-door-open"></i>
                        <strong>10 Ruang Kelas</strong>
                        <span>Ruang belajar</span>
                    </article>
                </div>
            </div>
        </section>

        <section class="section" id="kualitas">
            <div class="container">
                <div class="section-header">
                    <div class="section-kicker">
                        <i class="fa-solid fa-chart-simple"></i>
                        Kualitas Pembelajaran
                    </div>
                    <h2>Indikator proses pembelajaran</h2>
                    <p>Data ringkas yang menggambarkan rasio belajar dan profil tenaga pendidik sekolah.</p>
                </div>

                <div class="quality-grid">
                    <article class="quality-card">
                        <strong>29</strong>
                        <span>Rasio Siswa Rombel</span>
                        <span class="quality-line" style="--value: 74%"></span>
                    </article>
                    <article class="quality-card">
                        <strong>2,71</strong>
                        <span>Rasio Rombel Ruang Kelas</span>
                        <span class="quality-line" style="--value: 68%"></span>
                    </article>
                    <article class="quality-card">
                        <strong>22</strong>
                        <span>Rasio Siswa Guru</span>
                        <span class="quality-line" style="--value: 72%"></span>
                    </article>
                    <article class="quality-card">
                        <strong>88%</strong>
                        <span>Guru Kualifikasi</span>
                        <span class="quality-line" style="--value: 88%"></span>
                    </article>
                    <article class="quality-card">
                        <strong>92%</strong>
                        <span>Guru Sertifikasi</span>
                        <span class="quality-line" style="--value: 92%"></span>
                    </article>
                    <article class="quality-card">
                        <strong>92%</strong>
                        <span>Guru PNS</span>
                        <span class="quality-line" style="--value: 92%"></span>
                    </article>
                    <article class="quality-card">
                        <strong>70%</strong>
                        <span>Ruang Kelas Layak</span>
                        <span class="quality-line" style="--value: 70%"></span>
                    </article>
                </div>
            </div>
        </section>

        <section class="section" id="fitur">
            <div class="container">
                <div class="section-header">
                    <div class="section-kicker">
                        <i class="fa-solid fa-layer-group"></i>
                        Fitur Utama
                    </div>
                    <h2>Modul pembelajaran yang siap membantu kegiatan sekolah</h2>
                    <p>Fitur disusun untuk kebutuhan administrasi sekolah, pengelolaan kelas, dan aktivitas belajar siswa.</p>
                </div>

                <div class="feature-grid">
                    <article class="feature-card">
                        <div class="feature-icon"><i class="fa-solid fa-users-gear"></i></div>
                        <h3>Manajemen Guru dan Siswa</h3>
                        <p>Admin dapat mengatur data pengguna sesuai role dan kebutuhan akses masing-masing.</p>
                    </article>
                    <article class="feature-card">
                        <div class="feature-icon"><i class="fa-solid fa-calendar-days"></i></div>
                        <h3>Jadwal Pelajaran</h3>
                        <p>Jadwal belajar tersusun rapi agar guru dan siswa mudah mengikuti agenda kelas.</p>
                    </article>
                    <article class="feature-card">
                        <div class="feature-icon"><i class="fa-solid fa-book"></i></div>
                        <h3>Materi Pembelajaran</h3>
                        <p>Guru dapat membagikan materi digital yang dapat diakses siswa dari dashboard.</p>
                    </article>
                    <article class="feature-card">
                        <div class="feature-icon"><i class="fa-solid fa-file-pen"></i></div>
                        <h3>Tugas dan Pengumpulan</h3>
                        <p>Tugas dapat dibuat, dikumpulkan, dan dipantau dengan alur yang lebih terarah.</p>
                    </article>
                    <article class="feature-card">
                        <div class="feature-icon"><i class="fa-solid fa-clipboard-question"></i></div>
                        <h3>Ujian Online</h3>
                        <p>Guru dapat mengelola soal dan siswa dapat mengikuti ujian secara digital.</p>
                    </article>
                    <article class="feature-card">
                        <div class="feature-icon"><i class="fa-solid fa-chart-line"></i></div>
                        <h3>Nilai dan Presensi</h3>
                        <p>Nilai serta presensi lebih mudah dicatat, dilihat, dan dipantau dalam sistem.</p>
                    </article>
                </div>
            </div>
        </section>

        <section class="section section-muted" id="pengguna">
            <div class="container">
                <div class="section-header">
                    <div class="section-kicker">
                        <i class="fa-solid fa-id-card-clip"></i>
                        Pengguna
                    </div>
                    <h2>Akses sesuai peran di sekolah</h2>
                    <p>SIPENA memisahkan menu berdasarkan kebutuhan admin, guru, dan siswa agar penggunaan tetap jelas.</p>
                </div>

                <div class="role-grid">
                    <article class="role-card">
                        <div class="role-icon"><i class="fa-solid fa-user-shield"></i></div>
                        <h3>Admin</h3>
                        <ul>
                            <li><i class="fa-solid fa-check"></i> Kelola user</li>
                            <li><i class="fa-solid fa-check"></i> Kelola kelas</li>
                            <li><i class="fa-solid fa-check"></i> Kelola mata pelajaran</li>
                            <li><i class="fa-solid fa-check"></i> Kelola jadwal</li>
                            <li><i class="fa-solid fa-check"></i> Kelola game edukasi</li>
                        </ul>
                    </article>

                    <article class="role-card">
                        <div class="role-icon"><i class="fa-solid fa-chalkboard-user"></i></div>
                        <h3>Guru</h3>
                        <ul>
                            <li><i class="fa-solid fa-check"></i> Upload materi</li>
                            <li><i class="fa-solid fa-check"></i> Buat tugas</li>
                            <li><i class="fa-solid fa-check"></i> Kelola soal dan ujian</li>
                            <li><i class="fa-solid fa-check"></i> Input nilai</li>
                            <li><i class="fa-solid fa-check"></i> Input absensi</li>
                        </ul>
                    </article>

                    <article class="role-card">
                        <div class="role-icon"><i class="fa-solid fa-user-graduate"></i></div>
                        <h3>Siswa</h3>
                        <ul>
                            <li><i class="fa-solid fa-check"></i> Akses materi</li>
                            <li><i class="fa-solid fa-check"></i> Kerjakan tugas</li>
                            <li><i class="fa-solid fa-check"></i> Ikuti ujian</li>
                            <li><i class="fa-solid fa-check"></i> Lihat nilai</li>
                            <li><i class="fa-solid fa-check"></i> Lihat presensi</li>
                        </ul>
                    </article>
                </div>
            </div>
        </section>

        <section class="section">
            <div class="container">
                <div class="cta-strip">
                    <div>
                        <h2>Siap masuk ke dashboard SIPENA?</h2>
                        <p>Gunakan akun sekolah untuk mengakses halaman admin, guru, atau siswa sesuai hak akses.</p>
                    </div>
                    <a class="btn" href="/login">
                        <i class="fa-solid fa-arrow-right-to-bracket"></i>
                        Login
                    </a>
                </div>
            </div>
        </section>
    </main>

    <footer class="site-footer" id="kontak">
        <div class="container">
            <div class="footer-grid">
                <div class="footer-brand">
                    <a class="brand" href="#beranda">
                        <span class="brand-icon"><i class="fa-solid fa-graduation-cap"></i></span>
                        <span>SD NEGERI CIGUGUR TENGAH MANDIRI 2</span>
                    </a>
                    <p>
                        SIPENA - E Learning SD membantu pengelolaan aktivitas belajar, materi, tugas, ujian, nilai,
                        dan presensi di lingkungan SD NEGERI CIGUGUR TENGAH MANDIRI 2.
                    </p>
                </div>

                <div class="footer-card">
                    <h3>Menu Cepat</h3>
                    <ul class="footer-links">
                        <li><a href="#profil">Profil Sekolah</a></li>
                        <li><a href="#galeri-sekolah">Galeri Sekolah</a></li>
                        <li><a href="#data-siswa">Data Siswa</a></li>
                        <li><a href="#kurikulum-fasilitas">Kurikulum dan Fasilitas</a></li>
                        <li><a href="#fitur">Fitur</a></li>
                        <li><a href="#pengguna">Pengguna</a></li>
                        <li><a href="/login">Login</a></li>
                    </ul>
                </div>

                <div class="footer-card">
                    <h3>Kontak Sekolah</h3>
                    <ul class="contact-list">
                        <li>
                            <i class="fa-solid fa-envelope"></i>
                            <a href="mailto:Sekolahctm2@gmail.com">Sekolahctm2@gmail.com</a>
                        </li>
                        <li>
                            <i class="fa-solid fa-phone"></i>
                            <a href="tel:0226648397">0226648397</a>
                        </li>
                        <li>
                            <i class="fa-solid fa-location-dot"></i>
                            <span>Jl. Jenderal H. Amir Machmud Komplek BRSPC No.26 RT.001 RW.012, Kec. Cimahi Tengah, Kota Cimahi, Prov. Jawa Barat</span>
                        </li>
                        <li>
                            <i class="fa-solid fa-map-pin"></i>
                            <span>-6.8888, 107.5529</span>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="footer-bottom">
                &copy; <?php echo e(date('Y')); ?> SIPENA - E Learning SD. SD NEGERI CIGUGUR TENGAH MANDIRI 2.
            </div>
        </div>
    </footer>
</body>

</html>
<?php /**PATH C:\xampp\htdocs\elearningsd-allFitur-main\resources\views/welcome.blade.php ENDPATH**/ ?>