/* global React, window */
// Piano Lab — Lesson: Keyboard anatomy.
//
// Introduces the layout: 88 keys, repeating 12-note pattern, white vs
// black keys, octaves. The illustrative keyboard renders 3 octaves so
// the user can see the pattern repeat.

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

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

    // Highlight one octave's worth of keys so the user sees the
    // repeating 7-white / 5-black pattern.
    const [octaveHighlighted, setOctaveHighlighted] = React.useState(false);
    const octaveMidis = [];
    for (let m = 60; m <= 71; m++) octaveMidis.push(m);

    return (
      <div>
        <h2 style={{ fontSize: 22, fontWeight: 700, color: 'oklch(18% 0.03 265)', margin: '0 0 8px' }}>The keyboard, at a glance</h2>
        <p style={{ fontSize: 14, lineHeight: 1.6, color: 'oklch(35% 0.04 265)', margin: '0 0 18px' }}>
          A full piano has <strong>88 keys</strong> — 52 white and 36 black. The keys repeat the same <strong>12-note pattern</strong> over and over. Once you can name the keys in one octave, you can name every key on the keyboard.
        </p>

        <div style={{ background: '#fff', border: '1px solid oklch(92% 0.012 265)', borderRadius: 12, padding: 18, marginBottom: 14 }}>
          <Keyboard
            loMidi={48}
            hiMidi={83}
            onKey={function (m) { playNote(m, 700); }}
            highlightMidis={octaveHighlighted ? octaveMidis : []}
          />
          <div style={{ display: 'flex', gap: 10, marginTop: 14, alignItems: 'center', flexWrap: 'wrap' }}>
            <button
              onClick={function () { setOctaveHighlighted(function (v) { return !v; }); }}
              style={{
                padding: '9px 16px',
                borderRadius: 10,
                border: '1px solid oklch(35% 0.16 265)',
                background: octaveHighlighted ? 'oklch(96% 0.04 80)' : '#fff',
                color: 'oklch(28% 0.05 265)',
                fontSize: 13, fontWeight: 600, cursor: 'pointer',
                fontFamily: "'Plus Jakarta Sans', sans-serif",
              }}
            >{octaveHighlighted ? 'Hide one octave' : 'Show one octave'}</button>
            <div style={{ fontSize: 12, color: 'oklch(55% 0.04 265)' }}>Click any key to hear it.</div>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 12, marginBottom: 16 }}>
          <Card title="White keys" body="The 7 white keys carry the natural letter names C D E F G A B — then the pattern restarts at the next C." />
          <Card title="Black keys" body="Black keys group in pairs and triplets. The pair = C♯ / D♯. The triplet = F♯ / G♯ / A♯. They're the landmarks you use to find every white key by sight." />
          <Card title="Octaves" body="An octave is the distance from one C to the next C — twelve keys, all the same notes one register higher. The same pattern repeats across the whole keyboard." />
        </div>
      </div>
    );
  };

  const Card = function (props) {
    return (
      <div style={{ background: 'oklch(98% 0.005 265)', border: '1px solid oklch(92% 0.012 265)', borderRadius: 10, padding: '14px 16px' }}>
        <div style={{ fontSize: 11, color: 'oklch(45% 0.13 80)', fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 6 }}>{props.title}</div>
        <div style={{ fontSize: 13, lineHeight: 1.55, color: 'oklch(28% 0.05 265)' }}>{props.body}</div>
      </div>
    );
  };

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