<?php
require __DIR__ . '/config.php';
$settings = get_settings();
$stations = $settings['stations'] ?? [];
$activeStations = array_values(array_filter($stations, fn($station) => !empty($station['enabled']) && !empty($station['name'])));
$primaryButtonUrl = trim((string)($settings['primary_button_url'] ?? ''));
if ($primaryButtonUrl === '') {
    foreach (['event_notice', 'announcement_link'] as $fallbackKey) {
        $candidate = trim((string)($settings[$fallbackKey] ?? ''));
        if ($candidate !== '' && preg_match('~^https?://~i', $candidate)) {
            $primaryButtonUrl = $candidate;
            break;
        }
    }
}
$hasEventLink = $primaryButtonUrl !== '';
$submissionOpen = computed_submission_open($settings);
$siteMode = (string)($settings['site_mode'] ?? 'active_event');
$winners = $settings['winners'] ?? [];
$eventSchedule = array_values(array_filter($settings['event_schedule'] ?? [], fn($slot) => !empty($slot['enabled']) && (!empty($slot['title']) || !empty($slot['station']) || (!empty($slot['start']) && !empty($slot['end'])))));
$scheduleGroups = [];
foreach ($eventSchedule as $slot) {
    $groupKey = trim((string)($slot['day_label'] ?? $slot['day_key'] ?? ''));
    if ($groupKey === '') $groupKey = 'Schedule';
    if (!isset($scheduleGroups[$groupKey])) $scheduleGroups[$groupKey] = [];
    $scheduleGroups[$groupKey][] = $slot;
}

$startTs = parse_datetime_value((string)($settings['start_at'] ?? ''));
$endTs = parse_datetime_value((string)($settings['end_at'] ?? ''));
$countdownTs = null;
$countdownLabel = '';
$now = now_ts();
if (bool_setting($settings, 'show_countdown')) {
    if ($startTs !== null && $now < $startTs) {
        $countdownTs = $startTs;
        $countdownLabel = 'Starts in';
    } elseif ($endTs !== null && $now < $endTs) {
        $countdownTs = $endTs;
        $countdownLabel = 'Ends in';
    }
}

$stateTitle = $settings['event_name'];
$stateText = $settings['description'];
if ($siteMode === 'coming_soon') {
    $stateTitle = $settings['coming_soon_title'];
    $stateText = $settings['coming_soon_text'];
} elseif ($siteMode === 'live_now') {
    $stateTitle = $settings['live_now_title'];
    $stateText = $settings['live_now_text'];
} elseif ($siteMode === 'winners_announced') {
    $stateTitle = $settings['winners_title'];
    $stateText = $settings['winners_text'];
} elseif ($siteMode === 'no_event') {
    $stateTitle = $settings['no_event_title'];
    $stateText = $settings['no_event_text'];
}
$metaTitle = trim((string)($settings['site_name'] ?? ''));
if (!empty($settings['event_name'])) {
    $metaTitle .= ' | ' . trim((string)$settings['event_name']);
}
$metaDescription = trim((string)($settings['headline'] ?? $settings['description'] ?? ''));
if ($metaDescription === '') $metaDescription = trim((string)($settings['site_intro'] ?? ''));
$metaImage = trim((string)($settings['site_logo'] ?? ''));
if (!empty($settings['event_poster'])) $metaImage = trim((string)$settings['event_poster']);
$absoluteMetaImage = $metaImage !== '' ? site_url($metaImage) : '';
$canonicalUrl = site_url('index.php');
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?= e($metaTitle) ?></title>
<meta name="description" content="<?= e($metaDescription) ?>">
<link rel="canonical" href="<?= e($canonicalUrl) ?>">
<meta property="og:type" content="website">
<meta property="og:url" content="<?= e($canonicalUrl) ?>">
<meta property="og:title" content="<?= e($metaTitle) ?>">
<meta property="og:description" content="<?= e($metaDescription) ?>">
<?php if ($absoluteMetaImage !== ''): ?><meta property="og:image" content="<?= e($absoluteMetaImage) ?>">
<meta name="twitter:image" content="<?= e($absoluteMetaImage) ?>"><?php endif; ?>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="<?= e($metaTitle) ?>">
<meta name="twitter:description" content="<?= e($metaDescription) ?>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
:root{--panel:rgba(10,11,16,.88);--line:rgba(255,170,68,.22);--gold:#ffb347;--gold2:#ff7f11;--text:#eef6ff;--muted:rgba(238,246,255,.78);--shadow:0 28px 70px rgba(0,0,0,.45)}
*{box-sizing:border-box} html,body{overflow-x:hidden}
body{margin:0;font-family:Inter,system-ui,sans-serif;color:var(--text);background:radial-gradient(circle at 20% 0%, rgba(255,122,0,.18), transparent 30%),radial-gradient(circle at 85% 15%, rgba(58,184,255,.14), transparent 26%),radial-gradient(circle at 50% 100%, rgba(255,165,0,.10), transparent 30%),linear-gradient(180deg,#040507 0%,#0b0d12 100%)}
a{color:inherit}.wrap{max-width:1280px;margin:0 auto;padding:18px 18px 60px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:30px;box-shadow:var(--shadow);overflow:hidden;position:relative}
.announce{margin-bottom:16px;padding:12px 16px;border-radius:18px;background:linear-gradient(90deg, rgba(255,179,71,.18), rgba(58,184,255,.12));border:1px solid rgba(255,255,255,.08);display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.announce a{text-decoration:none;font-weight:800;padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08)}
.header-card{position:relative;height:260px;margin-bottom:22px;background:radial-gradient(circle at 10% 50%, rgba(255,122,0,.20), transparent 26%),radial-gradient(circle at 90% 50%, rgba(58,184,255,.18), transparent 30%),linear-gradient(90deg, rgba(32,11,0,.92) 0%, rgba(5,8,12,.95) 46%, rgba(0,26,40,.95) 100%)}
.header-card::before{content:"";position:absolute;inset:-30%;background:radial-gradient(circle at 20% 55%, rgba(255,122,0,.18), transparent 18%),radial-gradient(circle at 72% 45%, rgba(58,184,255,.18), transparent 22%),radial-gradient(circle at 60% 52%, rgba(255,255,255,.05), transparent 10%);animation:studioGlow 8s ease-in-out infinite alternate;pointer-events:none}
.header-card::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg, transparent 18%, rgba(255,255,255,.06) 34%, transparent 47%);transform:translateX(-120%);animation:sweep 9s linear infinite;pointer-events:none;mix-blend-mode:screen}
.header-banner{position:absolute;inset:0;width:100%;height:100%}
.header-banner img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;filter:drop-shadow(0 0 18px rgba(255,126,32,.25)) drop-shadow(0 0 28px rgba(58,184,255,.18));animation:bannerPulse 6s ease-in-out infinite}
.admin-link{position:absolute;top:24px;right:24px;padding:12px 18px;border-radius:999px;text-decoration:none;background:rgba(255,255,255,.05);border:1px solid var(--line);white-space:nowrap;z-index:2}
.hero{display:grid;grid-template-columns:minmax(320px,.84fr) minmax(420px,1.16fr);gap:24px;align-items:start}
.poster-card{padding:18px}.poster-wrap{padding:14px;border-radius:24px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.poster-wrap img{display:block;width:100%;border-radius:18px;animation:posterPulse 7s ease-in-out infinite}
.feature,.state-card{padding:28px}.feature-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.tag{display:inline-block;padding:8px 12px;border-radius:999px;background:rgba(58,184,255,.1);border:1px solid rgba(58,184,255,.24);color:#8cd7ff;font-weight:700}
h1,h2,h3{font-family:Oswald,Inter,sans-serif;line-height:1.04;margin:0 0 12px}.event-title{font-size:clamp(2rem,4vw,3.3rem)}
.lead{font-size:1.02rem;color:var(--muted)} .value-box{margin:20px 0 12px;display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 22px;border-radius:22px;background:linear-gradient(180deg, rgba(31,92,10,.95), rgba(16,54,8,.95));border:1px solid rgba(121,217,92,.26);color:#fff27a;font-size:clamp(1.1rem,2.2vw,2rem);font-weight:800;animation:potGlow 4.5s ease-in-out infinite}
.meta{display:grid;gap:12px;margin-top:18px}.meta-item,.winner-card{padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:800;padding:14px 20px;border-radius:999px;min-width:210px;transition:transform .2s ease, box-shadow .2s ease}
.btn:hover{transform:translateY(-1px)} .primary{background:linear-gradient(180deg, var(--gold), var(--gold2));color:#210d00}.secondary{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);color:var(--text)} .disabled{opacity:.72;cursor:not-allowed}
.note{margin-top:12px;color:#ffdbab}.section{margin-top:26px}.section.pad{padding:28px}
.community-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px}.schedule-day-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:20px}.schedule-day{padding:20px;border-radius:22px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}.schedule-list{display:grid;gap:12px;margin-top:14px}.schedule-item{padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}.schedule-time{font-family:Oswald,Inter,sans-serif;font-size:1.2rem;color:#ffd391;letter-spacing:.02em}.schedule-title{font-weight:800;font-size:1.02rem;margin-top:4px}.schedule-station,.schedule-note{color:var(--muted);margin-top:4px}.kicker{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;background:rgba(255,179,71,.09);border:1px solid rgba(255,179,71,.22);color:#ffd391;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem}
.site-title{font-size:clamp(2.1rem,4.4vw,4.5rem);margin-top:14px}.status-open{color:#93ff8b}.status-closed{color:#ffd2a2}
.station-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:18px}
.station-card{padding:18px;border-radius:22px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;gap:14px;min-height:100%}
.station-brand{display:flex;align-items:center;justify-content:center;min-height:90px;padding:10px;border-radius:18px;background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.06)}
.station-brand img{max-width:100%;max-height:64px;object-fit:contain;display:block}
.station-fallback{width:100%;min-height:64px;display:flex;align-items:center;justify-content:center;font-family:Oswald,Inter,sans-serif;font-size:1.25rem;letter-spacing:.04em;text-align:center;color:#ffd391}
.station-name{font-size:1.35rem;margin:0}.station-note{color:var(--muted);font-size:.95rem;min-height:2.2em}
.station-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto}
.station-btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;padding:11px 14px;border-radius:999px;font-weight:800;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.05)}
.station-btn.listen{background:linear-gradient(180deg, rgba(255,179,71,.96), rgba(255,127,17,.96));color:#210d00;border-color:transparent}
.countdown{margin-top:16px;padding:16px 18px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.cd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.cd-box{padding:14px 10px;border-radius:16px;background:rgba(255,255,255,.04);text-align:center}
.cd-num{font-family:Oswald,Inter,sans-serif;font-size:2rem}.winner-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:18px}
.footer{margin-top:28px;padding:18px 8px 0;color:rgba(238,246,255,.62);font-size:.95rem}
@keyframes studioGlow{0%{transform:translate3d(-2%,0,0) scale(1)}100%{transform:translate3d(2%,0,0) scale(1.03)}} @keyframes sweep{to{transform:translateX(120%)}} @keyframes bannerPulse{0%,100%{filter:drop-shadow(0 0 18px rgba(255,126,32,.25)) drop-shadow(0 0 28px rgba(58,184,255,.18))}50%{filter:drop-shadow(0 0 24px rgba(255,126,32,.34)) drop-shadow(0 0 38px rgba(58,184,255,.24))}} @keyframes posterPulse{0%,100%{box-shadow:0 0 0 rgba(255,170,68,0)}50%{box-shadow:0 0 32px rgba(255,170,68,.12)}} @keyframes potGlow{0%,100%{box-shadow:0 0 0 rgba(121,217,92,0)}50%{box-shadow:0 0 28px rgba(121,217,92,.22)}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none !important;transition:none !important}}
@media (max-width:1080px){.hero,.community-grid{grid-template-columns:1fr}.header-card{height:220px}}
@media (max-width:700px){.wrap{padding:14px 14px 50px}.admin-link{position:static;display:inline-flex;margin:18px}.feature,.state-card,.poster-card,.section.pad{padding:20px}.btn{min-width:100%}.station-actions,.cd-grid{grid-template-columns:1fr}}
</style>

<style>
body {
    background:
        radial-gradient(circle at 20% 30%, rgba(255,140,0,0.15), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(0,150,255,0.15), transparent 40%),
        linear-gradient(180deg, #05070d 0%, #0a0f1a 100%);
    position: relative;
    overflow-x: hidden;
}

/* animated glow lines */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 40px,
        rgba(255,140,0,0.05) 42px
    );
    animation: moveGlow 10s linear infinite;
    pointer-events: none;
}

@keyframes moveGlow {
    from { transform: translateX(0); }
    to { transform: translateX(80px); }
}

/* subtle equalizer bars */
.eq {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    gap: 2px;
    pointer-events: none;
    opacity: 0.15;
}

.eq div {
    flex: 1;
    background: linear-gradient(to top, orange, red);
    animation: eq 1s infinite ease-in-out alternate;
}

.eq div:nth-child(odd) { animation-duration: 1.3s; }
.eq div:nth-child(even) { animation-duration: 0.9s; }

@keyframes eq {
    from { height: 5px; }
    to { height: 40px; }
}
</style>

</head>
<body>
<div class="eq">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="wrap">
  <?php if (bool_setting($settings, 'announcement_enabled') && trim((string)($settings['announcement_text'] ?? '')) !== ''): ?>
    <div class="announce">
      <div><?= e($settings['announcement_text']) ?></div>
      <?php if (!empty($settings['announcement_link'])): ?><a href="<?= e($settings['announcement_link']) ?>" target="_blank" rel="noopener noreferrer external">Open</a><?php endif; ?>
    </div>
  <?php endif; ?>

  <header class="card header-card">
    <div class="header-banner"><img src="<?= e($settings['site_logo']) ?>" alt="<?= e($settings['site_name']) ?>"></div>
    <a class="admin-link" href="<?= e(site_url('admin.php')) ?>">Manage Site</a>
  </header>

  <?php if ($siteMode === 'active_event' || $siteMode === 'live_now' || $siteMode === 'coming_soon'): ?>
    <section class="hero">
      <div class="card poster-card">
        <div class="poster-wrap"><img src="<?= e($settings['event_poster']) ?>" alt="<?= e($settings['event_name']) ?> poster"></div>
      </div>

      <div class="card feature">
        <div class="feature-head">
          <div>
            <span class="tag"><?= e($siteMode === 'live_now' ? 'Live Now' : ($siteMode === 'coming_soon' ? 'Coming Soon' : $settings['event_type'])) ?></span>
            <h2 class="event-title"><?= e($stateTitle) ?></h2>
          </div>
        </div>

        <p class="lead"><?= e($settings['headline']) ?></p>

        <?php if (bool_setting($settings, 'show_prize_box', true)): ?>
          <div class="value-box"><span><?= e($settings['pot_label']) ?>:</span><span><?= e($settings['pot_value']) ?></span></div>
        <?php endif; ?>

        <?php if ($countdownTs !== null): ?>
          <div class="countdown" data-countdown="<?= (int)$countdownTs ?>">
            <strong><?= e($countdownLabel) ?></strong>
            <div class="cd-grid">
              <div class="cd-box"><div class="cd-num" data-days>0</div><div>Days</div></div>
              <div class="cd-box"><div class="cd-num" data-hours>0</div><div>Hours</div></div>
              <div class="cd-box"><div class="cd-num" data-mins>0</div><div>Minutes</div></div>
              <div class="cd-box"><div class="cd-num" data-secs>0</div><div>Seconds</div></div>
            </div>
          </div>
        <?php endif; ?>

        <div class="meta">
          <div class="meta-item"><strong>Dates:</strong> <?= e($settings['date_range']) ?></div>
          <div class="meta-item"><strong>About:</strong> <?= e($stateText) ?></div>
          <div class="meta-item"><strong>How it works:</strong> <?= e($settings['how_it_works']) ?></div>
          <div class="meta-item"><strong>Status:</strong> <?php if ($submissionOpen): ?><span class="status-open">Submission page is open</span><?php else: ?><span class="status-closed"><?= e($settings['status_text']) ?></span><?php endif; ?></div>
        </div>

        <div class="actions">
          <?php if ($hasEventLink): ?><a class="btn primary" href="<?= e($primaryButtonUrl) ?>" target="_blank" rel="noopener noreferrer external"><?= e($settings['primary_button_label']) ?></a>
          <?php else: ?><span class="btn primary disabled"><?= e($settings['primary_button_label']) ?> Coming Soon</span><?php endif; ?>

          <?php if (bool_setting($settings, 'show_submission_button', true)): ?>
            <?php if ($submissionOpen && $siteMode !== 'coming_soon'): ?><a class="btn secondary" href="<?= e(site_url('submit.php')) ?>"><?= e($settings['submission_button_text']) ?></a>
            <?php else: ?><span class="btn secondary disabled"><?= e($settings['submission_button_text']) ?> <?= $siteMode === 'coming_soon' ? 'Soon' : 'Closed' ?></span><?php endif; ?>
          <?php endif; ?>
        </div>

        <div class="note"><?= e($settings['event_notice']) ?></div>
        <div class="section" style="margin-top:18px;font-weight:700;color:#ffd391"><?= e($settings['cta_text']) ?></div>
      </div>
    </section>
  <?php elseif ($siteMode === 'winners_announced'): ?>
    <section class="hero">
      <div class="card poster-card">
        <div class="poster-wrap"><img src="<?= e($settings['event_poster']) ?>" alt="<?= e($settings['event_name']) ?> poster"></div>
      </div>
      <div class="card state-card">
        <div class="kicker">Results</div>
        <h2 class="event-title"><?= e($settings['winners_title']) ?></h2>
        <p class="lead"><?= e($settings['winners_text']) ?></p>
        <?php if (!empty($winners)): ?>
          <div class="winner-grid">
            <?php foreach ($winners as $winner): ?>
              <div class="winner-card">
                <h3><?= e($winner['name'] ?? '') ?></h3>
                <?php if (!empty($winner['details'])): ?><div><strong>Details:</strong> <?= e($winner['details']) ?></div><?php endif; ?>
                <?php if (!empty($winner['station'])): ?><div><strong>Station:</strong> <?= e($winner['station']) ?></div><?php endif; ?>
                <?php if (!empty($winner['prize'])): ?><div><strong>Prize:</strong> <?= e($winner['prize']) ?></div><?php endif; ?>
              </div>
            <?php endforeach; ?>
          </div>
        <?php else: ?>
          <div class="meta"><div class="meta-item">No winners have been added yet.</div></div>
        <?php endif; ?>
      </div>
    </section>
  <?php else: ?>
    <section class="hero">
      <div class="card state-card" style="grid-column:1 / -1;">
        <div class="kicker">Community status</div>
        <h2 class="event-title"><?= e($stateTitle) ?></h2>
        <p class="lead"><?= e($stateText) ?></p>
        <div class="meta" style="max-width:900px">
          <div class="meta-item"><strong>What to expect:</strong> The main site stays live between promotions, and participating stations can still be linked here while the next event is being prepared.</div>
          <div class="meta-item"><strong>Next step:</strong> Switch the site mode in admin whenever your next competition, giveaway, seasonal special, or network promo is ready.</div>
        </div>
      </div>
    </section>
  <?php endif; ?>


  <?php if (!empty($scheduleGroups)): ?>
    <section class="card section pad">
      <div class="kicker">Event schedule</div>
      <h2 class="site-title" style="font-size:clamp(1.9rem,3.2vw,3rem);margin-top:16px"><?= e($settings['schedule_title'] ?? 'Event Schedule') ?></h2>
      <p class="lead"><?= e($settings['schedule_intro'] ?? '') ?></p>
      <div class="meta" style="margin-top:16px"><div class="meta-item"><strong>Timezone:</strong> <?= e($settings['schedule_timezone'] ?? 'EST') ?></div></div>
      <div class="schedule-day-grid">
        <?php foreach ($scheduleGroups as $dayLabel => $slots): ?>
          <article class="schedule-day">
            <h3><?= e($dayLabel) ?><?php if (!empty($settings['schedule_timezone'])): ?> (<?= e($settings['schedule_timezone']) ?>)<?php endif; ?></h3>
            <div class="schedule-list">
              <?php foreach ($slots as $slot): ?>
                <div class="schedule-item">
                  <div class="schedule-time"><?= e(trim((string)($slot['start'] ?? ''))) ?> - <?= e(trim((string)($slot['end'] ?? ''))) ?></div>
                  <div class="schedule-title"><?= e($slot['title'] ?? '') ?></div>
                  <?php if (!empty($slot['station'])): ?><div class="schedule-station"><?= e($slot['station']) ?></div><?php endif; ?>
                  <?php if (!empty($slot['note'])): ?><div class="schedule-note"><?= e($slot['note']) ?></div><?php endif; ?>
                </div>
              <?php endforeach; ?>
            </div>
          </article>
        <?php endforeach; ?>
      </div>
    </section>
  <?php endif; ?>

  <section class="card section pad">
    <div class="community-grid">
      <div>
        <div class="kicker">BroadcastUrSelf community</div>
        <h1 class="site-title"><?= e($settings['site_name']) ?></h1>
        <p class="lead" style="font-size:1.18rem"><?= e($settings['site_tagline']) ?></p>
        <p class="lead"><?= e($settings['site_intro']) ?></p>
        <p class="lead"><?= e($settings['community_blurb']) ?></p>
      </div>
      <div>
        <h2><?= e($settings['station_heading']) ?></h2>
        <p class="lead">All enabled stations below are part of the community event network. Keep the main event on the event link, then let supporting stations promote and announce clues across their own streams at the same time.</p>
      </div>
    </div>

    <?php if (!empty($activeStations)): ?>
      <div class="station-grid">
        <?php foreach ($activeStations as $station): ?>
          <article class="station-card">
            <div class="station-brand">
              <?php if (!empty($station['logo'])): ?><img src="<?= e($station['logo']) ?>" alt="<?= e($station['name']) ?> logo">
              <?php else: ?><div class="station-fallback"><?= e($station['name']) ?></div><?php endif; ?>
            </div>
            <h3 class="station-name"><?= e($station['name']) ?></h3>
            <div class="station-note"><?= e($station['note'] ?? '') ?></div>
            <div class="station-actions">
              <?php if (!empty($station['website'])): ?><a class="station-btn" href="<?= e($station['website']) ?>" target="_blank" rel="noopener noreferrer external">Visit Site</a>
              <?php else: ?><span class="station-btn" style="opacity:.62">Site Soon</span><?php endif; ?>
              <?php if (!empty($station['stream'])): ?><a class="station-btn listen" href="<?= e($station['stream']) ?>" target="_blank" rel="noopener noreferrer external">Listen Live</a>
              <?php else: ?><span class="station-btn listen" style="opacity:.62">Listen Soon</span><?php endif; ?>
            </div>
          </article>
        <?php endforeach; ?>
      </div>
    <?php else: ?>
      <div class="meta" style="margin-top:18px"><div class="meta-item">No participating stations are enabled right now. Turn stations on in admin when they join the event.</div></div>
    <?php endif; ?>
  </section>

  <div class="footer"><?= e($settings['footer_note']) ?></div>
</div>

<script>
document.querySelectorAll('[data-countdown]').forEach(function(el){
  const target = parseInt(el.getAttribute('data-countdown'), 10) * 1000;
  const d = el.querySelector('[data-days]'), h = el.querySelector('[data-hours]'), m = el.querySelector('[data-mins]'), s = el.querySelector('[data-secs]');
  function tick(){
    let diff = Math.max(0, Math.floor((target - Date.now()) / 1000));
    const days = Math.floor(diff / 86400); diff -= days * 86400;
    const hours = Math.floor(diff / 3600); diff -= hours * 3600;
    const mins = Math.floor(diff / 60); diff -= mins * 60;
    d.textContent = days; h.textContent = hours; m.textContent = mins; s.textContent = diff;
  }
  tick(); setInterval(tick, 1000);
});
</script>
</body>
</html>
