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

<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:220vh;
 background:var(--bg);
 font-family:-apple-system,Arial,sans-serif;
 color:var(--text);
 transition:.25s;
 overflow-x:hidden;
}

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

.menu-btn,.switch{
 background:var(--card);
 backdrop-filter:blur(18px);
 box-shadow:var(--shadow);
}

.menu-btn{
 width:42px;height:42px;
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:20px;
 cursor:pointer;
 transition:.2s;
}
.menu-btn:active{transform:scale(.9);}

/* DARK SWITCH */
.switch{
 width:62px;height:34px;
 border-radius:20px;
 position:relative;
 cursor:pointer;
}

.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:.4s cubic-bezier(.34,1.56,.64,1);
}

body.dark .knob{
 left:31px;
 background:#222;
 color:#fff;
}

/* ===== SIDEBAR PREMIUM GLASS ===== */
.sidebar{
 position:fixed;
 top:0;
 left:-85%;
 width:82%;
 max-width:340px;
 height:100%;

 background:rgba(255,255,255,.18);
 backdrop-filter:blur(30px) saturate(140%);
 -webkit-backdrop-filter:blur(30px);

 border-right:1px solid rgba(255,255,255,.35);
 box-shadow:0 20px 40px rgba(0,0,0,.25);

 transition:left .42s cubic-bezier(.22,1,.36,1);
 padding-top:80px;
 z-index:1500;
}

body.dark .sidebar{
 background:rgba(20,20,20,.45);
}

.sidebar.show{ left:0; }

.sidebar a{
 display:flex;
 align-items:center;
 gap:12px;
 padding:14px 18px;
 margin:4px 10px;
 border-radius:14px;
 text-decoration:none;
 color:#fff;
 font-weight:600;
 transition:.25s;
}

.sidebar a.active{
 background:rgba(70,150,255,.45);
}

.sidebar a:hover{
 background:rgba(255,255,255,.15);
}

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

/* ===== NAVBAR PREMIUM ===== */
.bottom-nav{
 position:fixed;
 bottom:calc(10px + env(safe-area-inset-bottom));
 left:50%;
 transform:translateX(-50%);
 width:95%;
 max-width:520px;
 height:clamp(58px,9vh,72px);

 display:flex;
 align-items:center;
 justify-content:space-around;

 border-radius:34px;
 background:var(--card);
 backdrop-filter:blur(18px);

 box-shadow:var(--shadow);
 transition:transform .35s ease;
 z-index:2000;
}

.bottom-nav.hide{
 transform:translateX(-50%) translateY(110px);
}

/* CAPSULE PREMIUM */
.slider{
 position:absolute;
 height:42px;
 width:clamp(70px,22vw,140px);
 border-radius:24px;
 background:#e7f2ff;

 transition:.35s cubic-bezier(.34,1.56,.64,1);
 z-index:0;
}

/* NAV ITEM */
.nav-item{
 flex:1;
 text-align:center;
 font-size:clamp(10px,2.3vw,13px);
 font-weight:600;
 cursor:pointer;
 color:var(--text);
 z-index:2;
 user-select:none;
}

.icon{
 display:block;
 font-size:clamp(16px,4.5vw,21px);
 transition:.3s cubic-bezier(.34,1.56,.64,1);
}

.nav-item.active{
 color:#0a84ff;
}

.nav-item.active .icon{
 transform:translateY(-5px) scale(1.08);
}

/* CONTENT */
.content{
 padding-top:calc(60px + env(safe-area-inset-top));
 padding-left:20px;
 padding-right:20px;
}
</style>
</head>

<body>

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

<!-- SIDEBAR -->
<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 class="active" href="/id/khotbah">▶️ Khotbah mingguan</a>
 <a href="/id/persembahan">⛪ Persembahan Gereja</a>
 <a href="/id/informasi">🔔 Informasi</a>
 <a href="/id/youth">🧑 Youth</a>
 <a href="/id/starkids">⭐ Starkids</a>
 <a 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" onclick="toggleMenu()"></div>

<div class="content">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GKPB MDC Jombang</title>
<link rel="icon" href="asecet/icon.png">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">

<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

.media-page{
  font-family:'Poppins',sans-serif;
  padding:10px;
  margin:0;
  min-height:100vh;
}

/* ===== SEGMENT ===== */
.media-toggle{
  position:relative;
  max-width:360px;
  margin:0 auto 18px;
  padding:6px;
  display:flex;
  border-radius:22px;
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(22px);
  box-shadow:0 12px 26px rgba(0,0,0,.2);
}

.media-toggle button{
  flex:1;
  border:none;
  background:none;
  padding:12px 0;
  font-weight:600;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  z-index:2;
}

.media-toggle button.active{ color:#000; }

.media-indicator{
  position:absolute;
  top:6px;
  left:6px;
  width:calc(50% - 6px);
  height:calc(100% - 12px);
  background:#fff;
  border-radius:16px;
  box-shadow:0 6px 14px rgba(0,0,0,.18);
  transition:left .3s cubic-bezier(.22,.61,.36,1);
}

/* ===== CONTENT ===== */
..glass-card{
  overflow:hidden;
}

iframe{
  width:100%;
  height:100%;
  border:none;
  overflow:hidden;
}

.video-container{
  position:relative;
  padding-bottom:56.25%;
  height:0;
  border-radius:20px;
  overflow:hidden;
}
.video-container iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:none;
}

#catatan-box1,#catatan-box2{
  background:#fff;
  border-radius:20px;
  padding:20px;
  margin-top:20px;
}
#catatan-box1{max-height:360px;overflow:auto}
#catatan-box2{max-height:50vh;overflow:auto}

footer{text-align:center;color:#fff;margin-top:30px}
</style>
</head>

<body>

<div class="media-page">

<!-- ===== TOGGLE ===== -->
<div class="media-toggle" id="mediaToggle">
  <div class="media-indicator" id="indicator"></div>

  <button id="btnYT">
    <i class="fa-brands fa-youtube"></i> YouTube
  </button>

  <button id="btnPPT">
    <i class="fa-solid fa-file-powerpoint"></i> PPT
  </button>
</div>

<!-- ===== CONTENT ===== -->
<div id="swipeArea">

<!-- YOUTUBE -->
<div id="youtubeSection">
<div class="glass-card">

  <div class="video-container">
    <?php
    include 'db.php';
    $q=$conn->query("SELECT youtube_link FROM catatan LIMIT 1");
    if($q && $q->num_rows){
      $r=$q->fetch_assoc();
      echo '<iframe src="'.htmlspecialchars($r['youtube_link']).'" allowfullscreen></iframe>';
    }
    ?>
  </div>

  <div id="catatan-box1">
    <?php
    $q=$conn->query("SELECT title FROM catatan");
    while($r=$q->fetch_assoc()){
      echo '<div>'.htmlspecialchars($r['title']).'</div>';
    }
    ?>
  </div>

  <div id="catatan-box2">
    <?php
    $q=$conn->query("SELECT notes FROM catatan");
    while($r=$q->fetch_assoc()){
      echo '<div>'.nl2br(htmlspecialchars($r['notes'])).'</div>';
    }
    ?>
  </div>

</div>
</div>

<!-- PPT -->
<div id="pptSection" style="display:none">
<div class="glass-card" style="height:75vh">
<?php
$src='https://mdcjombang.id/siap/ppt/list_ppt.php';
$json=@file_get_contents($src);
$data=json_decode($json,true);
if($data){
  echo '<iframe style="width:100%;height:100%" src="https://docs.google.com/gview?embedded=true&url='.urlencode($data[0]['url']).'"></iframe>';
}
?>
</div>
</div>

</div>

</div>
<footer>© 2026 GKPB MDC Jombang</footer>

<script>
const yt=document.getElementById('youtubeSection');
const ppt=document.getElementById('pptSection');
const btnYT=document.getElementById('btnYT');
const btnPPT=document.getElementById('btnPPT');
const indicator=document.getElementById('indicator');
const toggle=document.getElementById('mediaToggle');

let active=0;

function updateIndicator(){
  const pad=6;
  const half=(toggle.clientWidth-pad*2)/2;
  indicator.style.left=pad+(half*active)+'px';
}

function snap(index){
  active=index;

  yt.style.display=index===0?'block':'none';
  ppt.style.display=index===1?'block':'none';

  btnYT.classList.toggle('active',index===0);
  btnPPT.classList.toggle('active',index===1);

  updateIndicator();
}

btnYT.onclick=()=>snap(0);
btnPPT.onclick=()=>snap(1);

window.addEventListener('resize',updateIndicator);

/* 🔥 INI PENTING */
snap(0); // ← WAJIB supaya konten muncul
</script>

</div>

<!-- NAV -->
<div class="bottom-nav" id="nav">
 <div class="slider" id="slider"></div>

 <div class="nav-item" onclick="selectTab(this)">
  <span class="icon">🏠</span>Home
 </div>

 <div class="nav-item" onclick="selectTab(this)">
  <span class="icon">🙏</span>IH
 </div>

 <div class="nav-item active" onclick="selectTab(this)">
  <span class="icon">▶️</span>YouTube
 </div>

 <div class="nav-item" onclick="selectTab(this)">
  <span class="icon">📖</span>Alkitab
 </div>
</div>

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

/* MENU */
function toggleMenu(){
 sidebar.classList.toggle("show");
 overlay.classList.toggle("show");
}

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

/* PREMIUM CAPSULE */
function moveSlider(el){
 slider.style.left =
 (el.offsetLeft + el.offsetWidth/2 - slider.offsetWidth/2)+"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"));
}

/* AUTO HIDE */
let last=0,timer;
window.addEventListener("scroll",()=>{
 let cur=window.pageYOffset;
 if(cur>last+5) nav.classList.add("hide");
 else if(cur<last-5) nav.classList.remove("hide");
 last=cur;
 clearTimeout(timer);
 timer=setTimeout(()=>nav.classList.remove("hide"),220);
});

/* IOS SWIPE */
let sx=0,ex=0;
document.addEventListener("touchstart",e=>sx=e.touches[0].clientX);
document.addEventListener("touchmove",e=>ex=e.touches[0].clientX);
document.addEventListener("touchend",()=>{
 if(sx<40 && ex>100){sidebar.classList.add("show");overlay.classList.add("show");}
 if(sx>120 && (sx-ex)>60){sidebar.classList.remove("show");overlay.classList.remove("show");}
 sx=ex=0;
});
</script>

</body>
</html>