/* QuadrAngle — main App */
/* global React, ReactDOM */

const { useState, useEffect, useCallback } = React;

function App() {
  const [lang, setLang] = useState('en');
  const [modal, setModal] = useState(null); // { product, mode }

  useEffect(() => {
    document.documentElement.lang = lang;
    document.body.dir = lang === 'ar' ? 'rtl' : 'ltr';
  }, [lang]);

  const openProduct = (p) => setModal({ product: p, mode: 'product' });
  const openEnquire = (p, mode = 'enquire') => setModal({ product: p, mode });
  const closeModal = () => setModal(null);

  const scrollTo = useCallback((id) => {
    if (id === 'top') return window.scrollTo({ top: 0, behavior: 'smooth' });
    const el = document.getElementById(id);
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 72;
      window.scrollTo({ top, behavior: 'smooth' });
    }
  }, []);

  return (
    <>
      <Header lang={lang} setLang={setLang} openEnquire={openEnquire} scrollTo={scrollTo}/>
      <Hero lang={lang} openEnquire={openEnquire} scrollTo={scrollTo}/>
      <Marquee lang={lang}/>
      <Collections lang={lang} openProduct={openProduct}/>
      <Spotlight lang={lang}/>
      <Story lang={lang}/>
      <Bespoke lang={lang} openEnquire={openEnquire}/>
      <Projects lang={lang}/>
      <Showroom lang={lang} openEnquire={openEnquire}/>
      <Heritage lang={lang}/>
      <Footer lang={lang}/>

      <a className="fab" href="https://wa.me/971502897570" target="_blank" rel="noopener" aria-label="WhatsApp">
        <Icon.wa/>
        <span>{lang==='ar' ? 'تواصل عبر واتساب' : 'WhatsApp / Enquire'}</span>
      </a>

      {modal && (
        <Modal product={modal.product} mode={modal.mode} lang={lang} onClose={closeModal}/>
      )}
    </>
  );
}

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