/* global React, window */
// Guitar Lab — Lesson: Reading TAB.
//
// Quick intro to tablature notation: the 6 lines, what the numbers
// mean, single notes vs. chord stacks, and the common annotations
// (h = hammer-on, p = pull-off, b = bend, / = slide up, \ = slide down).

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

  const TAB_EXAMPLE = [
    'e|--0--1--3--5--3--1--0----------|',
    'B|-------------------------------|',
    'G|-------------------------------|',
    'D|-------------------------------|',
    'A|-------------------------------|',
    'E|-------------------------------|',
  ];

  const TAB_CHORD = [
    'e|--0--0--0--0--|',
    'B|--1--1--1--1--|',
    'G|--0--0--0--0--|',
    'D|--2--2--2--2--|',
    'A|--3--3--3--3--|',
    'E|--x--x--x--x--|',
  ];

  const ANNOTATIONS = [
    { sym: 'h', meaning: 'Hammer-on — pick the first note, then "hammer" your finger onto the next fret without picking again. Example: 5h7 = pick fret 5, hammer to 7.' },
    { sym: 'p', meaning: 'Pull-off — opposite of hammer-on. Example: 7p5 = pick fret 7, pull your finger off to sound fret 5.' },
    { sym: 'b', meaning: 'Bend — push the string sideways while it\'s ringing to raise the pitch. Example: 7b9 = pick fret 7, bend until it sounds like fret 9.' },
    { sym: '/', meaning: 'Slide up — pick the first note and slide your finger up the neck to the next fret without lifting off. Example: 5/7 = slide from 5 up to 7.' },
    { sym: '\\', meaning: 'Slide down — same as /, but moving down the neck (toward the nut).' },
    { sym: '~', meaning: 'Vibrato — wiggle the string to add expression while the note rings.' },
    { sym: 'x', meaning: 'Muted string. Sometimes used for percussive scratches; in a chord stack, means "skip that string."' },
  ];

  const Pre = function (props) {
    return (
      <pre style={{
        background: 'oklch(98% 0.005 265)',
        border: '1px solid oklch(92% 0.012 265)',
        borderRadius: 10,
        padding: '12px 14px',
        margin: 0,
        fontSize: 13,
        lineHeight: 1.4,
        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
        color: 'oklch(22% 0.04 265)',
        overflowX: 'auto',
        whiteSpace: 'pre',
      }}>{props.children}</pre>
    );
  };

  const LessonTabReading = function () {
    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' }}>Reading TAB</h2>
        <p style={{ fontSize: 14.5, color: 'oklch(40% 0.04 265)', margin: '0 0 18px', lineHeight: 1.55, maxWidth: 720 }}>
          Tablature (TAB) is the guitarist's shorthand for notation. It tells you exactly which string to play, which fret to press, and in what order — without needing to read music.
        </p>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 18, marginBottom: 24 }}>
          <div>
            <div style={{ fontSize: 13, color: 'oklch(45% 0.04 265)', fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 8 }}>Six horizontal lines = six strings</div>
            <p style={{ fontSize: 13.5, color: 'oklch(40% 0.04 265)', lineHeight: 1.55, margin: '0 0 10px' }}>
              The top line is the highest-pitched string (high e). The bottom line is the lowest (low E). Each line's letter label on the left is the open-note name of that string.
            </p>
            <Pre>{TAB_EXAMPLE.join('\n')}</Pre>
            <p style={{ fontSize: 12.5, color: 'oklch(50% 0.04 265)', lineHeight: 1.55, marginTop: 8 }}>
              Read left-to-right. This example plays the high E string at frets 0, 1, 3, 5, 3, 1, 0 — one note at a time.
            </p>
          </div>

          <div>
            <div style={{ fontSize: 13, color: 'oklch(45% 0.04 265)', fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 8 }}>Stacked numbers = a chord</div>
            <p style={{ fontSize: 13.5, color: 'oklch(40% 0.04 265)', lineHeight: 1.55, margin: '0 0 10px' }}>
              When numbers line up vertically, you play them at the same time. The example below is a C major chord, strummed four times.
            </p>
            <Pre>{TAB_CHORD.join('\n')}</Pre>
            <p style={{ fontSize: 12.5, color: 'oklch(50% 0.04 265)', lineHeight: 1.55, marginTop: 8 }}>
              The <code style={{ background: 'oklch(94% 0.012 265)', padding: '1px 4px', borderRadius: 4 }}>x</code> on the low E means don't play it.
            </p>
          </div>
        </div>

        <div style={{ background: '#fff', border: '1px solid oklch(92% 0.012 265)', borderRadius: 12, padding: 18 }}>
          <div style={{ fontSize: 14, fontWeight: 700, color: 'oklch(18% 0.03 265)', marginBottom: 10 }}>Common annotations</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 10 }}>
            {ANNOTATIONS.map(function (a) {
              return (
                <div key={a.sym} style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
                  <div style={{
                    minWidth: 28, height: 28,
                    background: 'oklch(94% 0.04 265)', color: 'oklch(28% 0.1 265)',
                    border: '1px solid oklch(85% 0.06 265)',
                    borderRadius: 6,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
                    fontWeight: 700, fontSize: 14,
                  }}>{a.sym}</div>
                  <div style={{ fontSize: 12.5, color: 'oklch(35% 0.04 265)', lineHeight: 1.5, flex: 1 }}>{a.meaning}</div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    );
  };

  window.GuitarLab.ui.LessonTabReading = LessonTabReading;
})();