interface HelpModalProps {
  onClose: () => void
  showStartButton?: boolean
}

export function HelpModal({ onClose, showStartButton = false }: HelpModalProps) {
  return (
    <div
      className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4 overflow-y-auto"
      onClick={onClose}
      onKeyDown={(e) => {
        if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
          onClose()
        }
      }}
      tabIndex={0}
    >
      <div
        className="border-2 md:border-4 border-white bg-black p-4 md:p-8 lg:p-12 max-w-4xl w-full my-auto"
        onClick={(e) => e.stopPropagation()}
      >
        <h1 className="font-mono text-lg md:text-2xl tracking-[0.3em] text-white mb-4 md:mb-6 text-center">
          BRUITISTE
        </h1>
        <p className="font-mono text-xs md:text-sm text-white mb-2 leading-relaxed text-center">
          Harsh noise soundbox made as a love statement to all weird noises, hums, audio glitches and ominous textures. Be careful, lower your volume! Tweak some parameters!
        </p>
        <p className="font-mono text-[10px] md:text-xs text-white mb-4 md:mb-6 opacity-70 text-center">
          Made by Raphaël Forment (BuboBubo) — <a href="https://raphaelforment.fr" target="_blank" rel="noopener noreferrer" className="underline hover:opacity-100">raphaelforment.fr</a>
        </p>

        <div className="font-mono text-xs md:text-sm text-white mb-6 md:mb-8">
          <h2 className="text-sm md:text-lg tracking-[0.2em] mb-3 md:mb-4">KEYBOARD SHORTCUTS</h2>

          <div className="overflow-x-auto">
            <table className="w-full border-2 border-white">
              <thead>
                <tr className="border-b-2 border-white">
                  <th className="text-left p-2 md:p-3 bg-white text-black tracking-[0.1em] text-[10px] md:text-sm">KEY</th>
                  <th className="text-left p-2 md:p-3 bg-white text-black tracking-[0.1em] text-[10px] md:text-sm">ACTION</th>
                </tr>
              </thead>
              <tbody>
                <tr className="border-b border-white">
                  <td className="p-2 md:p-3 border-r border-white">SPACE</td>
                  <td className="p-2 md:p-3">Play/Stop current tile</td>
                </tr>
                <tr className="border-b border-white">
                  <td className="p-2 md:p-3 border-r border-white">ARROWS</td>
                  <td className="p-2 md:p-3">Navigate tiles</td>
                </tr>
                <tr className="border-b border-white">
                  <td className="p-2 md:p-3 border-r border-white">SHIFT + ARROWS</td>
                  <td className="p-2 md:p-3">Jump 10 tiles</td>
                </tr>
                <tr className="border-b border-white">
                  <td className="p-2 md:p-3 border-r border-white">ENTER</td>
                  <td className="p-2 md:p-3">Queue tile (play after current)</td>
                </tr>
                <tr className="border-b border-white">
                  <td className="p-2 md:p-3 border-r border-white">DOUBLE ENTER</td>
                  <td className="p-2 md:p-3">Play immediately</td>
                </tr>
                <tr className="border-b border-white">
                  <td className="p-2 md:p-3 border-r border-white">R</td>
                  <td className="p-2 md:p-3">Regenerate current tile</td>
                </tr>
                <tr className="border-b border-white">
                  <td className="p-2 md:p-3 border-r border-white">SHIFT + R</td>
                  <td className="p-2 md:p-3">Randomize all tiles</td>
                </tr>
                <tr className="border-b border-white">
                  <td className="p-2 md:p-3 border-r border-white">C</td>
                  <td className="p-2 md:p-3">Randomize current tile params</td>
                </tr>
                <tr className="border-b border-white">
                  <td className="p-2 md:p-3 border-r border-white">SHIFT + C</td>
                  <td className="p-2 md:p-3">Randomize all params (CHAOS)</td>
                </tr>
                <tr className="border-b border-white">
                  <td className="p-2 md:p-3 border-r border-white">I</td>
                  <td className="p-2 md:p-3">Interpolate params (MORPH)</td>
                </tr>
                <tr>
                  <td className="p-2 md:p-3 border-r border-white">ESC</td>
                  <td className="p-2 md:p-3">Exit mapping mode</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        {showStartButton ? (
          <button
            onClick={onClose}
            className="w-full px-4 md:px-8 py-3 md:py-4 bg-white text-black font-mono text-xs md:text-sm tracking-[0.2em] hover:bg-black hover:text-white border-2 border-white transition-all"
          >
            START
          </button>
        ) : (
          <button
            onClick={onClose}
            className="w-full px-4 md:px-8 py-3 md:py-4 bg-white text-black font-mono text-xs md:text-sm tracking-[0.2em] hover:bg-black hover:text-white border-2 border-white transition-all"
          >
            CLOSE
          </button>
        )}
      </div>
    </div>
  )
}