<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BD Live TV Pro — control room</title>
  <!-- Font Awesome for icons (free) -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <style>
    /* ===== BD Live TV Pro — broadcast control-room look ===== */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
      background: #0b0d12;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 24px;
    }

    .bdltv {
      --bdltv-accent: #ff4a3d;
      --bdltv-list-h: 640px;
      --bdltv-bg: #0f1218;
      --bdltv-panel: #161a22;
      --bdltv-panel-2: #1d222c;
      --bdltv-line: #2a303c;
      --bdltv-text: #eceff4;
      --bdltv-muted: #8d96a8;

      box-sizing: border-box;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 380px;
      gap: 20px;
      padding: 20px;
      background: var(--bdltv-bg);
      color: var(--bdltv-text);
      border: 1px solid var(--bdltv-line);
      border-radius: 18px;
      line-height: 1.4;
      max-width: 1400px;
      width: 100%;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
    }

    .bdltv *,
    .bdltv *::before,
    .bdltv *::after {
      box-sizing: border-box;
    }

    .bdltv [hidden] {
      display: none !important;
    }

    .bdltv .is-hidden {
      display: none !important;
    }

    .bdltv svg {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* Reset theme button/input styles */
    .bdltv button,
    .bdltv input[type="search"] {
      font: inherit;
      margin: 0;
      text-transform: none;
      letter-spacing: normal;
      box-shadow: none;
      text-shadow: none;
      -webkit-appearance: none;
      appearance: none;
    }

    .bdltv button {
      cursor: pointer;
      border: 0;
      background: none;
      color: inherit;
    }

    .bdltv button:focus-visible,
    .bdltv input:focus-visible {
      outline: 2px solid var(--bdltv-accent);
      outline-offset: 2px;
    }

    /* ---------- Player ---------- */
    .bdltv-main {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .bdltv-player {
      position: relative;
      aspect-ratio: 16 / 9;
      background: #000;
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid var(--bdltv-line);
    }

    .bdltv-screen,
    .bdltv-screen video,
    .bdltv-screen iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
      background: #000;
    }

    .bdltv-screen video {
      object-fit: contain;
    }

    .bdltv-player:fullscreen {
      border-radius: 0;
      border: 0;
      aspect-ratio: auto;
    }

    .bdltv-overlay {
      position: absolute;
      inset: 0;
      z-index: 3;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      background: rgba(8, 10, 14, .78);
      text-align: center;
      padding: 24px;
      pointer-events: none;
    }

    .bdltv-overlay.is-none {
      display: none;
    }

    .bdltv-overlay.is-start,
    .bdltv-overlay.is-error,
    .bdltv-overlay.is-tap {
      pointer-events: auto;
    }

    .bdltv-overlay.is-tap {
      background: transparent;
    }

    .bdltv-overlay p {
      margin: 0;
      color: var(--bdltv-muted);
      font-size: 14px;
      max-width: 420px;
    }

    .bdltv-overlay p.bdltv-err {
      color: var(--bdltv-text);
      font-size: 15px;
    }

    .bdltv-spin {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 3px solid rgba(255, 255, 255, .15);
      border-top-color: var(--bdltv-accent);
      animation: bdltv-spin .8s linear infinite;
    }

    @keyframes bdltv-spin {
      to {
        transform: rotate(360deg);
      }
    }

    .bdltv .bdltv-bigplay {
      width: 76px;
      height: 76px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--bdltv-accent);
      color: #fff;
      transition: transform .15s ease;
    }

    .bdltv .bdltv-bigplay:hover {
      transform: scale(1.06);
      background: var(--bdltv-accent);
    }

    .bdltv .bdltv-bigplay svg {
      width: 32px;
      height: 32px;
      fill: currentColor;
      stroke: none;
      margin-left: 4px;
    }

    .bdltv .bdltv-retry {
      padding: 10px 20px;
      border-radius: 8px;
      background: var(--bdltv-accent);
      color: #fff;
      font-weight: 600;
      font-size: 14px;
    }

    .bdltv .bdltv-retry:hover {
      background: var(--bdltv-accent);
      filter: brightness(1.1);
    }

    .bdltv .bdltv-unmute {
      position: absolute;
      z-index: 4;
      top: 14px;
      left: 14px;
      padding: 9px 16px;
      border-radius: 999px;
      background: rgba(15, 18, 24, .88);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, .22);
      font-size: 13px;
      font-weight: 600;
      backdrop-filter: blur(6px);
    }

    .bdltv .bdltv-unmute:hover {
      background: var(--bdltv-accent);
      border-color: var(--bdltv-accent);
      color: #fff;
    }

    /* ---------- Now playing bar ---------- */
    .bdltv-now {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 12px 14px;
      background: var(--bdltv-panel);
      border: 1px solid var(--bdltv-line);
      border-radius: 12px;
    }

    .bdltv-now-logo {
      flex: none;
      width: 56px;
      height: 56px;
      border-radius: 10px;
      background: var(--bdltv-panel-2);
      border: 1px solid var(--bdltv-line);
      display: grid;
      place-items: center;
      overflow: hidden;
    }

    .bdltv-now-logo img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: 6px;
    }

    .bdltv-now-logo span {
      font-size: 22px;
      font-weight: 700;
      color: var(--bdltv-muted);
    }

    .bdltv-now-text {
      flex: 1;
      min-width: 0;
    }

    .bdltv-now-name {
      margin: 2px 0 0;
      padding: 0;
      font-size: 18px;
      line-height: 1.3;
      font-weight: 700;
      color: var(--bdltv-text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .bdltv-now-cat {
      margin: 0;
      font-size: 13px;
      color: var(--bdltv-muted);
    }

    .bdltv-now-cat:empty {
      display: none;
    }

    /* The on-air tally light */
    .bdltv-live {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 12px;
      font-weight: 700;
      color: var(--bdltv-accent);
    }

    .bdltv-live i {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--bdltv-accent);
      box-shadow: 0 0 0 0 var(--bdltv-accent);
      animation: bdltv-tally 1.6s ease-out infinite;
    }

    @keyframes bdltv-tally {
      0% {
        box-shadow: 0 0 0 0 rgba(255, 74, 61, .65);
      }
      70% {
        box-shadow: 0 0 0 9px rgba(255, 74, 61, 0);
      }
      100% {
        box-shadow: 0 0 0 0 rgba(255, 74, 61, 0);
      }
    }

    .bdltv-actions {
      display: flex;
      gap: 6px;
      flex: none;
    }

    .bdltv .bdltv-btn {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      background: var(--bdltv-panel-2);
      color: var(--bdltv-text);
      border: 1px solid var(--bdltv-line);
      transition: border-color .15s ease, color .15s ease;
    }

    .bdltv .bdltv-btn:hover {
      background: var(--bdltv-panel-2);
      border-color: var(--bdltv-accent);
      color: var(--bdltv-accent);
    }

    /* ---------- Channel list ---------- */
    .bdltv-side {
      min-width: 0;
      display: flex;
      flex-direction: column;
      max-height: calc(var(--bdltv-list-h) + 120px);
      background: var(--bdltv-panel);
      border: 1px solid var(--bdltv-line);
      border-radius: 12px;
      overflow: hidden;
    }

    .bdltv-side-head {
      padding: 16px 16px 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .bdltv-side-head strong {
      font-size: 16px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .bdltv-count {
      font-size: 12px;
      font-weight: 600;
      color: var(--bdltv-muted);
      background: var(--bdltv-panel-2);
      border-radius: 999px;
      padding: 2px 9px;
    }

    .bdltv-search {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 12px;
      height: 42px;
      background: var(--bdltv-bg);
      border: 1px solid var(--bdltv-line);
      border-radius: 10px;
      color: var(--bdltv-muted);
    }

    .bdltv-search:focus-within {
      border-color: var(--bdltv-accent);
    }

    .bdltv-search svg {
      width: 18px;
      height: 18px;
      flex: none;
    }

    .bdltv .bdltv-search input {
      flex: 1;
      min-width: 0;
      width: 100%;
      height: 100%;
      border: 0;
      background: transparent;
      box-shadow: none;
      padding: 0;
      margin: 0;
      color: var(--bdltv-text);
      font-size: 14px;
      outline: none;
    }

    .bdltv .bdltv-search input::placeholder {
      color: var(--bdltv-muted);
      opacity: 1;
    }

    .bdltv .bdltv-search input:focus-visible {
      outline: none;
    }

    .bdltv-cats {
      display: flex;
      gap: 8px;
      padding: 0 16px 12px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .bdltv-cats::-webkit-scrollbar {
      display: none;
    }

    .bdltv .bdltv-chip {
      flex: none;
      padding: 7px 14px;
      border-radius: 999px;
      background: var(--bdltv-panel-2);
      color: var(--bdltv-muted);
      border: 1px solid var(--bdltv-line);
      font-size: 13px;
      font-weight: 600;
      white-space: nowrap;
    }

    .bdltv .bdltv-chip:hover {
      background: var(--bdltv-panel-2);
      color: var(--bdltv-text);
    }

    .bdltv .bdltv-chip.is-active {
      background: var(--bdltv-accent);
      border-color: var(--bdltv-accent);
      color: #fff;
    }

    .bdltv-list {
      list-style: none;
      margin: 0;
      padding: 4px 10px 12px;
      overflow-y: auto;
      flex: 1;
      scrollbar-width: thin;
      scrollbar-color: var(--bdltv-line) transparent;
    }

    .bdltv-list li {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .bdltv-list li::marker {
      content: '';
    }

    .bdltv-list::-webkit-scrollbar {
      width: 8px;
    }

    .bdltv-list::-webkit-scrollbar-thumb {
      background: var(--bdltv-line);
      border-radius: 8px;
    }

    .bdltv .bdltv-item {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 9px 10px;
      margin: 2px 0;
      border-radius: 10px;
      text-align: left;
      background: transparent;
      color: var(--bdltv-text);
      border: 1px solid transparent;
      transition: background .15s ease, border-color .15s ease;
    }

    .bdltv .bdltv-item:hover {
      background: var(--bdltv-panel-2);
      color: var(--bdltv-text);
    }

    .bdltv .bdltv-item.is-active {
      background: var(--bdltv-panel-2);
      border-color: var(--bdltv-accent);
      color: var(--bdltv-text);
    }

    .bdltv-logo {
      flex: none;
      width: 46px;
      height: 46px;
      border-radius: 9px;
      background: var(--bdltv-bg);
      border: 1px solid var(--bdltv-line);
      display: grid;
      place-items: center;
      overflow: hidden;
    }

    .bdltv-logo img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: 5px;
    }

    .bdltv-logo b {
      font-size: 18px;
      color: var(--bdltv-muted);
    }

    .bdltv-meta {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
    }

    .bdltv-name {
      font-size: 15px;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .bdltv-sub {
      font-size: 12px;
      color: var(--bdltv-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Equalizer bars show on the channel that is playing */
    .bdltv-eq {
      display: none;
      align-items: flex-end;
      gap: 2px;
      height: 16px;
      flex: none;
    }

    .bdltv-eq i {
      width: 3px;
      background: var(--bdltv-accent);
      border-radius: 2px;
      animation: bdltv-eq 1s ease-in-out infinite;
    }

    .bdltv-eq i:nth-child(1) {
      height: 60%;
      animation-delay: -.2s;
    }

    .bdltv-eq i:nth-child(2) {
      height: 100%;
      animation-delay: -.5s;
    }

    .bdltv-eq i:nth-child(3) {
      height: 40%;
      animation-delay: -.8s;
    }

    @keyframes bdltv-eq {
      0%, 100% {
        transform: scaleY(.35);
      }
      50% {
        transform: scaleY(1);
      }
    }

    .bdltv-item.is-active .bdltv-eq {
      display: flex;
    }

    .bdltv-eq i {
      transform-origin: bottom;
    }

    .bdltv-none {
      margin: 0;
      padding: 24px 16px;
      text-align: center;
      color: var(--bdltv-muted);
      font-size: 14px;
    }

    .bdltv-empty {
      padding: 24px;
      border: 1px dashed #c3c4c7;
      border-radius: 10px;
      text-align: center;
      color: #50575e;
    }

    /* ---------- Grid layout ---------- */
    .bdltv--grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .bdltv--grid .bdltv-main {
      max-width: 1000px;
      width: 100%;
      margin: 0 auto;
    }

    .bdltv--grid .bdltv-side {
      max-height: none;
    }

    .bdltv--grid .bdltv-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 10px;
      max-height: var(--bdltv-list-h);
      padding: 4px 16px 16px;
    }

    .bdltv--grid .bdltv-side-head {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .bdltv--grid .bdltv-search {
      width: 100%;
      max-width: 320px;
    }

    .bdltv--grid .bdltv .bdltv-item,
    .bdltv--grid .bdltv-item {
      flex-direction: column;
      text-align: center;
      padding: 16px 10px 12px;
      margin: 0;
      height: 100%;
      background: var(--bdltv-panel-2);
      border-color: var(--bdltv-line);
    }

    .bdltv--grid .bdltv-item.is-active {
      border-color: var(--bdltv-accent);
    }

    .bdltv--grid .bdltv-logo {
      width: 64px;
      height: 64px;
    }

    .bdltv--grid .bdltv-meta {
      width: 100%;
      align-items: center;
    }

    .bdltv--grid .bdltv-name,
    .bdltv--grid .bdltv-sub {
      max-width: 100%;
    }

    .bdltv--grid .bdltv-eq {
      position: absolute;
    }

    .bdltv--grid .bdltv-item {
      position: relative;
    }

    .bdltv--grid .bdltv-eq {
      top: 10px;
      right: 10px;
    }

    /* ---------- Responsive ---------- */
    @media (max-width: 1024px) {
      .bdltv {
        grid-template-columns: minmax(0, 1fr);
        padding: 14px;
      }
      .bdltv-side {
        max-height: 520px;
      }
    }

    @media (max-width: 600px) {
      .bdltv {
        padding: 10px;
        border-radius: 14px;
        gap: 14px;
      }
      .bdltv-now {
        flex-wrap: wrap;
      }
      .bdltv-now-logo {
        width: 46px;
        height: 46px;
      }
      .bdltv-now-name {
        font-size: 16px;
      }
      .bdltv-actions {
        width: 100%;
        justify-content: space-between;
      }
      .bdltv .bdltv-btn {
        flex: 1;
      }
      .bdltv--grid .bdltv-list {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .bdltv-live i,
      .bdltv-eq i,
      .bdltv-spin {
        animation: none;
      }
    }

    /* extra polish */
    .bdltv .bdltv-bigplay i,
    .bdltv-actions i {
      font-size: 1.2rem;
    }
    .bdltv-bigplay i {
      margin-left: 4px;
    }
    .bdltv .bdltv-btn i {
      font-size: 1.1rem;
    }
    .bdltv .bdltv-search i {
      font-size: 0.95rem;
      color: var(--bdltv-muted);
    }
    .bdltv-live span {
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .bdltv-now-logo span {
      font-size: 22px;
      font-weight: 700;
    }
    .bdltv-overlay .fa-spinner {
      font-size: 2.5rem;
      color: var(--bdltv-accent);
      animation: bdltv-spin 1s linear infinite;
    }
    .bdltv-bigplay .fa-play {
      font-size: 2rem;
    }
    .bdltv-unmute i {
      margin-right: 6px;
    }
  </style>
</head>
<body>
  <div class="bdltv" id="app">
    <!-- ========== MAIN PLAYER COLUMN ========== -->
    <div class="bdltv-main">
      <!-- Player area -->
      <div class="bdltv-player" id="player">
        <div class="bdltv-screen" id="screen">
          <!-- video placeholder (we use background) -->
        </div>
        <!-- overlay for start / error / loading -->
        <div class="bdltv-overlay is-start" id="overlay">
          <button class="bdltv-bigplay" id="bigPlayBtn" aria-label="Play">
            <i class="fas fa-play"></i>
          </button>
          <p>Press play to start streaming</p>
        </div>
        <!-- unmute floating (hidden initially) -->
        <button class="bdltv-unmute" id="unmuteBtn" hidden>
          <i class="fas fa-volume-mute"></i> Unmute
        </button>
      </div>

      <!-- Now playing bar -->
      <div class="bdltv-now">
        <div class="bdltv-now-logo" id="nowLogo">
          <span>?</span>
        </div>
        <div class="bdltv-now-text">
          <div class="bdltv-live"><i></i> <span>LIVE</span></div>
          <h3 class="bdltv-now-name" id="nowName">Select a channel</h3>
          <p class="bdltv-now-cat" id="nowCat">—</p>
        </div>
        <div class="bdltv-actions">
          <button class="bdltv-btn" title="Favorite" id="favBtn"><i class="far fa-heart"></i></button>
          <button class="bdltv-btn" title="Share" id="shareBtn"><i class="fas fa-share-alt"></i></button>
          <button class="bdltv-btn" title="Fullscreen" id="fsBtn"><i class="fas fa-expand"></i></button>
        </div>
      </div>
    </div>

    <!-- ========== SIDEBAR CHANNEL LIST ========== -->
    <div class="bdltv-side">
      <div class="bdltv-side-head">
        <strong><i class="fas fa-tv" style="color:var(--bdltv-accent);"></i> Channels <span class="bdltv-count" id="channelCount">6</span></strong>
        <label class="bdltv-search">
          <i class="fas fa-search"></i>
          <input type="search" placeholder="Search channels..." id="searchInput" aria-label="Search channels">
        </label>
      </div>
      <div class="bdltv-cats" id="categoryBar">
        <button class="bdltv-chip is-active" data-cat="all">All</button>
        <button class="bdltv-chip" data-cat="news">News</button>
        <button class="bdltv-chip" data-cat="sports">Sports</button>
        <button class="bdltv-chip" data-cat="entertainment">Entertainment</button>
        <button class="bdltv-chip" data-cat="music">Music</button>
      </div>
      <ul class="bdltv-list" id="channelList">
        <!-- populated by JS -->
      </ul>
    </div>
  </div>

  <script>
    (function() {
      // ---------- SAMPLE CHANNEL DATA ----------
      const channels = [
        { id: 'c1', name: 'BD News 24/7', category: 'News', logo: '📺', color: '#e74c3c', viewers: '12.4K', active: false },
        { id: 'c2', name: 'Sports Arena HD', category: 'Sports', logo: '⚽', color: '#2ecc71', viewers: '8.1K', active: false },
        { id: 'c3', name: 'CineMax Premium', category: 'Entertainment', logo: '🎬', color: '#9b59b6', viewers: '24.7K', active: false },
        { id: 'c4', name: 'Music Vibes', category: 'Music', logo: '🎵', color: '#f1c40f', viewers: '5.3K', active: false },
        { id: 'c5', name: 'Global News Live', category: 'News', logo: '🌍', color: '#3498db', viewers: '9.9K', active: false },
        { id: 'c6', name: 'Action Movies 24', category: 'Entertainment', logo: '🎥', color: '#e67e22', viewers: '15.2K', active: false },
      ];

      let activeChannelId = null;
      let currentCategory = 'all';
      let searchQuery = '';

      // ---------- DOM refs ----------
      const channelListEl = document.getElementById('channelList');
      const channelCountEl = document.getElementById('channelCount');
      const searchInput = document.getElementById('searchInput');
      const categoryBar = document.getElementById('categoryBar');
      const nowName = document.getElementById('nowName');
      const nowCat = document.getElementById('nowCat');
      const nowLogo = document.getElementById('nowLogo');
      const overlay = document.getElementById('overlay');
      const bigPlayBtn = document.getElementById('bigPlayBtn');
      const unmuteBtn = document.getElementById('unmuteBtn');
      const player = document.getElementById('player');
      const fsBtn = document.getElementById('fsBtn');

      // ---------- helper: render channel list ----------
      function renderChannels() {
        let filtered = channels.filter(ch => {
          const matchesCat = currentCategory === 'all' || ch.category.toLowerCase() === currentCategory.toLowerCase();
          const matchesSearch = ch.name.toLowerCase().includes(searchQuery.toLowerCase());
          return matchesCat && matchesSearch;
        });

        if (filtered.length === 0) {
          channelListEl.innerHTML = `<li><p class="bdltv-none">No channels found.</p></li>`;
          channelCountEl.textContent = '0';
          return;
        }

        channelListEl.innerHTML = filtered.map(ch => {
          const isActive = ch.id === activeChannelId;
          return `
            <li>
              <button class="bdltv-item ${isActive ? 'is-active' : ''}" data-id="${ch.id}">
                <div class="bdltv-logo" style="background: ${ch.color}20; border-color: ${ch.color}40;">
                  <span style="font-size: 1.6rem;">${ch.logo}</span>
                </div>
                <div class="bdltv-meta">
                  <span class="bdltv-name">${ch.name}</span>
                  <span class="bdltv-sub">${ch.category} · ${ch.viewers} watching</span>
                </div>
                <div class="bdltv-eq">
                  <i></i><i></i><i></i>
                </div>
              </button>
            </li>
          `;
        }).join('');

        channelCountEl.textContent = filtered.length;

        // attach click handlers
        document.querySelectorAll('.bdltv-item').forEach(btn => {
          btn.addEventListener('click', (e) => {
            const id = btn.dataset.id;
            selectChannel(id);
          });
        });
      }

      // ---------- select channel ----------
      function selectChannel(id) {
        const ch = channels.find(c => c.id === id);
        if (!ch) return;

        // update active state
        channels.forEach(c => c.active = (c.id === id));
        activeChannelId = id;

        // update now playing
        nowName.textContent = ch.name;
        nowCat.textContent = ch.category + ' · ' + ch.viewers + ' watching';
        nowLogo.innerHTML = `<span style="font-size: 1.8rem;">${ch.logo}</span>`;

        // update overlay to loading then start
        overlay.className = 'bdltv-overlay is-start';
        overlay.innerHTML = `
          <div class="bdltv-spin"></div>
          <p>Loading ${ch.name}...</p>
        `;

        // simulate loading then start playing
        setTimeout(() => {
          overlay.className = 'bdltv-overlay is-tap';
          overlay.innerHTML = '';
          // show unmute button
          unmuteBtn.hidden = false;
        }, 1200);

        // re-render list to update active highlight
        renderChannels();

        // update count and chips remain
      }

      // ---------- initial render ----------
      renderChannels();

      // set first channel as active? no – let user pick
      // but we can auto-select first channel for demo
      // selectChannel('c1'); // uncomment to auto-start

      // ---------- search input ----------
      searchInput.addEventListener('input', (e) => {
        searchQuery = e.target.value.trim();
        renderChannels();
      });

      // ---------- category chips ----------
      categoryBar.addEventListener('click', (e) => {
        const chip = e.target.closest('.bdltv-chip');
        if (!chip) return;
        document.querySelectorAll('.bdltv-chip').forEach(c => c.classList.remove('is-active'));
        chip.classList.add('is-active');
        currentCategory = chip.dataset.cat;
        renderChannels();
      });

      // ---------- big play button ----------
      bigPlayBtn.addEventListener('click', () => {
        if (activeChannelId) {
          // if already selected, just dismiss overlay and show player
          overlay.className = 'bdltv-overlay is-none';
          unmuteBtn.hidden = false;
        } else {
          // select first channel
          selectChannel('c1');
        }
      });

      // ---------- unmute toggle ----------
      unmuteBtn.addEventListener('click', () => {
        unmuteBtn.hidden = true;
      });

      // ---------- fullscreen ----------
      fsBtn.addEventListener('click', () => {
        if (!document.fullscreenElement) {
          player.requestFullscreen().catch(() => {});
        } else {
          document.exitFullscreen();
        }
      });

      // ---------- simple favorites / share (demo) ----------
      document.getElementById('favBtn').addEventListener('click', () => {
        alert('❤️ Added to favorites (demo)');
      });
      document.getElementById('shareBtn').addEventListener('click', () => {
        alert('🔗 Share link copied (demo)');
      });

      // make sure big play works after load
      // also update overlay on start
      // if user clicks overlay when is-tap, do nothing (tap to play maybe)
      // for demo, we just handle bigPlayBtn

      // ---------- additional polish: click overlay to dismiss loading ----------
      overlay.addEventListener('click', (e) => {
        if (overlay.classList.contains('is-start')) {
          // ignore
        }
      });

      // ---------- simulate live tv ----------
      // no real video, just visual

      // ensure initial overlay shows
    })();
  </script>
</body>
</html>