/* Shared lang toggle — sliding pill animation */
const LangToggle = ({ lang, onLang }) => (
  <button className="lang-toggle" onClick={onLang} data-active={lang} aria-label="Switch language">
    <span className="lang-pill" />
    <span className="lang-el">EL</span>
    <span className="lang-en">EN</span>
  </button>
);
window.LangToggle = LangToggle;

/* Header — co-branding bar with breadcrumb + lang toggle */
const Header = ({ lang, onLang, onHome, breadcrumb = [] }) => {
  return (
    <header className="header">
      <div className="header-inner">
        <button className="header-brand" onClick={onHome} aria-label={t('home', lang)}>
          <img src="assets/intersport-logo.svg" alt="Intersport" className="logo-intersport" />
          <span className="header-divider" />
          <img src="assets/energetics.png" alt="Energetics" className="logo-energetics" />
        </button>

        <nav className="header-crumbs" aria-label="breadcrumbs">
          <button className="crumb crumb-home" onClick={onHome}>
            <Icon name="home" size={22} />
            <span>{t('go_home_hint', lang)}</span>
          </button>
          {breadcrumb.map((c, i) => (
            <React.Fragment key={i}>
              <Icon name="chevronRight" size={16} className="crumb-sep" />
              {c.onClick ? (
                <button className="crumb" onClick={c.onClick}>{c.label}</button>
              ) : (
                <span className="crumb crumb-current">{c.label}</span>
              )}
            </React.Fragment>
          ))}
        </nav>

      </div>
    </header>
  );
};
window.Header = Header;