// ====== DIMORA — page components ======
// All sections + page-level components live here.

const Logo = ({ className = 'nav-logo' }) => (
  <span className={className} aria-label="Dimora">
    <svg viewBox="0 0 520 120" role="img" aria-label="Dimora">
      <text x="260" y="78" textAnchor="middle"
        fontFamily="'Cormorant Garamond', 'Canela', Georgia, serif"
        fontSize="68" fontWeight="500" letterSpacing="14" fill="currentColor">DIMORA</text>
    </svg>
  </span>
);

// ---------- Hero (Home) ----------
function Hero({ t, dir, heroIdx, setHeroIdx, openEnquire, goto }) {
  const heroImgs = [4, 1, 2, 6, 10];
  React.useEffect(() => {
    const id = setInterval(() => setHeroIdx((i) => (i + 1) % heroImgs.length), 6500);
    return () => clearInterval(id);
  }, [setHeroIdx]);
  return (
    <section className="hero" data-screen-label="Home Hero" style={{padding: 0}}>
      <div className="hero-bg" key={heroIdx} style={{ animation: 'fadeIn 1.2s ease' }}>
        <img src={IMG(heroImgs[heroIdx])} alt="" />
      </div>
      <div className="container hero-content">
        <div className="eyebrow"><span className="rule" /> &nbsp; {t.hero.eyebrow}</div>
        <h1 className="display" style={{ marginTop: 20 }}>
          {t.hero.title1}<br/>
          <em>{t.hero.title2}</em>
        </h1>
        <p className="hero-sub">{t.hero.sub}</p>
        <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
          <button className="btn btn-light" onClick={() => goto('looks')}>{t.hero.cta1} <span className="arr" /></button>
          <button className="btn btn-light" onClick={openEnquire}>{t.hero.cta2} <span className="arr" /></button>
        </div>
      </div>
      <div className="hero-meta">
        <div style={{ pointerEvents: 'all' }}>Art of Living Mall · Dubai</div>
        <div className="hero-dots">
          {heroImgs.map((_, i) => (
            <button key={i} className={i === heroIdx ? 'on' : ''} onClick={() => setHeroIdx(i)} aria-label={`Slide ${i+1}`} />
          ))}
        </div>
        <div>0{heroIdx + 1} / 0{heroImgs.length}</div>
      </div>
    </section>
  );
}

// ---------- Promise band ----------
function Promise({ t }) {
  return (
    <section className="promise">
      <div className="container">
        <div className="promise-grid">
          <div>
            <div className="eyebrow">{t.promise.eyebrow}</div>
            <h2 className="display">
              {t.promise.title1} <em>{t.promise.title_em}</em><br/>
              {t.promise.title2}
            </h2>
          </div>
          <p>{t.promise.body}</p>
        </div>
      </div>
    </section>
  );
}

// ---------- Collections teaser ----------
function CollectionsTeaser({ t, lang, goto, openEnquire }) {
  return (
    <section style={{ background: 'var(--ivory)' }}>
      <div className="container">
        <div className="section-head" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', maxWidth: 'none' }}>
          <div>
            <div className="eyebrow">{t.collections.eyebrow}</div>
            <h2>{t.collections.title} <em style={{ fontStyle: 'italic', color: 'var(--bronze)' }}>{t.collections.title_em}</em></h2>
          </div>
          <button className="btn btn-ghost" onClick={() => goto('collections')}>{t.collections.cta} <span className="arr" /></button>
        </div>
        <div className="collections-grid">
          {COLLECTIONS.map((c, i) => (
            <div key={c.id}
              className={'collection-card ' + (i === 0 ? 'col-span-7' : i === 1 ? 'col-span-5' : 'col-span-4')}
              onClick={() => goto('collections')}>
              <div className="img-wrap"><img src={c.img} alt={c.name} /></div>
              <div className="caption">
                <span className="name">{lang === 'ar' ? c.ar : c.name}</span>
                <span className="count">{c.ref} · {c.count}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Room Looks (home) ----------
function RoomLooksHome({ t, lang, goto, openEnquire }) {
  // show first 3
  const show = ROOMLOOKS.slice(0, 3);
  return (
    <section className="roomlooks">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">{t.rooms.eyebrow}</div>
          <h2 style={{ color: 'var(--ivory)' }}>{t.rooms.title} <em style={{ fontStyle: 'italic', color: 'var(--bronze)' }}>{t.rooms.title_em}</em></h2>
        </div>
        {show.map((r) => (
          <div className="roomlook-row" key={r.id} data-screen-label={`Room Look ${r.n}`}>
            <div className="rl-img-wrap">
              <img src={r.img} alt={r.name} />
              <div className="tag">Look № {r.n}</div>
            </div>
            <div className="rl-meta">
              <div className="num">— Look № {r.n}</div>
              <h3>{r.name}</h3>
              <p>{r.body}</p>
              <div className="rl-spec">
                {r.spec.map((s, i) => (<span key={i}><span style={{ opacity: 0.5 }}>{s.l}</span><b>{s.v}</b></span>))}
              </div>
              <div className="rl-actions">
                <button className="btn btn-light" onClick={openEnquire}>{t.rooms.enquire} <span className="arr" /></button>
              </div>
            </div>
          </div>
        ))}
        <div style={{ textAlign: 'center', paddingTop: 40 }}>
          <button className="btn btn-light" onClick={() => goto('looks')}>{t.rooms.view} <span className="arr" /></button>
        </div>
      </div>
    </section>
  );
}

// ---------- Bespoke / Story ----------
function Bespoke({ t }) {
  return (
    <section>
      <div className="container">
        <div className="story-grid">
          <div className="img-wrap">
            <img src={IMG(8)} alt="" />
          </div>
          <div>
            <div className="eyebrow">{t.bespoke.eyebrow}</div>
            <h2>{t.bespoke.title}</h2>
            <p>{t.bespoke.body1}</p>
            <p>{t.bespoke.body2}</p>
            <ul className="story-list">
              {t.bespoke.steps.map((s) => (
                <li key={s.n}>
                  <span className="n">{s.n}</span>
                  <div><h4>{s.t}</h4><p>{s.d}</p></div>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Showroom (home) ----------
function ShowroomBlock({ t, openEnquire }) {
  return (
    <section className="showroom" data-screen-label="Showroom Section">
      <div className="container">
        <div className="showroom-grid">
          <div>
            <div className="eyebrow">{t.showroom.eyebrow}</div>
            <h2>{t.showroom.title1} <em>{t.showroom.title_em}</em></h2>
            <p style={{ fontSize: 15, lineHeight: 1.8, color: '#4a423b', maxWidth: '46ch' }}>{t.showroom.body}</p>
            <div className="info-grid">
              {t.showroom.info.map((row, i) => (
                <div key={i}>
                  <div className="label">{row.l}</div>
                  <div className="val">{row.v}{row.s && <small style={{ display: 'block', opacity: 0.55, fontSize: 11, marginTop: 4 }}>{row.s}</small>}</div>
                </div>
              ))}
            </div>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginTop: 12 }}>
              <button className="btn btn-solid" onClick={openEnquire}>{t.showroom.cta1} <span className="arr" /></button>
              <button className="btn btn-ghost">{t.showroom.cta2} <span className="arr" /></button>
            </div>
          </div>
          <FauxMap t={t} />
        </div>
      </div>
    </section>
  );
}

// Stylised map — coords TBC so don't embed a real iframe pin. (per brief)
function FauxMap({ t }) {
  return (
    <div className="map-frame">
      <svg viewBox="0 0 400 500" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
        <defs>
          <pattern id="grid" width="34" height="34" patternUnits="userSpaceOnUse">
            <path d="M 34 0 L 0 0 0 34" fill="none" stroke="rgba(247,242,234,0.06)" strokeWidth="1" />
          </pattern>
        </defs>
        <rect width="400" height="500" fill="#14100C" />
        <rect width="400" height="500" fill="url(#grid)" />
        {/* roads */}
        <path d="M 0 200 Q 100 180 200 230 T 400 250" stroke="rgba(156,124,78,0.5)" strokeWidth="3" fill="none" />
        <path d="M 0 350 L 400 320" stroke="rgba(156,124,78,0.3)" strokeWidth="2" fill="none" />
        <path d="M 180 0 L 220 500" stroke="rgba(247,242,234,0.12)" strokeWidth="1.5" fill="none" />
        <path d="M 50 0 Q 70 250 90 500" stroke="rgba(247,242,234,0.08)" strokeWidth="1" fill="none" />
        <path d="M 320 0 Q 280 250 300 500" stroke="rgba(247,242,234,0.08)" strokeWidth="1" fill="none" />
        {/* labels (street names — stylized) */}
        <text x="20" y="195" fill="rgba(156,124,78,0.7)" fontSize="9" fontFamily="Inter" letterSpacing="2">UMM SUQEIM ST</text>
        <text x="200" y="50" fill="rgba(247,242,234,0.3)" fontSize="9" fontFamily="Inter" letterSpacing="2">AL BARSHA 2</text>
        <text x="60" y="380" fill="rgba(247,242,234,0.25)" fontSize="9" fontFamily="Inter" letterSpacing="2">HADAEQ M. BIN RASHID</text>
        {/* mall block */}
        <rect x="170" y="200" width="80" height="60" fill="rgba(156,124,78,0.25)" stroke="rgba(156,124,78,0.7)" strokeWidth="1" />
        <text x="210" y="235" textAnchor="middle" fill="#F7F2EA" fontSize="10" fontFamily="Inter" letterSpacing="1.5">ART OF LIVING</text>
      </svg>
      <div className="pin" style={{ top: '45%', left: '52%' }} />
      <div className="map-corner">
        <div className="where">{t.showroom.where}<small>{t.showroom.where_sub}</small></div>
        <span style={{ fontSize: 10, letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.7 }}>Dubai</span>
      </div>
    </div>
  );
}

// ---------- Enquire band ----------
function EnquireBand({ t, openEnquire }) {
  return (
    <section className="enquire-band">
      <div className="eyebrow">— {t.enquireBand.eyebrow} —</div>
      <h2 className="display">{t.enquireBand.title1} <em>{t.enquireBand.title_em}</em></h2>
      <p>{t.enquireBand.body}</p>
      <div className="row">
        <button className="btn btn-light" onClick={openEnquire}>{t.enquireBand.cta1} <span className="arr" /></button>
        <button className="btn btn-light" style={{ borderColor: 'var(--bronze)', color: 'var(--bronze)' }}>{t.enquireBand.cta2} <span className="arr" /></button>
      </div>
    </section>
  );
}

// ---------- Footer ----------
function Footer({ t }) {
  return (
    <footer>
      <div className="container">
        <div className="foot-grid">
          <div className="brand">
            <div style={{ color: 'var(--ivory)', height: 28 }}><Logo /></div>
            <p>{t.footer.tag}</p>
            <div style={{ fontSize: 10, letterSpacing: '0.28em', textTransform: 'uppercase', opacity: 0.55 }}>EST. — Dubai · Art of Living Mall</div>
          </div>
          {t.footer.cols.map((c) => (
            <div key={c.h}>
              <h5>{c.h}</h5>
              <ul>{c.items.map((it) => (<li key={it}>{it}</li>))}</ul>
            </div>
          ))}
        </div>
        <div className="foot-bottom">
          <div>{t.footer.legal}</div>
          <div>{t.footer.legal2}</div>
        </div>
      </div>
    </footer>
  );
}

// ---------- Collections page ----------
function CollectionsPage({ t, lang, openEnquire }) {
  const [active, setActive] = React.useState('all');
  const filtered = active === 'all' ? PIECES : PIECES.filter(p => p.cat === active);
  return (
    <div className="coll-page" data-screen-label="Collections">
      <div className="container">
        <div className="coll-head">
          <div>
            <div className="eyebrow">— {t.nav.collections} —</div>
            <h1>{lang === 'ar' ? 'مجموعاتٌ مصمّمة' : 'Composed'} <em>{lang === 'ar' ? 'حول الغرف.' : 'by room.'}</em></h1>
          </div>
          <p>{lang === 'ar'
            ? 'مجموعاتنا منظّمة حول الغرف لا حول الفئات. اطلب الكتالوج الكامل للأقمشة والمقاسات وأوقات التسليم — أو زر الصالة لمشاهدتها في الحجم الكامل.'
            : 'Collections are organised by room, not category. Ask for the full catalogue — fabric options, sizing, lead time — or visit the showroom to see each piece in full volume.'}</p>
        </div>
        <div className="filter-row">
          <div className="lbl">{lang === 'ar' ? 'تصفية' : 'Filter'}</div>
          {FILTERS.map(f => (
            <button key={f.id} className={'chip ' + (f.id === active ? 'on' : '')} onClick={() => setActive(f.id)}>{lang === 'ar' ? f.ar : f.en}</button>
          ))}
          <div style={{ marginLeft: 'auto', fontSize: 10, letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.5 }}>
            {filtered.length} {lang === 'ar' ? 'قطعة' : 'pieces'}
          </div>
        </div>
        <div className="pieces-grid">
          {filtered.map((p) => (
            <div key={p.id} className="piece" onClick={openEnquire}>
              <div className="img-wrap">
                <img src={p.img} alt={p.name} />
                <span className="enquire-pill">{lang === 'ar' ? 'استفسار' : 'Enquire'}</span>
              </div>
              <div className="meta">
                <span className="name">{p.name}<small>{p.sub}</small></span>
                <span className="ref">{p.ref}</span>
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 80, padding: '40px 0', borderTop: '1px solid var(--line)', textAlign: 'center', fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.55 }}>
          {lang === 'ar'
            ? 'الأسعار عند الاستفسار · الكتالوج الكامل يُرسل عند الطلب'
            : 'Prices on enquiry · Full catalogue sent on request'}
        </div>
      </div>
    </div>
  );
}

// ---------- Room Looks gallery page ----------
function RoomLooksPage({ t, lang, openEnquire }) {
  // expand the gallery using all 10 images
  const items = [
    { id: 1, span: 'span-4', shape: 'lg', name: 'The Quiet Lounge', ar: 'الصالون الهادئ', tag: '01' },
    { id: 4, span: 'span-2', shape: '',   name: 'The Green Salon',  ar: 'صالون الأخضر',  tag: '02' },
    { id: 2, span: 'span-3', shape: '',   name: 'The Skyline Room', ar: 'غرفة الأفق',     tag: '03' },
    { id: 3, span: 'span-3', shape: 'wd', name: 'The Lotus Bedroom',ar: 'غرفة اللوتس',    tag: '04' },
    { id: 5, span: 'span-2', shape: '',   name: 'The Atelier',      ar: 'الورشة',          tag: '05' },
    { id: 6, span: 'span-4', shape: 'wd', name: 'The Light Lounge', ar: 'الصالون المضيء', tag: '06' },
    { id: 7, span: 'span-3', shape: '',   name: 'The Gold Triptych',ar: 'الثلاثي الذهبي', tag: '07' },
    { id: 8, span: 'span-3', shape: '',   name: 'The Marble Dining',ar: 'طاولة الرخام',   tag: '08' },
    { id: 9, span: 'span-3', shape: '',   name: 'The Ivory Lounge', ar: 'صالون العاج',    tag: '09' },
    { id:10, span: 'span-3', shape: 'lg', name: 'The Marbled Suite',ar: 'الجناح الرخامي', tag: '10' },
  ];
  return (
    <div className="rl-page" data-screen-label="Room Looks">
      <div className="container">
        <div className="coll-head">
          <div>
            <div className="eyebrow">— {t.nav.looks} —</div>
            <h1>{lang === 'ar' ? 'إطلالات' : 'Rooms,'} <em>{lang === 'ar' ? 'لا قوائم.' : 'not lists.'}</em></h1>
          </div>
          <p>{lang === 'ar'
            ? 'كل إطلالة كاملة قابلة للطلب — قطعة قطعة، أو الغرفة بأكملها. تواصل معنا لتنسيق إطلالة لمساحتك.'
            : 'Each look is fully orderable — piece by piece, or the room as one composition. Get in touch and we will compose the same scene around your space.'}</p>
        </div>
        <div className="gallery">
          {items.map((it) => (
            <div key={it.id} className={'item ' + it.span} onClick={openEnquire}>
              <div className={'imgw ' + (it.shape || '')}><img src={IMG(it.id)} alt={it.name} /></div>
              <div className="cap">
                <span className="name">{lang === 'ar' ? it.ar : it.name}</span>
                <span>№ {it.tag}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ---------- Showroom page ----------
function ShowroomPage({ t, lang, openEnquire }) {
  return (
    <div className="sr-page" data-screen-label="Showroom Page">
      <div className="sr-hero">
        <img src={IMG(7)} alt="" />
        <div className="sr-hero-content">
          <div className="eyebrow" style={{ color: '#E8E0D3' }}>— {t.nav.showroom} —</div>
          <h1>{t.showroom.title1} <em>{t.showroom.title_em}</em></h1>
          <p style={{ marginTop: 18 }}>{t.showroom.body}</p>
          <div style={{ display: 'flex', gap: 14, marginTop: 32, flexWrap: 'wrap', justifyContent: 'center' }}>
            <button className="btn btn-light" onClick={openEnquire}>{t.showroom.cta1} <span className="arr" /></button>
            <button className="btn btn-light">{t.showroom.cta2} <span className="arr" /></button>
          </div>
        </div>
      </div>
      <div className="sr-info">
        <div className="container">
          <div className="sr-info-grid">
            {t.showroom.info.map((row, i) => (
              <div key={i}>
                <div className="lbl">{row.l}</div>
                <div className="val">{row.v}{row.s && <small>{row.s}</small>}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <div className="container" style={{ paddingBottom: 120 }}>
        <FauxMap t={t} />
      </div>
    </div>
  );
}

// ---------- About page ----------
function AboutPage({ t, lang, openEnquire }) {
  return (
    <div className="about-page" data-screen-label="About">
      <div className="container">
        <div className="eyebrow">— {t.nav.about} —</div>
        <p className="about-lede" style={{ marginTop: 24 }}>
          {lang === 'ar' ? (
            <span>ديمورا — دارُ أثاثٍ راقية، تصنع الفخامة <em>قطعةً قطعة</em>، ابتداءً من تصميمٍ مدروس، إلى تشطيبٍ يدوي، إلى تسليمٍ بقفّازٍ أبيض.</span>
          ) : (
            <span>Dimora — a premier atelier of high-end furniture, composing luxury <em>one piece at a time:</em> from a considered silhouette, through a hand-finished surface, to a white-glove delivery in the room you've imagined.</span>
          )}
        </p>
        <div className="story-grid">
          <div>
            <div className="eyebrow">{lang === 'ar' ? 'الفلسفة' : 'The Philosophy'}</div>
            <h2 style={{ fontFamily: 'var(--display)', fontSize: 'clamp(32px, 4.5vw, 56px)', margin: '14px 0 24px', fontWeight: 400 }}>
              {lang === 'ar' ? 'القطعة الواحدة قبل الكتالوج.' : 'The single piece before the catalogue.'}
            </h2>
            <p>{lang === 'ar'
              ? 'نُؤمنُ بأن الغرفة تتركّب حول قطعةٍ واحدة على حق — كنبة، طاولة، أو لوحة — ثم ينمو كل ما حولها استجابةً لها. لذلك نستثمر وقتنا في الصمتِ المتأنّي لكل قطعة، قبل أن تصل إلى منزلكم.'
              : 'A room composes itself around one right piece — a sofa, a table, a painting — and grows in response to it. So we spend our time on the considered silence of each piece, long before it reaches your home.'}</p>
            <p>{lang === 'ar'
              ? 'بُنيت دارنا داخل آرت أوف ليفينغ مول لأن الفخامة تتطلّب الرؤية بحجمها الحقيقي — الأقمشة، اللمسات، الإضاءة، الوزن. نحن نُرحّب بكم لقضاء وقتٍ معها قبل أن تختاروا.'
              : "We chose the Art of Living Mall for our flagship because luxury must be seen in volume — fabric, finish, light, weight. You're welcome to spend time with the pieces before you choose."}</p>
          </div>
          <div className="img-wrap"><img src={IMG(5)} alt="" /></div>
        </div>
        <div className="about-grid">
          <div className="col-span-7"><img src={IMG(4)} alt="" style={{ aspectRatio: '5 / 4' }} /></div>
          <div className="col-span-5"><img src={IMG(10)} alt="" style={{ aspectRatio: '5 / 4' }} /></div>
          <div className="col-span-4"><img src={IMG(2)} alt="" style={{ aspectRatio: '4 / 5' }} /></div>
          <div className="col-span-8"><img src={IMG(7)} alt="" style={{ aspectRatio: '8 / 5' }} /></div>
        </div>
        <div style={{ marginTop: 100, padding: '40px 0', borderTop: '1px solid var(--line)', display: 'grid', gridTemplateColumns: '1fr auto', gap: 24, alignItems: 'center' }}>
          <div style={{ fontFamily: 'var(--display)', fontSize: 28 }}>
            {lang === 'ar' ? 'تعالوا لزيارة الورشة.' : 'Come and see the atelier in person.'}
          </div>
          <button className="btn btn-solid" onClick={openEnquire}>{t.showroom.cta1} <span className="arr" /></button>
        </div>
      </div>
    </div>
  );
}

// ---------- Contact page ----------
function ContactPage({ t, lang, openEnquire }) {
  return (
    <div className="contact-page" data-screen-label="Contact">
      <div className="container">
        <div className="coll-head">
          <div>
            <div className="eyebrow">— {t.nav.contact} —</div>
            <h1>{lang === 'ar' ? 'اكتبوا' : 'Write,'} <em>{lang === 'ar' ? 'اتّصلوا، أو زوروا.' : 'call, or visit.'}</em></h1>
          </div>
          <p>{lang === 'ar'
            ? 'نرد على كل استفسار خلال يوم عمل واحد. للزيارات العاجلة، الصالة مفتوحة يوميًا من 10 صباحًا حتى 10 مساءً.'
            : 'Every enquiry receives a reply within one working day. For urgent visits, the showroom is open daily, 10am to 10pm.'}</p>
        </div>
        <div className="contact-grid">
          <div>
            <div className="contact-card">
              <div className="label">{lang === 'ar' ? 'الهاتف' : 'Telephone'}</div>
              <div className="val">+971 52 154 1499<small>{lang === 'ar' ? 'يُؤكَّد دعم واتساب' : 'WhatsApp · subject to channel confirmation'}</small></div>
            </div>
            <div className="contact-card">
              <div className="label">{lang === 'ar' ? 'البريد' : 'Email'}</div>
              <div className="val">Dimoradubai@gmail.com<small>{lang === 'ar' ? 'رد خلال يوم عمل' : 'Reply within one working day'}</small></div>
            </div>
            <div className="contact-card">
              <div className="label">{lang === 'ar' ? 'الصالة' : 'Showroom'}</div>
              <div className="val">Art of Living Mall<small>Unit 1c/1, Ground Floor · Umm Suqeim St, Al Barsha 2, Dubai</small></div>
            </div>
            <div className="contact-card">
              <div className="label">{lang === 'ar' ? 'الدوام' : 'Hours'}</div>
              <div className="val">10:00 — 22:00<small>{lang === 'ar' ? 'يوميًا · حسب الدوام الرسمي للمول' : 'Daily · per mall-listed hours'}</small></div>
            </div>
            <div className="contact-card">
              <div className="label">{lang === 'ar' ? 'تابعونا' : 'Social'}</div>
              <div className="val">@dimora.furniture<small>Instagram · Facebook (Dimora.Dubai) · TikTok</small></div>
            </div>
          </div>
          <div style={{ background: 'var(--stone)', padding: 48 }}>
            <div className="eyebrow">{lang === 'ar' ? 'أرسل استفسارًا' : 'Send an Enquiry'}</div>
            <h3 style={{ fontFamily: 'var(--display)', fontSize: 32, fontWeight: 400, margin: '14px 0 24px' }}>
              {lang === 'ar' ? 'حدّثنا عن الغرفة.' : 'Tell us about the room.'}
            </h3>
            <p style={{ fontSize: 14, color: '#4a423b', lineHeight: 1.7, marginBottom: 24 }}>
              {lang === 'ar'
                ? 'افتح نموذج الاستفسار وأخبرنا بما تبحث عنه. سنرد بتفاصيل القطعة، الأقمشة المتاحة، ومدة التسليم.'
                : 'Open the enquiry form and tell us what you are looking for. We will reply with piece details, fabric options, and lead times.'}
            </p>
            <button className="btn btn-solid" onClick={openEnquire} style={{ width: '100%', justifyContent: 'center' }}>
              {lang === 'ar' ? 'فتح نموذج الاستفسار' : 'Open the Enquiry Form'} <span className="arr" />
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  Logo, Hero, Promise, CollectionsTeaser, RoomLooksHome, Bespoke,
  ShowroomBlock, EnquireBand, Footer,
  CollectionsPage, RoomLooksPage, ShowroomPage, AboutPage, ContactPage, FauxMap,
});