/* ============================================================
   App root — intro loader, nav, assembly
   ============================================================ */

function Loader({ done }){
  const [exit,setExit]=useState(false);
  useEffect(()=>{
    const t1=setTimeout(()=>setExit(true), 1600);
    const t2=setTimeout(done, 2280);
    return ()=>{ clearTimeout(t1); clearTimeout(t2); };
  },[]);
  return (
    <div style={{
      position:'fixed', inset:0, zIndex:300, background:'oklch(0.155 0.012 50)',
      display:'flex', flexDirection:'column', justifyContent:'center', alignItems:'center',
      gap:'22px', opacity:exit?0:1, transition:'opacity .6s ease', pointerEvents:exit?'none':'auto'
    }}>
      <div style={{
        width:6, height:'120px', borderRadius:6, overflow:'hidden',
        background:'repeating-linear-gradient(180deg, var(--oxblood) 0 16px, var(--cream) 16px 32px, var(--brass) 32px 48px)',
        backgroundSize:'100% 64px', animation:'poleScroll 1.6s linear infinite'
      }}></div>
      <div style={{textAlign:'center'}}>
        <div className="kicker center" style={{justifyContent:'center', color:'var(--brass)', marginBottom:14}}>A Fairview Documentary</div>
        <div className="display" style={{color:'var(--cream)', fontSize:'40px', lineHeight:.95}}>
          The Barber Shop<br/>· Broadway.
        </div>
      </div>
    </div>
  );
}

function Nav(){
  const [scrolled,setScrolled]=useState(false);
  useEffect(()=>{
    const f=()=>setScrolled(window.scrollY>40);
    window.addEventListener('scroll', f, { passive:true }); f();
    return ()=>window.removeEventListener('scroll', f);
  },[]);
  return (
    <nav className={`nav ${scrolled?'scrolled':''}`}>
      <span className="nav-mark"><span className="pole-dot"></span>{SHOP.wordmark}</span>
      <a className="nav-book" href={SHOP.phoneHref}>{SHOP.phoneDisplay}</a>
    </nav>
  );
}

function App(){
  const [loading,setLoading]=useState(true);

  useEffect(()=>{
    clockAdvances().then(ok=>{
      if(!ok) document.documentElement.classList.add('no-anim');
    });
  },[]);

  return (
    <React.Fragment>
      {loading && <Loader done={()=>setLoading(false)} />}
      <Nav />
      <Hero />
      <Marquee />
      <Essay />
      <Ledger />
      <Barbers />
      <Gallery />
      <Reviews />
      <Visit />
      <Footer />
    </React.Fragment>
  );
}

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