<?php require_once __DIR__ . '/includes/public_bootstrap.php'; $settings = ugfx_settings(); ugfx_public_header('Underground FX Chat'); ?>
<section class="page-hero"><div class="container-xxl"><div class="glass-panel page-hero-card"><h1>Website chat</h1><p>Talk with listeners, drop shoutouts, and keep the station moving in a live room that sits inside the Underground FX shell instead of hiding in a broken iframe.</p></div></div></section>
<section class="pb-5"><div class="container-xxl">
  <div class="row g-4 align-items-stretch">
    <div class="col-xl-8">
      <div class="story-card chat-station-shell h-100">
        <div class="chat-status-bar"><span class="live-dot"></span><strong id="chatStatus">Loading chat…</strong><span class="text-secondary">Live room updates every 15 seconds</span></div>
        <div id="chatMessages" class="chat-log chat-log-ugfx"></div>
      </div>
    </div>
    <div class="col-xl-4">
      <div class="story-card h-100 d-flex flex-column">
        <h2 class="h4">Jump into the room</h2>
        <p class="text-secondary">Use the on-site room for quick shoutouts and roll call, then move out to Discord when the station crowd gets bigger.</p>
        <form id="chatForm" class="chat-compose-ugfx mt-2">
          <div class="mb-3"><label class="form-label" for="chatNameInput">Your name</label><input type="text" id="chatNameInput" class="form-control" name="name" maxlength="24" placeholder="Enter your chat name" required></div>
          <div class="mb-3"><label class="form-label" for="chatMessageBox">Message</label><textarea id="chatMessageBox" class="form-control" name="msg" rows="6" maxlength="240" placeholder="Say something live on air…" required></textarea></div>
          <div class="chat-toolbar-ugfx"><button class="btn btn-neon" type="submit"><i class="bi bi-send-fill"></i> Send Message</button><button class="btn btn-outline-light" type="button" id="emojiToggle"><i class="bi bi-emoji-smile"></i> Emojis</button></div>
          <div id="emojiPanel" class="emoji-panel-ugfx" hidden></div>
        </form>
        <div class="tool-meta mt-4"><span class="meta-pill">Community</span><span class="meta-pill">Shoutouts</span><span class="meta-pill">Emoji</span><span class="meta-pill">Live room</span></div>
        <div class="hero-buttons mt-3"><a class="btn btn-darkglass" href="<?= htmlspecialchars($settings['discord_url']) ?>" target="_blank" rel="noopener"><i class="bi bi-discord"></i> Join Discord</a><a class="btn btn-darkglass" href="<?= htmlspecialchars($settings['stream_url']) ?>" target="_blank" rel="noopener"><i class="bi bi-play-circle"></i> Listen Live</a></div>
      </div>
    </div>
  </div>
</div></section><?php ugfx_public_footer(); ?>