// Main app — routing + login gate + Tweaks
const { useState: useStateApp, useEffect: useEffectApp } = React;

function App() {
  const [unlocked, setUnlocked] = useStateApp(() => {
    try {return localStorage.getItem('be-unlocked') === '1';} catch (e) {return false;}
  });
  const [screen, setScreen] = useStateApp('home');
  const [history, setHistory] = useStateApp([]);

  const go = (s) => {
    setHistory((h) => [...h, screen]);
    setScreen(s);
    requestAnimationFrame(() => window.scrollTo(0, 0));
  };
  const back = () => {
    setHistory((h) => {
      const last = h[h.length - 1] || 'home';
      setScreen(last);
      requestAnimationFrame(() => window.scrollTo(0, 0));
      return h.slice(0, -1);
    });
  };

  const unlock = () => {
    setUnlocked(true);
    try {localStorage.setItem('be-unlocked', '1');} catch (e) {}
  };

  /* Lock screen */
  if (!unlocked) {
    return (
      <div className="app-wrap">
        <div className="app">
          <Login onUnlock={unlock} />
        </div>
      </div>);

  }

  /* Routed screen */
  let view = null;
  if (screen === 'home') view = <Home go={go} openModal={(m) => {
    if (m === 'directions-nikah' || m === 'directions-dugun') go('directions');
  }} />;else
  if (screen === 'directions') view = <Directions onBack={back} />;else
  if (screen === 'upload') view = <Upload onBack={back} />;else
  if (screen === 'tables') view = <Tables onBack={back} />;else
  if (screen === 'pinar') view = <PinarPhotos onBack={back} />;else
  if (screen === 'guest-photos') view = <GuestPhotos onBack={back} />;else
  if (screen === 'games') view = <Games onBack={back} />;else
  if (screen === 'quiz') view = <Quiz onBack={back} />;else
  if (screen === 'dj') view = <Dj onBack={back} />;else
  view = <Home go={go} openModal={() => {}} />;

  return (
    <div className="app-wrap" style={{ fontFamily: "\"DM Sans\"" }}>
      <div className="app">
        <div key={screen} style={{ animation: 'slideIn 0.35s ease' }}>
          {view}
        </div>
      </div>
      <style>{`
        @keyframes slideIn {
          0% { opacity: 0; transform: translateY(8px); }
          100% { opacity: 1; transform: translateY(0); }
        }
      `}</style>
    </div>);

}

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