<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Radio Isla Negra - Streaming hand picked music since 1999. Three channels: Slowbeat, RIN, and Upbeat.">

  <title>Radio Isla Negra - Since 1999</title>

  <!-- Favicon -->
  <link rel="icon" type="image/svg+xml" href="/assets/favicon.svg">

  <!-- Preconnect to streaming server -->
  <link rel="preconnect" href="https://radioislanegra.org">
  <link rel="dns-prefetch" href="https://radioislanegra.org">

  <!-- Styles -->
  <link rel="stylesheet" crossorigin href="/assets/main-BXCgfBdf.css">

  <!-- Player: Reliable streaming with network recovery -->
  <script src="/player.js?v=5" defer></script>

  <!-- Header scroll behavior styles -->
  <style>
    /* Header scroll behavior - compact on scroll */
    header .header-inner {
      transition: padding 0.3s ease;
    }
    header .header-logo {
      transition: height 0.3s ease;
    }
    header .header-tagline {
      transition: opacity 0.3s ease, max-height 0.3s ease;
      max-height: 50px;
      overflow: hidden;
    }

    /* Scrolled state */
    header.scrolled .header-inner {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
    }
    header.scrolled .header-logo {
      height: 2rem; /* h-8 */
    }
    @media (min-width: 768px) {
      header.scrolled .header-logo {
        height: 2.5rem; /* h-10 */
      }
    }
    header.scrolled .header-tagline {
      opacity: 0;
      max-height: 0;
      margin: 0;
    }
    header.scrolled .header-nav-row {
      margin-bottom: 0;
    }
  </style>
</head>
<body>
  <!-- New Feature Banner - COMMENTED OUT FOR LATER
  <div id="new-feature-banner" class="new-feature-banner">
    <div class="banner-content">
      <span class="banner-icon">&#10024;</span>
      <span class="banner-text"><strong>New Map !</strong> Interact with listeners</span>
      <a href="#map" class="banner-cta">Try it</a>
    </div>
    <button class="banner-close" onclick="closeBanner()" aria-label="Close">&times;</button>
  </div>

  <style>
    /* New Feature Banner */
    .new-feature-banner {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      background: linear-gradient(90deg, #0891b2, #06b6d4, #22d3ee);
      color: #000;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      font-size: 14px;
      transform: translateY(0);
      transition: transform 0.3s ease, opacity 0.3s ease;
    }
    .new-feature-banner.hidden {
      transform: translateY(-100%);
      opacity: 0;
      pointer-events: none;
    }
    .banner-content {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .banner-icon {
      font-size: 18px;
    }
    .banner-text {
      text-align: center;
    }
    .banner-cta {
      background: rgba(0,0,0,0.15);
      color: #000;
      padding: 4px 12px;
      border-radius: 20px;
      font-weight: 600;
      text-decoration: none;
      transition: background 0.2s;
      white-space: nowrap;
    }
    .banner-cta:hover {
      background: rgba(0,0,0,0.25);
    }
    .banner-close {
      position: absolute;
      right: 12px;
      background: none;
      border: none;
      color: #000;
      font-size: 24px;
      cursor: pointer;
      opacity: 0.6;
      transition: opacity 0.2s;
      line-height: 1;
    }
    .banner-close:hover {
      opacity: 1;
    }
    /* Adjust header when banner is visible */
    body:has(.new-feature-banner:not(.hidden)) header {
      top: 44px;
    }
    body:has(.new-feature-banner:not(.hidden)) main {
      padding-top: calc(6rem + 44px);
    }
    @media (min-width: 768px) {
      body:has(.new-feature-banner:not(.hidden)) main {
        padding-top: calc(8rem + 44px);
      }
    }

    /* NEW Badge */
    .new-badge {
      position: absolute;
      top: -8px;
      right: -24px;
      background: #f43f5e;
      color: white;
      font-size: 9px;
      font-weight: 700;
      padding: 2px 5px;
      border-radius: 4px;
      letter-spacing: 0.5px;
      animation: badge-pulse 2s ease-in-out infinite;
    }
    @keyframes badge-pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.1); }
    }
  </style>
  END New Feature Banner -->

  <!-- Header -->
  <header id="main-header" class="fixed top-0 left-0 right-0 z-50 bg-rin-black/90 backdrop-blur-sm">
    <div class="header-inner max-w-6xl mx-auto px-4 py-4">
      <div class="header-nav-row flex items-center justify-between mb-2">
        <a href="/" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
          <img src="/assets/logo redondo.png" alt="Radio Isla Negra" class="header-logo h-12 md:h-20 w-auto">
        </a>

        <nav class="hidden md:flex items-center gap-6">
          <a href="#players" class="text-gray-400 hover:text-rin-cyan transition-colors">Listen</a>
          <a href="#map" class="nav-listeners text-gray-400 hover:text-rin-cyan transition-colors relative">
            Listeners
            <!-- <span class="new-badge">NEW</span> -->
          </a>
          <a href="#footer-guestbook" class="text-gray-400 hover:text-rin-cyan transition-colors">Guestbook</a>
        </nav>
      </div>
      <p class="header-tagline hidden md:block text-gray-400 italic text-sm ml-2">"Streaming hand picked music<br>since 1999"</p>
    </div>
  </header>

  <!-- Main Content -->
  <main class="pt-24 md:pt-32">

    <!-- Players Section -->
    <section id="players" class="pt-0 pb-2 px-4 md:px-4 md:py-24">
      <div class="max-w-6xl mx-auto">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-full max-w-sm mx-auto md:max-w-none">

          <!-- Slowbeat Player -->
          <div class="order-2 md:order-1" data-player="slowbeat">
            <h2 class="text-gray-500 text-xl font-semibold uppercase tracking-widest mb-4 text-center">Slowbeat</h2>
            <div class="player-card">
              <div class="album-art-container relative aspect-square overflow-hidden mb-4 bg-gray-700">
              <img
                src="/assets/default-slowbeat.jpg"
                alt="Album Art"
                class="album-art w-full h-full object-cover"
                style="opacity:0;transition:opacity .3s"
                onload="this.style.opacity=1"
              >
            </div>

            <div class="mb-4">
              <p class="song-title text-lg font-semibold text-rin-white truncate">Loading...</p>
              <p class="song-artist text-sm text-gray-400 truncate">—</p>
            </div>

            <div class="flex items-center gap-4">
              <button class="play-btn play-btn-large" data-action="play" data-station="slowbeat" aria-label="Play Slowbeat">
                <svg class="w-8 h-8 play-icon" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M8 5v14l11-7z"/>
                </svg>
                <svg class="w-8 h-8 pause-icon hidden" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
                </svg>
              </button>

              <div class="flex-1 flex items-center gap-3">
                <button class="volume-btn text-gray-400 hover:text-rin-white transition-colors" data-action="mute" data-station="slowbeat" aria-label="Mute">
                  <svg class="w-5 h-5 volume-on" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
                  </svg>
                  <svg class="w-5 h-5 volume-off hidden" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>
                  </svg>
                </button>
                <input
                  type="range"
                  min="0"
                  max="100"
                  value="80"
                  class="volume-slider flex-1"
                  data-station="slowbeat"
                  aria-label="Volume"
                >
              </div>
            </div>

              <div class="error-message hidden mt-3 text-sm text-red-400"></div>
            </div>
          </div>

          <!-- RIN Player -->
          <div class="order-1 md:order-2" data-player="rin">
            <h2 class="text-gray-500 text-xl font-semibold uppercase tracking-widest mb-4 text-center">Radio Isla Negra</h2>
            <div class="player-card">
              <div class="album-art-container relative aspect-square overflow-hidden mb-4 bg-gray-700">
              <img
                src="/assets/default-rin.jpg"
                alt="Album Art"
                class="album-art w-full h-full object-cover"
                style="opacity:0;transition:opacity .3s"
                onload="this.style.opacity=1"
              >
            </div>

            <div class="mb-4">
              <p class="song-title text-lg font-semibold text-rin-white truncate">Loading...</p>
              <p class="song-artist text-sm text-gray-400 truncate">—</p>
            </div>

            <div class="flex items-center gap-4">
              <button class="play-btn play-btn-large" data-action="play" data-station="rin" aria-label="Play RIN">
                <svg class="w-8 h-8 play-icon" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M8 5v14l11-7z"/>
                </svg>
                <svg class="w-8 h-8 pause-icon hidden" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
                </svg>
              </button>

              <div class="flex-1 flex items-center gap-3">
                <button class="volume-btn text-gray-400 hover:text-rin-white transition-colors" data-action="mute" data-station="rin" aria-label="Mute">
                  <svg class="w-5 h-5 volume-on" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
                  </svg>
                  <svg class="w-5 h-5 volume-off hidden" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>
                  </svg>
                </button>
                <input
                  type="range"
                  min="0"
                  max="100"
                  value="80"
                  class="volume-slider flex-1"
                  data-station="rin"
                  aria-label="Volume"
                >
              </div>
            </div>

              <div class="error-message hidden mt-3 text-sm text-red-400"></div>
            </div>
          </div>

          <!-- Upbeat Player -->
          <div class="order-3" data-player="upbeat">
            <h2 class="text-gray-500 text-xl font-semibold uppercase tracking-widest mb-4 text-center">Upbeat</h2>
            <div class="player-card">
              <div class="album-art-container relative aspect-square overflow-hidden mb-4 bg-gray-700">
              <img
                src="/assets/default-upbeat.jpg"
                alt="Album Art"
                class="album-art w-full h-full object-cover"
                style="opacity:0;transition:opacity .3s"
                onload="this.style.opacity=1"
              >
            </div>

            <div class="mb-4">
              <p class="song-title text-lg font-semibold text-rin-white truncate">Loading...</p>
              <p class="song-artist text-sm text-gray-400 truncate">—</p>
            </div>

            <div class="flex items-center gap-4">
              <button class="play-btn play-btn-large" data-action="play" data-station="upbeat" aria-label="Play Upbeat">
                <svg class="w-8 h-8 play-icon" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M8 5v14l11-7z"/>
                </svg>
                <svg class="w-8 h-8 pause-icon hidden" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
                </svg>
              </button>

              <div class="flex-1 flex items-center gap-3">
                <button class="volume-btn text-gray-400 hover:text-rin-white transition-colors" data-action="mute" data-station="upbeat" aria-label="Mute">
                  <svg class="w-5 h-5 volume-on" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
                  </svg>
                  <svg class="w-5 h-5 volume-off hidden" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>
                  </svg>
                </button>
                <input
                  type="range"
                  min="0"
                  max="100"
                  value="80"
                  class="volume-slider flex-1"
                  data-station="upbeat"
                  aria-label="Volume"
                >
              </div>
            </div>

              <div class="error-message hidden mt-3 text-sm text-red-400"></div>
            </div>
          </div>

        </div>
      </div>
    </section>

    <!-- Map Section -->
    <style>
      .map-iframe { height: 400px; }
      @media (min-width: 768px) { .map-iframe { height: 700px; } }
    </style>
    <section id="map" class="pt-12">
      <div class="map-container">
        <iframe
          src="/mapa.html?v=6"
          class="map-iframe w-full border-0"
          title="Listeners Map"
          loading="lazy"
        ></iframe>
      </div>

      <!-- Platforms Section -->
      <div class="pt-24 pb-8 px-4 bg-rin-black">
        <div class="max-w-5xl mx-auto">
          <!-- All Platform Icons in One Row -->
          <div class="flex justify-center items-center gap-4 gap-y-2 md:gap-10 flex-wrap">
            <a href="https://tunein.com/radio/Radio-Isla-Negra-s329780/" target="_blank" rel="noopener" class="platform-icon">
              <img src="/assets/music services icons/tunein-svgrepo-com.svg" alt="TuneIn" class="h-12 md:h-16">
            </a>
            <div class="platform-icon">
              <img src="/assets/music services icons/alexa new icon.webp" alt="Alexa" class="h-12 md:h-16">
            </div>
            <div class="platform-icon">
              <img src="/assets/music services icons/sonos icon.png" alt="Sonos" class="h-14 md:h-20">
            </div>
            <a href="https://apps.apple.com/us/app/radio-isla-negra/id1437129392" target="_blank" rel="noopener" class="platform-icon">
              <img src="/assets/music services icons/download-on-the-app-store-apple-logo-svgrepo-com-1.svg" alt="Download on the App Store" class="h-14 md:h-20">
            </a>
            <a href="https://play.google.com/store/apps/details?id=com.listen2myapp.listen2myapp274&hl" target="_blank" rel="noopener" class="platform-icon">
              <img src="/assets/music services icons/google-play-badge-logo-svgrepo-com.svg" alt="Get it on Google Play" class="h-14 md:h-20">
            </a>
          </div>
        </div>
      </div>

      <div class="py-32 px-6 md:px-48 max-w-7xl mx-auto">
          <p class="mission-text text-center text-base md:text-lg leading-relaxed font-body font-light mb-6" style="color: #c5eef3;">
            For the last 25 years, Radio Isla Negra has been an unparalleled source of handpicked music. No additives. No sugar added. Just 100% high-quality music.<br>
            <span style="color: #c5eef3;">Supported by listeners since 1999.</span>
          </p>
        </div>
    </section>

  </main>

  <!-- ==================== FOOTER ==================== -->
  <footer class="footer-main py-12 px-4 bg-gray-900">
    <div class="max-w-6xl mx-auto">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">

        <!-- ========== ABOUT COLUMN ========== -->
        <div class="footer-column order-2 md:order-1">
          <h3 class="footer-title">About</h3>
          <p class="text-gray-400 text-sm leading-relaxed mb-4">
            We spend countless hours finding and selecting the best songs across the musical spectrum. We do this because we love music. But we need your help to continue searching for high-quality tracks without compromise.
          </p>
          <button onclick="openDonateModal()" class="text-rin-cyan hover:underline text-sm cursor-pointer bg-transparent border-none p-0">
            Donate Now
          </button>
          <span class="text-gray-400 text-sm"> and be part of our musical quest for excellence.</span>
        </div>

        <!-- ========== CONTACT COLUMN ========== -->
        <div class="footer-column order-3 md:order-2">
          <h3 class="footer-title">Contact</h3>
          <form id="contact-form" class="space-y-3">
            <div>
              <label for="contact-name" class="sr-only">Your name</label>
              <input
                type="text"
                id="contact-name"
                name="name"
                class="footer-input"
                placeholder="Your name"
                maxlength="50"
              >
            </div>
            <div>
              <label for="contact-email" class="sr-only">Your email</label>
              <input
                type="email"
                id="contact-email"
                name="email"
                class="footer-input"
                placeholder="Your email"
                maxlength="100"
                required
              >
            </div>
            <div>
              <label for="contact-message" class="sr-only">Your message</label>
              <textarea
                id="contact-message"
                name="message"
                class="footer-textarea"
                placeholder="Subject [subject] Your message"
                maxlength="1000"
                required
              ></textarea>
            </div>
            <!-- Honeypot -->
            <input type="text" name="website" class="hidden" tabindex="-1" autocomplete="off">
            <button type="submit" class="footer-submit-btn w-full">
              SUBMIT
            </button>
          </form>
          <div id="contact-status" class="hidden mt-3 p-2 rounded text-sm"></div>
        </div>

        <!-- ========== COMMUNITY/GUESTBOOK COLUMN ========== -->
        <div class="footer-column order-1 md:order-3" id="footer-guestbook">
          <h3 class="footer-title">Community</h3>

          <!-- Messages List -->
          <div id="footer-guestbook-messages" class="footer-messages-container">
            <div class="text-center py-6">
              <div class="spinner-small mx-auto mb-2"></div>
              <p class="text-gray-500 text-xs">Loading messages...</p>
            </div>
          </div>

          <!-- Modern Form -->
          <form id="footer-guestbook-form" class="guestbook-form">
            <input
              type="text"
              name="message"
              class="guestbook-input-message"
              placeholder="Say something..."
              maxlength="280"
              required
            >
            <div class="guestbook-row">
              <input
                type="text"
                name="name"
                class="guestbook-input-name"
                placeholder="Your name"
                maxlength="50"
              >
              <!-- Honeypot -->
              <input type="text" name="website" class="hidden" tabindex="-1" autocomplete="off">
              <button type="submit" class="guestbook-submit">
                Send
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/>
                </svg>
              </button>
            </div>
          </form>
          <div id="footer-guestbook-status" class="guestbook-status hidden"></div>
        </div>

      </div>

      <!-- Copyright -->
      <div class="mt-12 pt-6 border-t border-gray-800 text-center">
        <p class="text-gray-500 text-sm">
          Three channels. One destination. Radio Isla Negra &copy; 1999-2025.
        </p>
      </div>
    </div>
  </footer>

  <!-- Donate Modal Styles -->
  <style>
    #donate-modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 9999;
    }
    #donate-modal.active { display: block; }
    .donate-backdrop {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.8);
    }
    .donate-container {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 1rem;
    }
    .donate-box {
      position: relative;
      background: linear-gradient(to bottom, #f7f7f7, #e9e9e9);
      border-radius: 8px;
      width: 320px;
      padding: 0 0 24px 0;
      box-shadow: 0 8px 32px rgba(0,0,0,0.4);
      text-align: center;
    }
    .donate-logo {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      margin: -40px auto 16px;
      border: 3px solid #fff;
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
      object-fit: cover;
    }
    .donate-close {
      position: absolute;
      top: 8px;
      left: 8px;
      background: rgba(0,0,0,0.3);
      border: none;
      color: #fff;
      cursor: pointer;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      line-height: 1;
      transition: background 0.2s;
    }
    .donate-close:hover { background: rgba(0,0,0,0.5); }
    .donate-title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
      margin: 0 0 4px 0;
    }
    .donate-subtitle {
      font-size: 13px;
      color: #666;
      margin: 0 0 20px 0;
    }
    .donate-options {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 0 24px;
    }
    .donate-option {
      display: block;
      background: #4A90D9;
      color: #fff;
      border: none;
      border-radius: 6px;
      padding: 12px 16px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      text-decoration: none;
      transition: background 0.2s;
    }
    .donate-option:hover {
      background: #3A7BC8;
    }
    .donate-option span {
      opacity: 0.85;
      font-weight: 400;
    }
    .donate-secure {
      font-size: 11px;
      color: #999;
      margin: 16px 0 0 0;
    }
  </style>

  <!-- Donate Modal -->
  <div id="donate-modal">
    <div class="donate-backdrop" onclick="closeDonateModal()"></div>
    <div class="donate-container">
      <div class="donate-box">
        <button class="donate-close" onclick="closeDonateModal()" aria-label="Close">✕</button>
        <img src="/assets/logo without text.png" alt="Radio Isla Negra" class="donate-logo">
        <h2 class="donate-title">Radio Isla Negra</h2>
        <p class="donate-subtitle">Support independent radio</p>
        <div class="donate-options">
          <a href="https://buy.stripe.com/6oU00j57k9rI2Bc50qefC0p" target="_blank" rel="noopener" class="donate-option">
            $4.99/month <span>— "I'm your fan"</span>
          </a>
          <a href="https://buy.stripe.com/9AQ16P7ik5MkgPC14c" target="_blank" rel="noopener" class="donate-option">
            $8.99/month <span>— "You guys rock!"</span>
          </a>
          <a href="https://buy.stripe.com/3csdTB6eggqYbvifZb" target="_blank" rel="noopener" class="donate-option">
            $20/month <span>— "Never Stop Playing!"</span>
          </a>
        </div>
        <p class="donate-secure" style="margin-bottom:0;">Secure payment via Stripe<br><a href="https://billing.stripe.com/p/login/28ocPk5bAacR19e000" target="_blank" rel="noopener" style="color:inherit;text-decoration:none;">Customer Portal</a></p>
      </div>
    </div>
  </div>

  <!-- Donate Modal Script -->
  <script>
    function openDonateModal() {
      document.getElementById('donate-modal').classList.add('active');
      document.body.style.overflow = 'hidden';
    }
    function closeDonateModal() {
      document.getElementById('donate-modal').classList.remove('active');
      document.body.style.overflow = '';
    }
    document.addEventListener('keydown', function(e) {
      if (e.key === 'Escape') closeDonateModal();
    });

    // Header scroll behavior - compact on scroll
    (function() {
      const header = document.getElementById('main-header');
      const scrollThreshold = 50;
      let ticking = false;

      function updateHeader() {
        if (window.scrollY > scrollThreshold) {
          header.classList.add('scrolled');
        } else {
          header.classList.remove('scrolled');
        }
        ticking = false;
      }

      window.addEventListener('scroll', function() {
        if (!ticking) {
          requestAnimationFrame(updateHeader);
          ticking = true;
        }
      }, { passive: true });

      // Check initial state
      updateHeader();
    })();

    // Mission text fade-in animation on scroll
    (function() {
      const missionText = document.querySelector('.mission-text');
      if (!missionText) return;

      const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            entry.target.classList.add('visible');
            observer.unobserve(entry.target);
          }
        });
      }, { threshold: 0.2 });

      observer.observe(missionText);
    })();

    /* New Feature Banner - COMMENTED OUT FOR LATER
    (function() {
      const BANNER_KEY = 'rin-map-interact-v1';
      const banner = document.getElementById('new-feature-banner');

      // Check if banner was previously dismissed
      if (localStorage.getItem(BANNER_KEY) === 'true') {
        banner?.classList.add('hidden');
      }

      // Make closeBanner globally available
      window.closeBanner = function() {
        if (banner) {
          banner.classList.add('hidden');
          localStorage.setItem(BANNER_KEY, 'true');
        }
      };
    })();
    */

    // Listen for listener-detected message from map iframe
    (function() {
      window.addEventListener('message', function(event) {
        if (event.data && event.data.type === 'listener-detected') {
          const mapSection = document.getElementById('map');
          if (mapSection) {
            mapSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
          }
        }
      });
    })();
  </script>

</body>
</html>
