/* Sprach-Umschalter zwischen /ueber-mich und /ueber-mich/en. Gleiches Muster
   wie auf /presse (dort LangSwitch.jsx, die Begruendung fuer Globus,
   Segmente und Position steht dort): oben in der Inhaltsspalte, nicht fix,
   aktive Sprache neutral, Query-String wandert beim Wechsel mit.
   Zwillinge: presse/components/LangSwitch.jsx, .cr-lang in creator/creator.css
   und BLangSwitch.jsx auf partnerships; ein Fix an einem (Farbe, Fokus, Touch-Ziel) gehoert in alle. */
function LangSwitch({ current = 'de' }) {
  const opts = {
    de: { label: 'Deutsch', href: '/ueber-mich', aria: 'Auf Deutsch lesen' },
    en: { label: 'English', href: '/ueber-mich/en', aria: 'Switch to English' },
  };
  const Item = (code) => {
    const o = opts[code];
    if (code === current) {
      return <span className="langsw-opt is-on" lang={code} aria-current="page">{o.label}</span>;
    }
    const search = typeof window !== 'undefined' ? window.location.search : '';
    return (
      <a className="langsw-opt" href={o.href + search} hrefLang={code} lang={code} aria-label={o.aria}>{o.label}</a>
    );
  };
  return (
    <nav className="langsw" aria-label={current === 'en' ? 'Language' : 'Sprache'}>
      <span className="langsw-group">
        <svg className="langsw-globe" viewBox="0 0 24 24" width="17" height="17" aria-hidden="true" focusable="false">
          <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" strokeWidth="1.6" />
          <ellipse cx="12" cy="12" rx="4.2" ry="9" fill="none" stroke="currentColor" strokeWidth="1.6" />
          <path d="M3.4 9.2h17.2M3.4 14.8h17.2" fill="none" stroke="currentColor" strokeWidth="1.6" />
        </svg>
        {Item('de')}{Item('en')}
      </span>
    </nav>
  );
}
window.LangSwitch = LangSwitch;