<?php
require __DIR__ . '/config.php';
$settings = get_settings();
$stations = $settings['stations'] ?? [];
$hasEventLink = !empty($settings['primary_button_url']);
$featuredActive = bool_setting($settings, 'event_active', true);
$activeStations = array_values(array_filter($stations, fn($station) => !empty($station['enabled']) && !empty($station['name'])));
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?= e($settings['site_name']) ?><?= !empty($settings['event_name']) ? ' | ' . e($settings['event_name']) : '' ?></title>
<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{
  --bg:#050608;
  --panel:rgba(10,11,16,.88);
  --line:rgba(255,170,68,.22);
  --gold:#ffb347;
  --gold2:#ff7f11;
  --blue:#3ab8ff;
  --text:#eef6ff;
  --muted:rgba(238,246,255,.78);
  --green:#79d95c;
  --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;
}
.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;
  box-shadow:0 0 0 rgba(58,184,255,0);transition:transform .2s ease, box-shadow .2s ease;
}
.admin-link:hover{transform:translateY(-1px);box-shadow:0 0 22px rgba(58,184,255,.18)}
.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;box-shadow:0 0 0 rgba(255,170,68,0);animation: posterPulse 7s ease-in-out infinite}
.feature,.no-event-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{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;box-shadow:0 0 22px rgba(255,127,17,.18)}
.secondary{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);color:var(--text);box-shadow:0 0 18px rgba(58,184,255,.10)}
.disabled{opacity:.72;cursor:not-allowed}
.note{margin-top:12px;color:#ffdbab}
.section{margin-top:26px}.section.pad{padding:28px}
.list-pills{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.pill,.pill-link{
  padding:12px 16px;border-radius:999px;background:rgba(255,179,71,.07);border:1px solid rgba(255,179,71,.2);
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .2s ease, box-shadow .2s ease;
}
.pill-link:hover{transform:translateY(-1px);box-shadow:0 0 22px rgba(255,170,68,.14)}
.community-grid{display:grid;grid-template-columns:1.2fr .8fr;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}
.site-title{font-size:clamp(2.1rem,4.4vw,4.5rem);margin-top:14px}
.status-open{color:#93ff8b}.status-closed{color:#ffd2a2}
.no-event-card{min-height:100%}
.no-event-copy{max-width:58ch}
.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,.no-event-card,.poster-card,.section.pad{padding:20px}
  .btn{min-width:100%}
}
</style>
</head>
<body>
<div class="wrap">
  <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 ($featuredActive): ?>
    <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($settings['event_type']) ?></span>
            <h2 class="event-title"><?= e($settings['event_name']) ?></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; ?>

        <div class="meta">
          <div class="meta-item"><strong>Dates:</strong> <?= e($settings['date_range']) ?></div>
          <div class="meta-item"><strong>About:</strong> <?= e($settings['description']) ?></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 (bool_setting($settings, 'submission_page_open')): ?>
              <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($settings['primary_button_url']) ?>" target="_blank"><?= 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 (bool_setting($settings, 'submission_page_open')): ?>
              <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']) ?> 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 else: ?>
    <section class="hero">
      <div class="card no-event-card" style="grid-column:1 / -1;">
        <div class="kicker">Community status</div>
        <h2 class="event-title"><?= e($settings['no_event_title']) ?></h2>
        <p class="lead no-event-copy"><?= e($settings['no_event_text']) ?></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 for listeners while the next event is being prepared.</div>
          <div class="meta-item"><strong>Next step:</strong> Switch the featured event back on in admin whenever your next competition, giveaway, seasonal special, or network promo is ready.</div>
        </div>
        <?php if (!empty($activeStations)): ?>
          <div class="section">
            <h3><?= e($settings['station_heading']) ?></h3>
            <div class="list-pills">
              <?php foreach ($activeStations as $station): ?>
                <?php if (!empty($station['url'])): ?>
                  <a class="pill-link" href="<?= e($station['url']) ?>" target="_blank"><?= e($station['name']) ?></a>
                <?php else: ?>
                  <span class="pill"><?= e($station['name']) ?></span>
                <?php endif; ?>
              <?php endforeach; ?>
            </div>
          </div>
        <?php endif; ?>
      </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">Only stations marked as participating in admin are shown here. Add each station link once, then just tick them on or off per event.</p>
        <div class="list-pills">
          <?php foreach ($activeStations as $station): ?>
            <?php if (!empty($station['url'])): ?>
              <a class="pill-link" href="<?= e($station['url']) ?>" target="_blank"><?= e($station['name']) ?></a>
            <?php else: ?>
              <span class="pill"><?= e($station['name']) ?></span>
            <?php endif; ?>
          <?php endforeach; ?>
        </div>
      </div>
    </div>
  </section>

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