// ====== DIMORA — main app ======

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#9C7C4E",
  "displayFont": "Cormorant Garamond",
  "darkHero": false
}/*EDITMODE-END*/;

// ---------- Nav ----------
function Nav({ page, goto, lang, setLang, scrolled, openEnquire, t }) {
  return (
    <nav className={'nav ' + (scrolled || page !== 'home' ? 'scrolled' : '')}>
      <div className="container nav-inner">
        <div className="nav-links" style={{ justifySelf: 'start' }}>
          <button className={page === 'collections' ? 'active' : ''} onClick={() => goto('collections')}>{t.nav.collections}</button>
          <button className={page === 'looks' ? 'active' : ''} onClick={() => goto('looks')}>{t.nav.looks}</button>
          <button className={page === 'showroom' ? 'active' : ''} onClick={() => goto('showroom')}>{t.nav.showroom}</button>
          <button className={page === 'about' ? 'active' : ''} onClick={() => goto('about')}>{t.nav.about}</button>
        </div>
        <button onClick={() => goto('home')} aria-label="Home" style={{ display: 'flex', alignItems: 'center' }}>
          <Logo />
        </button>
        <div className="nav-right">
          <div className="lang-toggle">
            <button className={lang === 'en' ? 'on' : ''} onClick={() => setLang('en')}>EN</button>
            <span className="sep">·</span>
            <button className={lang === 'ar' ? 'on' : ''} onClick={() => setLang('ar')}>AR</button>
          </div>
          <button className="btn btn-ghost" style={{ borderColor: 'currentColor' }} onClick={openEnquire}>
            {t.nav.contact} <span className="arr" />
          </button>
        </div>
      </div>
    </nav>
  );
}

// ---------- Enquiry Modal ----------
function EnquireModal({ open, close, t, lang }) {
  const [submitted, setSubmitted] = React.useState(false);
  const [form, setForm] = React.useState({ name: '', email: '', phone: '', interest: t.enq.interests[0], message: '', channel: t.enq.channels[0] });
  React.useEffect(() => {
    if (!open) { setSubmitted(false); setForm(f => ({ ...f, interest: t.enq.interests[0], channel: t.enq.channels[0] })); }
  }, [open, t]);
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') close(); };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { window.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [open, close]);
  if (!open) return null;
  const onSubmit = (e) => { e.preventDefault(); setSubmitted(true); };
  const upd = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  return (
    <div className="modal-backdrop" onClick={(e) => { if (e.target.classList.contains('modal-backdrop')) close(); }}>
      <div className="modal" role="dialog" aria-modal="true">
        <button className="close" onClick={close} aria-label="Close">✕</button>
        {submitted ? (
          <div className="success" style={{ gridColumn: '1 / -1', padding: '80px 40px' }}>
            <div className="eyebrow" style={{ color: 'var(--bronze)' }}>—</div>
            <h3 style={{ fontFamily: 'var(--display)', fontSize: 56, margin: '20px 0 16px', fontWeight: 400 }}>{t.enq.success}</h3>
            <p style={{ color: '#6a6258', maxWidth: '44ch', margin: '0 auto 36px', fontSize: 15, lineHeight: 1.7 }}>{t.enq.success_body}</p>
            <button className="btn btn-solid" onClick={close}>{t.enq.close} <span className="arr" /></button>
          </div>
        ) : (
          <React.Fragment>
            <div className="left">
              <img src={IMG(4)} alt="" />
              <div className="left-content">
                <div>
                  <div className="eyebrow" style={{ color: 'var(--bronze)' }}>— {t.nav.contact} —</div>
                  <h3>{t.enq.title1} <em>{t.enq.title_em}</em></h3>
                  <p style={{ opacity: 0.75, fontSize: 14, lineHeight: 1.7, maxWidth: '34ch' }}>{t.enq.sub}</p>
                </div>
                <div className="contacts">
                  <div><span className="label">{lang === 'ar' ? 'الهاتف' : 'Direct'}</span><span>+971 52 154 1499</span></div>
                  <div><span className="label">{lang === 'ar' ? 'البريد' : 'Email'}</span><span>Dimoradubai@gmail.com</span></div>
                  <div><span className="label">{lang === 'ar' ? 'الصالة' : 'Showroom'}</span><span>Art of Living Mall · Unit 1c/1</span></div>
                </div>
              </div>
            </div>
            <div className="right">
              <h4>{lang === 'ar' ? 'نموذج الاستفسار' : 'Enquiry Form'}</h4>
              <form onSubmit={onSubmit}>
                <div className="form-row">
                  <label>{t.enq.labels.name}<input required value={form.name} onChange={upd('name')} /></label>
                  <label>{t.enq.labels.email}<input type="email" required value={form.email} onChange={upd('email')} /></label>
                </div>
                <label>{t.enq.labels.phone}<input value={form.phone} onChange={upd('phone')} placeholder="+971 …" /></label>
                <label>{t.enq.labels.interest}
                  <select value={form.interest} onChange={upd('interest')}>
                    {t.enq.interests.map(i => <option key={i}>{i}</option>)}
                  </select>
                </label>
                <label>{t.enq.labels.msg}<textarea required value={form.message} onChange={upd('message')} placeholder={lang === 'ar' ? 'مثال: غرفة معيشة، 35م²، خامات دافئة…' : 'e.g. a living room around 35 sqm, warm palette, the green sofa from Room Look 04…'} /></label>
                <label>{t.enq.labels.channel}
                  <select value={form.channel} onChange={upd('channel')}>
                    {t.enq.channels.map(c => <option key={c}>{c}</option>)}
                  </select>
                </label>
                <button className="submit-btn" type="submit">{t.enq.submit} →</button>
              </form>
            </div>
          </React.Fragment>
        )}
      </div>
    </div>
  );
}

// ---------- Tweaks ----------
function Tweaks({ tweaks, setTweak }) {
  return (
    <TweaksPanel>
      <TweakSection label="Accent">
        <TweakColor
          label="Accent color"
          value={tweaks.accent}
          onChange={(v) => setTweak('accent', v)}
          options={['#9C7C4E', '#2C3B33', '#211C18', '#7A2E2E']}
        />
      </TweakSection>
      <TweakSection label="Type">
        <TweakSelect
          label="Display font"
          value={tweaks.displayFont}
          onChange={(v) => setTweak('displayFont', v)}
          options={['Cormorant Garamond', 'Fraunces', 'Playfair Display']}
        />
      </TweakSection>
      <TweakSection label="Hero">
        <TweakToggle
          label="Force darker hero overlay"
          value={tweaks.darkHero}
          onChange={(v) => setTweak('darkHero', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

// ---------- Home ----------
function HomePage({ t, lang, goto, openEnquire, heroIdx, setHeroIdx }) {
  return (
    <React.Fragment>
      <Hero t={t} dir={lang === 'ar' ? 'rtl' : 'ltr'} heroIdx={heroIdx} setHeroIdx={setHeroIdx} openEnquire={openEnquire} goto={goto} />
      <Promise t={t} />
      <CollectionsTeaser t={t} lang={lang} goto={goto} openEnquire={openEnquire} />
      <RoomLooksHome t={t} lang={lang} goto={goto} openEnquire={openEnquire} />
      <Bespoke t={t} />
      <ShowroomBlock t={t} openEnquire={openEnquire} />
      <EnquireBand t={t} openEnquire={openEnquire} />
    </React.Fragment>
  );
}

// ---------- App ----------
function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [page, setPage] = React.useState('home');
  const [lang, setLang] = React.useState('en');
  const [enqOpen, setEnqOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
  const [heroIdx, setHeroIdx] = React.useState(0);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 80);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  React.useEffect(() => {
    document.documentElement.style.setProperty('--bronze', tweaks.accent);
    document.documentElement.style.setProperty('--display', `'${tweaks.displayFont}', 'Canela', Georgia, serif`);
    document.body.classList.toggle('hero-dark', !!tweaks.darkHero);
  }, [tweaks.accent, tweaks.displayFont, tweaks.darkHero]);

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

  React.useEffect(() => { window.scrollTo({ top: 0, behavior: 'instant' }); }, [page]);

  const t = COPY[lang];
  const goto = (p) => setPage(p);
  const openEnquire = () => setEnqOpen(true);

  return (
    <React.Fragment>
      <Nav page={page} goto={goto} lang={lang} setLang={setLang} scrolled={scrolled} openEnquire={openEnquire} t={t} />

      {page === 'home' && <HomePage t={t} lang={lang} goto={goto} openEnquire={openEnquire} heroIdx={heroIdx} setHeroIdx={setHeroIdx} />}
      {page === 'collections' && <CollectionsPage t={t} lang={lang} openEnquire={openEnquire} />}
      {page === 'looks' && <RoomLooksPage t={t} lang={lang} openEnquire={openEnquire} />}
      {page === 'showroom' && <ShowroomPage t={t} lang={lang} openEnquire={openEnquire} />}
      {page === 'about' && <AboutPage t={t} lang={lang} openEnquire={openEnquire} />}
      {page === 'contact' && <ContactPage t={t} lang={lang} openEnquire={openEnquire} />}

      {page !== 'home' && page !== 'contact' && (
        <EnquireBand t={t} openEnquire={openEnquire} />
      )}
      <Footer t={t} />

      <EnquireModal open={enqOpen} close={() => setEnqOpen(false)} t={t} lang={lang} />

      {/* Sticky enquire FAB */}
      <div className="sticky-enq">
        <button className="fab" onClick={openEnquire}>
          {lang === 'ar' ? 'استفسار' : 'Enquire'} <span className="arr" />
        </button>
        <button className="fab wa" onClick={openEnquire} title="WhatsApp deep link — pending channel confirmation">
          {lang === 'ar' ? 'واتساب' : 'WhatsApp'} <span style={{ opacity: 0.55, fontSize: 9, letterSpacing: '0.18em' }}>· {lang === 'ar' ? 'يُؤكَّد' : 'pending'}</span>
        </button>
      </div>

      <div className="demo-ribbon" title="Site demo · prototype">
        Demo · prototype · build-from-scratch
      </div>

      <Tweaks tweaks={tweaks} setTweak={setTweak} />
    </React.Fragment>
  );
}

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