<?php
session_start();
include __DIR__ . '/includes/header.php';
include __DIR__ . '/includes/nav.php';
$sent = isset($_GET['sent']) && $_GET['sent'] == '1';
?>
<main class="content-area">
  <div class="smurf-divider"></div>
  <div class="content-wrapper">
    <section class="content-card chat-hero-card">
      <div class="chat-hero-copy">
        <span class="section-kicker">Thunder Mountain Radio</span>
        <h1>Join the Team</h1>
        <p>Want to host a show, help with production, or bring your own thunder to the station? Tell us a little about yourself and we’ll take a look.</p>
        <div class="chat-status-row">
          <span class="status-pill is-live">Applications open</span>
          <span class="status-pill">DJs, presenters, producers & promos</span>
        </div>
      </div>
      <div class="chat-hero-side">
        <div class="chat-side-panel">
          <h3>What helps</h3>
          <ul class="chat-rule-list">
            <li>A short introduction about you and your style.</li>
            <li>Any previous radio, DJ, or podcast experience.</li>
            <li>A demo audio file if you have one.</li>
          </ul>
        </div>
      </div>
    </section>

    <div class="smurf-divider"></div>

    <?php if ($sent): ?>
      <section class="content-card center-text">
        <h2 style="color:#a6ff9e;">Your application has been sent! 🎉</h2>
        <p>Thank you — we’ve received it and it’s now in the admin review queue.</p>
      </section>
      <div class="smurf-divider"></div>
    <?php endif; ?>

    <section class="content-card">
      <form method="post" action="send_join.php" enctype="multipart/form-data" class="thunder-form-stack">
        <div class="request-box">
          <div class="request-field">
            <label>Your Name</label>
            <input type="text" class="request-input" name="name" required>
          </div>
          <div class="request-field">
            <label>Your Email</label>
            <input type="email" class="request-input" name="email" required>
          </div>
        </div>

        <div class="request-box">
          <div class="request-field">
            <label>Role You're Interested In</label>
            <input type="text" class="request-input" name="role" placeholder="DJ, Presenter, Producer, Social Media…" required>
          </div>
          <div class="request-field">
            <label>Your Experience</label>
            <input type="text" class="request-input" name="experience" placeholder="Beginner, Intermediate, Experienced" required>
          </div>
        </div>

        <div class="request-box">
          <div class="request-field">
            <label>Why Do You Want to Join?</label>
            <textarea class="request-textarea" name="why" rows="7" required></textarea>
          </div>
        </div>

        <div class="request-box">
          <div class="request-field">
            <label>Upload Demo Audio (optional)</label>
            <input type="file" class="request-input" name="demo" accept="audio/*">
            <small class="upload-help">Accepted formats depend on your browser. MP3 or WAV is usually safest.</small>
          </div>
        </div>

        <div class="request-box center-text">
          <button class="request-button">Submit Application 💼</button>
        </div>
      </form>
    </section>
  </div>
  <div class="smurf-divider"></div>
</main>
<?php include __DIR__ . '/includes/footer.php'; ?>
