/* ═══════════════════════════════════════════════════════════
   Direction A — Vertical Granularity Axis ("The Spine")
   Fine at the top, coarse at the foot. Node size grows with span.
═══════════════════════════════════════════════════════════ */
const LEVELS_A = window.GRAN.LEVELS;

if (!document.getElementById('gx-a-styles')) {
  const s = document.createElement('style');
  s.id = 'gx-a-styles';
  s.textContent = `
  .gxa-body { flex:1; display:flex; min-height:0; }
  .gxa-axis { width:178px; flex-shrink:0; border-right:1px solid var(--rule); padding:16px 8px 16px 18px; display:flex; flex-direction:column; }
  .gxa-cap { font-family:var(--sc); text-transform:uppercase; letter-spacing:.18em; font-size:10px; color:var(--muted); padding-left:2px; }
  .gxa-cap.bot { text-align:left; }
  .gxa-rungs { flex:1; display:flex; flex-direction:column; justify-content:space-between; padding:12px 0; position:relative; }
  .gxa-rungs::before { content:''; position:absolute; left:7px; top:16px; bottom:16px; width:1px; background:var(--rule); }
  .gxa-rung { display:flex; align-items:center; gap:11px; text-align:left; padding:2px 4px 2px 0; color:var(--muted); cursor:pointer; }
  .gxa-node { border-radius:50%; border:1.5px solid var(--l-blue); background:var(--paper); flex-shrink:0; z-index:1; transition:background .15s,border-color .15s,box-shadow .15s; }
  .gxa-rung:hover .gxa-node { border-color:var(--blue); }
  .gxa-rung.on .gxa-node { background:var(--blue); border-color:var(--blue); box-shadow:0 0 0 4px rgba(61,107,138,.14); }
  .gxa-rname { font-family:var(--disp); font-size:15.5px; color:var(--ink); display:block; line-height:1.08; }
  .gxa-rung.on .gxa-rname { color:var(--blue); }
  .gxa-rspan { font-family:var(--sc); text-transform:uppercase; letter-spacing:.1em; font-size:9.5px; color:var(--muted); display:block; margin-top:1px; }
  .gxa-content { flex:1; min-width:0; display:flex; }
  .gxa-content .gx-panel { padding:16px 18px 18px; }
  `;
  document.head.appendChild(s);
}

const A_NODE = [7, 8.5, 10, 12, 14, 16, 18];

function SpineAxis() {
  const [li, setLi] = useStateG(1); // default: Day
  const level = LEVELS_A[li];
  return (
    <div className="gx">
      <div className="gx-top">
        <div className="gx-kick">Direction A · The Spine</div>
        <div className="gx-h">A vertical granularity axis</div>
        <div className="gx-note">Your sketch, made literal: fine at the top, coarse at the foot. The node swells as the span grows. Tap a rung — the reading reshapes to that resolution.</div>
      </div>
      <div className="gxa-body">
        <div className="gxa-axis">
          <div className="gxa-cap">Fine · detailed</div>
          <div className="gxa-rungs">
            {LEVELS_A.map((lv, i) => (
              <button key={lv.id} className={'gxa-rung' + (i === li ? ' on' : '')} onClick={() => setLi(i)}>
                <span className="gxa-node" style={{
                  width: A_NODE[i] + 'px', height: A_NODE[i] + 'px',
                  marginLeft: (7 - A_NODE[i] / 2 + 0.5) + 'px'
                }}></span>
                <span>
                  <span className="gxa-rname">{lv.name}</span>
                  <span className="gxa-rspan">{lv.span}</span>
                </span>
              </button>
            ))}
          </div>
          <div className="gxa-cap bot">Coarse · thematic</div>
        </div>
        <div className="gxa-content"><ContentPanel level={level} /></div>
      </div>
    </div>
  );
}

window.SpineAxis = SpineAxis;