<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>🎡 Extraction Wheel | Who's the Winner?</title>
  <link rel="stylesheet" href="styles.css">
  <script defer src="min_script.js"></script>
</head>
<body>
  <header>
    <h1>🎡 Extraction Wheel</h1>
  </header>

  <main class="main-container">
    <!-- Sezione Ruota -->
    <section class="wheel-section">
      <div class="canvas-container">
        <!-- Canvas per la ruota -->
        <canvas id="wheel" width="800" height="800"></canvas>

        <!-- SVG sovrapposto per le scritte curve -->
        <svg id="textOverlay" width="800" height="800">
          <defs>
            <filter id="shadowFilter" x="0" y="0" width="200%" height="200%">
              <feDropShadow dx="2" dy="2" stdDeviation="3" flood-color="#000" flood-opacity="1" />
            </filter>
          </defs>
          <!-- Arc path in alto -->
          <path id="arcPathTop" d="M100,400 A320,380 0 0 1 700,400" fill="none" stroke="none" />
          <!-- Arc path in basso -->
          <path id="arcPathBottom" d="M100,400 A300,300 0 0 0 700,400" fill="none" stroke="none" />
          <!-- Testo con ombreggiatura -->
          <text text-anchor="middle" fill="#fff" font-size="75" font-weight="bold" filter="url(#shadowFilter)">
            <textPath xlink:href="#arcPathTop" startOffset="50%">Click to spin</textPath>
          </text>
          <text text-anchor="middle" fill="#fff" font-size="75" font-weight="bold" filter="url(#shadowFilter)">
            <textPath xlink:href="#arcPathBottom" startOffset="50%">Click to spin</textPath>
          </text>
        </svg>
      </div>
    </section>

    <!-- Sidebar e tab -->
    <aside class="sidebar">
      <div class="tab-buttons">
        <button class="tab-btn active" data-tab="panelCommands">Commands</button>
        <button class="tab-btn" data-tab="panelList">Name List</button>
      </div>

      <!-- Pannello Comandi -->
      <div id="panelCommands" class="tab-panel active">
        <h2>Names</h2>
        <textarea id="nameInput" placeholder="Enter one name per line"></textarea>
        <div class="buttons-row">
          <button id="removeAllButton">🗑️ Remove All</button>
          <button id="shuffleNamesButton">🔀 Shuffle</button>
        </div>
        <p id="remainingPlayers">Remaining Players: 0</p>
      </div>

      <!-- Pannello Lista Nomi -->
      <div id="panelList" class="tab-panel">
        <h2>Name List</h2>
        <ul id="nameList"></ul>
      </div>
    </aside>
  </main>

  <footer>
    <p>Created with ❤️ by Jesus</p>
  </footer>

  <!-- Banner Vincitore -->
  <div id="winnerBanner" class="winner-banner hidden">
    <div class="winner-banner-header" id="bannerHeader">
      <span>We have a winner!</span>
      <button class="banner-close-x" id="bannerCloseX">✕</button>
    </div>
    <div class="winner-banner-body">
      <p id="winnerName"></p>
    </div>
    <div class="winner-banner-footer">
      <button class="close-btn" id="closeBannerBtn">Close</button>
      <button class="remove-btn" id="removeWinnerBtn">Remove</button>
    </div>
  </div>
</body>
</html>
