<?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', 'home-page'); ?>

<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 hero-master h-100">
          <div class="hero-kicker"><span class="live-dot"></span> Underground FX • live community radio</div>
          <h1 class="hero-title">Underground FX hits like a real station the second the page loads — live DJs, glowing studio energy, powerful visuals and a front end built to stop people in their tracks.</h1>
          <p class="hero-lead">This homepage is now the public front door for Underground FX: your stream, radio-jockey lineup, schedule, requests, website chat, Discord, station news, event posters, charts, fans, friends, contact and control room routes all working from one branded public shell.</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> Song Requests</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="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="hero-stat-grid mt-4">
            <div class="hero-stat-card">
              <div class="hero-stat-label">Now playing</div>
              <div class="hero-stat-value" data-nowplaying><?= htmlspecialchars(ugfx_nowplaying_text()) ?></div>
            </div>
            <div class="hero-stat-card">
              <div class="hero-stat-label">Current slot</div>
              <div class="hero-stat-value"><?= htmlspecialchars($current['current']) ?></div>
            </div>
            <div class="hero-stat-card">
              <div class="hero-stat-label">Next up</div>
              <div class="hero-stat-value"><?= htmlspecialchars($current['next']) ?></div>
            </div>
            <div class="hero-stat-card">
              <div class="hero-stat-label">Website chat</div>
              <div class="hero-stat-value">Open and ready</div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-xl-5">
        <div class="glass-panel hero-rack h-100">
          <div class="control-rack">
            <div class="rack-head">
              <div>
                <div class="eyebrow">STUDIO LIVE BOARD</div>
                <h2>Underground FX control view</h2>
              </div>
              <span class="live-pill"><span class="live-dot"></span> LIVE</span>
            </div>

            <div class="rack-grid">
              <div class="rack-card">
                <span class="rack-label">Now playing</span>
                <strong data-nowplaying><?= htmlspecialchars(ugfx_nowplaying_text()) ?></strong>
              </div>
              <div class="rack-card">
                <span class="rack-label">Current slot</span>
                <strong><?= htmlspecialchars($current['current']) ?></strong>
              </div>
              <div class="rack-card">
                <span class="rack-label">Next handoff</span>
                <strong><?= htmlspecialchars($current['next']) ?></strong>
              </div>
              <div class="rack-card">
                <span class="rack-label">Website chat</span>
                <strong>Emoji + live room</strong>
              </div>
              <div class="rack-card">
                <span class="rack-label">Discord</span>
                <strong>Community handoff</strong>
              </div>
              <div class="rack-card">
                <span class="rack-label">Admin studio</span>
                <strong>Station control shell</strong>
              </div>
            </div>

            <div class="hero-art-stage">
              <img src="assets/images/ugfx-master-art.png" alt="Underground FX artwork">
              <div class="hero-art-glow"></div>
            </div>
          </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">Real profiles on the roster page.</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">Home and news share 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-first promos stay visible site wide.</div></div>
      <div class="stat-strip-card"><div class="stat-label">Station routes</div><div class="stat-value">14+</div><div class="text-secondary">Requests, charts, chat, friends, fans, team, contact and more.</div></div>
    </div>
  </div>
</section>

<section class="section-shell">
  <div class="container-xxl">
    <div class="section-heading">
      <div><h2>Live station board</h2><p>Real station systems lifted from the HomeTime stack and surfaced here without the old HomeTime look.</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 mt-4">
      <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 handoff on the Underground FX 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 block.</div></div></div>
        <div class="table-slot"><div class="time">Chat</div><div><div class="show">Website chat + Discord</div><div class="text-secondary">Community 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 site.</div></div></div>
      </div>
      <div class="story-card story-card-featured">
        <img class="cover-image" src="assets/images/ugfx-master-art.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">Built around Underground FX first, with the full feature stack underneath.</h3>
        <p class="text-secondary mb-0">The page is now meant to feel like it lives inside the artwork instead of sitting next to a recycled radio template.</p>
      </div>
    </div>
  </div>
</section>

<section class="section-shell">
  <div class="container-xxl">
    <div class="section-heading"><div><h2>Meet the Underground FX roster</h2><p>DJ profiles stay as your actual roster data. No 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>News cards, media and page content all pull from the same station source.</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 and visual.</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 sit inside the Underground FX front door.</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 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 stay visible from 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(); ?>
