// ============================================================
// Tribeca Lisboa — shared site chrome (bilingual header + drawer)
// One header/nav/lang-switch reused by every page. Reads the
// active language from LangContext; switch persists globally.
// ============================================================

// Primary navigation — only the allowed destinations are active.
// The current page's item is marked; scroll targets never are.
window.navItems = function navItems(lang) {
  return [
    { label: tt(lang, 'Program', 'Programa'), href: urlFor('program', 'all'), kind: 'program' },
    { label: tt(lang, 'Talent', 'Talentos'), href: urlFor('talents'), kind: 'talents' },
    { label: FIX('What’s new'), href: urlFor('home') + '#whats-new', scroll: 'whats-new', kind: 'home' },
    { label: tt(lang, 'About', 'Sobre'), href: urlFor('about'), kind: 'about' },
    { label: tt(lang, 'Pillars', 'Pilares'), href: urlFor('soon', 'pillars'), kind: 'soon' },
    { label: 'Info', href: urlFor('salas'), kind: 'salas' },
    { label: tt(lang, 'News', 'Notícias'), href: urlFor('news_list'), kind: 'news_list' },
  ];
};

// Nav kind of the current page (event → program, talent → talents, news → news_list),
// as a plain function above the JSX so the active rule is testable without a browser.
window.navActiveKind = function (pathname, search) {
  return TFL_ROUTES.navKind(TFL_ROUTES.parse(pathname, search).kind);
};
const hereKind = window.navActiveKind(location.pathname, location.search);
const isActiveItem = function (n) { return !n.scroll && n.kind === hereKind; };

// smooth scroll (easeInOutQuad) over a fixed duration
function smoothScrollTo(targetY, duration) {
  const startY = window.scrollY || window.pageYOffset;
  const diff = targetY - startY;
  let start = null;
  const ease = (t) => (t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2);
  function step(ts) { if (start === null) start = ts; const p = Math.min((ts - start) / duration, 1); window.scrollTo(0, startY + diff * ease(p)); if (p < 1) requestAnimationFrame(step); }
  requestAnimationFrame(step);
}
// What's new nav: same-page → 1s smooth scroll; other pages → let the link navigate
function handleScrollNav(e, id, after) {
  const el = document.getElementById(id);
  if (el) {
    e.preventDefault();
    const hdr = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--hdr-h')) || 82;
    const y = el.getBoundingClientRect().top + (window.scrollY || window.pageYOffset) - hdr;
    smoothScrollTo(y, 1000);
  }
  if (after) after();
}
window.smoothScrollTo = smoothScrollTo;

// EN / PT toggle — self-contained (drives the global language)
function SiteLangSwitch() {
  const [lang, setLang] = useLang();
  return (
    <div className="r-lang">
      <button className={lang === 'EN' ? 'active' : ''} onClick={() => setLang('EN')}>EN</button>
      <span className="r-lang-sep">/</span>
      <button className={lang === 'PT' ? 'active' : ''} onClick={() => setLang('PT')}>PT</button>
    </div>
  );
}

function SiteFbIcon({ size = 20 }) {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" width={size} height={size} style={{ display: 'block' }} aria-hidden="true">
      <path d="M13.5 21v-7.5h2.5l.4-3H13.5V8.6c0-.87.25-1.46 1.5-1.46h1.6V4.46A21 21 0 0 0 14.27 4.3c-2.3 0-3.88 1.4-3.88 3.98v2.22H7.8v3h2.6V21h3.1Z" />
    </svg>
  );
}
function SiteHeader({ onMenu }) {
  const lang = React.useContext(LangContext);
  return (
    <header className="r-hdr">
      <div className="r-hdr-inner">
        <div className="r-hdr-burger" onClick={onMenu}><Hamburger /></div>
        <a className="r-hdr-logo" href={urlFor('home')}><Logo width={110} /></a>
        <nav className="r-hdr-nav">
          {navItems(lang).map((n, i) => n.scroll
            ? <a key={i} href={n.href} onClick={(e) => handleScrollNav(e, n.scroll)}>{n.label}</a>
            : n.href
            ? <a key={i} className={isActiveItem(n) ? 'is-active' : ''} href={n.href}>{n.label}</a>
            : <a key={i} href="#" onClick={(e) => e.preventDefault()}>{n.label}</a>)}
        </nav>
        <div className="r-hdr-actions">
          <SiteLangSwitch />
          <a className="r-hdr-ig" href="https://www.instagram.com/tribecalisboa/" target="_blank" rel="noopener noreferrer" aria-label="Instagram"><IconInstagram size={20} /></a>
          <a className="r-hdr-ig" href="https://www.facebook.com/tribecalisboa" target="_blank" rel="noopener noreferrer" aria-label="Facebook"><SiteFbIcon size={20} /></a>
        </div>
        <img className="r-hdr-sic" src={R('uploads/sic_corner.png')} alt="Powered by SIC" />
      </div>
    </header>
  );
}

function SiteMenuDrawer({ open, onClose }) {
  const lang = React.useContext(LangContext);
  return (
    <div className={`r-menu ${open ? 'is-open' : ''}`}>
      <div className="r-menu-scrim" onClick={onClose}></div>
      <div className="r-menu-panel">
        <div className="r-menu-top">
          <Logo width={110} />
          <button className="r-menu-x" onClick={onClose} aria-label={tt(lang, 'Close', 'Fechar')}>✕</button>
        </div>
        <div className="r-menu-links">
          {navItems(lang).map((n, i) => n.scroll
            ? <a className="r-menu-link" key={i} href={n.href} onClick={(e) => handleScrollNav(e, n.scroll, onClose)}>{n.label}</a>
            : n.href
            ? <a className={`r-menu-link ${isActiveItem(n) ? 'is-active' : ''}`} key={i} href={n.href} onClick={onClose}>{n.label}</a>
            : <a className="r-menu-link" key={i} href="#" onClick={(e) => { e.preventDefault(); onClose(); }}>{n.label}</a>)}
        </div>
        <div className="r-menu-foot">
          <SiteLangSwitch />
          <a className="r-menu-ig" href="https://www.instagram.com/tribecalisboa/" target="_blank" rel="noopener noreferrer" aria-label="Instagram"><IconInstagram size={24} /> <span>Instagram</span></a>
          <a className="r-menu-ig" href="https://www.facebook.com/tribecalisboa" target="_blank" rel="noopener noreferrer" aria-label="Facebook"><SiteFbIcon size={24} /> <span>Facebook</span></a>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { SiteLangSwitch, SiteHeader, SiteMenuDrawer });