/* global React, window */
// Guitar Lab — Lesson: Parts of the guitar.
//
// A read-only lesson page. Lists every major part of an acoustic /
// electric guitar with a short, plain-English description so a complete
// beginner can match the name to the shape they're holding.

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

  const PARTS = [
    { name: 'Headstock',     blurb: 'The top of the guitar. Holds the tuning pegs you twist to tune each string.' },
    { name: 'Tuning pegs',   blurb: 'Six pegs on the headstock. Turning a peg tightens or loosens its string, raising or lowering its pitch.' },
    { name: 'Nut',           blurb: 'A small ridge of bone or plastic where the headstock meets the neck. It sets the spacing and height of the strings at the top end.' },
    { name: 'Neck',          blurb: 'The long wooden arm. Your fretting hand moves up and down it.' },
    { name: 'Fretboard',     blurb: 'The flat surface on the front of the neck where you press the strings. Inlay dots mark the 3rd, 5th, 7th, 9th, and 12th frets so you don\'t get lost.' },
    { name: 'Frets',         blurb: 'The thin metal wires across the neck. The space BETWEEN two wires is what people call a "fret." Pressing a string just behind a fret shortens it and raises the pitch.' },
    { name: 'Strings',       blurb: '6 strings, numbered 1 (thinnest, highest pitch) to 6 (thickest, lowest pitch). Standard tuning is E A D G B E from thickest to thinnest.' },
    { name: 'Body',          blurb: 'The big shape at the bottom. On an acoustic, the hollow body amplifies the sound. On an electric, pickups under the strings convert vibration to signal.' },
    { name: 'Sound hole',    blurb: 'Acoustic only — the round hole in the body that lets the resonating air out.' },
    { name: 'Pickups',       blurb: 'Electric only — magnetic bars under the strings that convert string vibration into an electrical signal sent to the amp.' },
    { name: 'Bridge',        blurb: 'The piece on the body where the strings are anchored at their bottom end.' },
    { name: 'Saddle',        blurb: 'A thin strip on the bridge that the strings rest on, mirroring what the nut does at the other end.' },
  ];

  const LessonAnatomy = 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' }}>Parts of the guitar</h2>
        <p style={{ fontSize: 14.5, color: 'oklch(40% 0.04 265)', margin: '0 0 22px', lineHeight: 1.55, maxWidth: 720 }}>
          Before you play anything, it helps to know what every piece of the instrument is called. Knowing the vocabulary makes every lesson, video, and chord chart easier to follow.
        </p>

        {/* Schematic SVG — a stylised acoustic guitar with the major
            parts labelled. Not anatomically perfect, but it gets the
            shapes and locations across. */}
        <div style={{ background: '#fff', border: '1px solid oklch(92% 0.012 265)', borderRadius: 14, padding: 20, marginBottom: 22, overflowX: 'auto' }}>
          <svg viewBox="0 0 640 230" width="100%" height="auto" style={{ maxWidth: 640, display: 'block', margin: '0 auto' }} aria-label="Labelled acoustic guitar diagram">
            {/* Headstock */}
            <rect x={18} y={94} width={56} height={42} rx={6} fill="oklch(60% 0.08 60)" stroke="oklch(38% 0.06 60)" strokeWidth={1.2} />
            {/* Tuning pegs (three on each side) */}
            {[0,1,2].map(function (i) { return <circle key={'tp-' + i} cx={28 + i*16} cy={88} r={4} fill="oklch(75% 0.02 80)" stroke="oklch(35% 0.02 80)" strokeWidth={0.8} />; })}
            {[0,1,2].map(function (i) { return <circle key={'tpb-' + i} cx={28 + i*16} cy={142} r={4} fill="oklch(75% 0.02 80)" stroke="oklch(35% 0.02 80)" strokeWidth={0.8} />; })}
            {/* Nut */}
            <rect x={74} y={95} width={4} height={40} fill="oklch(25% 0.02 80)" />
            {/* Neck */}
            <rect x={78} y={100} width={240} height={30} fill="oklch(45% 0.08 60)" />
            {/* Fretboard frets */}
            {[1,2,3,4,5,6,7,8,9,10,11,12].map(function (f) { return <line key={'lf-' + f} x1={78 + f*20} y1={100} x2={78 + f*20} y2={130} stroke="oklch(78% 0.02 80)" strokeWidth={1} />; })}
            {/* Inlay dots */}
            {[3,5,7,9].map(function (f) { return <circle key={'in-' + f} cx={78 + f*20 - 10} cy={115} r={2.4} fill="oklch(94% 0.01 80)" />; })}
            <circle cx={78 + 12*20 - 10} cy={108} r={2.4} fill="oklch(94% 0.01 80)" />
            <circle cx={78 + 12*20 - 10} cy={122} r={2.4} fill="oklch(94% 0.01 80)" />
            {/* Strings on the neck */}
            {[0,1,2,3,4,5].map(function (i) { return <line key={'sl-' + i} x1={78} y1={102 + i*5.2} x2={320} y2={102 + i*5.2} stroke={i<3 ? 'oklch(35% 0.02 80)' : 'oklch(82% 0.02 80)'} strokeWidth={i<3 ? 1.3 : 0.8} />; })}
            {/* Body */}
            <ellipse cx={460} cy={115} rx={144} ry={88} fill="oklch(60% 0.08 60)" stroke="oklch(38% 0.06 60)" strokeWidth={1.2} />
            <ellipse cx={460} cy={115} rx={120} ry={62} fill="none" stroke="oklch(50% 0.07 60)" strokeWidth={0.8} />
            {/* Sound hole */}
            <circle cx={440} cy={115} r={26} fill="oklch(15% 0.01 80)" />
            <circle cx={440} cy={115} r={29} fill="none" stroke="oklch(35% 0.04 60)" strokeWidth={2} />
            {/* Bridge */}
            <rect x={498} y={104} width={42} height={22} rx={3} fill="oklch(25% 0.02 80)" />
            {/* Strings continuing across body */}
            {[0,1,2,3,4,5].map(function (i) { return <line key={'sb-' + i} x1={320} y1={102 + i*5.2} x2={500} y2={108 + i*2} stroke={i<3 ? 'oklch(35% 0.02 80)' : 'oklch(82% 0.02 80)'} strokeWidth={i<3 ? 1.3 : 0.8} />; })}

            {/* Labels with leader lines */}
            <g fontFamily="'Plus Jakarta Sans', sans-serif" fontSize="11" fill="oklch(20% 0.04 265)">
              <line x1={46} y1={70} x2={46} y2={86} stroke="oklch(40% 0.04 265)" strokeWidth={0.8} />
              <text x={46} y={62} textAnchor="middle">Headstock</text>
              <line x1={76} y1={195} x2={76} y2={138} stroke="oklch(40% 0.04 265)" strokeWidth={0.8} />
              <text x={76} y={209} textAnchor="middle">Nut</text>
              <line x1={195} y1={70} x2={195} y2={96} stroke="oklch(40% 0.04 265)" strokeWidth={0.8} />
              <text x={195} y={62} textAnchor="middle">Neck · Fretboard</text>
              <line x1={440} y1={195} x2={440} y2={144} stroke="oklch(40% 0.04 265)" strokeWidth={0.8} />
              <text x={440} y={209} textAnchor="middle">Sound hole</text>
              <line x1={519} y1={70} x2={519} y2={102} stroke="oklch(40% 0.04 265)" strokeWidth={0.8} />
              <text x={519} y={62} textAnchor="middle">Bridge</text>
              <line x1={580} y1={195} x2={555} y2={150} stroke="oklch(40% 0.04 265)" strokeWidth={0.8} />
              <text x={580} y={209} textAnchor="middle">Body</text>
            </g>
          </svg>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 12 }}>
          {PARTS.map(function (p) {
            return (
              <div key={p.name} style={{
                background: '#fff',
                border: '1px solid oklch(92% 0.012 265)',
                borderRadius: 12,
                padding: '14px 16px',
              }}>
                <div style={{ fontSize: 14.5, fontWeight: 700, color: 'oklch(18% 0.03 265)', marginBottom: 4 }}>{p.name}</div>
                <div style={{ fontSize: 13, color: 'oklch(40% 0.04 265)', lineHeight: 1.5 }}>{p.blurb}</div>
              </div>
            );
          })}
        </div>
      </div>
    );
  };

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