// Small EN / БГ segmented language switch. Shared by the desktop header and the
// mobile shell. Uses the caps-label type treatment so it reads as a system control.
function LangToggle({ lang, onChange, compact = false }) {
  const opts = [
    { code: 'en', label: 'EN' },
    { code: 'bg', label: 'БГ' },
  ];
  return (
    <div style={{
      display: 'inline-flex',
      border: 'var(--border-width-default) solid var(--ink-900)',
      borderRadius: 'var(--radius-sm)',
      overflow: 'hidden',
    }}>
      {opts.map((o) => {
        const active = o.code === lang;
        return (
          <button
            key={o.code}
            onClick={() => onChange(o.code)}
            aria-pressed={active}
            style={{
              border: 'none',
              cursor: 'pointer',
              padding: compact ? '0 10px' : '0 12px',
              height: compact ? 32 : 36,
              minWidth: 44,
              background: active ? 'var(--red-500)' : 'var(--surface-page)',
              color: active ? 'var(--text-on-brand)' : 'var(--text-primary)',
              font: 'var(--text-label-caps)',
              letterSpacing: 'var(--tracking-caps)',
              fontFamily: 'var(--font-body)',
              transition: 'background var(--duration-fast) var(--ease-standard)',
            }}
          >
            {o.label}
          </button>
        );
      })}
    </div>
  );
}
window.LangToggle = LangToggle;