// App — wires the Praigo screens into a click-through prototype inside the
// PhoneFrame. Auth → Discover ⇄ Profile, tap a card → Detail, FAB → Create.
function App() {
  const { useState } = React;
  const [authed, setAuthed] = useState(false);
  const [tab, setTab] = useState('discover');
  const [detailId, setDetailId] = useState(null);
  const [creating, setCreating] = useState(false);
  const [dark, setDark] = useState(false);
  const [going, setGoing] = useState({ s3: true });
  const [toast, setToast] = useState(null);

  const showToast = (msg) => { setToast(msg); setTimeout(() => setToast(null), 2200); };

  let screen, showNav = false;
  if (!authed) {
    screen = <AuthScreen onContinue={() => setAuthed(true)} />;
  } else if (creating) {
    screen = <CreateScreen onBack={() => setCreating(false)} onPublish={() => { setCreating(false); setTab('discover'); showToast('Social published — your card is live ✨'); }} />;
  } else if (detailId) {
    screen = <SocialDetailScreen id={detailId} onBack={() => setDetailId(null)} going={going} setGoing={setGoing} />;
  } else if (tab === 'discover') {
    showNav = true;
    screen = <DiscoverScreen onOpen={setDetailId} going={going} setGoing={setGoing} />;
  } else {
    showNav = true;
    screen = <ProfileScreen />;
  }

  return (
    <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24, gap: 40, background: '#EFE3D6', flexWrap: 'wrap' }}>
      <PhoneFrame
        nav={showNav} tab={tab}
        onTab={(t) => { setTab(t); setDetailId(null); setCreating(false); }}
        onHost={() => setCreating(true)}
        dark={dark} onToggleDark={authed ? () => setDark(d => !d) : null}>
        {screen}
        {toast && (
          <div style={{
            position: 'absolute', left: 16, right: 16, bottom: 96, padding: '12px 16px',
            background: 'var(--ink-1)', color: 'var(--bg)', borderRadius: 12, fontSize: 13, fontWeight: 600,
            textAlign: 'center', boxShadow: 'var(--shadow-lg)', zIndex: 20,
          }}>{toast}</div>
        )}
      </PhoneFrame>
    </div>
  );
}

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