/* global React, ReactDOM, HomeScreen, ListScreen, DetailScreen, BookScreen, ConfirmScreen */
// Langebaan Holiday Homes — pitch mockup. Real state-driven nav (no design canvas).

const { useState, useEffect } = React;

function App() {
  const [screen, setScreen] = useState('home');
  const [activeProp, setActiveProp] = useState('tideglass');
  const [fav, setFav] = useState(['tideglass', 'duneline']);

  const onFav = (id) =>
    setFav((f) => (f.includes(id) ? f.filter((x) => x !== id) : [...f, id]));

  const onNav = (target, propId) => {
    if (propId) setActiveProp(propId);
    if (target) setScreen(target);
    window.scrollTo({ top: 0, behavior: 'instant' });
  };

  // Scroll to top on screen change (instant feels like a real page nav)
  useEffect(() => { window.scrollTo(0, 0); }, [screen]);

  const props = { onNav, fav, onFav, propId: activeProp };

  return (
    <div className="den-regular">
      {screen === 'home'    && <HomeScreen    {...props} />}
      {screen === 'list'    && <ListScreen    {...props} />}
      {screen === 'detail'  && <DetailScreen  {...props} />}
      {screen === 'book'    && <BookScreen    {...props} />}
      {screen === 'confirm' && <ConfirmScreen {...props} />}

      {/* Pitch ribbon — visible reminder this is a proposal mockup, not live */}
      <div style={{
        position: 'fixed', left: 16, bottom: 16, zIndex: 100,
        background: 'rgba(10,37,64,0.92)', color: '#fbfaf6',
        padding: '10px 14px', borderRadius: 999,
        fontSize: 12, fontWeight: 600, letterSpacing: '0.04em',
        boxShadow: '0 18px 40px -16px rgba(10,37,64,0.6)',
        backdropFilter: 'blur(8px)', fontFamily: 'Manrope, system-ui, sans-serif',
      }}>
        PROPOSAL MOCKUP · prepared for Langebaan Holiday Homes
      </div>
    </div>
  );
}

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