// ── QuestionClock ─────────────────────────────────────────────────────────────

function QuestionClock({ startedAt }) {
  const [visible, setVisible] = React.useState(false);
  const [elapsed, setElapsed] = React.useState(0);

  React.useEffect(() => {
    const showTimer = setTimeout(() => setVisible(true), 5000);
    return () => clearTimeout(showTimer);
  }, []);

  React.useEffect(() => {
    if (!visible) return;
    const tick = setInterval(() => {
      setElapsed(Math.max(0, Math.floor((Date.now() - startedAt) / 1000)));
    }, 1000);
    return () => clearInterval(tick);
  }, [visible, startedAt]);

  if (!visible) return null;

  const minutes = Math.floor(elapsed / 60);
  const seconds = elapsed % 60;
  return (
    <span className="question-clock">
      {minutes}:{String(seconds).padStart(2, '0')}
    </span>
  );
}