<?php require_once __DIR__ . '/includes/bootstrap.php';
$pageTitle = $ugfx['site_name'] . ' | Premium Radio Experience';
$currentPage = basename(__FILE__);
$newsItems = ugfx_get_news(2);
$eventItems = ugfx_get_events(1);
$djItems = ugfx_get_djs(2);
$friends = ugfx_get_friends(3);
$show = ugfx_current_show();
$np = ugfx_now_playing();
$featuredEvent = $eventItems[0] ?? null;
include __DIR__ . '/includes/header.php';
?>
<section class="ugfx-hero">
  <div class="ugfx-hero-orb ugfx-hero-orb-one"></div>
  <div class="ugfx-hero-orb ugfx-hero-orb-two"></div>
  <div class="container-xxl ugfx-hero-content py-5">
    <div class="row align-items-center g-5">
      <div class="col-xl-7">
        <div class="ugfx-kicker"><span class="ugfx-live-pill">LIVE NOW</span> premium underground radio</div>
        <h1 class="ugfx-display"><span>UNDERGROUND</span><span>FX</span></h1>
        <p class="ugfx-lead">Broadcasting Underground FX Radio live — real shows, real DJs, and nonstop music across the network.</p>
        <div class="ugfx-hero-cta">
          <a class="btn ugfx-btn-primary" href="listen-live.php"><i class="bi bi-play-circle-fill"></i> Listen Live</a>
          <a class="btn ugfx-btn-outline" href="chat.php"><i class="bi bi-chat-dots-fill"></i> Join Chat</a>
          <a class="btn ugfx-btn-outline" href="schedule.php"><i class="bi bi-calendar3"></i> Schedule</a>
          <a class="btn ugfx-btn-outline" href="requests.php"><i class="bi bi-music-note-list"></i> Send Request</a>
        </div>
        <div class="ugfx-stats-row">
          <div class="ugfx-stat-card">
            <div class="ugfx-micro-label">CURRENT SHOW</div>
            <strong><?= htmlspecialchars($show['current']) ?></strong>
            <span class="text-secondary">Next: <?= htmlspecialchars($show['next']) ?></span>
          </div>
          <div class="ugfx-stat-card">
            <div class="ugfx-micro-label">LISTENERS</div>
            <strong class="listener-count"><?= number_format((int) $np['listeners']) ?></strong>
            <span class="text-secondary">Live pulse active</span>
          </div>
          <div class="ugfx-stat-card">
            <div class="ugfx-micro-label">NOW PLAYING</div>
            <strong class="current-track"><?= htmlspecialchars($np['title']) ?></strong>
            <span class="text-secondary"><span class="current-artist"><?= htmlspecialchars($np['artist']) ?></span></span>
          </div>
        </div>
      </div>
      <div class="col-xl-5">
        <div class="ugfx-card ugfx-hero-panel p-4">
          <div class="d-flex justify-content-between align-items-start gap-3 mb-3">
            <div>
              <div class="ugfx-micro-label">LIVE STUDIO PANEL</div>
              <h3 class="mb-1">On-air command centre</h3>
              <div class="text-secondary">Live studio broadcast active. Streaming direct from Underground FX AutoDJ and live DJ sessions.</div>
            </div>
            <span class="ugfx-live-pill">ON AIR</span>
          </div>
          <img src="<?= ugfx_asset('img/brand/ugfx-hero.png') ?>" class="img-fluid rounded-4 mb-3 ugfx-hero-art" alt="UGFX hero art">
          <div class="d-flex flex-wrap gap-2">
            <span class="ugfx-chip"><i class="bi bi-broadcast"></i> Sticky player</span>
            <span class="ugfx-chip"><i class="bi bi-lightning-charge-fill"></i> Neon studio theme</span>
            <span class="ugfx-chip"><i class="bi bi-people-fill"></i> Community live</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section-pad pt-0">
  <div class="container-xxl">
    <div class="ugfx-grid-2">
      <div class="ugfx-card p-4 reveal-up">
        <div class="section-heading mb-4">
          <div class="title">Now playing</div>
          <div class="copy">Live track details, active listener totals, and direct access to the stream.</div>
        </div>
        <div class="row g-4 align-items-center">
          <div class="col-md-5"><img src="<?= htmlspecialchars($np['art']) ?>" alt="cover" class="img-fluid rounded-4 ugfx-cover-art"></div>
          <div class="col-md-7">
            <div class="ugfx-micro-label">CURRENT TRACK</div>
            <h3 class="current-track"><?= htmlspecialchars($np['title']) ?></h3>
            <p class="text-secondary mb-3">Artist / Show: <span class="current-artist"><?= htmlspecialchars($np['artist']) ?></span></p>
            <div class="d-flex gap-2 flex-wrap mb-3">
              <span class="ugfx-chip"><i class="bi bi-headphones"></i> <span class="listener-count"><?= (int) $np['listeners'] ?></span> listeners</span>
              <span class="ugfx-chip"><i class="bi bi-vinyl-fill"></i> Premium player shell</span>
            </div>
            <div class="d-flex gap-2 flex-wrap">
              <a class="btn ugfx-btn-primary" href="listen-live.php">Open full player</a>
              <a class="btn ugfx-btn-outline" href="player-popup.php">Popout player</a>
            </div>
          </div>
        </div>
      </div>
      <div class="ugfx-card p-4 reveal-up">
        <div class="section-heading mb-4">
          <div class="title">On air</div>
          <div class="copy">What is on air now and what is coming up next on Underground FX.</div>
        </div>
        <div class="d-flex justify-content-between align-items-start mb-3">
          <div>
            <div class="ugfx-micro-label">LIVE RIGHT NOW</div>
            <h4 class="live-now-label" data-schedule="<?= htmlspecialchars($show['current'], ENT_QUOTES) ?>"><?= htmlspecialchars($show['current']) ?></h4>
          </div>
          <span class="ugfx-live-pill">LIVE</span>
        </div>
        <div class="ugfx-card p-3 mb-3">
          <div class="ugfx-micro-label">NEXT UP</div>
          <strong class="live-next-label" data-schedule="<?= htmlspecialchars($show['next'], ENT_QUOTES) ?>"><?= htmlspecialchars($show['next']) ?></strong>
        </div>
        <div class="ugfx-home-callout-list">
          <div class="ugfx-mini-callout"><i class="bi bi-calendar-event"></i><span>See the full weekly lineup anytime from the schedule page.</span></div>
          <div class="ugfx-mini-callout"><i class="bi bi-send-check"></i><span>Send in your requests and shout-outs direct to Underground FX.</span></div>
          <div class="ugfx-mini-callout"><i class="bi bi-stars"></i><span>Jump into chat, connect with the station, and stay part of the community.</span></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section-pad pt-0">
  <div class="container-xxl">
    <div class="row g-4 align-items-stretch">
      <div class="col-xl-8">
        <div class="ugfx-card p-4 h-100 reveal-up">
          <div class="section-heading mb-4">
            <div class="title">Latest station news</div>
            <div class="copy">Latest updates, station news, and what is happening across Underground FX.</div>
          </div>
          <div class="ugfx-news-grid ugfx-news-grid-home">
            <?php foreach ($newsItems as $item): ?>
            <article class="ugfx-card p-4 h-100 ugfx-news-card">
              <img src="<?= ugfx_asset('img/temp/feature.jpg') ?>" class="ugfx-home-media ugfx-home-media-news" alt="News feature">
              <div class="ugfx-micro-label mb-2"><?= htmlspecialchars($item['date'] ?? 'Station update') ?></div>
              <h4><?= htmlspecialchars($item['title'] ?? 'News item') ?></h4>
              <p class="text-secondary mb-3"><?= htmlspecialchars(ugfx_excerpt($item['body'] ?? $item['content'] ?? '', 150)) ?></p>
              <a href="news.php" class="btn ugfx-btn-outline btn-sm">Read updates</a>
            </article>
            <?php endforeach; ?>
          </div>
        </div>
      </div>
      <div class="col-xl-4">
        <div class="ugfx-card p-4 h-100 reveal-up">
          <div class="section-heading mb-4">
            <div class="title">Community</div>
            <div class="copy">Join the station, the chat, or the request line.</div>
          </div>
          <div class="ugfx-stack-list">
            <a class="ugfx-stack-link" href="join.php"><span><strong>Join the Team</strong><small>Presenter, volunteer, promotions and support roles</small></span><i class="bi bi-arrow-right"></i></a>
            <a class="ugfx-stack-link" href="chat.php"><span><strong>Join Website Chat</strong><small>Join the station chat with emoji, GIF, and link-ready community posting</small></span><i class="bi bi-arrow-right"></i></a>
            <a class="ugfx-stack-link" href="requests.php"><span><strong>Send a Request</strong><small>Send track requests and shout-outs straight to the station</small></span><i class="bi bi-arrow-right"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section-pad pt-0">
  <div class="container-xxl">
    <div class="row g-4">
      <div class="col-xl-7">
        <div class="ugfx-card p-4 reveal-up">
          <div class="section-heading mb-4">
            <div class="title">Meet the voices</div>
            <div class="copy">Meet featured voices from Underground FX.</div>
          </div>
          <div class="ugfx-team-grid ugfx-team-grid-home">
            <?php foreach ($djItems as $dj): ?>
            <article class="ugfx-card p-4">
              <img class="ugfx-team-avatar" src="<?= ugfx_asset('img/temp/feature-square.jpg') ?>" alt="<?= htmlspecialchars($dj['name'] ?? 'Presenter') ?>">
              <h4><?= htmlspecialchars($dj['name'] ?? 'Presenter') ?></h4>
              <p class="text-secondary mb-0"><?= htmlspecialchars(ugfx_excerpt($dj['bio'] ?? '', 120)) ?></p>
            </article>
            <?php endforeach; ?>
          </div>
        </div>
      </div>
      <div class="col-xl-5">
        <?php if ($featuredEvent): ?>
        <div class="ugfx-card p-4 mb-4 reveal-up">
          <div class="section-heading mb-4">
            <div class="title">Featured event</div>
            <div class="copy">A featured event from the Underground FX calendar.</div>
          </div>
          <article class="ugfx-card p-4">
            <img src="<?= ugfx_asset('img/temp/feature.jpg') ?>" class="ugfx-home-media ugfx-home-media-event" alt="Featured event">
            <div class="ugfx-micro-label mb-2"><?= htmlspecialchars($featuredEvent['start'] ?? 'Upcoming') ?></div>
            <h4><?= htmlspecialchars($featuredEvent['title'] ?? 'Event') ?></h4>
            <p class="text-secondary mb-3"><?= htmlspecialchars(ugfx_excerpt($featuredEvent['description'] ?? '', 160)) ?></p>
            <a href="events.php" class="btn ugfx-btn-primary btn-sm">View events</a>
          </article>
        </div>
        <?php endif; ?>
        <div class="ugfx-card p-4 reveal-up">
          <div class="section-heading mb-4">
            <div class="title">Friends & supporters</div>
            <div class="copy">Friends, supporters, and sister stations around Underground FX.</div>
          </div>
          <div class="ugfx-friends-teaser">
            <?php foreach ($friends as $friend): ?>
            <div class="ugfx-friend-row">
              <div>
                <strong><?= htmlspecialchars($friend['name'] ?? 'Supporter') ?></strong>
                <div class="text-secondary small"><?= htmlspecialchars($friend['type'] ?? 'Community partner') ?></div>
              </div>
              <?php if (!empty($friend['url'])): ?>
                <a class="btn ugfx-btn-outline btn-sm" href="<?= htmlspecialchars($friend['url']) ?>" target="_blank" rel="noopener">Visit</a>
              <?php endif; ?>
            </div>
            <?php endforeach; ?>
          </div>
          <div class="mt-3">
            <a class="btn ugfx-btn-outline" href="friends.php">View all supporters</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<?php include __DIR__ . '/includes/footer.php'; ?>
