/* Sprach-Umschalter. Dritte Fassung, die zwei davor sind beide an derselben
   Fehlannahme gescheitert.

   Fassung 1: Pille mit zwei Buchstaben, halbtransparent auf dem Hero-Foto.
   Fassung 2: zwei Textlinks in der Zeile der Rubrik-Zeile, unter dem Bild.
   Philipp zu beiden: versteckt, faellt nicht auf.

   Der Fehler war nicht die Optik, sondern die Einordnung. Ich hatte "Ruhe vor
   Fuelle" angewendet, und die Regel schuetzt davor, OPTIONALES zu stapeln. Ein
   Sprach-Umschalter auf einer bewusst zweisprachigen Seite ist nicht optional:
   findet ihn niemand, haben wir zwei Seiten gebaut und eine ausgeliefert.

   Drei Entscheidungen, jede gegen einen konkreten Fehlgriff:

   1. GLOBUS. Der staerkste Wiedererkennungs-Anker fuer Sprachwahl, und der
      einzige, der sprachunabhaengig funktioniert. Genau darauf kommt es an,
      wenn der Leser keine der beiden Sprachen sicher liest. Fehlte vorher ganz.
   2. SEGMENTED CONTROL statt Textlinks. Ein umrandeter Behaelter mit zwei
      Segmenten, das aktive gefuellt. Das Muster ist gelernt und sagt in einem
      Blick: zwei Zustaende, du bist in diesem, der andere ist klickbar. Zwei
      nackte Links sagen das nie, die liest man als Bildunterschrift.
   3. GANZ NACH OBEN, ueber das Bild. Menschen suchen so etwas oben rechts,
      bevor der Inhalt anfaengt. Fassung 2 sass unter einem 480 Pixel hohen
      Foto auf halber Seitenhoehe, also hinter der Entscheidung, die sie
      beeinflussen soll.

   Der Trenner aus Fassung 2 faellt weg, der Behaelter macht die Gruppierung. */
function LangSwitch({ className }) {
  const c = window.PRESSE_CONTENT[window.PRESSE_LANG].langSwitch;
  const Item = (code) => {
    const o = c[code];
    if (code === c.current) {
      return (
        <span className="langsw-opt is-on" lang={code} aria-current="page">{o.label}</span>
      );
    }
    return (
      <a className="langsw-opt" href={o.href} hrefLang={code} lang={code} aria-label={o.aria}>{o.label}</a>
    );
  };
  return (
    <nav className={className ? `langsw ${className}` : 'langsw'} aria-label={c.navLabel}>
      <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>
      <span className="langsw-group">{Item('de')}{Item('en')}</span>
    </nav>
  );
}
window.LangSwitch = LangSwitch;
