/* ═══════════════════════════════════════════════════════════
   Direction C — Concentric Rings ("The Orrery")
   Now at the center; outer rings are the long cycles.
   Tick density falls off outward = granularity over time.
═══════════════════════════════════════════════════════════ */
const LEVELS_C = window.GRAN.LEVELS;

if (!document.getElementById('gx-c-styles')) {
  const s = document.createElement('style');
  s.id = 'gx-c-styles';
  s.textContent = `
  .gxc-body { flex:1; display:flex; min-height:0; align-items:stretch; }
  .gxc-orrery { width:244px; flex-shrink:0; border-right:1px solid var(--rule); display:flex; align-items:center; justify-content:center; padding:10px; }
  .gxc-svg { width:224px; height:224px; }
  .gxc-ring { fill:none; stroke:var(--rule); stroke-width:1; cursor:pointer; transition:stroke .15s,stroke-width .15s; }
  .gxc-hit { fill:none; stroke:transparent; stroke-width:13px; cursor:pointer; }
  .gxc-ring.on { stroke:var(--blue); stroke-width:2; }
  .gxc-ringgrp:hover .gxc-ring { stroke:var(--l-blue); }
  .gxc-tick { stroke:var(--l-blue); stroke-width:.8; opacity:.7; pointer-events:none; }
  .gxc-ringgrp.on .gxc-tick { stroke:var(--blue); opacity:1; }
  .gxc-node { fill:var(--paper); stroke:var(--l-blue); stroke-width:1.3; pointer-events:none; }
  .gxc-ringgrp.on .gxc-node { fill:var(--blue); stroke:var(--blue); }
  .gxc-rlabel { font-family:'Cormorant SC',serif; text-transform:uppercase; letter-spacing:.06em; font-size:8.5px; fill:var(--muted); pointer-events:none; }
  .gxc-ringgrp.on .gxc-rlabel { fill:var(--blue); }
  .gxc-center-now { font-family:'Cormorant SC',serif; text-transform:uppercase; letter-spacing:.14em; font-size:8px; fill:var(--muted); }
  .gxc-content { flex:1; min-width:0; display:flex; }
  .gxc-content .gx-panel { padding:16px 18px 18px; }
  .gxc-content .gx-pspan { font-size:21px; line-height:1.12; }
  `;
  document.head.appendChild(s);
}

const C_TICKS = [40, 22, 13, 8, 5, 3, 2];
const C_SHORT = ['Hour', 'Day', 'Week', 'Month', 'Season', 'Year', 'Cycles'];

function OrreryRings() {
  const [li, setLi] = useStateG(0);
  const level = LEVELS_C[li];
  const CX = 112, CY = 112;
  const r = (i) => 22 + i * 14.5;

  return (
    <div className="gx">
      <div className="gx-top">
        <div className="gx-kick">Direction C · The Orrery</div>
        <div className="gx-h">Concentric rings of time</div>
        <div className="gx-note">Now sits at the centre; each ring out is a longer cycle. The dense inner rings thin to a few marks at the rim — granularity falling away as a literal radius. Tap a ring.</div>
      </div>
      <div className="gxc-body">
        <div className="gxc-orrery">
          <svg className="gxc-svg" viewBox="0 0 224 224">
            {/* rings, outermost first so inner draw on top */}
            {LEVELS_C.slice().reverse().map((lv) => {
              const i = lv.idx;
              const rr = r(i);
              const on = i === li;
              const ticks = [];
              const tn = C_TICKS[i];
              for (let k = 0; k < tn; k++) {
                const a = (k / tn) * Math.PI * 2 - Math.PI / 2;
                const x1 = CX + (rr - 2.4) * Math.cos(a), y1 = CY + (rr - 2.4) * Math.sin(a);
                const x2 = CX + (rr + 2.4) * Math.cos(a), y2 = CY + (rr + 2.4) * Math.sin(a);
                ticks.push(<line key={k} className="gxc-tick" x1={x1} y1={y1} x2={x2} y2={y2} />);
              }
              return (
                <g key={lv.id} className={'gxc-ringgrp' + (on ? ' on' : '')} onClick={() => setLi(i)}>
                  <circle className="gxc-hit" cx={CX} cy={CY} r={rr} />
                  <circle className="gxc-ring" cx={CX} cy={CY} r={rr} />
                  {ticks}
                  <circle className="gxc-node" cx={CX} cy={CY - rr} r={on ? 3.4 : 2.4} />
                  <text className="gxc-rlabel" x={CX + 6} y={CY - rr + 3} textAnchor="start">{C_SHORT[i]}</text>
                </g>
              );
            })}
            {/* centre = NOW */}
            <circle cx={CX} cy={CY} r="15" fill="var(--paper)" stroke="var(--rule)" strokeWidth="1" />
            <use href={'#' + level.ruler} x={CX - 6.5} y={CY - 9} width="13" height="13" style={{ color: 'var(--blue)' }} />
            <text className="gxc-center-now" x={CX} y={CY + 8} textAnchor="middle">NOW</text>
          </svg>
        </div>
        <div className="gxc-content"><ContentPanel level={level} /></div>
      </div>
    </div>
  );
}

window.OrreryRings = OrreryRings;