function FlightRulesToggle() {
  const [theme, setTheme] = React.useState(() =>
    document.documentElement.getAttribute('data-theme') === 'dark' ? 'ifr' : 'vfr'
  );

  const setMode = (mode) => {
    if (mode === 'ifr') document.documentElement.setAttribute('data-theme', 'dark');
    else document.documentElement.removeAttribute('data-theme');
    try { localStorage.setItem('alg-theme', mode); } catch (e) {}
    setTheme(mode);
  };

  return (
    <button
      type="button"
      className="alg-flight-rules alg-flight-rules-floating"
      data-active={theme}
      aria-pressed={theme === 'ifr'}
      aria-label={`Color theme — currently ${theme.toUpperCase()}, click to switch`}
      onClick={() => setMode(theme === 'vfr' ? 'ifr' : 'vfr')}
    >
      <span className="alg-fr-thumb" aria-hidden="true" />
      <span className={"alg-fr-label" + (theme === 'vfr' ? ' is-active' : '')}>VFR</span>
      <span className={"alg-fr-label" + (theme === 'ifr' ? ' is-active' : '')}>IFR</span>
    </button>
  );
}
window.FlightRulesToggle = FlightRulesToggle;