// ─────────────────────────────────────────────────────────────────────
// INDIVIDUAL CONTRIBUTOR EXPERIENCE — app root.
//
// Same shape as the Collection Manager app: the Collection is the landing
// page, and the hamburger opens Operations — the menu of actions a
// contributor may perform. No separate home/dashboard, no standalone
// Notes; notes are captured in context inside each record's flow.
// ─────────────────────────────────────────────────────────────────────

function ContribApp() {
  const isMobile = useIsMobileViewport();
  const vehicles = [VEHICLE, VEHICLE_FERRARI, VEHICLE_MERCEDES];

  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: isMobile ? '100dvh' : '100vh', width: '100%', background: '#0a0a0b', position: 'relative' }}>
      <IOSDevice dark width={402} height={874}>
        <div id="contrib-stage" style={{ height: '100%', display: 'flex', flexDirection: 'column', background: P.ink, position: 'relative' }}>
          {/* iOS status bar spacer on desktop mockup; real safe-area inset on a phone */}
          <div style={{ height: isMobile ? 'env(safe-area-inset-top)' : 54, flex: '0 0 auto' }} />
          <ContribCollection vehicles={vehicles} />
          {/* Home indicator spacer on desktop mockup; real safe-area inset on a phone */}
          <div style={{ height: isMobile ? 'env(safe-area-inset-bottom)' : 28, flex: '0 0 auto', background: P.ink }} />
        </div>
      </IOSDevice>
    </div>
  );
}

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