<?php
session_start();
require_once __DIR__ . '/includes/stream_lib.php';
$current = smurf_top50_touch(__DIR__ . '/data/top50.json', __DIR__ . '/data/top50_state.json');
$cfg = smurf_get_stream_config();
$listenUrl = $cfg['listen_url'] ?? '';
$nowPlaying = trim((string)$current) !== '' ? $current : 'Auto DJ is warming up the jukebox…';
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Smurfettes Pop Out Player</title>
  <link rel="stylesheet" href="/assets/css/header.css">
  <link rel="stylesheet" href="/assets/css/nav.css">
  <link rel="stylesheet" href="/assets/css/footer.css">
  <link rel="stylesheet" href="/assets/css/main.css">
</head>
<body class="page-player-popout">
  <main class="content-area">
    <div class="content-wrapper">
      <section class="content-card popout-player-card">
        <div class="player-pop-layout">
          <div class="player-pop-copy">
            <div class="player-pop-kicker">🎙️ Smurfettes Country Delights</div>
            <h1 class="player-pop-title">Pop Out Player</h1>
            <p class="player-pop-subtitle">Country heart, jukebox soul, and a little late-night sparkle. Keep the station playing in its own window with a richer, cleaner live player.</p>

            <div class="eq-wrap" aria-hidden="true">
              <span class="eq-bar" style="height:38%"></span>
              <span class="eq-bar" style="height:62%"></span>
              <span class="eq-bar" style="height:46%"></span>
              <span class="eq-bar" style="height:88%"></span>
              <span class="eq-bar" style="height:55%"></span>
              <span class="eq-bar" style="height:78%"></span>
              <span class="eq-bar" style="height:44%"></span>
              <span class="eq-bar" style="height:68%"></span>
            </div>

            <div class="player-nowplaying">
              <div class="player-nowplaying-label">Now Playing</div>
              <strong><?= htmlspecialchars($nowPlaying) ?></strong>
              <div class="player-meta-row">
                <span class="player-meta-chip">📻 Live stream ready</span>
                <span class="player-meta-chip">🔊 Dedicated player window</span>
                <span class="player-meta-chip">✨ Smurfette mode on</span>
              </div>
            </div>
          </div>

          <div class="player-audio-shell">
            <div class="player-orb" aria-hidden="true">
              <div class="player-orb-center">🎧</div>
            </div>
            <div class="player-glow-line"></div>
            <audio controls autoplay preload="none" src="<?= htmlspecialchars($listenUrl) ?>"></audio>
            <div class="player-action-row">
              <a class="button play-btn" href="<?= htmlspecialchars($listenUrl) ?>" target="_blank" rel="noopener">Open Stream Link</a>
              <a class="button" href="<?= htmlspecialchars($listenUrl) ?>" target="_blank" rel="noopener">Open External Source</a>
            </div>
          </div>
        </div>
      </section>
    </div>
  </main>
</body>
</html>
