/* REVO JURIS — App shell wiring all sections together (language provider) */

function Toast({ show, onClose, lang }) {
  const cjk = lang === 'ZH' ? ' cjk' : '';
  React.useEffect(() => {
    if (show) { const t = setTimeout(onClose, 4200); return () => clearTimeout(t); }
  }, [show]);
  const title = lang === 'ZH' ? '24小時刑事緊急熱線' : '24h Criminal Hotline';
  const body = lang === 'ZH' ? '+852 5715 5628 — 正為您接通當值律師' : '+852 5715 5628 — connecting you to a duty solicitor';
  return (
    <div className={cjk} style={{
      position: 'fixed', left: '50%', bottom: show ? 90 : 40, transform: 'translateX(-50%)',
      zIndex: 90, background: 'var(--navy-950)', color: '#F4F1E9', borderRadius: 14,
      padding: '16px 22px', display: 'flex', alignItems: 'center', gap: 14,
      boxShadow: 'var(--shadow-xl)', border: '1px solid rgba(244,241,233,.14)',
      opacity: show ? 1 : 0, pointerEvents: show ? 'auto' : 'none',
      transition: 'opacity .3s, bottom .3s', maxWidth: 'calc(100vw - 32px)',
    }}>
      <span style={{ width: 38, height: 38, borderRadius: 10, background: 'rgba(191,61,56,.18)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}>
        <Icon name="phone-call" size={20} style={{ color: 'var(--urgent-500)' }} />
      </span>
      <div style={{ fontSize: 14, lineHeight: 1.45 }}>
        <b style={{ display: 'block' }}>{title}</b>
        <span style={{ color: 'rgba(244,241,233,.7)' }} className="tnum">{body}</span>
      </div>
    </div>
  );
}

function go(hash) {
  if (location.hash === hash) { history.replaceState(null, '', ' '); }
  location.hash = hash;
}

function App() {
  const [matter, setMatter] = React.useState(() => {
    try {
      const m = localStorage.getItem('revojuris_matter');
      if (m) { localStorage.removeItem('revojuris_matter'); return m; }
    } catch (e) {}
    return 'criminal';
  });
  const [lang, setLang] = React.useState(() => {
    const saved = localStorage.getItem('revojuris_lang');
    if (saved) return saved;
    return (navigator.language || '').toLowerCase().startsWith('zh') ? 'ZH' : 'EN';
  });
  const [toast, setToast] = React.useState(false);

  const onEnquire = (m) => { if (m) setMatter(m); go('#contact'); };
  const onHotline = () => { setMatter('criminal'); setToast(true); };
  const onFees = () => go('#fees');
  const onSelectArea = (id) => { setMatter(id); go('#contact'); };

  React.useEffect(() => {
    localStorage.setItem('revojuris_lang', lang);
    document.documentElement.lang = lang === 'ZH' ? 'zh-HK' : 'en';
    document.body.dataset.lang = lang;
  }, [lang]);

  return (
    <LangCtx.Provider value={lang}>
      <Header onEnquire={onEnquire} lang={lang} setLang={setLang} />
      <Hero onEnquire={onEnquire} onHotline={onHotline} onFees={onFees} />
      <Stats />
      <IntroSplit onEnquire={onEnquire} />
      <PracticeAreas onSelect={onSelectArea} onFees={onFees} />
      <RightsBand onHotline={onHotline} />
      <CivilLetters onEnquire={onEnquire} />
      <FeeGuide onEnquire={onEnquire} onHotline={onHotline} />
      <FeatureSplit onEnquire={onEnquire} />
      <FAQ />
      <Testimonials />
      <GalleryStrip />
      <Emergency onHotline={onHotline} />
      <Contact matter={matter} setMatter={setMatter} />
      <Footer />
      <MobileAction onEnquire={onEnquire} onHotline={onHotline} />
      <FloatingWhatsApp />
      <Toast show={toast} onClose={() => setToast(false)} lang={lang} />
    </LangCtx.Provider>
  );
}

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