const { Brand, LangSwitcher, Icon } = window.CoolZoneSolutionDesignSystem_12e696;

// Anchors like #uslugi only resolve on the homepage — from any other page
// (project-check.html, configurator.html, ...) they need to link back to
// index.html first, otherwise clicking them silently does nothing.
const path = window.location.pathname;
const ON_HOME = path === '/' || path.endsWith('/index.html') || path.endsWith('/');
const HOME_HREF = ON_HOME ? '' : 'index.html';

function SiteHeader({ t, lang, setLang, scrolled }) {
  const anchors = ['uslugi', 'dla-kogo', 'proces', 'realizacje', 'opinie', 'faq'];
  const ids = [...anchors.map((a) => `${HOME_HREF}#${a}`), 'project-check.html'];
  const ctaHref = `${HOME_HREF}#kontakt`;
  const [open, setOpen] = React.useState(false);
  const close = () => setOpen(false);
  React.useEffect(() => { close(); }, [lang]);

  React.useEffect(() => {
    fetch('/api/config-api.php/public')
      .then((r) => (r.ok ? r.json() : null))
      .then((cfg) => {
        if (!cfg || !cfg.favicon_path) return;
        let link = document.querySelector('link[rel="icon"]');
        if (!link) {
          link = document.createElement('link');
          link.rel = 'icon';
          document.head.appendChild(link);
        }
        link.type = cfg.favicon_path.endsWith('.svg') ? 'image/svg+xml' : 'image/png';
        link.href = cfg.favicon_path;
      })
      .catch(() => {});
  }, []);

  return (
    <header className={'site-header' + (scrolled ? ' scrolled' : '') + (open ? ' menu-open' : '')}>
      <div className="container header-inner">
        <Brand logo="assets/logo.svg" href={HOME_HREF || '#hero'} />
        <nav className="nav" aria-label="CoolZone">
          {t.nav.map((label, i) => <a key={i} href={ids[i]}>{label}</a>)}
          <a className="nav-cta" href={ctaHref} data-track="header_cta">{t.cta}</a>
        </nav>
        <LangSwitcher langs={window.CZ_LANGS} value={lang} onChange={setLang} />
        <a className="header-quote-btn" href="project-check.html" data-track="header_quote_btn">{t.nav[6]}</a>
        <button
          className="burger"
          type="button"
          aria-label={open ? 'Close menu' : 'Open menu'}
          aria-expanded={open}
          onClick={() => setOpen(!open)}
        >
          <span></span><span></span><span></span>
        </button>
      </div>
      <div className="mobile-nav" hidden={!open}>
        {anchors.map((a, i) => <a key={i} href={ids[i]} onClick={close}>{t.nav[i]}</a>)}
        <a className="nav-cta" href={ctaHref} onClick={close} data-track="mobile_nav_cta">{t.cta}</a>
        <a className="nav-cta nav-cta-quote" href="project-check.html" onClick={close} data-track="mobile_nav_quote">{t.pcFloatingCta}</a>
        <div className="mobile-lang">
          {window.CZ_LANGS.map((l) => (
            <button
              key={l.code}
              type="button"
              className={'lang-pill' + (l.code === lang ? ' is-active' : '')}
              onClick={() => { setLang(l.code); close(); }}
            >
              {l.short}
            </button>
          ))}
        </div>
      </div>
    </header>
  );
}
Object.assign(window, { SiteHeader });