<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BKCare - SMAN 1 Bantaran</title>
    <!-- Tailwind CSS via CDN untuk tampilan yang bersih dan elegan -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome untuk ikon -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <!-- Kustomisasi sedikit untuk nuansa profesional -->
    <style>
        body {
            font-family: 'Inter', sans-serif;
        }
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            transition: all 0.3s ease;
        }
        /* Modal styles */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            backdrop-filter: blur(5px);
        }
        .modal-content {
            background: white;
            border-radius: 1rem;
            max-width: 900px;
            width: 90%;
            max-height: 85vh;
            overflow-y: auto;
            animation: modalSlideIn 0.3s ease;
        }
        /* Style khusus untuk modal CV */
        .modal-content.cv-modal {
            max-width: 1000px;
            padding: 0;
        }
        .modal-content.cv-modal .modal-body {
            padding: 0;
        }
        .modal-content.cv-modal .modal-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-bottom: none;
            border-radius: 1rem 1rem 0 0;
        }
        .modal-content.cv-modal .modal-header h3 {
            color: white;
        }
        .modal-content.cv-modal .close-modal {
            color: white;
        }
        .modal-content.cv-modal .close-modal:hover {
            color: #f0f0f0;
        }
        @keyframes modalSlideIn {
            from {
                transform: translateY(-50px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
        .modal-header {
            padding: 1.5rem;
            border-bottom: 1px solid #e5e7eb;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .modal-body {
            padding: 1.5rem;
        }
        .modal-footer {
            padding: 1.5rem;
            border-top: 1px solid #e5e7eb;
            display: flex;
            justify-content: flex-end;
        }
        .close-modal {
            cursor: pointer;
            font-size: 1.5rem;
            color: #6b7280;
            transition: color 0.2s;
        }
        .close-modal:hover {
            color: #374151;
        }
        /* Style untuk iframe CV */
        .cv-iframe {
            width: 100%;
            height: 70vh;
            border: none;
            border-radius: 0;
        }
        /* Style untuk tombol aksi CV */
        .cv-actions {
            display: flex;
            gap: 1rem;
            justify-content: flex-end;
            margin-top: 1rem;
            padding: 0 1rem 1rem 1rem;
        }
        .btn-cv {
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            font-weight: 500;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }
        .btn-cv-primary {
            background-color: #7c3aed;
            color: white;
        }
        .btn-cv-primary:hover {
            background-color: #6d28d9;
        }
        .btn-cv-secondary {
            background-color: #f3f4f6;
            color: #374151;
        }
        .btn-cv-secondary:hover {
            background-color: #e5e7eb;
        }
    </style>
    <!-- Inter Font -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body class="bg-gray-50 text-gray-800">

    <!-- Navbar -->
    <nav class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-6 py-3">
            <div class="flex justify-between items-center">
                <div class="flex items-center space-x-2">
                    <i class="fas fa-heart text-2xl text-purple-600"></i>
                    <span class="font-semibold text-xl tracking-tight">BKCare</span>
                    <span class="text-sm text-gray-500 hidden sm:inline">| SMAN 1 Bantaran</span>
                </div>
                <div class="hidden md:flex space-x-8 text-sm font-medium">
                    <a href="index.php" class="hover:text-purple-600 transition">Beranda</a>
                    <a href="#layanan" class="hover:text-purple-600 transition">Layanan</a>
                    <a href="#tentang" class="hover:text-purple-600 transition">Konselor</a>
                    <a href="#kontak" class="hover:text-purple-600 transition">Kontak</a>
                </div>
                <div>
                    <a class="bg-purple-600 text-white px-4 py-2 rounded-full hover:bg-purple-700 transition inline-flex items-center" href="auth/login.php">
                        <i class="fas fa-sign-in-alt mr-2"></i>Login
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="gradient-bg text-white">
        <div class="container mx-auto px-6 py-20 md:py-28">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-4">Bimbingan Konseling <br>Care for Your Future</h1>
                    <p class="text-lg opacity-90 mb-8 max-w-lg">Tempat yang aman dan nyaman untuk berkonsultasi mengenai akademik, karir, dan pribadi. Bersama BKCare, raih masa depanmu dengan percaya diri.</p>
                    <div class="flex space-x-4">
                        <a href="#buat-janji" class="bg-white text-purple-700 px-6 py-3 rounded-full font-semibold hover:bg-gray-100 transition shadow-lg flex items-center">
                            <i class="fas fa-comments mr-2"></i>Konsultasi Sekarang
                        </a>
                        <a href="#layanan" class="border-2 border-white text-white px-6 py-3 rounded-full font-semibold hover:bg-white hover:text-purple-700 transition flex items-center">
                            <i class="fas fa-info-circle mr-2"></i>Pelajari
                        </a>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <!-- Ilustrasi atau gambar, bisa diganti dengan icon atau vector -->
                    <div class="bg-white/20 backdrop-blur-lg p-8 rounded-2xl inline-block">
                        <i class="fas fa-graduation-cap text-8xl text-white/80"></i>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Layanan Unggulan -->
    <section id="layanan" class="py-16 bg-white">
        <div class="container mx-auto px-6">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-gray-800 mb-3">Layanan BKCare</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">Kami hadir untuk mendukung perkembangan pribadi, sosial, belajar, dan karirmu.</p>
            </div>
            <div class="grid md:grid-cols-3 gap-8">
                <!-- Layanan 1 - Konseling Akademik -->
                <div class="bg-gray-50 p-8 rounded-xl shadow-sm card-hover transition border border-gray-100">
                    <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
                        <i class="fas fa-user-graduate text-2xl text-purple-600"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">Konseling Akademik</h3>
                    <p class="text-gray-600 leading-relaxed">Membantu mengatasi kesulitan belajar, memilih jurusan, dan strategi menghadapi ujian.</p>
                    <a href="#" onclick="openModal('akademik'); return false;" class="mt-4 inline-block text-purple-600 hover:text-purple-800 font-medium">Selengkapnya <i class="fas fa-arrow-right ml-1"></i></a>
                </div>
                <!-- Layanan 2 - Perencanaan Karir -->
                <div class="bg-gray-50 p-8 rounded-xl shadow-sm card-hover transition border border-gray-100">
                    <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
                        <i class="fas fa-briefcase text-2xl text-purple-600"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">Perencanaan Karir</h3>
                    <p class="text-gray-600 leading-relaxed">Eksplorasi potensi diri, informasi studi lanjut, dan persiapan dunia kerja.</p>
                    <a href="#" onclick="openModal('karir'); return false;" class="mt-4 inline-block text-purple-600 hover:text-purple-800 font-medium">Selengkapnya <i class="fas fa-arrow-right ml-1"></i></a>
                </div>
                <!-- Layanan 3 - Konseling Pribadi -->
                <div class="bg-gray-50 p-8 rounded-xl shadow-sm card-hover transition border border-gray-100">
                    <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
                        <i class="fas fa-heart text-2xl text-purple-600"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">Konseling Pribadi</h3>
                    <p class="text-gray-600 leading-relaxed">Ruang aman untuk berbagi masalah pribadi, sosial, dan pengembangan diri.</p>
                    <a href="#" onclick="openModal('pribadi'); return false;" class="mt-4 inline-block text-purple-600 hover:text-purple-800 font-medium">Selengkapnya <i class="fas fa-arrow-right ml-1"></i></a>
                </div>
            </div>
        </div>
    </section>

    <!-- Tentang BKCare -->
    <section id="tentang" class="py-16 bg-gray-50">
        <div class="container mx-auto px-6">
            <div class="flex flex-col md:flex-row items-center gap-12">
                <div class="md:w-1/2">
                    <img src="assets/img/konseling.png" 
                         alt="Suasana konseling" 
                         class="rounded-2xl shadow-xl object-cover w-full h-96"
                         onerror="this.src='https://via.placeholder.com/600x400?text=Konseling+Image'">
                </div>
                <div class="md:w-1/2">
                    <span class="text-purple-600 font-semibold text-sm uppercase tracking-wider">Tentang Kami</span>
                    <h2 class="text-3xl font-bold text-gray-800 mt-2 mb-4">BKCare: Partner Terbaikmu di Sekolah</h2>
                    <p class="text-gray-600 mb-6 leading-relaxed">BKCare adalah unit bimbingan konseling di SMAN 1 Bantaran yang berkomitmen untuk menciptakan lingkungan sekolah yang sehat secara mental dan emosional. Dengan konselor profesional dan pendekatan personal, kami siap mendampingi setiap langkahmu.</p>
                    <div class="space-y-3">
                        <div class="flex items-center">
                            <i class="fas fa-check-circle text-purple-600 mr-3"></i>
                            <span>Konselor berpengalaman dan tersertifikasi</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-check-circle text-purple-600 mr-3"></i>
                            <span>Layanan gratis untuk seluruh siswa</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-check-circle text-purple-600 mr-3"></i>
                            <span>Privasi dan kerahasiaan terjamin</span>
                        </div>
                    </div>
                    <!-- Tombol Kenali Konselor Kami - sekarang membuka modal CV -->
                    <a href="javascript:void(0)" onclick="openCVModal()" class="mt-8 bg-purple-600 text-white px-6 py-3 rounded-full font-medium hover:bg-purple-700 transition shadow-md inline-flex items-center">
                        Kenali Konselor Kami <i class="fas fa-arrow-right ml-2"></i>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA / Janji Temu -->
    <section id="buat-janji" class="gradient-bg text-white py-16">
        <div class="container mx-auto px-6 text-center">
            <h2 class="text-3xl font-bold mb-4">Siap untuk berkonsultasi?</h2>
            <p class="text-xl opacity-90 mb-8 max-w-2xl mx-auto">Jangan ragu untuk cerita. Kami siap mendengarkan dan membantumu.</p>
            <div class="flex flex-col sm:flex-row justify-center gap-4">
                <a href="#form-janji-temu" class="bg-white text-purple-700 px-8 py-4 rounded-full font-semibold hover:bg-gray-100 transition shadow-lg text-lg inline-flex items-center justify-center">
                    <i class="fas fa-calendar-alt mr-2"></i>Buat Janji Temu
                </a>
                <a href="https://wa.me/62335123456?text=Halo%20BKCare%2C%20saya%20ingin%20konsultasi" target="_blank" class="border-2 border-white text-white px-8 py-4 rounded-full font-semibold hover:bg-white hover:text-purple-700 transition text-lg inline-flex items-center justify-center">
                    <i class="fab fa-whatsapp mr-2"></i>Chat Via WhatsApp
                </a>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer id="kontak" class="bg-gray-800 text-gray-300 py-12">
        <div class="container mx-auto px-6">
            <div class="grid md:grid-cols-4 gap-8">
                <div>
                    <div class="flex items-center space-x-2 text-white mb-4">
                        <i class="fas fa-heart text-2xl text-purple-400"></i>
                        <span class="font-semibold text-xl">BKCare</span>
                    </div>
                    <p class="text-sm">Mendampingi siswa menuju masa depan gemilang dengan layanan konseling profesional dan humanis.</p>
                </div>
                <div>
                    <h5 class="font-semibold text-white mb-4">Layanan</h5>
                    <ul class="space-y-2 text-sm">
                        <li><a href="#" onclick="openModal('akademik'); return false;" class="hover:text-purple-400 transition">Konseling Akademik</a></li>
                        <li><a href="#" onclick="openModal('karir'); return false;" class="hover:text-purple-400 transition">Konseling Karir</a></li>
                        <li><a href="#" onclick="openModal('pribadi'); return false;" class="hover:text-purple-400 transition">Konseling Pribadi</a></li>
                        <li><a href="#" onclick="openModal('minat-bakat'); return false;" class="hover:text-purple-400 transition">Tes Minat Bakat</a></li>
                    </ul>
                </div>
                <div>
                    <h5 class="font-semibold text-white mb-4">Kontak</h5>
                    <ul class="space-y-2 text-sm">
                        <li><i class="fas fa-map-marker-alt mr-2 w-4"></i>Jl. Raya Bantaran No. 1, Probolinggo</li>
                        <li><i class="fas fa-phone mr-2 w-4"></i><a href="tel:0335123456" class="hover:text-purple-400 transition">(0335) 123456</a></li>
                        <li><i class="fas fa-envelope mr-2 w-4"></i><a href="mailto:bkcare@sman1bantaran.sch.id" class="hover:text-purple-400 transition">bkcare@sman1bantaran.sch.id</a></li>
                    </ul>
                </div>
                <div>
                    <h5 class="font-semibold text-white mb-4">Ikuti Kami</h5>
                    <div class="flex space-x-4">
                        <a href="https://instagram.com/bkcare_sman1bantaran" target="_blank" class="bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-purple-600 transition"><i class="fab fa-instagram"></i></a>
                        <a href="https://facebook.com/bkcare.sman1bantaran" target="_blank" class="bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-purple-600 transition"><i class="fab fa-facebook-f"></i></a>
                        <a href="https://youtube.com/@bkcareofficial" target="_blank" class="bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-purple-600 transition"><i class="fab fa-youtube"></i></a>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-700 mt-8 pt-8 text-sm text-center">
                &copy; <?php echo date('Y'); ?> BKCare SMAN 1 Bantaran. All rights reserved. 
            </div>
        </div>
    </footer>

    <!-- Modal Overlay -->
    <div id="modalOverlay" class="modal-overlay" onclick="closeModal(event)">
        <!-- Modal Content -->
        <div id="modalContent" class="modal-content" onclick="event.stopPropagation()">
            <div class="modal-header">
                <h3 id="modalTitle" class="text-2xl font-bold text-gray-800"></h3>
                <span class="close-modal" onclick="closeModal()">&times;</span>
            </div>
            <div id="modalBody" class="modal-body text-gray-600 leading-relaxed">
                <!-- Content will be inserted here dynamically -->
            </div>
            <div class="modal-footer">
                <button onclick="closeModal()" class="bg-purple-600 text-white px-6 py-2 rounded-full hover:bg-purple-700 transition">Tutup</button>
            </div>
        </div>
    </div>

    <script>
        // Modal functionality
        const modalOverlay = document.getElementById('modalOverlay');
        const modalContent = document.getElementById('modalContent');
        const modalTitle = document.getElementById('modalTitle');
        const modalBody = document.getElementById('modalBody');

        // Modal content for each service
        const modalContents = {
            'akademik': {
                title: 'Konseling Akademik',
                content: `
                    <div class="space-y-4">
                        <div class="flex items-start gap-3">
                            <i class="fas fa-check-circle text-green-500 mt-1"></i>
                            <div>
                                <h4 class="font-semibold text-gray-800">Bantuan Belajar Individual</h4>
                                <p>Sesi private dengan konselor untuk mengatasi kesulitan belajar spesifik, seperti kesulitan memahami materi tertentu, gangguan konsentrasi, atau kecemasan menghadapi ujian.</p>
                            </div>
                        </div>
                        <div class="flex items-start gap-3">
                            <i class="fas fa-check-circle text-green-500 mt-1"></i>
                            <div>
                                <h4 class="font-semibold text-gray-800">Pemilihan Jurusan</h4>
                                <p>Bimbingan dalam memilih jurusan yang sesuai dengan minat, bakat, dan nilai akademik untuk persiapan melanjutkan ke perguruan tinggi.</p>
                            </div>
                        </div>
                        <div class="flex items-start gap-3">
                            <i class="fas fa-check-circle text-green-500 mt-1"></i>
                            <div>
                                <h4 class="font-semibold text-gray-800">Strategi Belajar Efektif</h4>
                                <p>Pelajari teknik-teknik belajar yang terbukti efektif, seperti metode pomodoro, mind mapping, dan active recall untuk meningkatkan pemahaman dan retensi materi.</p>
                            </div>
                        </div>
                        <div class="flex items-start gap-3">
                            <i class="fas fa-check-circle text-green-500 mt-1"></i>
                            <div>
                                <h4 class="font-semibold text-gray-800">Manajemen Waktu</h4>
                                <p>Bantu siswa mengatur waktu antara belajar, kegiatan ekstrakurikuler, dan istirahat untuk mencapai keseimbangan yang optimal.</p>
                            </div>
                        </div>
                        <div class="mt-6 p-4 bg-purple-50 rounded-lg">
                            <p class="text-purple-700 font-medium">✨ Manfaat: Meningkatkan prestasi akademik, mengurangi stres belajar, dan mempersiapkan masa depan pendidikan dengan lebih matang.</p>
                        </div>
                    </div>
                `
            },
            'karir': {
                title: 'Perencanaan Karir',
                content: `
                    <div class="space-y-4">
                        <div class="flex items-start gap-3">
                            <i class="fas fa-check-circle text-green-500 mt-1"></i>
                            <div>
                                <h4 class="font-semibold text-gray-800">Tes Minat dan Bakat</h4>
                                <p>Ikuti serangkaian tes psikologi yang dirancang khusus untuk mengidentifikasi potensi, minat, dan bakat terpendam siswa.</p>
                            </div>
                        </div>
                        <div class="flex items-start gap-3">
                            <i class="fas fa-check-circle text-green-500 mt-1"></i>
                            <div>
                                <h4 class="font-semibold text-gray-800">Eksplorasi Karir</h4>
                                <p>Kenali berbagai pilihan karir, persyaratan pendidikan, prospek kerja, dan kisaran gaji untuk membantu membuat keputusan yang tepat.</p>
                            </div>
                        </div>
                        <div class="flex items-start gap-3">
                            <i class="fas fa-check-circle text-green-500 mt-1"></i>
                            <div>
                                <h4 class="font-semibold text-gray-800">Informasi Studi Lanjut</h4>
                                <p>Dapatkan informasi lengkap tentang perguruan tinggi, jurusan, beasiswa, dan jalur masuk ke berbagai universitas ternama di Indonesia dan luar negeri.</p>
                            </div>
                        </div>
                        <div class="flex items-start gap-3">
                            <i class="fas fa-check-circle text-green-500 mt-1"></i>
                            <div>
                                <h4 class="font-semibold text-gray-800">Persiapan Dunia Kerja</h4>
                                <p>Pelajari cara membuat CV, menghadapi wawancara kerja, dan membangun personal branding untuk memasuki dunia profesional.</p>
                            </div>
                        </div>
                        <div class="mt-6 p-4 bg-purple-50 rounded-lg">
                            <p class="text-purple-700 font-medium">✨ Manfaat: Membantu siswa membuat keputusan karir yang tepat, mengurangi kebingungan dalam memilih masa depan, dan meningkatkan kesiapan menghadapi dunia kerja.</p>
                        </div>
                    </div>
                `
            },
            'pribadi': {
                title: 'Konseling Pribadi',
                content: `
                    <div class="space-y-4">
                        <div class="flex items-start gap-3">
                            <i class="fas fa-check-circle text-green-500 mt-1"></i>
                            <div>
                                <h4 class="font-semibold text-gray-800">Konseling Individual</h4>
                                <p>Sesi private yang aman dan rahasia untuk membahas masalah pribadi seperti kecemasan, depresi, masalah keluarga, atau trauma.</p>
                            </div>
                        </div>
                        <div class="flex items-start gap-3">
                            <i class="fas fa-check-circle text-green-500 mt-1"></i>
                            <div>
                                <h4 class="font-semibold text-gray-800">Pengembangan Diri</h4>
                                <p>Bantu siswa mengenali potensi diri, membangun kepercayaan diri, dan mengembangkan keterampilan sosial yang positif.</p>
                            </div>
                        </div>
                        <div class="flex items-start gap-3">
                            <i class="fas fa-check-circle text-green-500 mt-1"></i>
                            <div>
                                <h4 class="font-semibold text-gray-800">Manajemen Emosi</h4>
                                <p>Pelajari cara mengenali, memahami, dan mengelola emosi dengan sehat untuk menghadapi berbagai situasi dalam kehidupan sehari-hari.</p>
                            </div>
                        </div>
                        <div class="flex items-start gap-3">
                            <i class="fas fa-check-circle text-green-500 mt-1"></i>
                            <div>
                                <h4 class="font-semibold text-gray-800">Keterampilan Sosial</h4>
                                <p>Latih kemampuan berkomunikasi, berempati, dan membangun hubungan yang sehat dengan teman sebaya, guru, dan keluarga.</p>
                            </div>
                        </div>
                        <div class="mt-6 p-4 bg-purple-50 rounded-lg">
                            <p class="text-purple-700 font-medium">✨ Manfaat: Meningkatkan kesehatan mental, membangun resiliensi, dan membantu siswa tumbuh menjadi pribadi yang lebih kuat dan percaya diri.</p>
                        </div>
                    </div>
                `
            },
            'minat-bakat': {
                title: 'Tes Minat dan Bakat',
                content: `
                    <div class="space-y-4">
                        <div class="flex items-start gap-3">
                            <i class="fas fa-check-circle text-green-500 mt-1"></i>
                            <div>
                                <h4 class="font-semibold text-gray-800">Tes RIASEC (Holland Code)</h4>
                                <p>Identifikasi tipe kepribadian karir berdasarkan teori Holland untuk menemukan bidang pekerjaan yang paling sesuai.</p>
                            </div>
                        </div>
                        <div class="flex items-start gap-3">
                            <i class="fas fa-check-circle text-green-500 mt-1"></i>
                            <div>
                                <h4 class="font-semibold text-gray-800">Tes Multiple Intelligence</h4>
                                <p>Kenali kecerdasan majemuk yang dominan pada diri siswa berdasarkan teori Howard Gardner.</p>
                            </div>
                        </div>
                        <div class="flex items-start gap-3">
                            <i class="fas fa-check-circle text-green-500 mt-1"></i>
                            <div>
                                <h4 class="font-semibold text-gray-800">Tes Minat dan Kepribadian</h4>
                                <p>Serangkaian tes psikologi untuk memetakan minat, bakat, dan kepribadian secara komprehensif.</p>
                            </div>
                        </div>
                        <div class="flex items-start gap-3">
                            <i class="fas fa-check-circle text-green-500 mt-1"></i>
                            <div>
                                <h4 class="font-semibold text-gray-800">Interpretasi Hasil</h4>
                                <p>Sesi konseling untuk membahas hasil tes dan rekomendasi langkah selanjutnya untuk pengembangan potensi.</p>
                            </div>
                        </div>
                        <div class="mt-6 p-4 bg-purple-50 rounded-lg">
                            <p class="text-purple-700 font-medium">✨ Manfaat: Memahami potensi diri secara objektif, membuat keputusan pendidikan dan karir yang lebih tepat, dan mengoptimalkan pengembangan bakat.</p>
                        </div>
                    </div>
                `
            }
        };

        // Fungsi untuk membuka modal layanan biasa
        function openModal(type) {
            const content = modalContents[type];
            if (content) {
                // Reset modal ke mode biasa
                modalContent.classList.remove('cv-modal');
                modalTitle.textContent = content.title;
                modalBody.innerHTML = content.content;
                // Pastikan footer tombol "Tutup" muncul kembali
                const existingFooter = modalContent.querySelector('.modal-footer');
                if (!existingFooter) {
                    const footer = document.createElement('div');
                    footer.className = 'modal-footer';
                    footer.innerHTML = '<button onclick="closeModal()" class="bg-purple-600 text-white px-6 py-2 rounded-full hover:bg-purple-700 transition">Tutup</button>';
                    modalContent.appendChild(footer);
                } else {
                    existingFooter.style.display = 'flex';
                }
                modalOverlay.style.display = 'flex';
                document.body.style.overflow = 'hidden';
            }
        }

        // Fungsi untuk membuka modal CV (menampilkan cv.html dalam iframe)
        function openCVModal() {
            // Set modal ke mode CV
            modalContent.classList.add('cv-modal');
            modalTitle.textContent = 'Curriculum Vitae - Mumai Hayi Wulandari S.Pd.';
            
            // Buat iframe untuk menampilkan cv.html
            modalBody.innerHTML = `
                <iframe src="cv.html" class="cv-iframe" title="Curriculum Vitae Mumai Hayi Wulandari S.Pd."></iframe>
                <div class="cv-actions">
                    <a href="cv.html" target="_blank" class="btn-cv btn-cv-secondary">
                        <i class="fas fa-external-link-alt"></i> Buka di Tab Baru
                    </a>
                    <button onclick="window.print();" class="btn-cv btn-cv-secondary">
                        <i class="fas fa-print"></i> Cetak
                    </button>
                    <button onclick="closeModal()" class="btn-cv btn-cv-primary">
                        <i class="fas fa-times"></i> Tutup
                    </button>
                </div>
            `;
            
            // Sembunyikan footer default
            const footer = modalContent.querySelector('.modal-footer');
            if (footer) {
                footer.style.display = 'none';
            }
            
            modalOverlay.style.display = 'flex';
            document.body.style.overflow = 'hidden';
        }

        function closeModal(event) {
            if (event && event.target !== modalOverlay && event.target !== event.currentTarget) {
                // Jika klik pada elemen selain overlay, jangan tutup
                if (!event.target.classList.contains('close-modal') && 
                    !event.target.classList.contains('btn-cv-primary') &&
                    event.target.tagName !== 'BUTTON') {
                    return;
                }
            }
            modalOverlay.style.display = 'none';
            document.body.style.overflow = 'auto';
            
            // Reset modal ke mode biasa untuk penggunaan berikutnya
            modalContent.classList.remove('cv-modal');
            const footer = modalContent.querySelector('.modal-footer');
            if (footer) {
                footer.style.display = 'flex';
            }
        }

        // Close modal with Escape key
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape' && modalOverlay.style.display === 'flex') {
                closeModal();
            }
        });

        // Fungsi untuk print (untuk tombol cetak di modal CV)
        window.print = function() {
            const iframe = document.querySelector('.cv-iframe');
            if (iframe) {
                try {
                    iframe.contentWindow.print();
                } catch(e) {
                    // Fallback: buka di tab baru lalu print
                    window.open('cv.html', '_blank');
                }
            } else {
                window.print();
            }
        };
    </script>

</body>
</html>