<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Request & Kontak - Pena Ilmu</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <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&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Inter', sans-serif; }
    </style>
</head>
<body class="bg-[#f0f4f8] text-gray-800">

    <header class="bg-white border-b border-gray-200 sticky top-0 z-50 shadow-sm">
        <div class="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
            <!-- Logo -->
            <div class="flex items-center gap-2">
                <div class="text-[#0284c7] text-2xl"><img src="<?= base_url('asset/image/logo.png')?>" width="50px" alt="Logo"></div>
                <span class="text-xl font-bold text-[#006699] tracking-wider">PENA ILMU</span>
            </div>
            <!-- Menu Navigasi -->
             <?php $current = uri_string(); ?>
            <nav class="hidden md:flex items-center gap-1 text-xs font-semibold text-gray-600">
                <a href="<?= base_url() ?>"  
                     class="<?= ($current == '') 
                    ? 'bg-[#0099b8] text-white px-4 py-2 rounded font-bold'
                    : 'px-3 py-2 hover:text-[#0099b8] transition' ?>">BERANDA
                </a>

                <a href="<?= base_url('dokumenfile?type=word') ?>" 
                    class="<?= str_contains($current,'dokumenfile')
                    ? 'bg-[#0099b8] text-white px-4 py-2 rounded font-bold'
                    : 'px-3 py-2 hover:text-[#0099b8] transition' ?>">FORMAT DOKUMEN
                </a>
                
                <a href="<?= base_url('tutorial?mode=tutorial')?>" 
                     class="<?= str_contains($current,'tutorial')
                    ? 'bg-[#0099b8] text-white px-4 py-2 rounded font-bold'
                    : 'px-3 py-2 hover:text-[#0099b8] transition' ?>">PANDUAN & TUTORIAL
                </a>
                <a href="<?= base_url('kontak')?>" 
                    class="<?= str_contains($current,'kontak')
                    ? 'bg-[#0099b8] text-white px-4 py-2 rounded font-bold'
                    : 'px-3 py-2 hover:text-[#0099b8] transition' ?>">REQUEST & KONTAK</a>
            </nav>
        </div>
    </header>

    <section class="bg-gradient-to-r from-[#005580] via-[#0088aa] to-[#00aa99] text-white overflow-hidden relative">
        <div class="max-w-7xl mx-auto px-6 py-12 md:py-16 flex flex-col md:flex-row items-center justify-between gap-8">
            <div class="w-full md:w-3/5 z-10 text-left">
                <p class="text-xs text-blue-100 uppercase tracking-widest font-medium mb-1">Hubungi Kami</p>
                <h1 class="text-2xl md:text-3xl font-bold leading-tight tracking-wide uppercase">
                    Layanan Hubung & Request <br> Template Dokumen Administrasi
                </h1>
                <p class="text-xs md:text-sm text-blue-50/90 mt-2 max-w-xl font-medium leading-relaxed">
                    Punya masukan, pertanyaan, atau butuh format file spesifik yang belum tersedia di pustaka kami? Ajukan langsung melalui formulir di bawah ini.
                </p>
            </div>
            <div class="w-full md:w-2/5 flex justify-end">
                <div class="w-full max-w-sm h-48 bg-white/10 backdrop-blur-sm rounded-xl border border-white/10 flex items-center justify-center text-xs text-white/60 p-4 text-center">
                    <img src="<?=base_url('asset/image/q.png')?>" alt="Ilustrasi Kontak">
                </div>
            </div>
        </div>
    </section>

    <div class="max-w-7xl mx-auto px-4 py-8">
        <div class="grid grid-cols-1 lg:grid-cols-4 gap-6 items-start">

            <div class="lg:col-span-3 space-y-6">
                
                <div class="bg-white border border-gray-200 rounded-xl p-2 shadow-sm flex gap-2">
                    <button id="tab-request" onclick="switchTab('request')" class="flex-1 py-2 text-xs font-bold rounded-lg transition-all text-center bg-[#0099b8] text-white">
                        📝 REQUEST DOKUMEN BARU
                    </button>
                    <button id="tab-kontak" onclick="switchTab('kontak')" class="flex-1 py-2 text-xs font-bold rounded-lg transition-all text-center bg-gray-50 text-gray-600 hover:bg-gray-100">
                        ✉️ HUBUNGI ADMIN / KRITIK SARAN
                    </button>
                </div>

                <div id="form-box-request" class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm space-y-4">
                    <div class="border-b border-gray-100 pb-3">
                        <h2 class="text-base font-bold text-gray-900">Formulir Permintaan Template Dokumen</h2>
                        <p class="text-[11px] text-gray-500">Tim kami akan mengkaji permintaan format dokumen Anda dan mengunggahnya sesegera mungkin.</p>
                    </div>

                    <form action="#" method="POST" class="space-y-4 text-xs">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="space-y-1">
                                <label class="font-semibold text-gray-700 block">Nama Lengkap</label>
                                <input type="text" required placeholder="Masukkan nama Anda" class="w-full p-2.5 bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:border-[#0099b8] focus:bg-white transition">
                            </div>
                            <div class="space-y-1">
                                <label class="font-semibold text-gray-700 block">Alamat Email Aktif</label>
                                <input type="email" required placeholder="nama@email.com" class="w-full p-2.5 bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:border-[#0099b8] focus:bg-white transition">
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="space-y-1">
                                <label class="font-semibold text-gray-700 block">Nama / Judul Dokumen yang Diminta</label>
                                <input type="text" required placeholder="Contoh: Surat Pertanggungjawaban Mutlak" class="w-full p-2.5 bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:border-[#0099b8] focus:bg-white transition">
                            </div>
                            <div class="space-y-1">
                                <label class="font-semibold text-gray-700 block">Format Ekstensi Berkas Utama</label>
                                <select class="w-full p-2.5 bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:border-[#0099b8] focus:bg-white transition font-medium text-gray-700">
                                    <option value="word">Microsoft Word (.docx)</option>
                                    <option value="excel">Microsoft Excel (.xlsx)</option>
                                    <option value="ppt">PowerPoint Presentation (.pptx)</option>
                                    <option value="pdf">Portable Document Format (.pdf)</option>
                                    <option value="zip">Bundle File Terkompresi (.zip)</option>
                                </select>
                            </div>
                        </div>

                        <div class="space-y-1">
                            <label class="font-semibold text-gray-700 block">Kategori Keperluan</label>
                            <div class="grid grid-cols-2 sm:grid-cols-3 gap-2 pt-1 font-medium text-gray-600">
                                <label class="flex items-center gap-1.5 cursor-pointer"><input type="radio" name="kat_req" checked class="accent-[#0099b8]"> Administrasi Umum</label>
                                <label class="flex items-center gap-1.5 cursor-pointer"><input type="radio" name="kat_req" class="accent-[#0099b8]"> Pendidikan & Sekolah</label>
                                <label class="flex items-center gap-1.5 cursor-pointer"><input type="radio" name="kat_req" class="accent-[#0099b8]"> Karier & Kerja (CV)</label>
                                <label class="flex items-center gap-1.5 cursor-pointer"><input type="radio" name="kat_req" class="accent-[#0099b8]"> Bisnis & UMKM</label>
                                <label class="flex items-center gap-1.5 cursor-pointer"><input type="radio" name="kat_req" class="accent-[#0099b8]"> TI & Surat Kontrak</label>
                            </div>
                        </div>

                        <div class="space-y-1">
                            <label class="font-semibold text-gray-700 block">Detail Tambahan / Struktur Isi yang Harus Ada</label>
                            <textarea rows="4" placeholder="Jelaskan komponen isi penting apa saja yang wajib tercantum di dalam template ini agar sesuai dengan kebutuhan Anda..." class="w-full p-2.5 bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:border-[#0099b8] focus:bg-white transition resize-none"></textarea>
                        </div>

                        <button type="submit" class="w-full sm:w-auto bg-gray-800 hover:bg-black text-white font-bold px-6 py-2.5 rounded-lg shadow transition">
                            🚀 Kirim Permintaan Dokumen
                        </button>
                    </form>
                </div>

                <div id="form-box-kontak" class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm space-y-4 hidden">
                    <div class="border-b border-gray-100 pb-3">
                        <h2 class="text-base font-bold text-gray-900">Hubungi Administrator Pena Ilmu</h2>
                        <p class="text-[11px] text-gray-500">Kirimkan keluhan teknis, kerja sama, iklan, atau laporan link download yang bermasalah.</p>
                    </div>

                    <form action="#" method="POST" class="space-y-4 text-xs">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="space-y-1">
                                <label class="font-semibold text-gray-700 block">Nama Lengkap</label>
                                <input type="text" required placeholder="Masukkan nama Anda" class="w-full p-2.5 bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:border-[#0099b8] focus:bg-white transition">
                            </div>
                            <div class="space-y-1">
                                <label class="font-semibold text-gray-700 block">Alamat Email</label>
                                <input type="email" required placeholder="nama@email.com" class="w-full p-2.5 bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:border-[#0099b8] focus:bg-white transition">
                            </div>
                        </div>

                        <div class="space-y-1">
                            <label class="font-semibold text-gray-700 block">Perihal / Subjek</label>
                            <input type="text" required placeholder="Contoh: Laporan Link Rusak, Penawaran Kerjasama, dll" class="w-full p-2.5 bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:border-[#0099b8] focus:bg-white transition">
                        </div>

                        <div class="space-y-1">
                            <label class="font-semibold text-gray-700 block">Pesan Lengkap</label>
                            <textarea rows="5" required placeholder="Tuliskan detail pesan Anda di sini secara jelas..." class="w-full p-2.5 bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:border-[#0099b8] focus:bg-white transition resize-none"></textarea>
                        </div>

                        <button type="submit" class="w-full sm:w-auto bg-[#0099b8] hover:bg-[#007cc2] text-white font-bold px-6 py-2.5 rounded-lg shadow transition">
                            ✉️ Kirim Pesan Sekarang
                        </button>
                    </form>
                </div>

            </div>

            <div class="space-y-4">
                
                <div class="bg-white border border-gray-200 rounded-xl p-4 shadow-sm">
                    <h3 class="text-xs font-bold text-gray-900 border-b border-gray-100 pb-2 mb-3 uppercase tracking-wider">WAKTU TANGGAPAN</h3>
                    <div class="text-[11px] text-gray-600 space-y-2 leading-relaxed">
                        <p>⏱️ Permintaan dokumen diproses berkala dalam <strong>1-3 hari kerja</strong> tergantung tingkat kerumitan format.</p>
                        <p>📧 Untuk keperluan darurat, Anda juga dapat mengirim pesan manual langsung ke email resmi pengelola di: <span class="text-blue-600 font-semibold underline block mt-0.5">admin@penailmu.site</span></p>
                    </div>
                </div>

                <div class="bg-white border border-gray-200 rounded-xl p-4 shadow-sm">
                    <h3 class="text-xs font-bold text-gray-900 border-b border-gray-100 pb-2 mb-3 uppercase tracking-wider">KETENTUAN BERKAS</h3>
                    <ul class="space-y-2 text-[11px] text-gray-500 leading-normal font-medium list-disc list-inside">
                        <li>Bebas biaya (Gratis).</li>
                        <li>Bukan dokumen negara rahasia.</li>
                        <li>Khusus penggunaan personal & edukasi.</li>
                        <li>Tidak mengandung unsur plagiasi hak cipta instansi lain tanpa izin resmi.</li>
                    </ul>
                </div>

            </div>

        </div>
    </div>

    <footer class="bg-[#005f73] text-white/90 text-xs mt-12 border-t border-teal-700">
        <div class="max-w-7xl mx-auto px-4 py-4 flex flex-col sm:flex-row justify-between items-center gap-4">
            <div class="flex items-center gap-4 text-[11px] font-medium">
                <a href="<?= base_url('about')?>" class="hover:underline">Tentang Pena Ilmu</a>
            <a href="<?= base_url('kebijakan')?>" class="hover:underline">Kebijakan Privasi</a>
            <a href="<?= base_url('profil')?>" class="hover:underline">Profil Pembuat</a>
            </div>
            <div class="text-[11px] text-white/80">
                © 2026 PENA ILMU - Pengetahuan Untuk Semua
            </div>
        </div>
    </footer>

    <script type="text/javascript">
        function switchTab(type) {
            const btnRequest = document.getElementById('tab-request');
            const btnKontak = document.getElementById('tab-kontak');
            const boxRequest = document.getElementById('form-box-request');
            const boxKontak = document.getElementById('form-box-kontak');

            if (type === 'request') {
                // Aktifkan Tab Request
                btnRequest.className = "flex-1 py-2 text-xs font-bold rounded-lg transition-all text-center bg-[#0099b8] text-white shadow-sm";
                btnKontak.className = "flex-1 py-2 text-xs font-bold rounded-lg transition-all text-center bg-gray-50 text-gray-600 hover:bg-gray-100";
                
                // Tampilkan Kotak Request & Sembunyikan Kontak
                boxRequest.classList.remove('hidden');
                boxKontak.classList.add('hidden');
            } else if (type === 'kontak') {
                // Aktifkan Tab Kontak
                btnKontak.className = "flex-1 py-2 text-xs font-bold rounded-lg transition-all text-center bg-[#0099b8] text-white shadow-sm";
                btnRequest.className = "flex-1 py-2 text-xs font-bold rounded-lg transition-all text-center bg-gray-50 text-gray-600 hover:bg-gray-100";
                
                // Tampilkan Kotak Kontak & Sembunyikan Request
                boxKontak.classList.remove('hidden');
                boxRequest.classList.add('hidden');
            }
        }
    </script>
</body>
</html>