// ============================================================
// Tribeca Lisboa — NEWS ARTICLE app (responsive, bilingual)
// Uses shared SiteHeader / SiteMenuDrawer + global lang.
// ============================================================
const { useState: useStateNA, useRef: useRefNA } = React;

function NaToast({ msg, icon, show }) {
  return <div className={`ed-toast ${show ? 'show' : ''}`}>{icon && <EIcon name={icon} />}{msg}</div>;
}

function NewsArticleInner() {
  const lang = React.useContext(LangContext);
  const rootRef = useRefNA(null);
  const [menu, setMenu] = useStateNA(false);
  const [toast, setToast] = useStateNA(null);
  const toastTimer = useRefNA(null);

  useReveal(rootRef);

  const flashToast = (msg, icon) => {
    setToast({ msg, icon });
    clearTimeout(toastTimer.current);
    toastTimer.current = setTimeout(() => setToast(null), 2200);
  };

  return (
    <div className="na" ref={rootRef}>
      <SiteHeader onMenu={() => setMenu(true)} />
      <NewsHero />
      <NewsBody />
      <NewsRelatedEvents />
      <NewsRelatedSpeakers />
      <div style={{ height: 80 }}></div>
      <RFooter />

      <NaToast msg={toast ? toast.msg : ''} icon={toast ? toast.icon : null} show={!!toast} />
      <SiteMenuDrawer open={menu} onClose={() => setMenu(false)} />
    </div>
  );
}

function NewsArticle() {
  const [lang] = useLang();
  return (
    <LangContext.Provider value={lang}>
      <NewsArticleInner />
    </LangContext.Provider>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<NewsArticle />);