<?php
require __DIR__ . '/config.php';
$settings = get_settings();
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?= 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;600;700&family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<style>
:root {
  --bg: #120703;
  --panel: rgba(18, 10, 8, 0.82);
  --gold: #ffc94a;
  --cream: #fff8de;
  --green: #7ed957;
  --border: rgba(255, 201, 74, 0.25);
}
* { box-sizing: border-box; }
html, body { overflow-x: hidden; }
body {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  color: var(--cream);
  background:
    radial-gradient(circle at top, rgba(255,159,28,.18), transparent 35%),
    radial-gradient(circle at bottom, rgba(255,191,73,.12), transparent 30%),
    #100603;
}
.wrapper {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 18px 48px;
}
.hero {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items: center;
}
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 28px;
  box-shadow: 0 25px 60px rgba(0,0,0,.45);
}
.poster-box {
  padding: 16px;
}
.poster-box img {
  display: block;
  width: 100%;
  border-radius: 20px;
}
.info {
  padding: 34px;
}
.kicker {
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .9rem;
  margin-bottom: 12px;
}
h1, h2, h3 {
  font-family: Oswald, Inter, sans-serif;
  margin: 0 0 12px;
  line-height: 1.05;
}
h1 { font-size: clamp(2.2rem, 5vw, 4.4rem); }
.lead { font-size: 1.1rem; color: rgba(255,248,222,.86); }
.pot {
  margin: 26px 0;
  display: inline-block;
  background: linear-gradient(180deg, #1a4a0d, #103706);
  border: 1px solid rgba(126, 217, 87, .35);
  color: #fff86e;
  border-radius: 18px;
  padding: 16px 22px;
  font-size: clamp(1.4rem, 2.4vw, 2.2rem);
  font-weight: 800;
}
.meta {
  display: grid;
  gap: 14px;
  margin: 20px 0 28px;
}
.meta-item {
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  padding: 14px 20px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
}
.btn-primary { background: linear-gradient(180deg, #ffd25a, #ffb300); color: #1e1200; }
.btn-secondary { background: rgba(255,255,255,.08); color: var(--cream); border: 1px solid rgba(255,255,255,.12); }
.notice {
  margin-top: 12px;
  color: #ffcfcf;
  font-weight: 600;
}
.stations {
  margin-top: 36px;
  padding: 24px;
}
.station-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}
.station-pill {
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 201, 74, .08);
  border: 1px solid rgba(255, 201, 74, .18);
}
.footer-links { margin-top: 18px; font-size: .95rem; opacity: .85; }
@media (max-width: 920px) {
  .hero { grid-template-columns: 1fr; }
  .info { padding: 24px; }
}
</style>
</head>
<body>
<div class="wrapper">
  <div class="hero">
    <div class="card poster-box">
      <img src="<?= e($settings['poster']) ?>" alt="<?= e($settings['event_name']) ?> poster">
    </div>

    <div class="card info">
      <div class="kicker">Main event page + station clue support</div>
      <h1><?= e($settings['event_name']) ?></h1>
      <p class="lead"><?= e($settings['headline']) ?></p>
      <div class="pot">Current Pot: $<?= e((string) $settings['pot']) ?></div>

      <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> The main event happens on the event link below, while participating DJs and stations also play clue drops during the event.</div>
        <div class="meta-item"><strong>Status:</strong> <?= !empty($settings['answer_page_open']) ? 'Answer page is live' : 'Answer page is currently closed' ?></div>
      </div>

      <div class="actions">
        <?php if (!empty($settings['answer_page_open'])): ?>
          <a class="btn btn-primary" href="<?= e(site_url('answer.php')) ?>">Open Answer Page</a>
        <?php else: ?>
          <span class="btn btn-secondary">Answer Page Closed</span>
        <?php endif; ?>

        <?php if (!empty($settings['cta_url'])): ?>
          <a class="btn btn-secondary" href="<?= e($settings['cta_url']) ?>" target="_blank" rel="noopener">Main Event Page</a>
        <?php endif; ?>
      </div>

      <div class="notice"><?= e($settings['cta_text']) ?></div>
      <div class="footer-links">Admin: <a style="color:#ffd25a" href="<?= e(site_url('admin.php')) ?>">manage this event</a></div>
    </div>
  </div>

  <div class="card stations">
    <h2>Participating Stations</h2>
    <p class="lead" style="margin:0 0 12px; font-size:1rem;">Listeners can hear clue drops across these participating stations and DJs during the event.</p>
    <div class="station-list">
      <?php foreach (($settings['stations'] ?? []) as $station): ?>
        <div class="station-pill"><?= e($station) ?></div>
      <?php endforeach; ?>
    </div>
  </div>
</div>
</body>
</html>
