// LangSwitch — toggle pilule FR/EN avec cursor blanc qui glisse au survol.
// Même esthétique que PillNav : un cursor unique se positionne sous l'item
// hovered (ou actif au repos), avec transition fluide.
// Évite mix-blend-mode (cf. bug sticky header). Inversion via JS.

const LangSwitch = ({ activeLang = 'fr', mono = {} }) => {
  const items = [
    { label: 'FR', href: '/' },
    { label: 'EN', href: '/en/' },
  ];
  const activeIdx = activeLang === 'fr' ? 0 : 1;
  const [hoverIdx, setHoverIdx] = React.useState(activeIdx);
  const refs = React.useRef([]);
  const [cursor, setCursor] = React.useState({ left: 3, width: 0, opacity: 0 });

  // Mesure et positionne le cursor sous l'item courant
  React.useLayoutEffect(() => {
    const el = refs.current[hoverIdx];
    if (!el) return;
    setCursor({ left: el.offsetLeft, width: el.offsetWidth, opacity: 1 });
  }, [hoverIdx]);

  return (
    <div
      className="bo-lang-switch"
      onMouseLeave={() => setHoverIdx(activeIdx)}
      style={{
        position: 'relative', display: 'inline-flex', alignItems: 'stretch',
        padding: 3, border: '1.5px solid rgba(255,255,255,0.55)',
        borderRadius: 999, background: 'transparent',
        transition: 'border-color 220ms ease',
      }}
    >
      <div
        className="bo-lang-cursor"
        style={{
          position: 'absolute', top: 3, height: 'calc(100% - 6px)',
          left: cursor.left, width: cursor.width, opacity: cursor.opacity,
          background: '#fff', borderRadius: 999, zIndex: 0,
          transition: 'left 320ms cubic-bezier(0.22, 1, 0.36, 1), width 320ms cubic-bezier(0.22, 1, 0.36, 1)',
        }}
      />
      {items.map((item, i) => (
        <a
          key={item.label}
          ref={(el) => (refs.current[i] = el)}
          href={item.href}
          onMouseEnter={() => setHoverIdx(i)}
          className="bo-lang-item"
          style={{
            position: 'relative', zIndex: 1,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            minWidth: 38, padding: '6px 14px', borderRadius: 999,
            textDecoration: 'none',
            color: hoverIdx === i ? '#000' : 'rgba(255,255,255,0.65)',
            transition: 'color 280ms cubic-bezier(0.22, 1, 0.36, 1)',
            ...mono,
          }}
        >
          {item.label}
        </a>
      ))}
    </div>
  );
};

window.LangSwitch = LangSwitch;