/* ============================================================
   IJMA AI — app shell + hash router
   ============================================================ */
function SiteHeader({ route, onNav }) {
  const onRuling = route.startsWith('#/ruling');
  return (
    <header className="site-head">
      <div style={{ maxWidth: 'var(--maxw)', margin: '0 auto', padding: '.7rem clamp(1.2rem,4vw,3rem)', display: 'flex', alignItems: 'center', gap: '1.5rem' }}>
        <div className="brandmark" onClick={() => onNav('#/')}>
          <span className="glyph"><Brandmark size={30} /></span>
          <span className="name">Ijma<span className="ar"><Ar>إجماع</Ar></span></span>
        </div>
        <div style={{ flex: 1, maxWidth: '32rem', display: route === '#/' ? 'none' : 'block' }}>
          <SearchBar onNav={onNav} />
        </div>
        <nav style={{ display: 'flex', gap: '.3rem', marginLeft: 'auto', alignItems: 'center' }}>
          <button className={'tab' + (route === '#/browse' ? ' active' : '')} onClick={() => onNav('#/browse')}>Browse</button>
          <button className={'tab' + (route.startsWith('#/concepts') ? ' active' : '')} onClick={() => onNav('#/concepts')}>Concepts</button>
          <button className={'tab' + (route === '#/texts' ? ' active' : '')} onClick={() => onNav('#/texts')}>Texts</button>
          <button className={'tab' + (route === '#/researchers' ? ' active' : '')} onClick={() => onNav('#/researchers')}>Researchers</button>
          <a className="tab" href="#/ruling/slavery" onClick={e => { e.preventDefault(); onNav('#/ruling/slavery'); }}>Method</a>
        </nav>
      </div>
    </header>
  );
}

function App() {
  const [route, setRoute] = useState(window.location.hash || '#/');
  useEffect(() => {
    const h = () => setRoute(window.location.hash || '#/');
    window.addEventListener('hashchange', h);
    return () => window.removeEventListener('hashchange', h);
  }, []);
  function onNav(to) {
    if (window.location.hash === to) setRoute(to);
    else window.location.hash = to;
    window.scrollTo(0, 0);
  }

  let page;
  if (route.startsWith('#/ruling/')) {
    const slug = route.split('/')[2] || 'slavery';
    page = <RulingPage slug={slug} onNav={onNav} />;
  } else if (route === '#/browse') {
    page = <BrowsePage onNav={onNav} />;
  } else if (route.startsWith('#/concepts/')) {
    page = <ConceptPage id={route.split('/')[2]} onNav={onNav} />;
  } else if (route === '#/concepts') {
    page = <ConceptsPage onNav={onNav} />;
  } else if (route === '#/texts') {
    page = <TextsPage onNav={onNav} />;
  } else if (route === '#/ijma/faq') {
    page = <MundhirFaqPage onNav={onNav} />;
  } else if (route === '#/ijma') {
    page = <MundhirPage onNav={onNav} />;
  } else if (route === '#/researchers') {
    page = <ResearchersPage onNav={onNav} />;
  } else {
    page = <LandingPage onNav={onNav} />;
  }

  return (
    <div>
      <SiteHeader route={route} onNav={onNav} />
      {page}
      <footer style={{ borderTop: '1px solid var(--rule)', marginTop: '2rem' }}>
        <div style={{ maxWidth: 'var(--maxw)', margin: '0 auto', padding: '2rem clamp(1.2rem,4vw,3rem)', display: 'flex', gap: '1.5rem', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '.7em', color: 'var(--ink-3)' }}>
            <Brandmark size={22} />
            <span style={{ fontFamily: 'var(--mono)', fontSize: '12px', letterSpacing: '.04em' }}>Ijma — a research instrument for consensus & dissent</span>
          </div>
          <div style={{ fontFamily: 'var(--mono)', fontSize: '11px', color: 'var(--ink-4)', letterSpacing: '.03em', maxWidth: '46ch', textAlign: 'right' }}>
            Documents disagreement neutrally · every position traced to source · scholarship shown is placeholder pending verification
          </div>
        </div>
      </footer>
    </div>
  );
}

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