/* Footer + App glue */
const { useState: useStateA } = React;

function Footer() {
  return (
    <footer className="footer" data-screen-label="Footer">
      <div className="footer-grid">
        <div className="footer-col footer-brand">
          <div className="footer-logo">
            <span className="fl-mark">M.A.</span>
            <span className="fl-rest">Apartments</span>
            <span className="fl-dot"></span>
          </div>
          <p className="footer-tag">
            Подготовленные апартаменты в&nbsp;Алматы.<br />
            Посуточно и&nbsp;долгосрочно.
          </p>
          <div className="footer-langs">
            <span className="on">RU</span><span>·</span><span>EN</span><span>·</span><span>KZ</span>
          </div>
        </div>

        <div className="footer-col">
          <h5>Навигация</h5>
          <a href="#hero">Главная</a>
          <a href="#catalog">Каталог</a>
          <a href="#about">О нас</a>
        </div>

        <div className="footer-col">
          <h5>Связь</h5>
          <a href="tel:+77479399301">+7 747 939 93 01</a>
          <a href="tel:+77076564507">+7 707 656 45 07</a>
          <a href="tel:+77052769801">+7 705 276 98 01</a>
          <div className="footer-socials">
            <a href="#" title="WhatsApp">WhatsApp</a>
            <a href="#" title="Instagram">Instagram</a>
            <a href="#" title="2GIS">2GIS</a>
            <a href="#" title="Airbnb">Airbnb</a>
          </div>
        </div>

        <div className="footer-col">
          <h5>Условия</h5>
          <p className="footer-fine">
            Заезд после 14:00 · Выезд до 12:00.<br />
            Депозит 10&nbsp;000&nbsp;₸ возвращается в&nbsp;день выезда.<br />
            При отмене предоплата не&nbsp;возвращается.
          </p>
        </div>
      </div>

      <div className="footer-bottom">
        <span>© 2019 — 2026 M.A. Apartments · Алматы</span>
        <span>ИП «M.A. Apartments» · БИН 000000000000</span>
      </div>
    </footer>
  );
}

function App() {
  const [openApt, setOpenApt] = useStateA(null);
  const [booking, setBooking] = useStateA(null);

  return (
    <>
      <Catalog onOpen={(apt) => setOpenApt(apt)} />
      <Footer />
      {openApt && (
        <ApartmentDetail
          apt={openApt}
          onClose={() => setOpenApt(null)}
          onBook={(b) => { setOpenApt(null); setBooking(b); }}
        />
      )}
      {booking && (
        <BookingFlow
          booking={booking}
          onClose={() => setBooking(null)}
        />
      )}
    </>
  );
}

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