/* Main App: header, mobile menu, sticky, footer glue, scroll reveal */

const { useState, useEffect, useRef, useCallback } = React;

function Header({ t, lang, setLang, openMenu, onCallback }){
  return (
    <header className="topbar">
      <div className="container topbar-inner">
        <a className="brand" href="#home" data-screen-label="header">
          <img src="assets/logo-full.png" alt="ClickBi3" className="full"/>
          <img src="assets/logo-mini.png" alt="ClickBi3" className="mini"/>
        </a>
        <nav className="nav">
          <a href="#problems">{t.nav.problems}</a>
          <a href="#features">{t.nav.features}</a>
          <a href="#hardware">{t.nav.hardware}</a>
          <a href="#impact">{t.nav.impact}</a>
          <a href="#callback">{t.nav.callback}</a>
        </nav>
        <div className="spacer"></div>
        <div className="header-cta">
          <div className="lang" role="group" aria-label={t.misc.langSwitchAria}>
            <button className={lang==='fr'?'on':''} onClick={()=>setLang('fr')}>FR</button>
            <button className={lang==='ar'?'on':''} onClick={()=>setLang('ar')}>العربية</button>
          </div>
          <button className="btn btn-primary" onClick={onCallback}>{I.phone()} {t.cta.callback}</button>
        </div>
        <button className="hamb" onClick={openMenu} aria-label={t.misc.menuAria}><span></span></button>
      </div>
    </header>
  );
}

function MobileMenu({ t, lang, setLang, onClose, onCallback, onWA }){
  return (
    <div className="mobile-menu" onClick={onClose}>
      <div className="sheet" onClick={e=>e.stopPropagation()}>
        <button className="close" onClick={onClose} aria-label="Close">{I.x()}</button>
        <a href="#problems" onClick={onClose}>{t.nav.problems}</a>
        <a href="#features" onClick={onClose}>{t.nav.features}</a>
        <a href="#hardware" onClick={onClose}>{t.nav.hardware}</a>
        <a href="#impact" onClick={onClose}>{t.nav.impact}</a>
        <a href="#callback" onClick={onClose}>{t.nav.callback}</a>
        <div style={{marginTop:18}}>
          <div className="lang" role="group" style={{display:'inline-flex'}}>
            <button className={lang==='fr'?'on':''} onClick={()=>setLang('fr')}>FR</button>
            <button className={lang==='ar'?'on':''} onClick={()=>setLang('ar')}>العربية</button>
          </div>
        </div>
        <div style={{marginTop:18, display:'grid', gap:10}}>
          <button className="btn btn-primary btn-block" onClick={()=>{onClose();onCallback();}}>{I.phone()} {t.cta.callbackLong}</button>
          <button className="btn btn-wa btn-block" onClick={()=>{onClose();onWA();}}>{I.whatsapp()} {t.cta.whatsappLong}</button>
        </div>
      </div>
    </div>
  );
}

function StickyBar({ t, onCallback, onWA }){
  return (
    <div className="sticky-bar">
      <button className="btn btn-wa btn-icon" onClick={onWA} aria-label="WhatsApp">{I.whatsapp()}</button>
      <button className="btn btn-primary" onClick={onCallback}>{I.phone()} {t.cta.callback}</button>
    </div>
  );
}

function WaFloating({ onWA }){
  return (
    <button className="wa-floating" onClick={onWA} aria-label="WhatsApp">
      {I.whatsapp()}
    </button>
  );
}

function useReveal(){
  useEffect(()=>{
    // Hero is above the fold — reveal immediately so the page never looks blank.
    const showAll = () => document.querySelectorAll('.reveal,.reveal-stagger').forEach(el=>el.classList.add('in'));
    if(typeof IntersectionObserver === 'undefined' || window.matchMedia('(prefers-reduced-motion: reduce)').matches){
      showAll(); return;
    }
    const io = new IntersectionObserver(entries=>{
      entries.forEach(en=>{
        if(en.isIntersecting){
          en.target.classList.add('in');
          io.unobserve(en.target);
        }
      });
    }, { rootMargin: '0px 0px -6% 0px', threshold: 0.04 });
    const observeAll = () => document.querySelectorAll('.reveal:not(.in),.reveal-stagger:not(.in)').forEach(el=>io.observe(el));
    observeAll();
    // Always reveal anything currently within viewport on initial paint
    requestAnimationFrame(()=>{
      document.querySelectorAll('.reveal:not(.in),.reveal-stagger:not(.in)').forEach(el=>{
        const r = el.getBoundingClientRect();
        if(r.top < (window.innerHeight*0.96)) el.classList.add('in');
      });
    });
    const mo = new MutationObserver(observeAll);
    mo.observe(document.body, {childList:true, subtree:true});
    // Safety net after 2.5s
    const timer = setTimeout(showAll, 2500);
    return ()=>{ io.disconnect(); mo.disconnect(); clearTimeout(timer); };
  }, []);
}

function App(){
  const [lang, setLang] = useState(()=>{ try { return localStorage.getItem('cb3_lang')||'fr'; } catch { return 'fr'; }});
  const [menu, setMenu] = useState(false);
  const t = CONTENT[lang];

  useEffect(()=>{
    document.documentElement.lang = lang;
    document.documentElement.dir = t.dir;
    document.body.classList.toggle('body-rtl', t.dir === 'rtl');
    try { localStorage.setItem('cb3_lang', lang); } catch {}
    document.title = lang==='fr'
      ? 'ClickBi3 — Le logiciel pour magasin de pièces auto au Maroc'
      : 'ClickBi3 — برنامج لمحل قطع غيار السيارات فالمغرب';
  }, [lang]);

  useReveal();

  const openCallback = useCallback(()=>{
    const el = document.getElementById('callback');
    if(el) el.scrollIntoView({behavior:'smooth', block:'start'});
  },[]);

  const openWA = useCallback(()=>{
    const msg = lang==='fr'
      ? 'Bonjour, je suis intéressé par ClickBi3 pour mon magasin.'
      : 'سلام، بغيت معلومات على ClickBi3 للمحل ديالي.';
    window.open('https://wa.me/212662777525?text=' + encodeURIComponent(msg), '_blank');
  }, [lang]);

  return (
    <React.Fragment>
      <Header t={t} lang={lang} setLang={setLang} openMenu={()=>setMenu(true)} onCallback={openCallback}/>
      {menu && <MobileMenu t={t} lang={lang} setLang={setLang} onClose={()=>setMenu(false)} onCallback={openCallback} onWA={openWA}/>}
      <main>
        <Hero t={t} lang={lang} onCallback={openCallback} onWA={openWA}/>
        <Problems t={t}/>
        <AvantApres t={t}/>
        <Features t={t}/>
        <Scenario t={t}/>
        <Hardware t={t} onCallback={openCallback}/>
        <AutoFocus t={t} lang={lang} onCallback={openCallback} onWA={openWA}/>
        <Vision t={t}/>
        <Impact t={t} onCallback={openCallback}/>
        <Trust t={t}/>
        <CallbackSection t={t} lang={lang} onWA={openWA}/>
      </main>
      <Footer t={t} lang={lang}/>
      <WaFloating onWA={openWA}/>
      <StickyBar t={t} onCallback={openCallback} onWA={openWA}/>
    </React.Fragment>
  );
}

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