<?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'] ?? [];
$scheduleDays = event_schedule_days();
$hourlySchedule = normalize_hourly_schedule($settings['hourly_schedule'] ?? []);
$selectedScheduleDay = trim((string)($_GET['schedule_day'] ?? array_key_first($scheduleDays)));
if (!isset($scheduleDays[$selectedScheduleDay])) $selectedScheduleDay = array_key_first($scheduleDays);
$selectedScheduleRows = $hourlySchedule[$selectedScheduleDay] ?? [];

$startTs = parse_datetime_value((string)($settings['start_at'] ?? ''));
$endTs = parse_datetime_value((string)($settings['end_at'] ?? ''));
$countdownTs = null;
$countdownLabel = '';
$now = now_ts();
$showClueBox = bool_setting($settings, 'clue_box_enabled', true);
$clueWindowLive = clue_window_live($settings, $now);
$visibleClues = clue_rows_visible_today($settings, $now);
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}.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}
.clue-shell{margin-top:-6px;margin-bottom:16px;padding:24px 26px;background:linear-gradient(135deg, rgba(29,13,2,.92), rgba(7,14,22,.96) 50%, rgba(2,26,39,.96));overflow:hidden}.clue-shell::before{content:"";position:absolute;inset:-20% auto auto -10%;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle, rgba(255,140,32,.18), transparent 68%);pointer-events:none}.clue-shell::after{content:"";position:absolute;inset:auto -10% -30% auto;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle, rgba(58,184,255,.16), transparent 68%);pointer-events:none}.clue-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap;position:relative;z-index:1}.clue-status{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.1);font-weight:800}.clue-status.live{background:rgba(35,108,9,.5);color:#dfffaa;border-color:rgba(145,229,96,.28);box-shadow:0 0 0 1px rgba(145,229,96,.08),0 0 22px rgba(145,229,96,.12)}.clue-status.wait{background:rgba(255,255,255,.05);color:#ffd6ab}.clue-dot{width:10px;height:10px;border-radius:50%;background:#8dff73;box-shadow:0 0 0 0 rgba(141,255,115,.55);animation:cluePulse 1.5s infinite}.clue-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:18px;position:relative;z-index:1}.clue-entry{padding:18px;border-radius:22px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}.clue-entry h3{font-size:1.55rem;margin-bottom:6px}.clue-entry .mini{display:inline-block;margin-bottom:12px;padding:7px 10px;border-radius:999px;background:rgba(58,184,255,.08);border:1px solid rgba(58,184,255,.18);color:#8cd7ff;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.clue-entry .clue-text{white-space:pre-line;color:var(--text);font-size:.98rem;line-height:1.55}.clue-wait{margin-top:18px;padding:18px 20px;border-radius:22px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:#ffd7b0;position:relative;z-index:1}.clue-note{margin-top:10px;color:var(--muted);font-size:.95rem}.clue-meta{color:#9fdfff;font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}@keyframes cluePulse{0%{box-shadow:0 0 0 0 rgba(141,255,115,.55)}70%{box-shadow:0 0 0 12px rgba(141,255,115,0)}100%{box-shadow:0 0 0 0 rgba(141,255,115,0)}}
.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}

.schedule-card{padding:28px}.schedule-top{display:flex;align-items:end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}.schedule-picker{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.schedule-picker form{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.schedule-picker select{min-width:260px;padding:13px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.06);color:var(--text);font-weight:700}
.schedule-intro{color:var(--muted);margin:0 0 16px}.schedule-table-wrap{overflow:auto;border-radius:24px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}.schedule-table{width:100%;border-collapse:collapse;min-width:860px}.schedule-table th,.schedule-table td{padding:14px 12px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left;vertical-align:middle}.schedule-table thead th{background:#131821;color:#ffd391;font-family:Oswald,Inter,sans-serif;font-size:1rem;letter-spacing:.04em}.schedule-table tbody tr:nth-child(odd){background:rgba(255,255,255,.02)}.schedule-table .time{white-space:nowrap;color:#ffd391;font-weight:800}.slot-name{font-weight:800}.slot-open{color:#9fd8ff;font-weight:800}.slot-note{font-size:.92rem;color:var(--muted)}.schedule-link{scroll-margin-top:24px}.schedule-actions{display:flex;gap:10px;flex-wrap:wrap}.schedule-card .button-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:800;padding:12px 16px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08)}@media (max-width:820px){.schedule-table{min-width:680px}.schedule-picker form,.schedule-top{align-items:stretch}.schedule-picker select{width:100%}}

@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 ($showClueBox): ?>
    <section class="card clue-shell" id="cryptic-clues">
      <div class="clue-head">
        <div>
          <span class="tag"><?= e($settings['clue_box_title'] ?? 'Cryptic Clues') ?></span>
          <?php if (trim((string)($settings['clue_box_intro'] ?? '')) !== ''): ?><p class="lead" style="margin:12px 0 0"><?= e($settings['clue_box_intro']) ?></p><?php endif; ?>
        </div>
        <?php if ($clueWindowLive && !empty($visibleClues)): ?>
          <div class="clue-status live"><span class="clue-dot"></span>Live clue window</div>
        <?php else: ?>
          <div class="clue-status wait">Stand by</div>
        <?php endif; ?>
      </div>

      <?php if ($clueWindowLive && !empty($visibleClues)): ?>
        <div class="clue-meta">Showing every clue released so far</div>
        <div class="clue-grid">
          <?php foreach ($visibleClues as $clue): ?>
            <article class="clue-entry">
              <div class="mini"><?= e($clue['teaser'] ?? 'Cryptic clue') ?></div>
              <h3><?= e($clue['label'] ?? 'Clue') ?></h3>
              <div class="clue-text"><?= e($clue['body'] ?? '') ?></div>
            </article>
          <?php endforeach; ?>
        </div>
      <?php else: ?>
        <div class="clue-wait"><?= e($settings['clue_box_waiting_text'] ?? 'Clues will appear periodically.') ?></div>
        <?php if (!empty($visibleClues)): ?><div class="clue-note">When the next live clue window opens, the page will show <?= count($visibleClues) ?> released clue<?= count($visibleClues) === 1 ? '' : 's' ?> together.</div><?php endif; ?>
      <?php endif; ?>
    </section>
  <?php endif; ?>

  <?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; ?>

          <a class="btn secondary" href="<?= e(site_url('index.php?schedule_day=' . urlencode($selectedScheduleDay) . '#event-schedule')) ?>">View Schedule</a>
        </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; ?>


  <section class="card section pad schedule-card schedule-link" id="event-schedule">
    <div class="schedule-top">
      <div>
        <div class="kicker">Event schedule</div>
        <h2><?= e($settings['schedule_title'] ?? '4 Day Event Schedule') ?></h2>
        <?php if (trim((string)($settings['schedule_intro'] ?? '')) !== ''): ?><p class="schedule-intro"><?= e($settings['schedule_intro']) ?></p><?php endif; ?>
      </div>
      <div class="schedule-actions">
        <a class="button-link" href="<?= e(site_url('admin.php#schedule-editor')) ?>">Edit Schedule In Admin</a>
      </div>
    </div>

    <div class="schedule-picker">
      <form method="get" action="<?= e(site_url('index.php')) ?>#event-schedule">
        <div>
          <label for="schedule_day">Select day</label>
          <select id="schedule_day" name="schedule_day" onchange="this.form.submit()">
            <?php foreach ($scheduleDays as $dayKey => $dayLabel): ?>
              <option value="<?= e($dayKey) ?>" <?= $selectedScheduleDay === $dayKey ? 'selected' : '' ?>><?= e($dayLabel) ?> (<?= e($settings['schedule_timezone'] ?? 'EST') ?>)</option>
            <?php endforeach; ?>
          </select>
        </div>
      </form>
    </div>

    <div class="schedule-table-wrap">
      <table class="schedule-table">
        <thead>
          <tr>
            <th style="width:180px">Time</th>
            <th>Show / DJ</th>
            <th style="width:260px">Station / Source</th>
            <th>Note</th>
          </tr>
        </thead>
        <tbody>
          <?php foreach ($selectedScheduleRows as $slot): ?>
            <?php
              $isFilled = !empty($slot['enabled']) && (trim((string)($slot['title'] ?? '')) !== '' || trim((string)($slot['station'] ?? '')) !== '' || trim((string)($slot['note'] ?? '')) !== '');
              $title = trim((string)($slot['title'] ?? ''));
              $station = trim((string)($slot['station'] ?? ''));
              $note = trim((string)($slot['note'] ?? ''));
            ?>
            <tr>
              <td class="time"><?= e($slot['time_label'] ?? '') ?></td>
              <td><?= $isFilled ? '<span class="slot-name">' . e($title !== '' ? $title : 'Confirmed Slot') . '</span>' : '<span class="slot-open">Available Slot</span>' ?></td>
              <td><?= e($isFilled ? ($station !== '' ? $station : 'BroadcastUrSelf Event') : 'Open for new DJ / show') ?></td>
              <td class="slot-note"><?= e($isFilled ? ($note !== '' ? $note : 'Scheduled block') : 'Add more DJs from admin as they are confirmed.') ?></td>
            </tr>
          <?php endforeach; ?>
        </tbody>
      </table>
    </div>
  </section>

  <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>
