// Main app — wires the iOS device frame to the screen router.

const { useState: useStateA, useRef: useRefA, useEffect: useEffectA } = React;

const SCREENS = {
  overview:   ScreenOverview,
  timeline:   ScreenTimeline,
  provenance: ScreenProvenance,
  value:      ScreenValue,
  service:    ScreenService,
  documents:  ScreenVault,
};

function ProtoApp() {
  const [section, setSection] = useStateA('overview');
  const scrollRef = useRefA(null);

  // Reset scroll to top on screen change.
  useEffectA(() => {
    if (scrollRef.current) scrollRef.current.scrollTop = 0;
  }, [section]);

  const Active = SCREENS[section];

  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      minHeight: '100vh', width: '100%',
      background: '#0a0a0b',
    }}>
      <IOSDevice dark width={402} height={874}>
        <div style={{
          height: '100%',
          display: 'flex', flexDirection: 'column',
          background: P.ink,
        }}>
          {/* Spacer for the iOS status bar (status bar is absolute) */}
          <div style={{ height: 54, flex: '0 0 auto' }} />

          {/* Vehicle context header */}
          <ProtoHeader vehicle={VEHICLE} />

          {/* Section tab strip */}
          <ProtoSectionTabs active={section} onChange={setSection} />

          {/* Scrollable body */}
          <div ref={scrollRef} className="proto-scroll" style={{
            flex: 1, overflow: 'auto', background: P.ink,
          }} data-screen-label={`${SECTIONS.findIndex(s => s.id === section) + 1}-${section}`}>
            <Active key={section} />
          </div>

          {/* App-level bottom nav */}
          <ProtoBottomNav />

          {/* Spacer for the iOS home indicator */}
          <div style={{ height: 28, flex: '0 0 auto', background: P.ink }} />
        </div>
      </IOSDevice>
    </div>
  );
}

const protoRoot = ReactDOM.createRoot(document.getElementById('root'));
protoRoot.render(<ProtoApp />);