<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<script src="/theme.js"></script>

<style>
:root{
 --bg:#f4f5f7;
 --card:rgba(255,255,255,.72);
 --text:#222;
 --shadow:0 8px 24px rgba(0,0,0,.15);
}

body.dark{
 --bg:#0f1116;
 --card:rgba(25,25,28,.7);
 --text:#fff;
}

body{
 margin:0;
 min-height:100vh;
 background:var(--bg);
 font-family:-apple-system,Arial,sans-serif;
 color:var(--text);
 overflow-x:hidden;
}

/* ===== TOPBAR ===== */
.topbar{
 position:fixed;
 top:10px;
 left:50%;
 transform:translateX(-50%);
 width:95%;
 max-width:520px;
 display:flex;
 justify-content:space-between;
 z-index:5000;
}

.menu-btn,.switch{
 background:var(--card);
 backdrop-filter:blur(18px);
 box-shadow:var(--shadow);
 border-radius:20px;
 padding:8px 14px;
 cursor:pointer;
}

.switch{width:62px;position:relative}
.knob{
 width:28px;height:28px;
 border-radius:50%;
 background:#fff;
 position:absolute;
 top:3px;left:3px;
 display:flex;align-items:center;justify-content:center;
 transition:.3s;
}
body.dark .knob{left:31px;background:#222;color:#fff}

/* ===== SIDEBAR ===== */
.sidebar{
 position:fixed;
 top:0;left:-85%;
 width:82%;max-width:340px;
 height:100%;
 background:rgba(255,255,255,.18);
 backdrop-filter:blur(30px);
 transition:left .35s;
 padding-top:80px;
 z-index:4500;
}
.sidebar.show{left:0}
.sidebar a{
 display:block;
 margin:4px 10px;
 padding:14px;
 border-radius:14px;
 color:#fff;
 text-decoration:none;
 font-weight:600;
}
.sidebar a.active{background:rgba(70,150,255,.45)}

.overlay{
 position:fixed;inset:0;
 background:rgba(0,0,0,.25);
 opacity:0;pointer-events:none;
 transition:.3s;
 z-index:4400;
}
.overlay.show{opacity:1;pointer-events:auto}

/* ===== FORM ===== */
.glass-card{
 backdrop-filter:blur(20px);
 background:rgba(255,255,255,.25);
 border-radius:20px;
 padding:22px;
 max-width:500px;
 margin:90px auto 20px;
 box-shadow:var(--shadow);
}

h2{text-align:center}

input,select,textarea{
 width:100%;
 padding:10px;
 margin-bottom:12px;
 border-radius:8px;
 border:1px solid #ccc;
}

textarea{resize:none;height:80px}

button{
 width:100%;
 padding:12px;
 border:none;
 border-radius:8px;
 background:#4caf50;
 color:#fff;
 font-size:16px;
 cursor:pointer;
}

.notification{
 display:none;
 background:#4caf50;
 color:#fff;
 padding:12px;
 border-radius:8px;
 text-align:center;
 margin-top:10px;
}

/* ===== FLOAT SOCIAL ===== */
.floating-button{
 position:fixed;
 bottom:90px;
 right:16px;
 width:58px;
 height:58px;
 border:none;
 border-radius:50%;
 background:#28a745;
 display:flex;
 align-items:center;
 justify-content:center;
 box-shadow:0 8px 20px rgba(0,0,0,.25);
 z-index:4000;
}
.floating-button img{
 width:46px;height:46px;border-radius:50%;
}
.social-icons{
 position:fixed;
 bottom:100px;
 right:85px;
 display:none;
 gap:10px;
 z-index:3999;
}
.social-icon{
 width:42px;height:42px;
 border-radius:50%;
 background:#fff;
 display:flex;
 align-items:center;
 justify-content:center;
 box-shadow:0 4px 12px rgba(0,0,0,.2);
}

/* ===== NAV ===== */
.bottom-nav{
 position:fixed;
 bottom:10px;
 left:50%;
 transform:translateX(-50%);
 width:95%;
 max-width:520px;
 height:64px;
 display:flex;
 justify-content:space-around;
 align-items:center;
 background:var(--card);
 border-radius:30px;
 backdrop-filter:blur(18px);
 z-index:3000;
}

.slider{
 position:absolute;
 height:42px;
 background:#e7f2ff;
 border-radius:24px;
 transition:.3s;
 pointer-events:none;
}

.nav-item{flex:1;text-align:center;z-index:2;cursor:pointer}
.icon{display:block;font-size:20px}
.nav-item.active{color:#0a84ff}

footer{text-align:center;color:#fff;padding:10px}
</style>
</head>

<body>

<div class="topbar">
 <div class="menu-btn" id="menuBtn">☰</div>
 <div class="switch" onclick="toggleDark()">
  <div class="knob" id="icon">☀️</div>
 </div>
</div>

<div class="sidebar" id="sidebar">
  <a href="/id/index">🏠 Home</a>
 <a href="/id/ibadah">🙏 Ibadah harian</a>
 <a href="/id/warta">📰 Warta Jemaat</a>
 <a href="/id/alkitab">📖 Alkitab</a>
 <a href="/id/youtube">▶️ Khotbah mingguan</a>
 <a href="/id/persembahan">⛪ Persembahan Gereja</a>
 <a href="/id/informasi">🔔 Informasi</a>
 <a href="/youth">🧑 Youth</a>
 <a href="/id/starkids">⭐ Starkids</a>
 <a class="active" href="/id/support">❤️ Help & Support</a>
 <a href="/id/akun">👤 Akun Saya</a>
 <a href="/id/logout">↩️ Logout</a>
</div>

<div class="overlay" id="overlay"></div>

<!-- SOCIAL -->
<div class="social-icons" id="socialIcons">
 <div class="social-icon" onclick="window.open('https://wa.me/+6285855554893','_blank')">
  <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" width="24">
 </div>
 <div class="social-icon" onclick="window.open('https://www.instagram.com/mdc.jombang','_blank')">
  <img src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Instagram_icon.png" width="24">
 </div>
</div>

<button class="floating-button" id="toggleSocial">
 <img src="https://mdcjombang.my.id/asecet/support.gif">
</button>

<!-- FORM -->
<div class="glass-card">
<h2>Formulir Online</h2>

<form id="kirimForm">

<label>Nama :</label>
<input type="text" name="nama" required>

<label>Pilih Permintaan :</label>
<select name="Permintaan" required>
<option value="">Pilih Permintaan</option>
<option>Jemaat Baru/Ingin Bergabung Kesan</option>
<option>Permintaan Doa/Konseling</option>
<option>Kelas Pemuridan</option>
<option>Baptis</option>
<option>Penyerahan Anak</option>
<option>Terima Yesus/Berkomitmen Kembali</option>
</select>

<label>Nomor Telepon/WA :</label>
<input type="number" name="WhatsApp" required>

<label>Alamat Lengkap :</label>
<input type="text" name="alamat" required>

<label>Keterangan/Catatan :</label>
<textarea name="keterangan" required></textarea>

<button type="submit">Kirim</button>
</form>

<div class="notification" id="notification"></div>
</div>

<footer>© 2025 GKPB MDC Jombang</footer>

<div class="bottom-nav" id="nav">
 <div class="slider" id="slider"></div>
<a href="/id/" class="nav-item active" onclick="selectTab(this)">
  <span class="icon">🏠</span>Home
</a>

<a href="/id/ibadah" class="nav-item" onclick="selectTab(this)">
  <span class="icon">🙏</span>IH
</a>

<a href="/id/youtube" class="nav-item" onclick="selectTab(this)">
  <span class="icon">▶️</span>YouTube
</a>

<a href="/id/alkitab" class="nav-item" onclick="selectTab(this)">
  <span class="icon">📖</span>Alkitab
</a>

<script>
const sidebar=document.getElementById("sidebar");
const overlay=document.getElementById("overlay");
const menuBtn=document.getElementById("menuBtn");
const slider=document.getElementById("slider");
const items=document.querySelectorAll(".nav-item");
const icon=document.getElementById("icon");

function openMenu(){sidebar.classList.add("show");overlay.classList.add("show")}
function closeMenu(){sidebar.classList.remove("show");overlay.classList.remove("show")}
function toggleMenu(){sidebar.classList.contains("show")?closeMenu():openMenu()}

menuBtn.onclick=toggleMenu;
overlay.onclick=closeMenu;

function toggleDark(){
 document.body.classList.toggle("dark");
 icon.innerHTML=document.body.classList.contains("dark")?"🌙":"☀️";
}

function moveSlider(el){
 slider.style.width=(el.offsetWidth-10)+"px";
 slider.style.left=(el.offsetLeft+5)+"px";
}

function selectTab(el){
 items.forEach(i=>i.classList.remove("active"));
 el.classList.add("active");
 moveSlider(el);
}

window.onload=()=>moveSlider(document.querySelector(".nav-item.active"));

document.getElementById("toggleSocial").onclick=()=>{
 const s=document.getElementById("socialIcons");
 s.style.display=s.style.display==="flex"?"none":"flex";
};

document.getElementById("kirimForm").addEventListener("submit",e=>{
 e.preventDefault();
 const n=document.getElementById("notification");
 n.textContent="Terima kasih! Data terkirim.";
 n.style.display="block";
 setTimeout(()=>n.style.display="none",3000);
});
</script>

</body>
</html>