<?php
// TBW Christian Radio — Progressive Web App
// Version 1.0

// Load verse of the day server-side for SEO / initial render
$verses = [
    ["reference" => "Hebrews 10:7", "text" => "Then I said, 'Here I am—it is written about me in the scroll—I have come to do your will, my God.'"],
    ["reference" => "Jeremiah 29:11", "text" => "For I know the plans I have for you, declares the Lord, plans to prosper you and not to harm you."],
    ["reference" => "1 John 5:4", "text" => "For everyone born of God overcomes the world. This is the victory that has overcome the world, even our faith."],
    ["reference" => "Psalm 119:105", "text" => "Your word is a lamp for my feet, a light on my path."],
    ["reference" => "Romans 8:37", "text" => "No, in all these things we are more than conquerors through him who loved us."],
];
$dailyVerse = $verses[(int)date('z') % count($verses)];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="theme-color" content="#C41E1E">
<meta name="description" content="TBW Christian Radio — See It. Receive It. Conquer It. A space for faith, purpose and growth.">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="TBW Radio">

<!-- Open Graph -->
<meta property="og:title" content="TBW Christian Radio">
<meta property="og:description" content="See It. Receive It. Conquer It.">
<meta property="og:type" content="website">

<title>TBW Christian Radio</title>
<link rel="manifest" href="manifest.json">

<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=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Cinzel:wght@400;600;700&family=Lato:ital,wght@0,300;0,400;1,300&display=swap" rel="stylesheet">

<style>
/* ===== RESET & TOKENS ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --red: #C41E1E;
  --red-dark: #8B0000;
  --red-deep: #1a0000;
  --gold: #C9932A;
  --gold-light: #E8C96A;
  --gold-pale: #F5E6C8;
  --white: #FEFAF5;
  --cream: #F5EFE6;
  --gray-pale: #F0EBE3;
  --text: #1C1008;
  --text-light: #5C4030;
  
  --font-display: 'Cinzel', serif;
  --font-body: 'Cormorant Garamond', serif;
  --font-sans: 'Lato', sans-serif;
  
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --nav-h: 68px;
  --header-h: 56px;
  
  --shadow-gold: 0 4px 24px rgba(201, 147, 42, 0.25);
  --shadow-card: 0 2px 16px rgba(28, 16, 8, 0.12);
  --radius: 16px;
  --radius-sm: 10px;
}

html { height: 100%; overflow: hidden; }
body {
  height: 100%;
  font-family: var(--font-body);
  background: var(--red-deep);
  color: var(--white);
  overflow: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

/* ===== SPLASH SCREEN ===== */
#splash {
  position: fixed; inset: 0; z-index: 100;
  background: linear-gradient(160deg, #1a0000 0%, #2d0000 40%, #8B0000 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px 32px calc(40px + var(--safe-bottom));
  transition: opacity 0.6s ease, transform 0.6s ease;
}
#splash.fade-out { opacity: 0; transform: scale(1.04); pointer-events: none; }
#splash.hidden { display: none; }

.splash-logo {
  width: 120px; height: 120px; margin-bottom: 28px;
  animation: floatIn 1s ease both;
}
.splash-logo img { width: 100%; height: 100%; object-fit: contain; }

.splash-brand {
  text-align: center; margin-bottom: 16px;
  animation: floatIn 1s 0.2s ease both;
}
.splash-welcome {
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 300;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold-light); opacity: 0.8; margin-bottom: 4px;
}
.splash-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 6vw, 28px);
  font-weight: 600; letter-spacing: 2px;
  color: var(--gold-pale); line-height: 1.2;
}
.splash-subtitle {
  font-family: var(--font-display);
  font-size: 14px; letter-spacing: 3px;
  color: var(--gold); margin-top: 4px;
}

.splash-divider {
  width: 48px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 20px auto;
  animation: floatIn 1s 0.4s ease both;
}

.splash-tagline {
  font-family: var(--font-body);
  font-style: italic; font-size: 20px;
  color: var(--gold-pale); text-align: center; line-height: 1.4;
  animation: floatIn 1s 0.6s ease both;
}

.splash-scripture {
  margin-top: 32px; text-align: center;
  animation: floatIn 1s 0.8s ease both;
}
.splash-scripture p {
  font-family: var(--font-body);
  font-style: italic; font-size: 14px;
  color: rgba(245, 230, 200, 0.65); line-height: 1.6;
}
.splash-scripture span {
  display: block; margin-top: 6px;
  font-family: var(--font-sans); font-size: 11px;
  letter-spacing: 2px; color: var(--gold); opacity: 0.7;
}

.splash-enter {
  margin-top: 40px;
  animation: floatIn 1s 1.2s ease both;
}
.btn-enter {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--red-deep);
  border: none; cursor: pointer;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase;
  padding: 14px 40px; border-radius: 50px;
  box-shadow: var(--shadow-gold);
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn-enter:active { transform: scale(0.97); box-shadow: 0 2px 12px rgba(201,147,42,0.2); }

/* Gallery dots */
.splash-gallery {
  display: flex; gap: 6px; margin-top: 16px;
  animation: floatIn 1s 1s ease both;
}
.gallery-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); opacity: 0.35;
  transition: opacity 0.3s;
}
.gallery-dot.active { opacity: 1; }

/* ===== APP SHELL ===== */
#app {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  background: var(--cream);
  opacity: 0; transition: opacity 0.5s ease;
}
#app.visible { opacity: 1; }

/* ===== TOP HEADER ===== */
.app-header {
  position: relative; z-index: 10;
  height: calc(var(--header-h) + var(--safe-top));
  padding-top: var(--safe-top);
  background: var(--red-dark);
  display: flex; align-items: center; justify-content: space-between;
  padding-left: 16px; padding-right: 16px;
  box-shadow: 0 2px 12px rgba(139,0,0,0.3);
  flex-shrink: 0;
}
.header-logo {
  display: flex; align-items: center; gap: 10px;
}
.header-logo img {
  width: 36px; height: 36px; object-fit: contain;
}
.header-logo-text {
  display: flex; flex-direction: column;
}
.header-logo-text .name {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 600;
  letter-spacing: 1.5px; color: var(--gold-pale);
  line-height: 1;
}
.header-logo-text .sub {
  font-family: var(--font-sans);
  font-size: 9px; letter-spacing: 2px;
  color: var(--gold); opacity: 0.8;
  text-transform: uppercase; margin-top: 2px;
}

.header-live {
  display: flex; align-items: center; gap: 8px;
}
.live-badge {
  display: flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(201,147,42,0.4);
  border-radius: 20px; padding: 4px 10px;
  cursor: pointer; transition: background 0.2s;
}
.live-badge:active { background: rgba(255,255,255,0.2); }
.live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold-light);
  animation: pulse 2s infinite;
}
.live-badge.playing .live-dot { background: #4CAF50; }
.live-text {
  font-family: var(--font-sans); font-size: 10px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--gold-pale); font-weight: 400;
}

/* ===== MAIN CONTENT ===== */
.app-content {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Hide all views */
.view { display: none; padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + 16px); }
.view.active { display: block; }

/* ===== HOME VIEW ===== */
#view-home {
  background: var(--cream);
}

.home-hero {
  background: linear-gradient(160deg, var(--red-dark) 0%, var(--red) 60%, #D4351C 100%);
  padding: 28px 20px 36px;
  position: relative; overflow: hidden;
}
.home-hero::after {
  content: '';
  position: absolute; bottom: -1px; left: 0; right: 0;
  height: 32px;
  background: var(--cream);
  border-radius: 32px 32px 0 0;
}

.hero-greeting {
  font-family: var(--font-sans); font-size: 12px;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: rgba(245,230,200,0.7); margin-bottom: 8px;
}
.hero-tagline {
  font-family: var(--font-body); font-style: italic;
  font-size: clamp(22px, 5.5vw, 26px);
  color: var(--gold-pale); line-height: 1.3; margin-bottom: 6px;
}
.hero-verse {
  font-family: var(--font-sans); font-size: 11px;
  letter-spacing: 1.5px; color: var(--gold); opacity: 0.8;
}

/* Play / Watch buttons */
.home-actions {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; padding: 20px 16px 0;
}
.action-card {
  background: white;
  border-radius: var(--radius);
  padding: 18px 16px;
  box-shadow: var(--shadow-card);
  cursor: pointer; position: relative;
  overflow: hidden; transition: transform 0.15s, box-shadow 0.15s;
  border: 1px solid rgba(201,147,42,0.12);
}
.action-card:active { transform: scale(0.97); box-shadow: 0 1px 8px rgba(28,16,8,0.08); }
.action-card.primary { background: linear-gradient(135deg, var(--red-dark), var(--red)); }
.action-card.primary .action-label,
.action-card.primary .action-sub { color: var(--gold-pale); }
.action-card.primary .action-icon { color: var(--gold-light); }

.action-icon {
  font-size: 28px; margin-bottom: 8px; display: block;
}
.action-label {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 600;
  letter-spacing: 1.5px; color: var(--red-dark);
  display: block;
}
.action-sub {
  font-family: var(--font-sans);
  font-size: 10px; letter-spacing: 1px;
  color: var(--text-light); margin-top: 2px; display: block;
}

/* Now Playing Bar */
.now-playing-bar {
  margin: 16px;
  background: linear-gradient(135deg, #1a0000, var(--red-dark));
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: var(--shadow-gold);
  cursor: pointer;
}
.np-icon { font-size: 24px; flex-shrink: 0; }
.np-info { flex: 1; min-width: 0; }
.np-title {
  font-family: var(--font-body); font-size: 16px;
  color: var(--gold-pale); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.np-artist {
  font-family: var(--font-sans); font-size: 11px;
  color: var(--gold); opacity: 0.8; letter-spacing: 1px;
  margin-top: 2px;
}
.np-play {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--gold);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(201,147,42,0.4);
  transition: transform 0.15s;
}
.np-play:active { transform: scale(0.92); }

/* Section headers */
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 16px 10px;
}
.section-title {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--red-dark);
}
.section-link {
  font-family: var(--font-sans); font-size: 11px;
  letter-spacing: 1px; color: var(--gold);
  cursor: pointer; background: none; border: none;
  padding: 0; text-decoration: none;
}

/* Daily Verse card */
.verse-card {
  margin: 0 16px 8px;
  background: white;
  border-radius: var(--radius);
  padding: 20px;
  border-left: 3px solid var(--gold);
  box-shadow: var(--shadow-card);
  position: relative; overflow: hidden;
}
.verse-card::before {
  content: '\201C';
  position: absolute; top: 8px; right: 14px;
  font-family: var(--font-display);
  font-size: 64px; color: var(--gold); opacity: 0.1;
  line-height: 1;
}
.verse-ref {
  font-family: var(--font-display);
  font-size: 12px; letter-spacing: 2px;
  color: var(--gold); font-weight: 600;
  text-transform: uppercase; margin-bottom: 8px;
}
.verse-text {
  font-family: var(--font-body);
  font-style: italic; font-size: 17px;
  color: var(--text); line-height: 1.5;
}
.verse-date {
  font-family: var(--font-sans); font-size: 10px;
  color: var(--text-light); margin-top: 10px;
  letter-spacing: 1px; opacity: 0.7;
}

/* Quick grid */
.quick-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; padding: 0 16px 16px;
}
.quick-item {
  background: white;
  border-radius: var(--radius-sm);
  padding: 14px 10px;
  text-align: center; cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform 0.15s;
  border: 1px solid rgba(201,147,42,0.1);
}
.quick-item:active { transform: scale(0.95); }
.quick-icon { font-size: 22px; margin-bottom: 6px; display: block; }
.quick-label {
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: 1.5px;
  color: var(--red-dark); font-weight: 600;
  text-transform: uppercase;
}

/* Brand images carousel */
.brand-carousel {
  padding: 0 0 16px;
  overflow-x: auto;
  display: flex; gap: 12px;
  padding-left: 16px; padding-right: 16px;
  -ms-overflow-style: none; scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
.brand-carousel::-webkit-scrollbar { display: none; }
.brand-img {
  flex-shrink: 0; width: 160px; height: 200px;
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-card);
  scroll-snap-align: start;
  cursor: pointer;
}
.brand-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.3s;
}
.brand-img:active img { transform: scale(1.05); }

/* ===== LISTEN VIEW ===== */
#view-listen {
  background: linear-gradient(160deg, var(--red-deep) 0%, #2d0a0a 50%, var(--red-dark) 100%);
  min-height: 100%;
}

.player-hero {
  padding: 28px 20px 24px; text-align: center;
}
.player-art {
  width: 200px; height: 200px;
  margin: 0 auto 24px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5), var(--shadow-gold);
  position: relative;
  animation: floatSlow 4s ease-in-out infinite;
}
.player-art img { width: 100%; height: 100%; object-fit: cover; }
.player-art-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(139,0,0,0.4), transparent);
}

.player-title {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 600;
  color: var(--gold-pale); letter-spacing: 1.5px;
  margin-bottom: 4px;
}
.player-artist {
  font-family: var(--font-sans); font-size: 12px;
  color: var(--gold); opacity: 0.8; letter-spacing: 2px;
  text-transform: uppercase;
}

.player-live-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(201,147,42,0.15);
  border: 1px solid var(--gold);
  border-radius: 20px; padding: 5px 14px;
  margin: 14px auto 0; cursor: pointer;
}
.player-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #4CAF50; animation: pulse 1.5s infinite;
}
.player-live-text {
  font-family: var(--font-sans); font-size: 11px;
  letter-spacing: 2px; color: var(--gold-pale); text-transform: uppercase;
}

.player-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 24px; padding: 24px 20px;
}
.ctrl-btn {
  background: none; border: none; cursor: pointer;
  color: var(--gold-light); font-size: 22px;
  opacity: 0.7; transition: opacity 0.2s, transform 0.2s;
  padding: 8px;
}
.ctrl-btn:active { opacity: 1; transform: scale(0.9); }
.ctrl-play {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: var(--red-deep);
  box-shadow: var(--shadow-gold), 0 0 32px rgba(201,147,42,0.3);
  transition: transform 0.15s, box-shadow 0.15s;
}
.ctrl-play:active { transform: scale(0.93); }

.volume-row {
  display: flex; align-items: center; gap: 10px;
  padding: 0 24px 20px;
}
.volume-icon { font-size: 16px; color: var(--gold); opacity: 0.7; }
.volume-slider {
  flex: 1; height: 4px; border-radius: 2px;
  background: rgba(201,147,42,0.2);
  -webkit-appearance: none; appearance: none; cursor: pointer;
  outline: none;
}
.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--gold); cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.player-info-card {
  margin: 0 16px 16px;
  background: rgba(255,255,255,0.07);
  border-radius: var(--radius);
  padding: 16px;
  border: 1px solid rgba(201,147,42,0.2);
}
.player-info-title {
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: 2.5px;
  color: var(--gold); text-transform: uppercase; margin-bottom: 8px;
}
.player-info-text {
  font-family: var(--font-body);
  font-style: italic; font-size: 15px;
  color: rgba(245,230,200,0.8); line-height: 1.5;
}

/* ===== GENERIC VIEW HEADER ===== */
.view-header {
  background: linear-gradient(135deg, var(--red-dark), var(--red));
  padding: 24px 20px 28px;
  position: relative; overflow: hidden;
}
.view-header::after {
  content: '';
  position: absolute; bottom: -1px; left: 0; right: 0;
  height: 24px; background: var(--cream);
  border-radius: 24px 24px 0 0;
}
.view-header-title {
  font-family: var(--font-display);
  font-size: clamp(18px, 5vw, 22px);
  font-weight: 600; letter-spacing: 3px;
  color: var(--gold-pale); text-transform: uppercase;
}
.view-header-sub {
  font-family: var(--font-body); font-style: italic;
  font-size: 14px; color: rgba(245,230,200,0.7); margin-top: 4px;
}

/* ===== SCHEDULE VIEW ===== */
.schedule-notice {
  margin: 16px;
  background: linear-gradient(135deg, rgba(201,147,42,0.1), rgba(201,147,42,0.05));
  border: 1px solid rgba(201,147,42,0.3);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-family: var(--font-body); font-style: italic;
  font-size: 14px; color: var(--text-light);
  text-align: center;
}

.day-tabs {
  display: flex; gap: 6px;
  overflow-x: auto; padding: 12px 16px;
  -ms-overflow-style: none; scrollbar-width: none;
}
.day-tabs::-webkit-scrollbar { display: none; }
.day-tab {
  flex-shrink: 0; padding: 7px 14px;
  background: white; border: 1px solid rgba(196,30,30,0.2);
  border-radius: 20px; cursor: pointer;
  font-family: var(--font-sans); font-size: 11px;
  letter-spacing: 1.5px; color: var(--text-light);
  transition: all 0.2s;
}
.day-tab.active {
  background: var(--red); border-color: var(--red);
  color: white; box-shadow: 0 2px 8px rgba(196,30,30,0.3);
}

.programme-list {
  padding: 0 16px;
}
.programme-item {
  background: white; border-radius: var(--radius-sm);
  padding: 14px 16px; margin-bottom: 10px;
  display: flex; gap: 12px; align-items: flex-start;
  box-shadow: var(--shadow-card);
  border-left: 3px solid transparent;
  transition: border-color 0.2s;
}
.programme-item.now { border-left-color: var(--gold); }
.prog-time {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600;
  color: var(--gold); min-width: 44px; flex-shrink: 0;
  margin-top: 2px;
}
.prog-info { flex: 1; }
.prog-title {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 600;
  color: var(--red-dark); margin-bottom: 2px;
}
.prog-desc {
  font-family: var(--font-body); font-style: italic;
  font-size: 13px; color: var(--text-light);
}
.prog-host {
  font-family: var(--font-sans); font-size: 10px;
  letter-spacing: 1px; color: var(--gold); opacity: 0.8;
  margin-top: 4px;
}

/* ===== EVENTS VIEW ===== */
.event-featured {
  margin: 16px;
  background: linear-gradient(135deg, var(--red-dark), #8B0000);
  border-radius: var(--radius);
  padding: 20px;
  border: 1px solid rgba(201,147,42,0.3);
  box-shadow: 0 4px 20px rgba(139,0,0,0.3);
}
.event-featured-label {
  font-family: var(--font-sans); font-size: 10px;
  letter-spacing: 3px; color: var(--gold); text-transform: uppercase;
  margin-bottom: 8px;
}
.event-featured-title {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 600;
  color: var(--gold-pale); letter-spacing: 1.5px; margin-bottom: 8px;
}
.event-featured-desc {
  font-family: var(--font-body); font-style: italic;
  font-size: 14px; color: rgba(245,230,200,0.8); line-height: 1.5;
  margin-bottom: 12px;
}
.btn-event {
  display: inline-block;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--red-deep); border: none; cursor: pointer;
  font-family: var(--font-display); font-size: 11px;
  font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  padding: 10px 24px; border-radius: 20px;
  box-shadow: var(--shadow-gold);
  transition: transform 0.15s;
}
.btn-event:active { transform: scale(0.96); }

.events-list {
  padding: 0 16px;
}
.event-card {
  background: white; border-radius: var(--radius-sm);
  padding: 16px; margin-bottom: 10px;
  box-shadow: var(--shadow-card);
  border-top: 3px solid var(--gold);
}
.event-type {
  font-family: var(--font-sans); font-size: 9px;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 4px;
}
.event-title {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 600;
  color: var(--red-dark); margin-bottom: 6px;
}
.event-meta {
  display: flex; gap: 12px; margin-bottom: 6px;
}
.event-meta-item {
  font-family: var(--font-sans); font-size: 11px;
  color: var(--text-light); display: flex; align-items: center; gap: 4px;
}
.event-desc {
  font-family: var(--font-body); font-style: italic;
  font-size: 13px; color: var(--text-light); line-height: 1.4;
}

/* ===== ABOUT VIEW ===== */
.about-emblem {
  text-align: center; padding: 24px 20px;
}
.about-emblem img {
  width: 80px; height: 80px; object-fit: contain;
}
.about-block {
  background: white; margin: 0 16px 12px;
  border-radius: var(--radius-sm);
  padding: 18px; box-shadow: var(--shadow-card);
}
.about-block-title {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 600;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 10px;
}
.about-block-text {
  font-family: var(--font-body); font-size: 16px;
  color: var(--text); line-height: 1.6;
}
.about-mission-quote {
  font-family: var(--font-body); font-style: italic;
  font-size: 20px; color: var(--red);
  text-align: center; padding: 20px 16px;
  line-height: 1.4;
}
.about-scripture {
  font-family: var(--font-display); font-size: 13px;
  letter-spacing: 2px; color: var(--gold);
  text-align: center; margin-top: 8px; display: block;
}

.contact-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(201,147,42,0.1);
}
.contact-row:last-child { border-bottom: none; }
.contact-icon { font-size: 20px; flex-shrink: 0; width: 36px; text-align: center; }
.contact-label {
  font-family: var(--font-sans); font-size: 10px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--gold); display: block; margin-bottom: 2px;
}
.contact-value {
  font-family: var(--font-body); font-size: 15px;
  color: var(--text); text-decoration: none;
}
a.contact-value:active { color: var(--red); }

.social-row {
  display: flex; gap: 10px; padding: 4px 0;
}
.social-btn {
  flex: 1; background: var(--cream);
  border: 1px solid rgba(201,147,42,0.2);
  border-radius: var(--radius-sm);
  padding: 10px; text-align: center;
  cursor: pointer; transition: background 0.2s;
  text-decoration: none;
}
.social-btn:active { background: rgba(201,147,42,0.1); }
.social-icon { font-size: 18px; display: block; margin-bottom: 2px; }
.social-name {
  font-family: var(--font-sans); font-size: 9px;
  letter-spacing: 1.5px; color: var(--text-light); text-transform: uppercase;
}

.partner-card {
  margin: 0 16px 16px;
  background: linear-gradient(135deg, var(--red-dark), var(--red));
  border-radius: var(--radius);
  padding: 20px; text-align: center;
  box-shadow: 0 4px 20px rgba(139,0,0,0.25);
}
.partner-text {
  font-family: var(--font-body); font-style: italic;
  font-size: 16px; color: rgba(245,230,200,0.85);
  line-height: 1.5; margin-bottom: 14px;
}
.btn-partner {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--red-deep); border: none; cursor: pointer;
  font-family: var(--font-display); font-size: 12px;
  font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase;
  padding: 12px 28px; border-radius: 30px;
  box-shadow: var(--shadow-gold);
  transition: transform 0.15s;
}
.btn-partner:active { transform: scale(0.96); }

/* ===== BOTTOM NAVIGATION ===== */
.app-nav {
  position: relative; z-index: 10;
  height: calc(var(--nav-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: white;
  border-top: 1px solid rgba(201,147,42,0.2);
  display: flex; align-items: stretch;
  box-shadow: 0 -2px 12px rgba(28,16,8,0.08);
  flex-shrink: 0;
}
.nav-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  cursor: pointer; gap: 3px;
  background: none; border: none; padding: 0;
  transition: background 0.15s;
  position: relative;
}
.nav-item:active { background: rgba(201,147,42,0.05); }
.nav-item.active .nav-icon { color: var(--red); }
.nav-item.active .nav-label { color: var(--red); }
.nav-item.active::after {
  content: '';
  position: absolute; top: 0; left: 20%; right: 20%;
  height: 2px; background: var(--red);
  border-radius: 0 0 2px 2px;
}
.nav-icon { font-size: 20px; color: rgba(92,64,48,0.5); transition: color 0.15s; }
.nav-label {
  font-family: var(--font-sans); font-size: 9px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(92,64,48,0.5); transition: color 0.15s;
}

/* ===== PLAYLIST VIEW ===== */
.playlist-notice {
  margin: 16px;
  background: white;
  border-radius: var(--radius-sm);
  padding: 16px; text-align: center;
  box-shadow: var(--shadow-card);
}
.playlist-notice-icon { font-size: 32px; margin-bottom: 8px; }
.playlist-notice-text {
  font-family: var(--font-body); font-style: italic;
  font-size: 15px; color: var(--text-light); line-height: 1.5;
}

.track-item {
  background: white;
  border-radius: var(--radius-sm);
  padding: 14px 16px; margin-bottom: 8px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: var(--shadow-card); cursor: pointer;
  transition: transform 0.15s;
}
.track-item:active { transform: scale(0.98); }
.track-item.featured { border-left: 3px solid var(--gold); }
.track-num {
  font-family: var(--font-display);
  font-size: 14px; color: var(--gold); min-width: 24px; text-align: center;
}
.track-info { flex: 1; }
.track-title {
  font-family: var(--font-display);
  font-size: 15px; color: var(--red-dark);
}
.track-artist {
  font-family: var(--font-sans); font-size: 11px;
  color: var(--text-light); margin-top: 2px;
}
.track-type {
  font-family: var(--font-sans); font-size: 9px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--gold); background: rgba(201,147,42,0.1);
  padding: 3px 8px; border-radius: 10px;
  flex-shrink: 0;
}

/* ===== TOAST NOTIFICATION ===== */
.toast {
  position: fixed; bottom: calc(var(--nav-h) + var(--safe-bottom) + 12px);
  left: 50%; transform: translateX(-50%) translateY(10px);
  background: var(--red-dark);
  color: var(--gold-pale);
  font-family: var(--font-sans); font-size: 12px;
  letter-spacing: 1px;
  padding: 10px 20px; border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  z-index: 50; opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none; white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== ANIMATIONS ===== */
@keyframes floatIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}
@keyframes floatSlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Loading skeleton */
.skeleton {
  background: linear-gradient(90deg, #e0d8d0 25%, #ece5dc 50%, #e0d8d0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* Offline indicator */
.offline-bar {
  background: var(--red-dark);
  color: var(--gold-pale);
  font-family: var(--font-sans); font-size: 11px;
  letter-spacing: 1.5px; text-align: center;
  padding: 6px; display: none;
}
.offline-bar.show { display: block; }
</style>
</head>
<body>

<!-- SPLASH SCREEN -->
<div id="splash">
  <div class="splash-logo">
    <img src="assets/images/1000105812.png" alt="TBW Logo" id="splash-logo-img">
  </div>

  <div class="splash-brand">
    <div class="splash-welcome">Welcome to</div>
    <div class="splash-title">THE BOOK WITHIN</div>
    <div class="splash-subtitle">CHRISTIAN MEDIA</div>
  </div>

  <div class="splash-divider"></div>

  <div class="splash-tagline">
    See It. Receive It. Conquer It.
  </div>

  <div class="splash-scripture">
    <p>"Then I said, Here I am—it is written about me in the scroll—I have come to do your will, my God."</p>
    <span>Hebrews 10:7</span>
  </div>

  <div class="splash-enter">
    <button class="btn-enter" onclick="enterApp()">Enter</button>
  </div>

  <div class="splash-gallery">
    <div class="gallery-dot active"></div>
    <div class="gallery-dot"></div>
    <div class="gallery-dot"></div>
    <div class="gallery-dot"></div>
  </div>
</div>

<!-- APP SHELL -->
<div id="app">
  <div class="offline-bar" id="offlineBar">⚠ You are offline — some features unavailable</div>

  <!-- HEADER -->
  <header class="app-header">
    <div class="header-logo" onclick="goHome()">
      <img src="assets/images/1000105812.png" alt="TBW">
      <div class="header-logo-text">
        <span class="name">TBW</span>
        <span class="sub">Christian Radio</span>
      </div>
    </div>
    <div class="header-live">
      <div class="live-badge" id="liveBadge" onclick="goListen()">
        <div class="live-dot"></div>
        <span class="live-text" id="liveText">Live</span>
      </div>
    </div>
  </header>

  <!-- CONTENT -->
  <div class="app-content" id="appContent">

    <!-- HOME -->
    <div class="view active" id="view-home">
      <div class="home-hero">
        <div class="hero-greeting">Good <?php echo (date('H') < 12 ? 'Morning' : (date('H') < 17 ? 'Afternoon' : 'Evening')); ?></div>
        <div class="hero-tagline">See It. Receive It. Conquer It.</div>
        <div class="hero-verse">A space for faith, purpose and growth</div>
      </div>

      <div class="home-actions">
        <div class="action-card primary" onclick="goListen()">
          <span class="action-icon">📻</span>
          <span class="action-label">Listen Live</span>
          <span class="action-sub">TBW Christian Radio</span>
        </div>
        <div class="action-card" onclick="goTo('watch')">
          <span class="action-icon">📺</span>
          <span class="action-label">Watch Live</span>
          <span class="action-sub">Coming soon</span>
        </div>
      </div>

      <div class="now-playing-bar" onclick="goListen()">
        <div class="np-icon">🎵</div>
        <div class="np-info">
          <div class="np-title" id="npTitle">Volume of the Book</div>
          <div class="np-artist" id="npArtist">Moses Akon · TBW Theme</div>
        </div>
        <button class="np-play" id="npPlayBtn" onclick="event.stopPropagation(); togglePlay()">▶</button>
      </div>

      <div class="section-header">
        <span class="section-title">Verse of the Day</span>
        <span class="verse-date" id="verseDate"><?php echo date('D, d M'); ?></span>
      </div>
      <div class="verse-card">
        <div class="verse-ref" id="verseRef"><?php echo htmlspecialchars($dailyVerse['reference']); ?></div>
        <div class="verse-text" id="verseText"><?php echo htmlspecialchars($dailyVerse['text']); ?></div>
      </div>

      <div class="section-header">
        <span class="section-title">Explore</span>
      </div>
      <div class="quick-grid">
        <div class="quick-item" onclick="goTo('schedule')">
          <span class="quick-icon">📅</span>
          <span class="quick-label">Schedule</span>
        </div>
        <div class="quick-item" onclick="goTo('events')">
          <span class="quick-icon">✨</span>
          <span class="quick-label">Events</span>
        </div>
        <div class="quick-item" onclick="goTo('playlist')">
          <span class="quick-icon">🎶</span>
          <span class="quick-label">Playlist</span>
        </div>
        <div class="quick-item" onclick="goTo('about')">
          <span class="quick-icon">🕊</span>
          <span class="quick-label">About</span>
        </div>
        <div class="quick-item" onclick="goTo('contact')">
          <span class="quick-icon">📬</span>
          <span class="quick-label">Contact</span>
        </div>
        <div class="quick-item" onclick="goTo('partner')">
          <span class="quick-icon">🤝</span>
          <span class="quick-label">Partner</span>
        </div>
      </div>

      <div class="section-header">
        <span class="section-title">Gallery</span>
      </div>
      <div class="brand-carousel" id="brandCarousel">
        <div class="brand-img"><img src="assets/images/1000104825.png" alt="Conquer It" loading="lazy"></div>
        <div class="brand-img"><img src="assets/images/1000105812.png" alt="TBW Christian Media" loading="lazy"></div>
        <div class="brand-img"><img src="assets/images/1000104828.png" alt="See It" loading="lazy"></div>
        <div class="brand-img"><img src="assets/images/1000104826.png" alt="Faith" loading="lazy"></div>
        <div class="brand-img"><img src="assets/images/1000104827.png" alt="Purpose" loading="lazy"></div>
        <div class="brand-img"><img src="assets/images/1000104824.png" alt="Receive It" loading="lazy"></div>
        <div class="brand-img"><img src="assets/images/1000105820.png" alt="Community" loading="lazy"></div>
        <div class="brand-img"><img src="assets/images/1000105823.png" alt="Welcome" loading="lazy"></div>
      </div>
    </div>

    <!-- LISTEN / PLAYER -->
    <div class="view" id="view-listen">
      <div class="player-hero">
        <div class="player-art">
          <img src="assets/images/1000105812.png" alt="Now Playing">
          <div class="player-art-overlay"></div>
        </div>
        <div class="player-title" id="playerTitle">TBW Christian Radio</div>
        <div class="player-artist" id="playerArtist">Live Broadcast</div>
        <div class="player-live-badge" id="playerLiveBadge">
          <div class="player-live-dot"></div>
          <span class="player-live-text" id="playerLiveText">On Air</span>
        </div>
      </div>

      <div class="player-controls">
        <button class="ctrl-btn" onclick="showToast('Previous track')">⏮</button>
        <button class="ctrl-btn" onclick="seek(-15)">↺ 15</button>
        <button class="ctrl-play" id="mainPlayBtn" onclick="togglePlay()">▶</button>
        <button class="ctrl-btn" onclick="seek(15)">15 ↻</button>
        <button class="ctrl-btn" onclick="showToast('Next track')">⏭</button>
      </div>

      <div class="volume-row">
        <span class="volume-icon">🔈</span>
        <input type="range" class="volume-slider" id="volumeSlider" min="0" max="100" value="80" oninput="setVolume(this.value)">
        <span class="volume-icon">🔊</span>
      </div>

      <div class="player-info-card">
        <div class="player-info-title">Now Playing</div>
        <div class="player-info-text" id="playerInfo">Volume of the Book — Moses Akon<br><br>TBW Christian Radio streams faith-filled content 24/7. Tune in for worship, teaching, and the Word of God.</div>
      </div>

      <div class="section-header">
        <span class="section-title">Recent Tracks</span>
      </div>
      <div style="padding: 0 16px 16px;">
        <div class="track-item featured">
          <div class="track-num">♫</div>
          <div class="track-info">
            <div class="track-title">Volume of the Book</div>
            <div class="track-artist">Moses Akon</div>
          </div>
          <div class="track-type">Theme</div>
        </div>
        <div class="track-item">
          <div class="track-num">1</div>
          <div class="track-info">
            <div class="track-title">Morning Devotion</div>
            <div class="track-artist">TBW Team</div>
          </div>
          <div class="track-type">Devotional</div>
        </div>
        <div class="track-item">
          <div class="track-num">2</div>
          <div class="track-info">
            <div class="track-title">Worship Collective</div>
            <div class="track-artist">Various Artists</div>
          </div>
          <div class="track-type">Worship</div>
        </div>
      </div>
    </div>

    <!-- SCHEDULE -->
    <div class="view" id="view-schedule">
      <div class="view-header">
        <div class="view-header-title">Programme Schedule</div>
        <div class="view-header-sub">Broadcasting faith across every hour</div>
      </div>
      <div class="schedule-notice" id="scheduleNotice">
        Full programme schedule coming soon. Stay connected for updates.
      </div>
      <div class="day-tabs" id="dayTabs"></div>
      <div class="programme-list" id="programmeList"></div>
    </div>

    <!-- EVENTS -->
    <div class="view" id="view-events">
      <div class="view-header">
        <div class="view-header-title">Events</div>
        <div class="view-header-sub">Broadcasts, conferences and ministry gatherings</div>
      </div>
      <div id="eventsContent">
        <div class="event-featured">
          <div class="event-featured-label">⭐ Featured</div>
          <div class="event-featured-title">TBW Christian Media Launch</div>
          <div class="event-featured-desc">The official launch of TBW Christian Media — a movement awakening purpose across nations. Be part of history.</div>
          <button class="btn-event" onclick="showToast('Stay tuned for launch details!')">Stay Connected</button>
        </div>
        <div class="section-header"><span class="section-title">Upcoming</span></div>
        <div class="events-list" id="eventsList"></div>
      </div>
    </div>

    <!-- PLAYLIST -->
    <div class="view" id="view-playlist">
      <div class="view-header">
        <div class="view-header-title">Playlist</div>
        <div class="view-header-sub">Faith-filled music and content</div>
      </div>
      <div class="playlist-notice">
        <div class="playlist-notice-icon">🎵</div>
        <div class="playlist-notice-text">Full streaming playlist launching with the TBW Christian Radio broadcast. Stay tuned.</div>
      </div>
      <div class="section-header"><span class="section-title">Featured</span></div>
      <div style="padding: 0 16px;">
        <div class="track-item featured" onclick="goListen()">
          <div class="track-num" style="color:var(--gold)">★</div>
          <div class="track-info">
            <div class="track-title">Volume of the Book</div>
            <div class="track-artist">Moses Akon</div>
          </div>
          <div class="track-type">Theme Song</div>
        </div>
      </div>
      <div class="section-header"><span class="section-title">Recently Played</span></div>
      <div style="padding: 0 16px 16px;" id="recentTracks"></div>
    </div>

    <!-- ABOUT -->
    <div class="view" id="view-about">
      <div class="view-header">
        <div class="view-header-title">About Us</div>
        <div class="view-header-sub">A movement rooted in purpose</div>
      </div>
      <div class="about-emblem">
        <img src="assets/images/1000105812.png" alt="TBW Emblem">
      </div>
      <div class="about-block">
        <div class="about-block-title">Our Mission</div>
        <div class="about-block-text">TBW Christian Media is a movement rooted in the biblical revelation of The Book Within—the truth that God has written a purpose and destiny for every life. Our mission is to awaken that purpose, equip individuals, and strengthen families, communities, and nations to walk in all God has destined.</div>
      </div>
      <div class="about-block">
        <div class="about-block-title">TBW Christian Radio</div>
        <div class="about-block-text">Through TBW Christian Radio, we help people see, receive, and walk out their God-given identity and assignment. We are a space for faith, purpose and growth.</div>
      </div>
      <div class="about-mission-quote">
        "See It. Receive It. Conquer It."
        <span class="about-scripture">Hebrews 10:7</span>
      </div>
    </div>

    <!-- CONTACT -->
    <div class="view" id="view-contact">
      <div class="view-header">
        <div class="view-header-title">Contact</div>
        <div class="view-header-sub">Get in touch with TBW</div>
      </div>
      <div class="about-block" style="margin-top:16px;">
        <div class="about-block-title">Get In Touch</div>
        <div class="contact-row">
          <div class="contact-icon">✉️</div>
          <div>
            <span class="contact-label">Email</span>
            <a class="contact-value" href="mailto:info@tbwchristianmedia.org">info@tbwchristianmedia.org</a>
          </div>
        </div>
        <div class="contact-row">
          <div class="contact-icon">🌐</div>
          <div>
            <span class="contact-label">Website</span>
            <span class="contact-value">Launching Soon</span>
          </div>
        </div>
      </div>
      <div class="about-block">
        <div class="about-block-title">Follow Us</div>
        <div class="social-row">
          <a class="social-btn" href="#" onclick="showToast('Facebook coming soon')">
            <span class="social-icon">📘</span>
            <span class="social-name">Facebook</span>
          </a>
          <a class="social-btn" href="#" onclick="showToast('Instagram coming soon')">
            <span class="social-icon">📷</span>
            <span class="social-name">Instagram</span>
          </a>
          <a class="social-btn" href="#" onclick="showToast('YouTube coming soon')">
            <span class="social-icon">📹</span>
            <span class="social-name">YouTube</span>
          </a>
        </div>
      </div>
    </div>

    <!-- PARTNER -->
    <div class="view" id="view-partner">
      <div class="view-header">
        <div class="view-header-title">Partnership</div>
        <div class="view-header-sub">Join the movement</div>
      </div>
      <div class="about-emblem">
        <img src="assets/images/1000105823.png" alt="The Book Within">
      </div>
      <div class="about-block">
        <div class="about-block-title">Partner With TBW</div>
        <div class="about-block-text">Join us in awakening purpose, equipping believers, and strengthening families, communities and nations. Your partnership enables TBW Christian Media to reach more people with the life-changing message of purpose and faith.</div>
      </div>
      <div class="partner-card">
        <div class="partner-text">Together, we can help every person see, receive, and walk out the destiny God has written for them.</div>
        <button class="btn-partner" onclick="showToast('Partnership link launching soon with our website!')">Partner With Us</button>
      </div>
      <div style="padding: 0 16px 16px;">
        <div class="verse-card">
          <div class="verse-ref">Malachi 3:10</div>
          <div class="verse-text">Bring the whole tithe into the storehouse, that there may be food in my house. Test me in this, says the Lord Almighty, and see if I will not throw open the floodgates of heaven and pour out so much blessing that there will not be room enough to store it.</div>
        </div>
      </div>
    </div>

  </div><!-- /app-content -->

  <!-- BOTTOM NAV -->
  <nav class="app-nav">
    <button class="nav-item active" id="nav-home" onclick="goTo('home')">
      <span class="nav-icon">🏠</span>
      <span class="nav-label">Home</span>
    </button>
    <button class="nav-item" id="nav-listen" onclick="goTo('listen')">
      <span class="nav-icon">📻</span>
      <span class="nav-label">Listen</span>
    </button>
    <button class="nav-item" id="nav-schedule" onclick="goTo('schedule')">
      <span class="nav-icon">📅</span>
      <span class="nav-label">Schedule</span>
    </button>
    <button class="nav-item" id="nav-events" onclick="goTo('events')">
      <span class="nav-icon">✨</span>
      <span class="nav-label">Events</span>
    </button>
    <button class="nav-item" id="nav-about" onclick="goTo('about')">
      <span class="nav-icon">🕊</span>
      <span class="nav-label">About</span>
    </button>
  </nav>
</div>

<!-- Toast -->
<div class="toast" id="toast"></div>

<audio id="radioAudio" preload="none">
  <!-- Stream URL to be configured by TBW team -->
  <!-- <source src="YOUR_STREAM_URL" type="audio/mpeg"> -->
</audio>

<script>
// ===== STATE =====
let isPlaying = false;
let currentView = 'home';
let toastTimer = null;
const audio = document.getElementById('radioAudio');

// ===== SPLASH =====
function enterApp() {
  const splash = document.getElementById('splash');
  splash.classList.add('fade-out');
  setTimeout(() => {
    splash.classList.add('hidden');
    document.getElementById('app').classList.add('visible');
    loadDynamicContent();
  }, 600);
}

// Auto-dismiss splash after 6 seconds (allow reading)
setTimeout(() => {
  const splash = document.getElementById('splash');
  if (!splash.classList.contains('hidden')) {
    enterApp();
  }
}, 6000);

// Animate gallery dots
let dotIndex = 0;
const dots = document.querySelectorAll('.gallery-dot');
setInterval(() => {
  dots.forEach(d => d.classList.remove('active'));
  dotIndex = (dotIndex + 1) % dots.length;
  dots[dotIndex].classList.add('active');
}, 1800);

// ===== NAVIGATION =====
function goTo(view) {
  // Map aliases
  if (view === 'contact' || view === 'partner' || view === 'watch') {
    // These are sub-views, handled directly
  }

  // Handle special cases not in bottom nav
  const navViews = ['home', 'listen', 'schedule', 'events', 'about'];
  
  document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
  document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
  
  const viewEl = document.getElementById('view-' + view);
  if (viewEl) {
    viewEl.classList.add('active');
    currentView = view;
    // Scroll top
    document.getElementById('appContent').scrollTop = 0;
  }

  const navEl = document.getElementById('nav-' + view);
  if (navEl) navEl.classList.add('active');

  // Handle views that share a nav tab
  if (view === 'contact' || view === 'partner') {
    document.getElementById('nav-about').classList.add('active');
  }

  if (view === 'playlist') {
    // No dedicated nav, just show view
  }

  if (view === 'watch') {
    showToast('Watch Live coming soon!');
    return;
  }

  // Load data if needed
  if (view === 'schedule') loadSchedule();
  if (view === 'events') loadEvents();
  if (view === 'playlist') loadPlaylist();
}

function goHome() { goTo('home'); }
function goListen() { goTo('listen'); }

// ===== PLAYBACK =====
function togglePlay() {
  isPlaying = !isPlaying;
  updatePlayUI();
  
  if (isPlaying) {
    showToast('▶ TBW Christian Radio — On Air');
    // audio.play().catch(() => {}); // Uncomment when stream URL is set
    document.getElementById('liveBadge').classList.add('playing');
  } else {
    showToast('⏸ Paused');
    // audio.pause();
    document.getElementById('liveBadge').classList.remove('playing');
  }
}

function updatePlayUI() {
  const icon = isPlaying ? '⏸' : '▶';
  document.getElementById('mainPlayBtn').textContent = icon;
  document.getElementById('npPlayBtn').textContent = icon;
  document.getElementById('liveText').textContent = isPlaying ? 'On Air' : 'Live';
}

function seek(seconds) {
  showToast((seconds > 0 ? '+' : '') + seconds + 's');
}

function setVolume(val) {
  audio.volume = val / 100;
}

// ===== TOAST =====
function showToast(msg) {
  const toast = document.getElementById('toast');
  toast.textContent = msg;
  toast.classList.add('show');
  clearTimeout(toastTimer);
  toastTimer = setTimeout(() => toast.classList.remove('show'), 2500);
}

// ===== LOAD DATA =====
function loadDynamicContent() {
  loadVerse();
  // Pre-warm
}

function loadVerse() {
  fetch('api/verse.php')
    .then(r => r.json())
    .then(d => {
      document.getElementById('verseRef').textContent = d.reference;
      document.getElementById('verseText').textContent = d.text;
      if (d.date) document.getElementById('verseDate').textContent = d.date;
    })
    .catch(() => {}); // Keep server-rendered fallback
}

function loadSchedule() {
  const tabs = document.getElementById('dayTabs');
  const list = document.getElementById('programmeList');
  
  if (tabs.children.length > 0) return; // Already loaded
  
  fetch('api/schedule.php')
    .then(r => r.json())
    .then(data => {
      const today = new Date().toLocaleDateString('en-GB', {weekday: 'long'});
      
      tabs.innerHTML = '';
      list.innerHTML = '';
      
      data.days.forEach((day, i) => {
        const tab = document.createElement('button');
        tab.className = 'day-tab' + (day.day === today ? ' active' : '');
        tab.textContent = day.day.slice(0,3);
        tab.onclick = () => {
          document.querySelectorAll('.day-tab').forEach(t => t.classList.remove('active'));
          tab.classList.add('active');
          renderProgrammes(day.programmes, day.day === today);
        };
        tabs.appendChild(tab);
      });
      
      // Show today or first
      const todayData = data.days.find(d => d.day === today) || data.days[0];
      renderProgrammes(todayData.programmes, true);
    })
    .catch(() => {
      list.innerHTML = '<div class="schedule-notice">Schedule loading... Please check your connection.</div>';
    });
}

function renderProgrammes(programmes, isToday) {
  const list = document.getElementById('programmeList');
  const now = new Date();
  const currentTime = now.getHours() * 60 + now.getMinutes();
  
  list.innerHTML = programmes.map((p, i) => {
    const [h, m] = p.time.split(':').map(Number);
    const progMins = h * 60 + m;
    const next = programmes[i+1];
    const nextMins = next ? parseInt(next.time.split(':')[0]) * 60 + parseInt(next.time.split(':')[1]) : progMins + 60;
    const isCurrent = isToday && currentTime >= progMins && currentTime < nextMins;
    
    return `<div class="programme-item${isCurrent ? ' now' : ''}">
      <div class="prog-time">${p.time}</div>
      <div class="prog-info">
        <div class="prog-title">${p.title}${isCurrent ? ' <span style="font-size:9px;background:var(--gold);color:var(--red-deep);padding:1px 6px;border-radius:8px;letter-spacing:1px;vertical-align:middle;">NOW</span>' : ''}</div>
        <div class="prog-desc">${p.description}</div>
        <div class="prog-host">${p.host}</div>
      </div>
    </div>`;
  }).join('');
}

function loadEvents() {
  const list = document.getElementById('eventsList');
  if (list.children.length > 0) return;
  
  fetch('api/events.php')
    .then(r => r.json())
    .then(data => {
      const icons = {broadcast: '📻', teaching: '📖', prayer: '🙏', conference: '✨'};
      list.innerHTML = data.events.map(e => `
        <div class="event-card">
          <div class="event-type">${icons[e.type] || '⭐'} ${e.type}</div>
          <div class="event-title">${e.title}</div>
          <div class="event-meta">
            <div class="event-meta-item">📅 ${e.date}</div>
            <div class="event-meta-item">📍 ${e.location}</div>
          </div>
          <div class="event-desc">${e.description}</div>
          ${e.registration ? '<button class="btn-event" style="margin-top:10px;font-size:10px;padding:8px 18px;" onclick="showToast(\'Registration opening soon\')">Register Interest</button>' : ''}
        </div>
      `).join('');
    })
    .catch(() => {
      list.innerHTML = '<div class="schedule-notice">Events loading... Please check your connection.</div>';
    });
}

function loadPlaylist() {
  const container = document.getElementById('recentTracks');
  if (container.children.length > 0) return;
  
  fetch('api/playlist.php')
    .then(r => r.json())
    .then(data => {
      container.innerHTML = data.recent.map((t, i) => `
        <div class="track-item" onclick="showToast('${t.title}')">
          <div class="track-num">${i + 1}</div>
          <div class="track-info">
            <div class="track-title">${t.title}</div>
            <div class="track-artist">${t.artist}</div>
          </div>
          <div class="track-type">${t.type}</div>
        </div>
      `).join('');
    })
    .catch(() => {});
}

// ===== OFFLINE DETECTION =====
function updateOnlineStatus() {
  const bar = document.getElementById('offlineBar');
  if (!navigator.onLine) {
    bar.classList.add('show');
  } else {
    bar.classList.remove('show');
  }
}
window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);
updateOnlineStatus();

// ===== SERVICE WORKER =====
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('sw.js')
      .then(reg => console.log('SW registered:', reg.scope))
      .catch(err => console.log('SW failed:', err));
  });
}

// ===== INSTALL PROMPT =====
let installPrompt = null;
window.addEventListener('beforeinstallprompt', e => {
  e.preventDefault();
  installPrompt = e;
  // Could show an install button here
});
</script>
</body>
</html>
