// Hero age/stage selector — 3 styles (slider, pills, dial)

const { useEffect, useRef, useMemo, useState } = React;

function HeroSelector({ stops, currentIdx, onSelect, style }) {
  if (style === 'pills') return <PillsSelector stops={stops} currentIdx={currentIdx} onSelect={onSelect} />;
  if (style === 'dial')  return <DialSelector  stops={stops} currentIdx={currentIdx} onSelect={onSelect} />;
  return <SliderSelector stops={stops} currentIdx={currentIdx} onSelect={onSelect} />;
}

function SliderSelector({ stops, currentIdx, onSelect }) {
  const railRef = useRef(null);
  const handleDrag = (e) => {
    const rect = railRef.current.getBoundingClientRect();
    const move = (ev) => {
      const x = (ev.clientX || (ev.touches && ev.touches[0].clientX)) - rect.left;
      const ratio = Math.max(0, Math.min(1, x / rect.width));
      const idx = Math.round(ratio * (stops.length - 1));
      onSelect(idx);
    };
    move(e);
    const up = () => { window.removeEventListener('pointermove', move); window.removeEventListener('pointerup', up); };
    window.addEventListener('pointermove', move);
    window.addEventListener('pointerup', up);
  };
  const fillPct = (currentIdx / (stops.length - 1)) * 100;

  return (
    <div className="hsel-slider">
      <div className="hsel-track" ref={railRef} onPointerDown={handleDrag}>
        <div className="hsel-rail">
          <div className="hsel-rail-fill" style={{ width: `${fillPct}%` }} />
        </div>
        {stops.map((s, i) => {
          const left = (i / (stops.length - 1)) * 100;
          const cls = `hsel-tick${i === currentIdx ? ' is-current' : ''}${i < currentIdx ? ' is-passed' : ''}`;
          return (
            <button
              key={s.key}
              className={cls}
              style={{ left: `${left}%` }}
              onPointerDown={(e) => { e.stopPropagation(); onSelect(i); }}
              aria-label={s.label}
            />
          );
        })}
      </div>
      <div className="hsel-axislbl">
        <span>{stops[0].short}</span>
        <span>{stops[Math.floor(stops.length / 2)].short}</span>
        <span>{stops[stops.length - 1].short}</span>
      </div>
    </div>
  );
}

function PillsSelector({ stops, currentIdx, onSelect }) {
  return (
    <div className="hsel-pills">
      {stops.map((s, i) => (
        <button
          key={s.key}
          className={`hsel-pill${i === currentIdx ? ' is-current' : ''}`}
          onClick={() => onSelect(i)}
        >
          {s.short}
        </button>
      ))}
    </div>
  );
}

function DialSelector({ stops, currentIdx, onSelect }) {
  const ITEM_W = 88;
  const offset = -currentIdx * ITEM_W;
  return (
    <div className="hsel-dial">
      <div className="hsel-dial-strip" style={{ transform: `translate(calc(-50% + ${offset}px), -50%)` }}>
        {stops.map((s, i) => {
          const dist = Math.abs(i - currentIdx);
          let cls = 'hsel-dial-item';
          if (i === currentIdx) cls += ' is-current';
          else if (dist === 1) cls += ' is-near';
          return (
            <div key={s.key} className={cls} onClick={() => onSelect(i)}>
              {s.short}
            </div>
          );
        })}
      </div>
      <div className="hsel-dial-needle" />
    </div>
  );
}

window.HeroSelector = HeroSelector;