<?php
require __DIR__ . '/config.php';
$settings = get_settings();
$blocks = $settings['featured_blocks'] ?? [];
$stations = $settings['stations'] ?? [];
$hasEventLink = !empty($settings['primary_button_url']);
?>
<!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);
  --panel-soft:rgba(255,255,255,.04);
  --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;
}
.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-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 10px 22px rgba(0,0,0,.45));
}
.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;
}
.feature{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;
}
.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
}
.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}
.list-pills{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.pill{
  padding:12px 16px;border-radius:999px;background:rgba(255,179,71,.07);
  border:1px solid rgba(255,179,71,.2)
}
.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}
.footer{
  margin-top:28px;padding:18px 8px 0;color:rgba(238,246,255,.62);font-size:.95rem
}
@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:16px}
  .header-card{height:auto;min-height:160px;padding-top:4px}
  .header-banner{position:relative;height:160px}
  .feature,.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>

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

  <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">Use the event link as the main destination while participating stations and DJs support the promotion across the network.</p>
        <div class="list-pills">
          <?php foreach ($stations as $station): ?>
            <span class="pill"><?= e($station) ?></span>
          <?php endforeach; ?>
        </div>
      </div>
    </div>

    <?php if (!empty($blocks)): ?>
      <div class="section" style="margin-top:26px">
        <div class="community-grid" style="grid-template-columns:repeat(3,1fr)">
          <?php foreach ($blocks as $block): ?>
            <div class="meta-item">
              <h3 style="margin-bottom:8px"><?= e($block['title'] ?? '') ?></h3>
              <div class="lead"><?= e($block['text'] ?? '') ?></div>
            </div>
          <?php endforeach; ?>
        </div>
      </div>
    <?php endif; ?>
  </section>

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