/* Shared components — Header, Footer, Toast, etc. */

function Header({ onNav, current }) {
  const { t, lang, setLang } = useI18n();
  return (
    <header className="site-header">
      <div className="container">
        <div className="brand" onClick={() => onNav("top")}>
          <div className="brand__mark">B</div>
          <span className="brand__name">BANNR</span>
          <span className="brand__beta">BETA</span>
        </div>
        <nav className="header-nav">
          {current === "top" && (
            <React.Fragment>
              <a href="#features">{t("nav_features")}</a>
              <a href="#how">{t("nav_how")}</a>
            </React.Fragment>
          )}
          <div className="lang-toggle" role="group" aria-label="Language">
            <button data-active={lang === "ja"} onClick={() => setLang("ja")}>JA</button>
            <button data-active={lang === "en"} onClick={() => setLang("en")}>EN</button>
          </div>
          {current !== "hearing" && current !== "result" && (
            <button className="btn btn--primary" style={{ height: 38, marginLeft: 6 }} onClick={() => onNav("hearing")}>
              {t("nav_start")}
              <ArrowRight size={14} />
            </button>
          )}
        </nav>
      </div>
    </header>
  );
}

function Footer() {
  const { t } = useI18n();
  return (
    <footer className="site-footer">
      <div className="container">
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <div className="brand">
            <div className="brand__mark">B</div>
            <span className="brand__name">BANNR</span>
          </div>
        </div>
        <div>{t("footer_copy")}</div>
        <div className="dim-2">{t("footer_links")}</div>
      </div>
    </footer>
  );
}

function Toast({ message, onDone }) {
  React.useEffect(() => {
    const id = setTimeout(onDone, 2400);
    return () => clearTimeout(id);
  }, [message, onDone]);
  if (!message) return null;
  return (
    <div className="toast">
      <Check size={16} />
      {message}
    </div>
  );
}

Object.assign(window, { Header, Footer, Toast });