/* global React, window */
// Violin Lab — Lesson: posture & bow grip.
//
// Step-by-step text reference (no IRL camera). Includes "do" and
// "watch out for" callouts so beginners know what good and bad
// posture feel like.

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

  const Step = function (props) {
    return (
      <div style={{
        background: '#fff',
        border: '1px solid oklch(92% 0.012 265)',
        borderRadius: 12,
        padding: '14px 18px',
        marginBottom: 10,
        display: 'flex',
        gap: 14,
      }}>
        <div style={{
          width: 28,
          height: 28,
          borderRadius: '50%',
          background: 'oklch(35% 0.16 265)',
          color: '#fff',
          fontSize: 13,
          fontWeight: 800,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          flexShrink: 0,
          fontFamily: "'Plus Jakarta Sans', sans-serif",
        }}>{props.n}</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 14, fontWeight: 700, color: 'oklch(20% 0.04 265)', marginBottom: 4 }}>{props.title}</div>
          <div style={{ fontSize: 12.5, color: 'oklch(40% 0.04 265)', lineHeight: 1.5 }}>{props.body}</div>
        </div>
      </div>
    );
  };

  const Watch = function (props) {
    return (
      <div style={{
        background: 'oklch(96% 0.05 25)',
        border: '1px solid oklch(85% 0.10 25)',
        borderRadius: 10,
        padding: '10px 14px',
        marginTop: 8,
        marginBottom: 16,
        display: 'flex',
        gap: 10,
        alignItems: 'flex-start',
      }}>
        <span style={{ fontSize: 16, lineHeight: 1.1 }}>⚠️</span>
        <div style={{ fontSize: 12.5, color: 'oklch(35% 0.14 25)', lineHeight: 1.5 }}><strong>Watch out for:</strong> {props.children}</div>
      </div>
    );
  };

  const LessonPosture = function () {
    return (
      <div>
        <div style={{ marginBottom: 16 }}>
          <div style={{ fontSize: 22, fontWeight: 700, color: 'oklch(18% 0.03 265)', marginBottom: 6 }}>Holding the violin & bow</div>
          <div style={{ fontSize: 13.5, color: 'oklch(40% 0.04 265)', lineHeight: 1.5 }}>
            Good posture lets your fingers and bow move freely. Tension is the enemy — if anything hurts after 5 minutes, something's locked up. Pause and reset.
          </div>
        </div>

        <div style={{ fontSize: 12, color: 'oklch(55% 0.04 265)', fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 8, marginTop: 18 }}>Standing & holding the violin</div>

        <Step n={1} title="Feet & balance" body="Stand with feet shoulder-width apart, weight even on both feet. Knees soft, not locked. You should feel grounded but able to sway gently." />
        <Step n={2} title="Violin on the collarbone" body="Rest the chinrest end of the violin on your LEFT collarbone. Your jaw — not your teeth — gently anchors it. The scroll points roughly forward, slightly to the left." />
        <Step n={3} title="Left arm under the violin" body="Bring your left elbow UNDER the violin (not out to the side). Your thumb supports the neck loosely; the violin should balance on the collarbone, not on your hand." />
        <Step n={4} title="Left hand shape" body="Make a soft 'C' between thumb and first finger. The pad of your thumb sits across from your 1st-finger knuckle. Fingers curl down to the strings from above, not flat." />
        <Watch>Pinching the neck with your thumb. The neck should rest in the C of your hand — gripping locks up the wrist and makes vibrato impossible later.</Watch>

        <div style={{ fontSize: 12, color: 'oklch(55% 0.04 265)', fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 8, marginTop: 18 }}>Bow grip</div>

        <Step n={1} title="Thumb on the frog" body="Right thumb tip touches the corner of the frog (the wooden block near the bottom). Your thumb is bent, not straight." />
        <Step n={2} title="Middle two fingers wrap the frog" body="Middle and ring fingers drape over the frog opposite the thumb. The middle finger's second knuckle sits on the hair-side of the stick." />
        <Step n={3} title="Pinky balances on top" body="Curl the pinky onto the stick about an inch from the frog. It bears no weight — it just keeps the bow upright." />
        <Step n={4} title="Index finger powers the sound" body="Index finger drapes diagonally across the stick at the second knuckle. Pressing here lightly is how you create louder, fuller tone — never with your shoulder." />
        <Watch>White-knuckle grip. The bow should be held just firmly enough not to fall — like holding a baby bird. If your pinky goes straight or your knuckles turn white, reset.</Watch>

        <div style={{
          background: 'oklch(96% 0.04 145)',
          border: '1px solid oklch(85% 0.10 145)',
          borderRadius: 10,
          padding: '12px 14px',
          marginTop: 14,
          display: 'flex',
          gap: 10,
          alignItems: 'flex-start',
        }}>
          <span style={{ fontSize: 16, lineHeight: 1.1 }}>✓</span>
          <div style={{ fontSize: 12.5, color: 'oklch(28% 0.14 145)', lineHeight: 1.5 }}>
            <strong>Quick check:</strong> can you wiggle your bow thumb up and down while still holding the bow? If yes — your grip is loose enough. If no — relax.
          </div>
        </div>
      </div>
    );
  };

  window.ViolinLab.ui.LessonPosture = LessonPosture;
})();