/* global React, window */
// Piano Lab — Lesson: Two-hand position at middle C.
//
// The canonical beginner setup: right thumb on middle C (60), left
// thumb on the C below middle C (48)... wait, that's the "C position"
// starting from middle C with both thumbs together. The other common
// one is the actual middle-C position: LH 5 4 3 2 1 covers C3-G3, RH
// 1 2 3 4 5 covers C4-G4. Both thumbs share middle C? No — the more
// useful beginner position uses C3 to C5 with hands an octave apart
// and thumbs on the two C's around middle C. We'll teach the simpler
// "middle-C position" — LH thumb on middle C (60), RH thumb on middle
// C (60) too — both reaching up/down a fifth.

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

  const LessonHandPosition = function () {
    const Keyboard = window.PianoLab.ui.Keyboard;
    const playNote = window.PianoLab.audio.playNote;

    // Right hand: C4 (RH 1) D4 (2) E4 (3) F4 (4) G4 (5)
    const rh = [60, 62, 64, 65, 67];
    // Left hand: C3 (LH 5) D3 (4) E3 (3) F3 (2) G3 (1) — thumb is on G3
    // No — in middle-C position the LH thumb is on B3 (just below middle
    // C). The 5-finger LH cluster is F3 G3 A3 B3 C4 (5 4 3 2 1).
    // For clarity we'll use the simpler "C position": LH C3..G3 with 5..1.
    const lh = [48, 50, 52, 53, 55]; // C3 D3 E3 F3 G3

    const labels = {};
    rh.forEach(function (m, i) { labels[m] = 'R' + (i + 1); });
    lh.forEach(function (m, i) { labels[m] = 'L' + (5 - i); });

    return (
      <div>
        <h2 style={{ fontSize: 22, fontWeight: 700, color: 'oklch(18% 0.03 265)', margin: '0 0 8px' }}>Two-hand position</h2>
        <p style={{ fontSize: 14, lineHeight: 1.6, color: 'oklch(35% 0.04 265)', margin: '0 0 14px' }}>
          Start with both hands in "C position." Right-hand thumb on middle C (C4), fingers walking up to G4. Left-hand pinky on the C below (C3), fingers walking up to G3. From here you can play simple 5-finger melodies in either hand without moving.
        </p>

        <div style={{ background: '#fff', border: '1px solid oklch(92% 0.012 265)', borderRadius: 12, padding: 18, marginBottom: 14 }}>
          <Keyboard
            loMidi={48}
            hiMidi={72}
            labels={labels}
            highlightMidis={rh.concat(lh)}
            onKey={function (m) { playNote(m, 700); }}
          />
          <div style={{ fontSize: 12, color: 'oklch(55% 0.04 265)', marginTop: 10 }}>
            <strong style={{ color: 'oklch(45% 0.13 80)' }}>R1..R5</strong> = right-hand fingers (thumb to pinky).
            <strong style={{ color: 'oklch(45% 0.13 80)', marginLeft: 10 }}>L1..L5</strong> = left-hand fingers (thumb to pinky).
          </div>
        </div>

        <div style={{ background: 'oklch(96% 0.04 265)', border: '1px solid oklch(85% 0.06 265)', borderRadius: 10, padding: '14px 16px', fontSize: 13.5, color: 'oklch(25% 0.08 265)', lineHeight: 1.55 }}>
          <strong style={{ fontWeight: 700 }}>Posture cue.</strong> Keep fingers curved, wrists level with the keys, and shoulders relaxed. The weight of your arm — not your fingers — does the work on each key.
        </div>
      </div>
    );
  };

  window.PianoLab.ui.LessonHandPosition = LessonHandPosition;
})();