/* ═══════════════════════════════════════════════════════════
   Direction B — Zoom Dial / Telescope ("Resolution")
   Scrub the lens from hour → great cycles; detail aggregates.
═══════════════════════════════════════════════════════════ */
const LEVELS_B = window.GRAN.LEVELS;

if (!document.getElementById('gx-b-styles')) {
  const s = document.createElement('style');
  s.id = 'gx-b-styles';
  s.textContent = `
  .gxb-zoom { padding:16px 20px 20px; border-bottom:1px solid var(--rule); }
  .gxb-readline { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:18px; }
  .gxb-focal { font-family:var(--disp); font-size:25px; line-height:1.05; color:var(--blue); white-space:nowrap; }
  .gxb-focal small { font-family:var(--sc); text-transform:uppercase; letter-spacing:.12em; font-size:10px; color:var(--muted); display:block; margin-top:5px; }
  .gxb-zbtns { display:flex; gap:8px; }
  .gxb-zbtn { width:42px; height:42px; border:1px solid var(--rule); border-radius:50%; color:var(--blue); font-size:20px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color .14s,background .14s; }
  .gxb-zbtn:hover:not(:disabled) { border-color:var(--blue); background:var(--white); }
  .gxb-zbtn:disabled { opacity:.3; cursor:default; }
  .gxb-track { position:relative; height:40px; margin:0 18px; }
  .gxb-track::before { content:''; position:absolute; left:0; right:0; top:19px; height:2px; background:var(--vpale); border-radius:2px; }
  .gxb-fill { position:absolute; left:0; top:19px; height:2px; background:var(--blue); border-radius:2px; transition:width .25s cubic-bezier(.3,.7,.3,1); }
  .gxb-stop { position:absolute; top:11px; width:18px; height:18px; margin-left:-9px; border-radius:50%; border:1.5px solid var(--rule); background:var(--paper); cursor:pointer; transition:border-color .14s; }
  .gxb-stop:hover { border-color:var(--blue); }
  .gxb-stop.passed { border-color:var(--blue); }
  .gxb-thumb { position:absolute; top:3px; width:34px; height:34px; margin-left:-17px; border-radius:50%;
               background:var(--white); border:2px solid var(--blue); box-shadow:0 2px 10px rgba(61,107,138,.25);
               display:flex; align-items:center; justify-content:center; transition:left .25s cubic-bezier(.3,.7,.3,1); pointer-events:none; }
  .gxb-thumb::after { content:''; width:10px; height:10px; border-radius:50%; background:var(--blue); }
  .gxb-ticklabels { position:relative; height:30px; margin:8px 18px 0; }
  .gxb-tl { position:absolute; transform:translateX(-50%); font-family:var(--sc); text-transform:uppercase; letter-spacing:.08em; font-size:10px; color:var(--muted); white-space:nowrap; cursor:pointer; }
  .gxb-tl.on { color:var(--blue); }
  .gxb-content { flex:1; min-width:0; display:flex; }
  .gxb-content .gx-panel { padding:16px 20px 18px; }
  .gxb-content .gx-pspan { font-size:24px; }
  `;
  document.head.appendChild(s);
}

const B_SHORT = ['Hour', 'Day', 'Week', 'Month', 'Season', 'Year', 'Cycles'];

function ZoomDial() {
  const [li, setLi] = useStateG(0); // default: most zoomed-in (Hour)
  const level = LEVELS_B[li];
  const n = LEVELS_B.length;
  const pct = (i) => (i / (n - 1)) * 100;

  return (
    <div className="gx">
      <div className="gx-top">
        <div className="gx-kick">Direction B · The Lens</div>
        <div className="gx-h">A zoom dial that telescopes time</div>
        <div className="gx-note">Pull the lens out from the hour to the great cycles. As the field of view widens, fine readings aggregate into fewer, broader ones — resolution falls as the span grows.</div>
      </div>

      <div className="gxb-zoom">
        <div className="gxb-readline">
          <div className="gxb-focal">{level.scale}<small>Field of view · {level.span}</small></div>
          <div className="gxb-zbtns">
            <button className="gxb-zbtn" disabled={li === 0} onClick={() => setLi(v => Math.max(0, v - 1))} aria-label="Zoom in">+</button>
            <button className="gxb-zbtn" disabled={li === n - 1} onClick={() => setLi(v => Math.min(n - 1, v + 1))} aria-label="Zoom out">−</button>
          </div>
        </div>

        <div className="gxb-track">
          <div className="gxb-fill" style={{ width: pct(li) + '%' }}></div>
          {LEVELS_B.map((lv, i) => (
            <span key={lv.id} className={'gxb-stop' + (i <= li ? ' passed' : '')} style={{ left: pct(i) + '%' }} onClick={() => setLi(i)}></span>
          ))}
          <span className="gxb-thumb" style={{ left: pct(li) + '%' }}></span>
        </div>
        <div className="gxb-ticklabels">
          {LEVELS_B.map((lv, i) => (
            <span key={lv.id} className={'gxb-tl' + (i === li ? ' on' : '')} style={{ left: pct(i) + '%' }} onClick={() => setLi(i)}>{B_SHORT[i]}</span>
          ))}
        </div>
      </div>

      <div className="gxb-content"><ContentPanel level={level} /></div>
    </div>
  );
}

window.ZoomDial = ZoomDial;