src/components/AudioInfoPopup.tsx

import React from 'react'
import '../styles/AudioInfoPopup.css'

export const AudioInfoPopup: React.FC<{
  isVisible: boolean
  onClose: () => void
}> = ({
  isVisible,
  onClose
}) => {
  if (!isVisible) return null

  return (
    <div className="audio-info-overlay" onClick={onClose}>
      <div className="audio-info-popup" onClick={(e) => e.stopPropagation()}>
        <div className="popup-header">
          <h2>🎵 How muscial chess works</h2>
          <button className="close-button" onClick={onClose}>×</button>
        </div>
        
        <div className="popup-content">
          <section>
            <h3>🎯 Initiative Tempo</h3>
            <p>A steady beat represents your position strength:</p>
            <ul>
              <li><strong>Frequency:</strong> A2 (110 Hz)</li>
              <li><strong>Tempo:</strong> Speed increases with your initiative (up to 120 BPM). No beat = no initiative. Faster beat = stronger position.</li>
            </ul>
          </section>

          <section>
            <h3>🎼 Square-Based Move Notes</h3>
            <p>Each square has a unique musical note based on its position:</p>
            <div className="note-mapping">
              <li><strong>Files (left to right):</strong> A, B, C♭, C, D, D♭, E, F</li>
              <li><strong>Ranks (bottom to top):</strong> 8 octaves (1st-8th)</li>
            </div>
            <p>Every move plays two quick beats:</p>
            <ul>
              <li><strong>First beat:</strong> Origin square note.</li>
              <li><strong>Second beat:</strong> Destination square note.</li>
            </ul>
          </section>

          <section>
            <h3>⚡ Special Move Notes</h3>
            <ul>
              <li><strong>Capture:</strong> Pop sound.</li>
              <li><strong>Danger:</strong> Sharp tone (1000 Hz) when piece threatens capture.</li>
            </ul>
          </section>
        </div>
      </div>
    </div>
  )
}