/* ========== HELP / TUTORIAL OVERLAY ========== */
/* Shows on first visit, re-openable via the HELP button in the header.
   Mobile vs desktop content differs. */

const HELP_KEY = 'ttt-help-seen-v1';

function HelpOverlay({ open, onClose, isMobile }) {
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, onClose]);

  if (!open) return null;

  return (
    <div className="help-overlay" onClick={onClose}>
      <div className="help-card" onClick={(e) => e.stopPropagation()}>
        <div className="help-head">
          <div>
            <div className="help-eyebrow">◆ CONTROLS · GUIDE</div>
            <h2 className="help-title">HOW TO NAVIGATE</h2>
          </div>
          <button className="help-close" onClick={onClose} aria-label="Close">×</button>
        </div>

        {!isMobile && (
          <>
            <div className="help-section">
              <div className="help-label">KEYBOARD — LEFT HAND</div>
              <div className="help-grid">
                <div className="help-row">
                  <div className="help-keys">
                    <kbd>W</kbd>
                    <span className="help-or">or</span>
                    <kbd>↑</kbd>
                  </div>
                  <span>Previous venture</span>
                </div>
                <div className="help-row">
                  <div className="help-keys">
                    <kbd>S</kbd>
                    <span className="help-or">or</span>
                    <kbd>↓</kbd>
                  </div>
                  <span>Next venture</span>
                </div>
                <div className="help-row">
                  <div className="help-keys">
                    <kbd>A</kbd>
                    <span className="help-or">or</span>
                    <kbd>←</kbd>
                  </div>
                  <span>Previous section inside a venture</span>
                </div>
                <div className="help-row">
                  <div className="help-keys">
                    <kbd>D</kbd>
                    <span className="help-or">or</span>
                    <kbd>→</kbd>
                  </div>
                  <span>Next section inside a venture</span>
                </div>
              </div>
            </div>

            <div className="help-section">
              <div className="help-label">KEYBOARD — RIGHT HAND</div>
              <div className="help-grid">
                <div className="help-row">
                  <div className="help-keys">
                    <kbd>J</kbd>
                    <span className="help-or">or</span>
                    <kbd>Enter</kbd>
                  </div>
                  <span>Open a venture / advance a section (A button)</span>
                </div>
                <div className="help-row">
                  <div className="help-keys">
                    <kbd>K</kbd>
                    <span className="help-or">or</span>
                    <kbd>Esc</kbd>
                  </div>
                  <span>Go back (B button)</span>
                </div>
                <div className="help-row">
                  <div className="help-keys">
                    <kbd>U</kbd>
                  </div>
                  <span>Open quick-jump menu (X button)</span>
                </div>
                <div className="help-row">
                  <div className="help-keys">
                    <kbd>I</kbd>
                  </div>
                  <span>Toggle SFX on / off (Y button). Music has its own toggle in the header.</span>
                </div>
                <div className="help-row">
                  <div className="help-keys">
                    <kbd>H</kbd>
                  </div>
                  <span>Jump to Home</span>
                </div>
              </div>
            </div>

            <div className="help-section">
              <div className="help-label">MOUSE</div>
              <div className="help-grid">
                <div className="help-row">
                  <div className="help-keys"><span className="help-chip">CLICK</span></div>
                  <span>Any button on the console works like its key</span>
                </div>
                <div className="help-row">
                  <div className="help-keys"><span className="help-chip">TOP NAV</span></div>
                  <span>Click any venture name up top to jump straight there</span>
                </div>
              </div>
            </div>
          </>
        )}

        {isMobile && (
          <>
            <div className="help-section help-section-intro">
              <div className="help-label">WHAT IS THIS?</div>
              <p className="help-prose">
                This is <b>The Tomorrow Tribe</b> — the parent brand behind three
                ventures by <b>Puro</b> (Purandhar Gopalakrishnan): a content
                agency for surgeons, an AI studio for business owners, and a
                career-routing web app in development. It's styled as a retro
                arcade cabinet — three ventures you can step into.
              </p>
              <p className="help-prose help-prose-dim">
                No scrolling. Navigate with swipes, or tap the hamburger
                top-right to jump anywhere.
              </p>
            </div>

            <div className="help-section">
              <div className="help-label">HOW TO NAVIGATE</div>
              <div className="help-grid">
                <div className="help-row">
                  <div className="help-keys"><span className="help-chip">↕ SWIPE</span></div>
                  <span>Swipe up or down on the screen to switch between ventures</span>
                </div>
                <div className="help-row">
                  <div className="help-keys"><span className="help-chip">↔ SWIPE</span></div>
                  <span>Swipe left or right to go deeper inside a venture — step through its sections</span>
                </div>
                <div className="help-row">
                  <div className="help-keys"><span className="help-chip">☰ MENU</span></div>
                  <span>Top-right hamburger opens the full venture list — jump anywhere</span>
                </div>
              </div>
            </div>

            <div className="help-section">
              <div className="help-label">SOUND</div>
              <div className="help-grid">
                <div className="help-row">
                  <div className="help-keys"><span className="help-chip">♪ MUSIC</span></div>
                  <span>Toggles the background music on or off</span>
                </div>
                <div className="help-row">
                  <div className="help-keys"><span className="help-chip">◉ SFX</span></div>
                  <span>Toggles button clicks and menu beeps on or off</span>
                </div>
              </div>
            </div>
          </>
        )}

        <div className="help-foot">
          <button className="help-ok" onClick={onClose}>GOT IT — START EXPLORING</button>
          <span className="help-meta">
            {isMobile ? 'Tap × above to close' : 'ESC or tap outside to close'}
          </span>
        </div>
      </div>
    </div>
  );
}

window.HelpOverlay = HelpOverlay;
window.HELP_KEY = HELP_KEY;