const LOGO_SRC = "./event_logo.png";
const DREAMNEST_HOME_HREF = "/";

function TopBar() {
  const { lang, setLang, t } = useApp();
  const langs = [
    { k: "ko", l: "한국어", aria: "한국어로 보기" },
    { k: "en", l: "EN", aria: "Read in English" },
    { k: "lo", l: "ລາວ", aria: "ອ່ານເປັນພາສາລາວ" },
  ];
  return (
    <header className="topbar">
      <div className="topbar-inner">
        <a className="brand" href="#top" aria-label={t.brand.name}>
          <img className="brand-logo" src={LOGO_SRC} alt={t.hero.logoAlt} />
          <div>
            <div className="brand-name">{t.brand.name}</div>
            <div className="brand-sub">{t.brand.sub}</div>
          </div>
        </a>
        <div className="lang-switch" role="tablist" aria-label={t.a11y?.langSwitch || "Language"}>
          {langs.map(({ k, l, aria }) => (
            <button
              key={k}
              className={lang === k ? "is-active" : ""}
              onClick={() => setLang(k)}
              role="tab"
              aria-selected={lang === k}
              aria-label={aria}
            >{l}</button>
          ))}
        </div>
      </div>
    </header>
  );
}

function Footer() {
  const { t } = useApp();
  return (
    <footer>
      <div className="container footer-inner">
        <div className="footer-brand">
          <img src={LOGO_SRC} alt={t.hero.logoAlt} />
          <div>
            <div className="name">{t.brand.name}</div>
            <div className="sub">{t.brand.sub}</div>
          </div>
        </div>
        <div className="credit">{t.footer.credit}</div>
        <div className="footer-aside">
          <a className="footer-home" href={DREAMNEST_HOME_HREF}>
            {t.footer.homeCta}
          </a>
          <a
            href="https://n.news.naver.com/article/421/0008797636?sid=102"
            target="_blank"
            rel="noopener noreferrer"
          >
            {t.footer.article}
          </a>
          <div className="footer-orgs"><span>{t.footer.orgs}</span></div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { TopBar, Footer, EVENT_LOGO_SRC: LOGO_SRC });