// homepage/app.jsx — homepage composition w/ desktop + mobile toggle
const { useState: uSP, useEffect: uEP, useRef: uRP } = React;

function DesktopHomePage() {
  const [scrolled, setScrolled] = uSP(false);
  const ref = uRP(null);
  uEP(() => {
    const el = ref.current;
    if (!el) return;
    const h = () => setScrolled(el.scrollTop > 80);
    el.addEventListener('scroll', h, { passive: true });
    return () => el.removeEventListener('scroll', h);
  }, []);
  return (
    <div ref={ref} style={{ height: '100%', overflowY: 'auto', background: 'var(--paper)' }}>
      <HomeHeader scrolled={scrolled} current="home" />
      <HomeHero />
      <HomeUSP />
      <HomeExplore />
      <HomeRecent />
      <HomeEditorialRail />
      <HomeEmail />
      <HomeFooter />
    </div>
  );
}

function MobileShell({ children }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'center', padding: '28px 20px 60px', minHeight: '100vh' }}>
      <div style={{
        width: 402, height: 874, borderRadius: 48, overflow: 'hidden',
        position: 'relative', background: '#000',
        boxShadow: '0 40px 80px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,0,0,0.2)',
      }}>
        <div style={{ position: 'absolute', top: 11, left: '50%', transform: 'translateX(-50%)', width: 126, height: 37, borderRadius: 24, background: '#000', zIndex: 60 }} />
        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 50 }}><IOSStatusBar dark={false} /></div>
        <div style={{ height: '100%', paddingTop: 60 }}>{children}</div>
        <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, zIndex: 70, height: 34, display: 'flex', justifyContent: 'center', alignItems: 'flex-end', paddingBottom: 8, pointerEvents: 'none' }}>
          <div style={{ width: 139, height: 5, borderRadius: 100, background: 'rgba(0,0,0,0.25)' }} />
        </div>
      </div>
    </div>
  );
}

function ViewToggle({ view, setView }) {
  return (
    <div style={{
      position: 'fixed', bottom: 16, right: 16, zIndex: 100,
      display: 'flex', background: 'var(--paper)', border: '1px solid var(--ink)',
      boxShadow: '0 4px 16px rgba(0,0,0,0.18)',
    }}>
      {['desktop', 'mobile'].map(v => (
        <button key={v} onClick={() => setView(v)} className="mono" style={{
          background: view === v ? 'var(--ink)' : 'transparent',
          color: view === v ? 'var(--paper)' : 'var(--ink)',
          border: 'none', padding: '8px 14px', fontSize: 10,
          letterSpacing: '0.1em', textTransform: 'uppercase', cursor: 'pointer',
        }}>{v}</button>
      ))}
    </div>
  );
}

function HomePage() {
  const [view, setView] = uSP(() => {
    try { return localStorage.getItem('rehaus-home-view') || 'desktop'; } catch (e) { return 'desktop'; }
  });
  uEP(() => { try { localStorage.setItem('rehaus-home-view', view); } catch (e) {} }, [view]);
  return (
    <>
      <ViewToggle view={view} setView={setView} />
      {view === 'desktop'
        ? <DesktopHomePage />
        : <MobileShell><HomeMobilePage /></MobileShell>}
    </>
  );
}

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