/* global React, ReactDOM, WIINHeader, WIINFooter, HomePage, MissionPage, PillarsPage, GouvernancePage, GenericPage, ConfidentialitePage */
/* =============================================================================
 * WIIN Canada — MINIMAL public site (S151). Separate, frozen snapshot for the
 * temporary Azure Static Web Apps deploy so applications can cite a live URL.
 * EVERGREEN institutional pages only — Home / Mission / Piliers / Gouvernance /
 * Contact / Confidentialité. JCM, Carnet (blog) and rights-gated content are
 * EXCLUDED here (they live in the full SPA, which keeps evolving separately).
 * No dev tweaks panel; default brand styles inlined.
 * ===========================================================================*/
const { useState, useEffect } = React;

function applyMinimalStyles() {
  const root = document.documentElement;
  root.style.setProperty('--font-heading', `'Playfair Display', Georgia, serif`);
  root.style.setProperty('--font-body', `'Inter', system-ui, sans-serif`);
  root.style.setProperty('--accent', '#2E7D32');
  root.style.setProperty('--btn-radius', '999px');
  document.body.style.fontFamily = `var(--font-body)`;
}

// Routes the minimal site serves; anything else (jcm/blog/impact/dossier/…) redirects to contact.
const ALLOWED = new Set(['home', 'mission', 'pillars', 'gouvernance', 'contact', 'confidentialite']);

function App() {
  const [lang, setLang] = useState(() => localStorage.getItem('wiin-lang') || 'fr');
  const [route, setRoute] = useState('home');

  useEffect(() => { localStorage.setItem('wiin-lang', lang); document.documentElement.lang = lang; }, [lang]);
  useEffect(() => { applyMinimalStyles(); }, []);
  useEffect(() => { window.scrollTo({ top: 0, behavior: 'instant' }); }, [route]);

  const go = (r) => setRoute(ALLOWED.has(r) ? r : 'contact');

  let page;
  switch (route) {
    case 'mission': page = <MissionPage lang={lang} go={go} />; break;
    case 'pillars': page = <PillarsPage lang={lang} go={go} />; break;
    case 'gouvernance': page = <GouvernancePage lang={lang} go={go} />; break;
    case 'contact': page = <GenericPage lang={lang} go={go} route="contact" />; break;
    case 'confidentialite': page = <ConfidentialitePage lang={lang} go={go} />; break;
    default: page = <HomePage lang={lang} go={go} />;
  }

  return (
    <>
      <a href="#main" className="skip-link" style={{ position: 'absolute', left: -9999, top: 0 }}
        onFocus={(e) => { e.target.style.left = '8px'; e.target.style.top = '8px'; e.target.style.background = '#fff'; e.target.style.padding = '8px 12px'; e.target.style.borderRadius = '6px'; e.target.style.zIndex = 9999; }}
        onBlur={(e) => { e.target.style.left = '-9999px'; }}>
        {lang === 'fr' ? 'Aller au contenu principal' : 'Skip to main content'}
      </a>
      <WIINHeader lang={lang} setLang={setLang} route={route} go={go} />
      <div id="main">{page}</div>
      <WIINFooter lang={lang} go={go} />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(<App />);