function Priorities({ selected, onToggle, onReorder, onBack, onContinue, fromProfile }) {
  const { PhoneShell, BackButton, StepBadge, FocusCard, Panel, PriorityRow, Button } = window.GG;
  const { PRIORITIES } = window.GGData;
  const ANCHOR = ['Primary Anchor', 'Secondary Anchor', 'Tertiary Anchor'];
  const [drag, setDrag] = React.useState(null);
  const from = drag ? selected.indexOf(drag.id) : -1;
  const to = drag ? Math.max(0, Math.min(selected.length - 1, from + Math.round(drag.dy / drag.h))) : -1;
  const down = (e, id) => { if (e.target.closest('[aria-label="Remove"]')) return; const el = e.currentTarget; el.setPointerCapture(e.pointerId); setDrag({ id, start: e.clientY, dy: 0, h: el.getBoundingClientRect().height + 10 }); window.GGData.haptic('tap'); };
  const move = e => drag && setDrag(d => ({ ...d, dy: e.clientY - d.start }));
  const up = () => { if (!drag) return; if (to !== from) { const a = selected.slice(); a.splice(from, 1); a.splice(to, 0, drag.id); onReorder(a); window.GGData.haptic('correct'); window.GGData.tone(660, 'sine', 0.1); } setDrag(null); };
  const shift = j => { if (!drag || j === from) return 0; if (from < to && j > from && j <= to) return -drag.h; if (to < from && j >= to && j < from) return drag.h; return 0; };
  return (
    <PhoneShell>
      <Screen footer={<Button disabled={!selected.length} onClick={onContinue}>{fromProfile ? 'Save Focus Areas' : 'Next: Basics'}</Button>}>
        <TopBar left={<BackButton onClick={onBack} />} right={fromProfile ? <Meta>Edit</Meta> : <StepBadge current={2} total={4} />} />
        <Title eyebrow="Brain × Bike Ride" sub="Pick up to 3. We'll build your rides around them.">What would you like to <Hi>sharpen</Hi>?</Title>
        <div style={{ marginTop: 20, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
          {PRIORITIES.map(a => <FocusCard key={a.id} {...a} domain={a.id} selected={selected.includes(a.id)} rank={selected.indexOf(a.id) + 1} onClick={() => onToggle(a.id)} />)}
        </div>
        {selected.length > 0 && <div style={{ marginTop: 24 }}>
          <Panel status={selected.length + ' / 3 Anchors Selected'} title="Target Anchor Priority" complete={selected.length === 3}>
            {selected.map((id, i) => { const me = drag && drag.id === id; const shown = me ? to : i + Math.sign(shift(i)); return (
              <div key={id} onPointerDown={e => down(e, id)} onPointerMove={move} onPointerUp={up} onPointerCancel={up}
                style={{ position: 'relative', zIndex: me ? 2 : 1, touchAction: 'none', userSelect: 'none', cursor: me ? 'grabbing' : 'grab', borderRadius: 'var(--radius-card)',
                  transform: me ? `translateY(${drag.dy}px) scale(1.03)` : `translateY(${shift(i)}px)`, transition: me ? 'none' : 'transform 180ms var(--ease)', boxShadow: me ? '0 16px 32px rgba(0,0,0,0.6)' : 'none' }}>
                <PriorityRow rank={shown + 1} domain={id} title={PRIORITIES.find(a => a.id === id).title} label={ANCHOR[shown]} onRemove={() => onToggle(id)} />
              </div>); })}
          </Panel>
        </div>}
      </Screen>
    </PhoneShell>
  );
}
window.Priorities = Priorities;