/* global React, window */
// Piano Lab — Lesson: Finger numbers.
//
// Teaches the 1-5 finger numbering convention used in every piano
// method book. Renders simple SVG hand outlines with the numbers
// labelled on each finger.

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

  // A schematic hand drawn as 5 finger circles + a wrist. Right hand
  // when mirrored=false; left hand when mirrored=true (we flip the
  // ordering 1..5 so the thumb is always finger 1 regardless of hand).
  const Hand = function (props) {
    const mirrored = !!props.mirrored;
    const fingers = mirrored ? [5, 4, 3, 2, 1] : [1, 2, 3, 4, 5];
    return (
      <svg viewBox="0 0 220 180" width="100%" style={{ maxWidth: 260, display: 'block' }} aria-label={props.label}>
        {/* Wrist */}
        <rect x="60" y="120" width="100" height="44" rx="10" fill="oklch(94% 0.04 30)" stroke="oklch(70% 0.07 30)" />
        {/* Fingers — 5 circles arranged top, with the thumb shorter */}
        {fingers.map(function (n, i) {
          const x = 30 + i * 40;
          const isThumb = n === 1;
          const cy = isThumb ? 90 : 50;
          const r = 22;
          return (
            <g key={n}>
              <circle cx={x} cy={cy} r={r} fill="oklch(94% 0.04 30)" stroke="oklch(70% 0.07 30)" strokeWidth={1.5} />
              <text x={x} y={cy + 5} textAnchor="middle" fontSize="18" fontWeight="700" fontFamily="'Plus Jakarta Sans', sans-serif" fill="oklch(28% 0.10 30)">{n}</text>
              {/* Stem connecting circle to wrist */}
              <line x1={x} y1={cy + r} x2={x} y2={120} stroke="oklch(70% 0.07 30)" strokeWidth={6} strokeLinecap="round" />
            </g>
          );
        })}
      </svg>
    );
  };

  const LessonFingerNumbers = function () {
    return (
      <div>
        <h2 style={{ fontSize: 22, fontWeight: 700, color: 'oklch(18% 0.03 265)', margin: '0 0 8px' }}>Finger numbers</h2>
        <p style={{ fontSize: 14, lineHeight: 1.6, color: 'oklch(35% 0.04 265)', margin: '0 0 14px' }}>
          Piano notation labels every finger 1 through 5. <strong>Both thumbs are 1</strong>, the index fingers are 2, middle fingers are 3, ring fingers are 4, and pinkies are 5. This is opposite to guitar where the thumb is usually not numbered — don't confuse the two.
        </p>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 16, marginBottom: 14 }}>
          <div style={{ background: '#fff', border: '1px solid oklch(92% 0.012 265)', borderRadius: 12, padding: 14 }}>
            <div style={{ fontSize: 11, color: 'oklch(45% 0.13 80)', fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 8 }}>Left hand</div>
            <Hand mirrored={true} label="Left hand finger numbers" />
            <div style={{ fontSize: 12, color: 'oklch(55% 0.04 265)', marginTop: 8 }}>Thumb = 1, pinky = 5.</div>
          </div>
          <div style={{ background: '#fff', border: '1px solid oklch(92% 0.012 265)', borderRadius: 12, padding: 14 }}>
            <div style={{ fontSize: 11, color: 'oklch(45% 0.13 80)', fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 8 }}>Right hand</div>
            <Hand mirrored={false} label="Right hand finger numbers" />
            <div style={{ fontSize: 12, color: 'oklch(55% 0.04 265)', marginTop: 8 }}>Thumb = 1, pinky = 5.</div>
          </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 }}>
          When sheet music shows a small number above or below a note, that's the suggested finger to use. Following the printed fingering is what lets your hand reach the next note without re-positioning — especially for scales and arpeggios.
        </div>
      </div>
    );
  };

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