/* global React, window */
// Drums Lab — Lesson: Parts of the drum kit.
//
// Read-only lesson page. Renders the labelled <KitDiagram /> and a list
// of every kit piece with a short, plain-English blurb. Clicking any
// piece (in the list or on the diagram) plays a single hit so the user
// can match the name to the sound.

(function () {
  'use strict';
  window.DrumsLab = window.DrumsLab || {};
  window.DrumsLab.ui = window.DrumsLab.ui || {};

  const PARTS = [
    { id: 'kick',      label: 'Kick (bass drum)',  blurb: 'The big drum on the floor. You play it with a foot pedal. Sits on beats 1 and 3 in most pop / rock grooves — the "boom" in "boom-bap".' },
    { id: 'snare',     label: 'Snare drum',        blurb: 'The drum directly in front of you, between your knees. Has metal wires (snares) under the bottom head that buzz when you hit it. The "bap" — usually on beats 2 and 4.' },
    { id: 'hh_closed', label: 'Hi-hat (closed)',   blurb: 'Two cymbals clamped together by a foot pedal. When the pedal is down they\'re tight (closed) and click crisply.' },
    { id: 'hh_open',   label: 'Hi-hat (open)',     blurb: 'Same two cymbals — pedal lifted so they sizzle and ring instead of clicking. Open hi-hats are the "sh" sound on the "&" of disco beats.' },
    { id: 'ride',      label: 'Ride cymbal',       blurb: 'The big cymbal on your right. You "ride" it for sustained, shimmering eighth notes — common in jazz and rock choruses where the hi-hat would feel too tight.' },
    { id: 'crash',     label: 'Crash cymbal',      blurb: 'Smaller cymbal up high. Hit hard for an accent, usually on beat 1 at the start of a new section.' },
    { id: 'tom_hi',    label: 'High tom',          blurb: 'Mounted above the kick. Higher-pitched. Used in fills and to add colour between the snare and the floor tom.' },
    { id: 'tom_mid',   label: 'Mid tom',           blurb: 'Sits next to the high tom. Pitched between the high and floor toms — gives a fill a natural staircase down.' },
    { id: 'tom_floor', label: 'Floor tom',         blurb: 'Big drum on the floor to your right. Deepest tom — the "bottom" of a tom run.' },
  ];

  const LessonAnatomy = function () {
    const [highlightId, setHighlightId] = React.useState(null);

    function playPiece(id) {
      setHighlightId(id);
      window.DrumsLab.audio.playPiece(id).catch(function () {});
      setTimeout(function () { setHighlightId(null); }, 260);
    }

    return (
      <div style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
        <h2 style={{ fontSize: 22, fontWeight: 700, color: 'oklch(18% 0.03 265)', margin: '0 0 8px' }}>Parts of the drum kit</h2>
        <p style={{ fontSize: 14.5, color: 'oklch(40% 0.04 265)', margin: '0 0 22px', lineHeight: 1.55, maxWidth: 720 }}>
          A standard "five-piece" kit is the kick, snare, two toms and a floor tom — plus the hi-hat and at least one crash and ride. Tap any piece below to hear it.
        </p>

        <div style={{ background: '#fff', border: '1px solid oklch(92% 0.012 265)', borderRadius: 14, padding: 20, marginBottom: 22 }}>
          <window.DrumsLab.ui.KitDiagram
            highlightId={highlightId}
            onPieceClick={playPiece}
          />
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 14 }}>
          {PARTS.map(function (p) {
            return (
              <div key={p.id} style={{
                border: '1px solid oklch(92% 0.012 265)',
                borderRadius: 12,
                padding: 14,
                background: '#fff',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 6, gap: 8 }}>
                  <strong style={{ fontWeight: 700, fontSize: 14, color: 'oklch(20% 0.04 265)' }}>{p.label}</strong>
                  <button
                    onClick={function () { playPiece(p.id); }}
                    style={{
                      padding: '6px 12px',
                      borderRadius: 999,
                      border: '1px solid oklch(35% 0.16 265)',
                      background: highlightId === p.id ? 'oklch(35% 0.16 265)' : '#fff',
                      color: highlightId === p.id ? '#fff' : 'oklch(35% 0.16 265)',
                      fontSize: 11.5,
                      fontWeight: 700,
                      cursor: 'pointer',
                      fontFamily: "'Plus Jakarta Sans', sans-serif",
                    }}
                  >▶ Play</button>
                </div>
                <div style={{ fontSize: 12.5, color: 'oklch(40% 0.04 265)', lineHeight: 1.5 }}>{p.blurb}</div>
              </div>
            );
          })}
        </div>
      </div>
    );
  };

  window.DrumsLab.ui.LessonAnatomy = LessonAnatomy;
})();