function TopBar({ onLogoClick, action, onAction }) {
  return (
    <div className="topbar">
      <button className="brand" onClick={onLogoClick}>
        <span className="brand-mark">🎁</span>
        <span>{window.APP_DATA.brand.name}</span>
      </button>
      {action && (
        <button className="topbar-action" onClick={onAction}>{action}</button>
      )}
    </div>
  );
}

function ProgressBar({ current, total }) {
  const pct = Math.round((current / total) * 100);
  return (
    <div>
      <div className="quiz-progress-label">
        <span>Question {current} of {total}</span>
        <span>{pct}%</span>
      </div>
      <div className="quiz-progress-track" style={{ marginTop: 8 }}>
        <div className="quiz-progress-fill" style={{ width: pct + "%" }} />
      </div>
    </div>
  );
}