<?php
$pageTitle = 'Underground FX Radio — Live Ready Master Rebuild';
include 'includes/header.php';
require_once __DIR__ . '/includes/content_store.php';
require_once __DIR__ . '/includes/comments_lib.php';
$settings = smurf_load_public_settings();
$newsItems = array_slice(array_values(array_filter(ht_load_news_items(__DIR__), fn($item) => !empty($item['published']))), 0, 3);
$eventItems = array_slice(array_values(array_filter(ht_load_event_items(__DIR__), fn($item) => !empty($item['published']))), 0, 2);
$djs = is_file(__DIR__.'/data/djs.json') ? json_decode((string)file_get_contents(__DIR__.'/data/djs.json'), true) : [];
if (!is_array($djs)) $djs = [];
$djsPreview = array_slice($djs, 0, 8);
function ugfx_asset(string $path, string $fallback=''): string { $path=trim($path); if($path==='') return ''; if (preg_match('#^(https?:)?//#i',$path) || str_starts_with($path,'data:')) return $path; $path=str_replace('\\','/',$path); $path=ltrim($path,'/'); if($fallback!=='' && strpos($path,'/')===false) $path=trim($fallback,'/').'/'.$path; return '/'.$path; }
?>
<section class="fx-hero container-fluid container-xxl">
  <div class="row g-4 align-items-stretch">
    <div class="col-xl-7">
      <div class="fx-hero-main">
        <div class="fx-section-kicker">Fresh master rebuild • not a template patch</div>
        <h1 class="fx-hero-title">Underground FX built like a flagship radio brand.</h1>
        <p class="fx-hero-copy">A fresh live-ready rebuild with layered artwork, premium motion, stronger station routing, cleaner data handling, bolder calls-to-action and a proper commercial-grade radio presence. This shell is designed to make the older sites feel like toys.</p>
        <div class="fx-hero-actions">
          <a href="<?= htmlspecialchars((string)($settings['stream_url'] ?? 'http://radio.undergroundfxradio.com:9000/stream'), ENT_QUOTES, 'UTF-8') ?>" target="_blank" rel="noopener" class="btn btn-primary btn-lg"><i class="bi bi-play-circle-fill"></i> Listen Live</a>
          <a href="/requests.php" class="btn btn-outline-light btn-lg"><i class="bi bi-music-note-list"></i> Send a Request</a>
          <a href="https://discord.gg/hA2uWMpCT8" target="_blank" rel="noopener" class="btn btn-outline-light btn-lg"><i class="bi bi-discord"></i> Join the Chat</a>
        </div>
        <div class="fx-chip-row mt-4">
          <a class="fx-chip" href="https://mytuner-radio.com/" target="_blank" rel="noopener">Listen on MyTuner</a>
          <a class="fx-chip" href="https://onlineradiobox.com/" target="_blank" rel="noopener">Listen on RadioBox</a>
          <a class="fx-chip" href="https://us-radio.com/" target="_blank" rel="noopener">Listen on US-RADIO</a>
          <a class="fx-chip" href="https://radiospinner.com/" target="_blank" rel="noopener">Listen on RadioSpinner</a>
        </div>
      </div>
    </div>
    <div class="col-xl-5">
      <div class="fx-hero-side">
        <div class="fx-dashboard-card">
          <div class="fx-section-kicker">Studio dashboard</div>
          <div class="fx-stat-grid">
            <div class="fx-stat wide"><span>Now playing</span><strong id="track-text">Loading…</strong></div>
            <div class="fx-stat"><span>Current slot</span><strong id="dj-now-hero">Loading…</strong><small id="hour-now">--:--</small></div>
            <div class="fx-stat"><span>Next</span><strong id="dj-next-hero">Loading…</strong><small id="hour-next">--:--</small></div>
            <div class="fx-stat wide"><span>After that</span><strong id="dj-after">Loading…</strong><small id="hour-after">--:--</small></div>
          </div>
        </div>
        <div class="fx-side-note">Heavy glass, layered glow, animated depth, cleaner station links, reusable page sections and stronger media handling form the new master shell.</div>
      </div>
    </div>
  </div>
</section>

<section class="container-fluid container-xxl fx-section-block">
  <div class="fx-three-grid">
    <article class="fx-feature-card"><div class="fx-section-kicker">Design system</div><h3>Custom Underground FX visual language</h3><p>Glass panels, glowing dividers, motion accents, responsive layout tokens and a proper SVG/icon-led navigation shell.</p></article>
    <article class="fx-feature-card"><div class="fx-section-kicker">Feature stack</div><h3>HomeTime-style functionality, rebuilt cleaner</h3><p>News, events, requests, DJs, fans, friends, team tools, player, charts, schedule and chat are still here, but the structure is tighter.</p></article>
    <article class="fx-feature-card"><div class="fx-section-kicker">Live ready</div><h3>Built to launch, not just preview</h3><p>Correct stream config, now-playing fallbacks, reusable settings, responsive shell and a stronger path toward production deployment.</p></article>
  </div>
</section>

<section class="container-fluid container-xxl fx-section-block">
  <div class="row g-4 align-items-stretch">
    <div class="col-lg-7">
      <div class="fx-section-card h-100">
        <div class="fx-section-kicker">Featured roster</div>
        <div class="d-flex justify-content-between align-items-end mb-3"><h2>Meet the Underground FX voices</h2><a class="btn btn-outline-light" href="/djs.php">Full DJ wall</a></div>
        <div class="row g-3">
          <?php foreach ($djsPreview as $dj): $img=ugfx_asset((string)($dj['image'] ?? ''), 'img/djs'); ?>
          <div class="col-md-6 col-xl-3">
            <div class="fx-dj-card h-100">
              <?php if ($img !== ''): ?><img src="<?= htmlspecialchars($img, ENT_QUOTES, 'UTF-8') ?>" alt="<?= htmlspecialchars((string)($dj['name'] ?? ''), ENT_QUOTES, 'UTF-8') ?>"><?php endif; ?>
              <div class="p-3"><h4><?= htmlspecialchars((string)($dj['name'] ?? 'Underground FX DJ'), ENT_QUOTES, 'UTF-8') ?></h4><p><?= htmlspecialchars((string)($dj['show'] ?? 'Live radio-jockey profile'), ENT_QUOTES, 'UTF-8') ?></p></div>
            </div>
          </div>
          <?php endforeach; ?>
        </div>
      </div>
    </div>
    <div class="col-lg-5">
      <div class="fx-section-card h-100">
        <div class="fx-section-kicker">Station routes</div>
        <h2>Community, requests and control.</h2>
        <div class="fx-link-grid mt-4">
          <a href="/chat.php"><i class="bi bi-chat-dots"></i><span>Website Chat</span></a>
          <a href="https://discord.gg/hA2uWMpCT8" target="_blank" rel="noopener"><i class="bi bi-discord"></i><span>Discord Community</span></a>
          <a href="/news.php"><i class="bi bi-newspaper"></i><span>Station News</span></a>
          <a href="/events.php"><i class="bi bi-stars"></i><span>Events & Promos</span></a>
          <a href="/schedule.php"><i class="bi bi-calendar2-week"></i><span>Live Schedule</span></a>
          <a href="/admin.php"><i class="bi bi-sliders"></i><span>Admin Studio</span></a>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="container-fluid container-xxl fx-section-block">
  <div class="row g-4">
    <div class="col-lg-6">
      <div class="fx-section-card h-100">
        <div class="d-flex justify-content-between align-items-end mb-3"><div><div class="fx-section-kicker">Featured news</div><h2>Latest station updates</h2></div><a href="/news.php" class="btn btn-outline-light">All news</a></div>
        <?php foreach ($newsItems as $item): $img=ugfx_asset((string)($item['image'] ?? ''), 'img/content'); ?>
          <article class="fx-story-card">
            <?php if ($img !== ''): ?><img src="<?= htmlspecialchars($img, ENT_QUOTES, 'UTF-8') ?>" alt="<?= htmlspecialchars((string)($item['title'] ?? 'News'), ENT_QUOTES, 'UTF-8') ?>"><?php endif; ?>
            <div><h4><?= htmlspecialchars((string)($item['title'] ?? 'News update'), ENT_QUOTES, 'UTF-8') ?></h4><p><?= htmlspecialchars(mb_strimwidth((string)($item['content'] ?? ''), 0, 180, '…'), ENT_QUOTES, 'UTF-8') ?></p></div>
          </article>
        <?php endforeach; ?>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="fx-section-card h-100">
        <div class="d-flex justify-content-between align-items-end mb-3"><div><div class="fx-section-kicker">Featured events</div><h2>Promos, contests, nights</h2></div><a href="/events.php" class="btn btn-outline-light">All events</a></div>
        <?php foreach ($eventItems as $item): $img=ugfx_asset((string)($item['image'] ?? ''), 'img/content'); ?>
          <article class="fx-story-card fx-story-card-event">
            <?php if ($img !== ''): ?><img src="<?= htmlspecialchars($img, ENT_QUOTES, 'UTF-8') ?>" alt="<?= htmlspecialchars((string)($item['title'] ?? 'Event'), ENT_QUOTES, 'UTF-8') ?>"><?php endif; ?>
            <div><h4><?= htmlspecialchars((string)($item['title'] ?? 'Event'), ENT_QUOTES, 'UTF-8') ?></h4><p><?= htmlspecialchars(mb_strimwidth((string)($item['content'] ?? ''), 0, 180, '…'), ENT_QUOTES, 'UTF-8') ?></p></div>
          </article>
        <?php endforeach; ?>
      </div>
    </div>
  </div>
</section>
<?php include 'includes/footer.php'; ?>
