{{ define "main" }}

<div class="games-arcade-page">
  <div class="desk hidden-lg-down"></div>

  <div class="xfiles-poster hidden-lg-down">
    <div class="xfiles-content">
      <div class="ufo-illustration">
        <div class="ufo-dome"></div>
        <div class="ufo-body">
          <div class="ufo-lights">
            <div class="ufo-light"></div>
            <div class="ufo-light"></div>
            <div class="ufo-light"></div>
            <div class="ufo-light"></div>
          </div>
        </div>
        <div class="light-beam"></div>
      </div>
      <div class="believe-text">I WANT TO<br />BELIEVE</div>
    </div>
  </div>
  <div class="arcade-neon hidden-lg-down">
    {{ partial "elements/neon-sign.html" . }}
  </div>
  <div class="arcade-lamp hidden-lg-down">
    {{ partial "elements/lavalamp.html" . }}
  </div>
  <div class="arcade-container">
    <!-- Arcade Cabinet Top/Marquee -->
    <div class="arcade-marquee">
      <div class="marquee-light marquee-light-left hidden-lg-down"></div>
      <div class="marquee-content">
        <div class="arcade-title-wrapper">
          <pre class="arcade-title">
 ██████╗  █████╗ ███╗   ███╗███████╗███████╗
██╔════╝ ██╔══██╗████╗ ████║██╔════╝██╔════╝
██║  ███╗███████║██╔████╔██║█████╗  ███████╗
██║   ██║██╔══██║██║╚██╔╝██║██╔══╝  ╚════██║
╚██████╔╝██║  ██║██║ ╚═╝ ██║███████╗███████║
 ╚═════╝ ╚═╝  ╚═╝╚═╝     ╚═╝╚══════╝╚══════╝

          </pre>
          <div class="arcade-subtitle">INSERT COIN</div>
        </div>
      </div>
      <div class="marquee-light marquee-light-right hidden-lg-down"></div>

      <!-- Sound Toggle in Header -->
      <div class="marquee-sound-toggle">
        <button
          class="sound-toggle"
          id="sound-toggle"
          aria-label="Toggle Sound"
        >
          <span class="sound-icon sound-on">🔊</span>
          <span class="sound-icon sound-off" style="display: none">🔇</span>
        </button>
        <div class="sound-label">SOUND</div>
      </div>
    </div>

    <!-- Main Cabinet Body -->
    <div class="arcade-cabinet">
      <!-- CRT Screen Area -->
      <div class="arcade-screen-bezel">
        <div class="arcade-screen crt">
          <div class="screen-content">
            <!-- Games Grid/List -->
            <div class="games-grid" id="games-grid">
              {{ range $index, $element := (.Paginator.Pages.ByParam
              "released").Reverse }}
              <div
                class="game-card{{ if not .Params.released }} unreleased{{ end }}"
                data-game-index="{{ $index }}"
                data-released="{{ .Params.released }}"
              >
                {{ .Render "summary" }}
              </div>
              {{ end }}
            </div>

            <!-- Insert Coin Message (if no games or initial state) -->
            {{ if eq (len .Paginator.Pages) 0 }}
            <div class="insert-coin-message visible">
              <span class="blinking">INSERT COIN</span>
            </div>
            {{ else }}
            <div class="insert-coin-message">
              <span class="blinking">INSERT COIN</span>
            </div>
            {{ end }}
          </div>
        </div>
      </div>

      <!-- Control Panel -->
      <div class="control-panel hidden-lg-down">
        <!-- Joystick (separate from surface to avoid perspective transform) -->
        <div class="joystick-container">
          <div class="joystick" id="arcade-joystick">
            <div class="joystick-base"></div>
            <div class="joystick-stick">
              <div class="joystick-ball"></div>
            </div>
          </div>
        </div>

        <!-- Buttons (separate from surface to avoid perspective transform) -->
        <div class="buttons-overlay hidden-lg-down">
          <div class="buttons-container">
            <div class="arcade-button-wrap">
              <button
                class="arcade-button arcade-button-select"
                id="button-select"
                aria-label="Select Game"
              >
                <span class="button-top"></span>
              </button>
              <div class="control-label">SELECT</div>
            </div>
            <div class="arcade-button-wrap">
              <button
                class="arcade-button arcade-button-back"
                id="button-back"
                aria-label="Back"
              >
                <span class="button-top"></span>
              </button>
              <div class="control-label">BACK</div>
            </div>
          </div>
        </div>

        <div class="control-panel-surface hidden-lg-down"></div>
      </div>

      <div class="cabinet-base hidden-lg-down">
        <div class="coin-slot"></div>
      </div>
    </div>

    <!-- Pagination -->
    {{ partial "pagination.html" .Paginator }}
  </div>
</div>
{{ end }}