<?php require_once __DIR__ . '/includes/public_bootstrap.php';
$settings = ugfx_settings();
$current = ugfx_current_show();
$news = ugfx_featured_news(3);
$events = ugfx_featured_events(2);
$djs = array_slice(ugfx_djs(),0,6);
$top = array_slice(ugfx_top_tracks(5),0,5);
$friends = array_slice(ugfx_friends(),0,3);
$fans = array_slice(ugfx_fans(),0,3);
ugfx_public_header('Underground FX Radio'); ?>
<section class="hero-shell hero-shell-home">
  <div class="container-xxl">
    <div class="row g-4 align-items-stretch">
      <div class="col-xl-7">
        <div class="glass-panel hero-copy h-100 hero-copy-live">
          <div class="hero-kicker"><span class="live-dot"></span> Underground FX • live community radio</div>
          <h1 class="hero-title">Underground FX lights up the dial with <span class="accent">real radio energy</span>, live personality, and a station front end built to look alive.</h1>
          <p class="hero-lead">This is the live front door for Underground FX — stream, roster, requests, chat, Discord, news, events, charts, friends, fans, team tools and the station control room all sitting inside one stronger Underground FX visual system.</p>
          <div class="hero-buttons">
            <a class="btn btn-neon" href="<?= htmlspecialchars($settings['stream_url']) ?>" target="_blank" rel="noopener"><i class="bi bi-play-circle-fill"></i> Listen Live</a>
            <a class="btn btn-darkglass" href="popout-player.php"><i class="bi bi-window-sidebar"></i> Launch Player</a>
            <a class="btn btn-darkglass" href="requests.php"><i class="bi bi-music-note-list"></i> Send Request</a>
            <a class="btn btn-darkglass" href="<?= htmlspecialchars($settings['discord_url']) ?>" target="_blank" rel="noopener"><i class="bi bi-discord"></i> Join Discord</a>
          </div>
          <div class="spark-row">
            <span class="spark-pill">✨ live sparkle</span>
            <span class="spark-pill">🎛 studio glow</span>
            <span class="spark-pill">📻 underground route map</span>
            <span class="spark-pill">🎶 motion overlays</span>
          </div>
          <div class="hero-buttons hero-buttons-mini mt-3">
            <?php foreach(($settings['listen_links'] ?? []) as $link): ?>
              <a class="listen-link" href="<?= htmlspecialchars($link['url']) ?>" target="_blank" rel="noopener"><?= htmlspecialchars($link['label']) ?></a>
            <?php endforeach; ?>
          </div>
          <div class="eq-bars mt-4"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
        </div>
      </div>
      <div class="col-xl-5">
        <div class="glass-panel hero-rack h-100">
          <div class="rack-title">Studio live board</div>
          <div class="hero-stat-grid">
            <div class="metric-card metric-card-wide"><div class="metric-label">Now playing</div><div class="metric-value" data-nowplaying><?= htmlspecialchars(ugfx_nowplaying_text()) ?></div></div>
            <div class="metric-card"><div class="metric-label">Current slot</div><div class="metric-value"><?= htmlspecialchars($current['current']) ?></div></div>
            <div class="metric-card"><div class="metric-label">Next up</div><div class="metric-value"><?= htmlspecialchars($current['next']) ?></div></div>
            <div class="metric-card"><div class="metric-label">Website chat</div><div class="metric-value">Live room ready</div></div>
            <div class="metric-card"><div class="metric-label">Discord</div><div class="metric-value">Community handoff</div></div>
            <div class="metric-card"><div class="metric-label">Admin studio</div><div class="metric-value">Station control room</div></div>
          </div>
          <div class="cover-image cover-tall mt-3" style="background-image:linear-gradient(180deg,rgba(8,10,15,.16),rgba(8,10,15,.46)), url('assets/images/ugfx-underground-stage.png'); background-size:cover; background-position:center;"></div>
        </div>
      </div>
    </div>

    <div class="stats-strip mt-4">
      <div class="stat-strip-card"><div class="stat-label">Radio jockeys</div><div class="stat-value"><?= count(ugfx_djs()) ?></div><div class="text-secondary">The DJ page is driven from the Underground roster data.</div></div>
      <div class="stat-strip-card"><div class="stat-label">News stories</div><div class="stat-value"><?= count(ugfx_news()) ?></div><div class="text-secondary">Homepage and full news page read from the same source.</div></div>
      <div class="stat-strip-card"><div class="stat-label">Events</div><div class="stat-value"><?= count(ugfx_events()) ?></div><div class="text-secondary">Poster cards and promo pushes stay visible across the site.</div></div>
      <div class="stat-strip-card"><div class="stat-label">Live routes</div><div class="stat-value">14+</div><div class="text-secondary">Requests, charts, chat, team, contact, player, friends, fans and more.</div></div>
    </div>
  </div>
</section>

<section class="section-shell">
  <div class="container-xxl">
    <div class="section-heading"><div><h2>On the board right now</h2><p>The home page now pulls real station data instead of repeating filler route boxes.</p></div><a class="card-link" href="schedule.php">Open full schedule <i class="bi bi-arrow-right"></i></a></div>
    <div class="live-board home-live-board">
      <div class="story-card">
        <div class="table-slot"><div class="time">Now</div><div><div class="show"><?= htmlspecialchars($current['current']) ?></div><div class="text-secondary">Current Underground FX handoff on the board.</div></div></div>
        <div class="table-slot"><div class="time">Next</div><div><div class="show"><?= htmlspecialchars($current['next']) ?></div><div class="text-secondary">The next live rotation or AutoMix handoff.</div></div></div>
        <div class="table-slot"><div class="time">Chat</div><div><div class="show">Website chat + Discord</div><div class="text-secondary">Both listener routes stay one click away.</div></div></div>
        <div class="table-slot"><div class="time">Player</div><div><div class="show">Popout player ready</div><div class="text-secondary">Launch the stream without leaving the station shell.</div></div></div>
      </div>
      <div class="story-card story-card-featured">
        <img class="cover-image" src="assets/images/ugfx-underground-stage.png" alt="Underground FX stage art">
        <div class="tool-meta"><span class="meta-pill">Underground artwork</span><span class="meta-pill">sparkle FX</span><span class="meta-pill">premium motion</span></div>
        <h3 class="h4">The Underground FX image now drives the page instead of sitting beside it.</h3>
        <p class="text-secondary mb-0">Background layers, glow, glass, station routes, live board cards and motion are all meant to feel like one Underground FX product rather than a renamed template.</p>
      </div>
    </div>
  </div>
</section>

<section class="section-shell">
  <div class="container-xxl">
    <div class="section-heading compact"><div><h2>Quick station routes</h2><p>Real listener and station tools surfaced cleanly without duplicating another giant filler block.</p></div></div>
    <div class="tool-grid">
      <a class="tool-card" href="requests.php"><i class="bi bi-music-note-beamed"></i><h3>Requests</h3><p>Song requests and shoutouts routed into the station.</p></a>
      <a class="tool-card" href="chat.php"><i class="bi bi-chat-dots-fill"></i><h3>Website Chat</h3><p>Live on-site chat with emoji, stickers and Discord handoff.</p></a>
      <a class="tool-card" href="top50.php"><i class="bi bi-bar-chart-line-fill"></i><h3>Top 50 Charts</h3><p>Track movement, weekly spins and chart traction.</p></a>
      <a class="tool-card" href="admin/login.php"><i class="bi bi-sliders2"></i><h3>Admin Studio</h3><p>The control-room login and station management shell.</p></a>
    </div>
  </div>
</section>

<section class="section-shell">
  <div class="container-xxl">
    <div class="section-heading"><div><h2>Meet the Underground FX roster</h2><p>Real DJ profiles from the station source data, not generic filler.</p></div><a class="card-link" href="djs.php">View all DJs <i class="bi bi-arrow-right"></i></a></div>
    <div class="roster-grid">
      <?php foreach($djs as $dj): $img = ugfx_asset_url((string)($dj['image'] ?? ''), 'img/djs'); $name = $dj['name'] ?? 'Underground FX DJ'; ?>
        <article class="dj-card" data-dj-card data-search="<?= htmlspecialchars(strtolower(($dj['name'] ?? '') . ' ' . ($dj['title'] ?? '') . ' ' . ($dj['bio'] ?? ''))) ?>">
          <div class="d-flex gap-3 align-items-start">
            <img class="dj-avatar" src="<?= htmlspecialchars($img ?: 'img/djs/stationhost1.jpg') ?>" alt="<?= htmlspecialchars($name) ?>">
            <div>
              <div class="news-meta"><span class="meta-pill">Radio Jockey</span><?php if(!empty($dj['show'])): ?><span class="meta-pill"><?= htmlspecialchars($dj['show']) ?></span><?php endif; ?></div>
              <h3 class="h4 mb-1"><?= htmlspecialchars($name) ?></h3>
              <p class="text-secondary mb-0"><?= htmlspecialchars(trim((string)($dj['bio'] ?? $dj['description'] ?? 'Underground FX radio personality.'))) ?></p>
            </div>
          </div>
        </article>
      <?php endforeach; ?>
    </div>
  </div>
</section>

<section class="section-shell">
  <div class="container-xxl">
    <div class="row g-4">
      <div class="col-xl-7">
        <div class="section-heading"><div><h2>Latest station news</h2><p>Home and news now stay tied to the same content source with visible artwork.</p></div><a class="card-link" href="news.php">View all news <i class="bi bi-arrow-right"></i></a></div>
        <div class="row g-4"><?php foreach($news as $item): ?><div class="col-lg-6"><article class="news-card"><img class="story-image" src="<?= htmlspecialchars($item['image']) ?>" alt="<?= htmlspecialchars($item['title']) ?>"><div class="news-meta"><span class="meta-pill"><?= htmlspecialchars($item['tag']) ?></span><span class="meta-pill"><?= htmlspecialchars($item['date']) ?></span></div><h3 class="h4"><?= htmlspecialchars($item['title']) ?></h3><p><?= htmlspecialchars($item['summary']) ?></p></article></div><?php endforeach; ?></div>
      </div>
      <div class="col-xl-5">
        <div class="section-heading"><div><h2>Upcoming events</h2><p>Poster-first event cards keep the front page lively.</p></div><a class="card-link" href="events.php">View all events <i class="bi bi-arrow-right"></i></a></div>
        <div class="d-grid gap-4"><?php foreach($events as $item): ?><article class="event-card"><img class="story-image" src="<?= htmlspecialchars($item['image']) ?>" alt="<?= htmlspecialchars($item['title']) ?>"><div class="event-meta"><span class="meta-pill"><i class="bi bi-calendar-event"></i> <?= htmlspecialchars($item['start']) ?></span><span class="meta-pill"><?= htmlspecialchars($item['location']) ?></span></div><h3 class="h4"><?= htmlspecialchars($item['title']) ?></h3><p class="text-secondary mb-0"><?= htmlspecialchars($item['description']) ?></p></article><?php endforeach; ?></div>
      </div>
    </div>
  </div>
</section>

<section class="section-shell">
  <div class="container-xxl">
    <div class="row g-4 align-items-stretch">
      <div class="col-xl-5">
        <div class="story-card h-100">
          <div class="section-heading compact mb-3"><div><h2>Chart movers</h2><p>Top tracks from the HomeTime feature stack now surfaced in the Underground shell.</p></div><a class="card-link" href="top50.php">Charts <i class="bi bi-arrow-right"></i></a></div>
          <?php if(!$top): ?>
            <p class="text-secondary mb-0">No chart data yet. Once the stream and plays build, the chart board will populate here.</p>
          <?php else: ?>
            <div class="schedule-list">
              <?php foreach($top as $i => $row): ?>
                <div class="schedule-slot"><div class="slot-time">#<?= $i+1 ?></div><div><div class="slot-show"><?= htmlspecialchars($row['title'] ?? 'Track') ?></div><div class="text-secondary small"><?= (int)($row['count'] ?? 0) ?> spins this week</div></div></div>
              <?php endforeach; ?>
            </div>
          <?php endif; ?>
        </div>
      </div>
      <div class="col-xl-7">
        <div class="story-card h-100">
          <div class="section-heading compact mb-3"><div><h2>Community and network</h2><p>Friends, fans, contact and team routes from the wider feature stack all surfaced on the front page.</p></div></div>
          <div class="row g-3">
            <?php foreach($friends as $friend): ?>
              <div class="col-md-4"><div class="feature-card h-100"><h3 class="h5 mb-2"><?= htmlspecialchars($friend['name'] ?? 'Station Friend') ?></h3><p class="text-secondary mb-0"><?= htmlspecialchars($friend['description'] ?? 'Broadcast partner and station friend.') ?></p></div></div>
            <?php endforeach; ?>
            <?php foreach($fans as $fan): ?>
              <div class="col-md-4"><div class="feature-card h-100"><h3 class="h5 mb-2"><?= htmlspecialchars($fan['name'] ?? 'Station Fan') ?></h3><p class="text-secondary mb-0"><?= htmlspecialchars($fan['description'] ?? 'Supporter of Underground FX Radio.') ?></p></div></div>
            <?php endforeach; ?>
          </div>
          <div class="hero-buttons mt-4">
            <a class="btn btn-outline-light" href="friends.php">Radio Friends</a>
            <a class="btn btn-outline-light" href="fans.php">Fans</a>
            <a class="btn btn-outline-light" href="team.php">Join Team</a>
            <a class="btn btn-outline-light" href="contact.php">Contact</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<?php ugfx_public_footer(); ?>