/* tenroin-top/app.jsx — assembles the magazine top page + scroll state + mount */

function App(){
  const [solid,setSolid] = useState(false);
  const [menu,setMenu] = useState(false);
  const [cta,setCta] = useState(false);

  useReveal();
  useParallax();

  useEffect(()=>{
    const onScroll = ()=>{
      const y = window.scrollY;
      setSolid(y > window.innerHeight*0.72);
      setCta(y > window.innerHeight*1.1);
    };
    onScroll();
    addEventListener('scroll',onScroll,{passive:true});
    return ()=>removeEventListener('scroll',onScroll);
  },[]);

  // lock body scroll when mobile menu open
  useEffect(()=>{ document.body.style.overflow = menu?'hidden':''; },[menu]);

  // Cover entrance: let it play once, then drop the flag so the visible
  // base state is what persists (never leaves content stuck at opacity:0).
  useEffect(()=>{
    const c=document.querySelector('.cover.is-intro');
    if(!c) return;
    const t=setTimeout(()=>c.classList.remove('is-intro'),2600);
    return ()=>clearTimeout(t);
  },[]);

  return (
    <div className="app-root ti">
      <Header solid={solid} onMenu={()=>setMenu(true)}/>
      <MobileNav open={menu} onClose={()=>setMenu(false)}/>

      <main>
        <Cover/>
        <New2027/>   {/* 2026/9/20 代表「新講座をヒーローの下へ・講義を前面に。そのあとに目次」。13周年の札は New2027 の中 */}
        <Seminars/>   {/* 2026/9/20 代表「講座（時間割込み）を新講座の下・目次の上へ」 */}
        <Contents/>
        <Articles/>
        <Series/>
        <Gallery/>
        <Stores/>   {/* 2026/9/20 代表「店舗は楽市の下へ」 */}
        <Column/>
        <Colophon/>
      </main>

      <Footer/>
      <MobileCTA show={cta}/>
    </div>
  );
}

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