/* global React, window */
// Guitar Lab — Lesson: Reading chord diagrams.
//
// Walks through the visual language of a chord box: which way is up,
// what the lines mean, what X / O / numbers stand for, and how to read
// a barre.

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

  const RULES = [
    {
      title: 'Strings run vertically',
      body: 'Each vertical line is one string. The thickest string (low E, string 6) is on the LEFT — like you\'re looking down at your own guitar while you play. The thinnest (high E, string 1) is on the RIGHT.',
    },
    {
      title: 'Frets run horizontally',
      body: 'The horizontal lines are the metal fret wires on the neck. The top of the box (the thick black bar) is the NUT — fret 1 is just below it, fret 2 below that, and so on. If the chord starts higher up the neck, you\'ll see a small "5fr" label on the side instead of a nut.',
    },
    {
      title: 'O means "play this string open"',
      body: 'A small O above a string means you DO play that string, but you don\'t press any fret — it rings out as the open note.',
    },
    {
      title: 'X means "do not play this string"',
      body: 'An X above a string means mute it or skip it. On most A-shaped chords, for example, the low E (string 6) is X\'d out because that note doesn\'t belong in the chord.',
    },
    {
      title: 'Dots are finger positions',
      body: 'A solid dot inside the grid means press that string at that fret. The little number inside the dot tells you which finger to use: 1 = index, 2 = middle, 3 = ring, 4 = pinky.',
    },
    {
      title: 'Bars are barres',
      body: 'When you see a thick horizontal line across multiple strings, that\'s a "barre" — flatten one finger (usually the index) across all those strings. Not in your first lesson; it\'s a more advanced skill.',
    },
  ];

  const LessonChordReading = function () {
    const chords = window.GuitarLab && window.GuitarLab.theory ? window.GuitarLab.theory.OPEN_CHORDS : [];
    const sample = chords.filter(function (c) { return c.id === 'C' || c.id === 'G' || c.id === 'Am'; });
    const ChordDiagram = window.GuitarLab && window.GuitarLab.ui ? window.GuitarLab.ui.ChordDiagram : null;

    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 chord diagrams</h2>
        <p style={{ fontSize: 14.5, color: 'oklch(40% 0.04 265)', margin: '0 0 18px', lineHeight: 1.55, maxWidth: 720 }}>
          A chord diagram (or "chord box") is a top-down snapshot of where to put your fingers. Once you can read one, every chord chart in every guitar book or website is open to you.
        </p>

        <div style={{ marginBottom: 24 }}>
          <ol style={{ paddingLeft: 20, margin: 0, fontSize: 14, color: 'oklch(28% 0.04 265)', lineHeight: 1.6 }}>
            {RULES.map(function (r, i) {
              return (
                <li key={'r-' + i} style={{ marginBottom: 10 }}>
                  <strong style={{ fontWeight: 700 }}>{r.title}.</strong> <span style={{ color: 'oklch(40% 0.04 265)' }}>{r.body}</span>
                </li>
              );
            })}
          </ol>
        </div>

        {ChordDiagram && sample.length > 0 && (
          <div>
            <div style={{ fontSize: 13, color: 'oklch(45% 0.04 265)', fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 10 }}>Worked examples</div>
            <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap', alignItems: 'flex-start' }}>
              {sample.map(function (c) {
                return (
                  <div key={'wx-' + c.id} style={{ background: '#fff', border: '1px solid oklch(92% 0.012 265)', borderRadius: 12, padding: 18, minWidth: 220 }}>
                    <ChordDiagram chord={c} width={170} />
                    <div style={{ fontSize: 12.5, color: 'oklch(40% 0.04 265)', marginTop: 8, lineHeight: 1.5 }}>
                      {c.id === 'C' && 'X on string 6 (don\'t play low E). 3rd finger on the 5th string, 3rd fret. 2nd finger on the 4th string, 2nd fret. 3rd string open. 1st finger on the 2nd string, 1st fret. 1st string open.'}
                      {c.id === 'G' && 'All six strings sound. 3rd finger on the 6th string, 3rd fret. 2nd finger on the 5th string, 2nd fret. Strings 4, 3, 2 open. 4th (pinky) finger on the 1st string, 3rd fret.'}
                      {c.id === 'Am' && 'X on string 6. 5th string open. 2nd finger on the 4th string, 2nd fret. 3rd finger on the 3rd string, 2nd fret. 1st finger on the 2nd string, 1st fret. 1st string open.'}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        )}
      </div>
    );
  };

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