// HelpButton — small "? HOW TO PLAY" button for the RIGHT (player) column header.
// Opens a lightweight instructions overlay (reuses .splash-backdrop). Fully self-contained:
// local open/close state only, no game state touched. Seam id: #how-to-play
import React, { useState } from 'react';
import { useGame } from '../GameProvider.jsx';

export default function HelpButton() {
  const { audio } = useGame();
  const [open, setOpen] = useState(false);
  const close = () => { audio?.playSfx?.('click'); setOpen(false); };

  return (
    <>
      <button
        type="button"
        className="btn small ghost"
        id="how-to-play"
        title="How to play"
        onClick={() => { audio?.playSfx?.('click'); setOpen(true); }}
      >
        ?
      </button>

      {open ? (
        <div className="splash-backdrop" onClick={close}>
          <div className="help-panel" onClick={(e) => e.stopPropagation()}>
            <h2 className="help-title">HOW TO PLAY</h2>
            <ol className="help-list">
              <li>You&apos;re the <b>chaos goblin</b> — each round, arm a chaos card and drop it on a station.</li>
              <li>The <b>AI dispatcher</b> fights back: holding trains, rerouting, deploying staff.</li>
              <li>You <b>WIN</b> if the line goes down — a <b>network lock</b> or any platform over <b>170%</b>.</li>
              <li>Rounds 16–20 are <b>PEAK RUSH</b>: TRAIN TROUBLE unlocks and floods get cheaper.</li>
            </ol>
            <p className="help-tip">
              <b>TIP:</b> Hit non-interchange stations (Mumbai Central, Bandra, Andheri, Vasai Road) —
              the dispatcher can&apos;t reroute around a block there, so the chaos sticks.
            </p>
            <button type="button" className="btn big" onClick={close}>GOT IT ▶</button>
          </div>
        </div>
      ) : null}
    </>
  );
}