// ============================================================
// Tribeca Lisboa — COMING SOON (bilingual placeholder)
// One template for the not-yet-built routes (?id=festival|mtf|
// program|pillars). Reuses SiteHeader + RFooter. Minimal, centred.
// ============================================================
const SOON_LABELS = {
  festival: { en: 'Festival', pt: 'Festival', fixed: false },
  mtf:      { en: 'More than a festival', pt: 'More than a festival', fixed: true },
  program:  { en: 'Full Program', pt: 'Programa completo', fixed: false },
  pillars:  { en: 'Pillars', pt: 'Pilares', fixed: false },
};

function ComingSoonInner() {
  const lang = React.useContext(LangContext);
  const [menu, setMenu] = React.useState(false);
  const key = getParam('id');
  const route = SOON_LABELS[key];
  const routeLabel = route ? (route.fixed ? route.en : tt(lang, route.en, route.pt)) : null;
  return (
    <div className="cs-page">
      <SiteHeader onMenu={() => setMenu(true)} />
      <main className="cs-main">
        <div className="r-wrap cs-inner">
          {routeLabel && <div className="cs-eyebrow">{routeLabel}</div>}
          <h1 className="cs-title">{tt(lang, 'Coming soon', 'Em breve')}</h1>
          <p className="cs-sub">{tt(lang, 'This section is currently under development.', 'Esta secção está atualmente em desenvolvimento.')}</p>
          <div className="cs-cta">
            <a className="cs-back" href={urlFor('home')}>{tt(lang, 'Back to homepage', 'Voltar à página inicial')} ↗</a>
          </div>
        </div>
      </main>
      <RFooter />
      <SiteMenuDrawer open={menu} onClose={() => setMenu(false)} />
    </div>
  );
}

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

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