{f.name} setName(e.target.value)} autoComplete="name" /> {f.email} setEmail(e.target.value)} autoComplete="email" />

{f.country} setCountry(e.target.value)} placeholder="UAE" /> {f.residence}

{f.timeline}

{(f.timelineOpt || []).map((o) => ( ))}

{f.message}

setMessage(e.target.value)} />
        </label>
      </div>
      <label className={`consent ${errors.consent ? 'is-err' : ''}`}>
        <input type="checkbox" checked={consent} onChange={(e) => setConsent(e.target.checked)} />
        <span>{f.consent}</span>
      </label>
      <button type="submit" className="btn btn--primary btn--lg">
        {submit}
        <Icon name="arrow-right" size={14} />
      </button>
    </form>
  );
}

// ── Modal (private viewing / brochure gate) ─────────────────────────────────
function Modal({ open, onClose, kind, locale }) {
  const t = COPY[locale] || COPY.en;
  const m = (t.modal || COPY.en.modal);
  const f = (t.convert && t.convert.fields) || COPY.en.convert.fields;

const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');
  const [date, setDate] = useState('');
  const [time, setTime] = useState('10:00');
  const [where, setWhere] = useState(m.locOpt[0]);
  const [sent, setSent] = useState(false);

useEffect(() => {
    if (open) { setSent(false); document.body.style.overflow = 'hidden'; }
    else document.body.style.overflow = '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

if (!open) return null;
  const isViewing = kind === 'viewing';
  const isBroker = kind === 'broker';
  const title = isViewing ? m.titleViewing : isBroker ? m.titleBroker : m.titleBrochure;
  const submit = isViewing ? m.submit : m.submitBrochure;
  const sentMsg = isViewing ? ((t.convert && t.convert.sentViewing) || COPY.en.convert.sentViewing) : ((t.convert && t.convert.sentBrochure) || COPY.en.convert.sentBrochure);

const doSubmit = (e) => {
    e.preventDefault();
    setSent(true);
  };

return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label={m.close}><Icon name="close" size={18} /></button>
        <div className="modal-side">
          <div className="modal-mark"><img src="media/logo-select-group-white.svg" alt="" /></div>
          <p className="modal-eye">Six Senses Residences · Dubai Marina</p>
          <h3 className="modal-h">{title}</h3>
          <p className="modal-sub">{(t.convert && t.convert.body) || COPY.en.convert.body}</p>
          <div className="modal-meta">
            <div><span>Tel</span><b>+971 4 368 3355</b></div>
            <div><span>WhatsApp</span><b>+971 52 459 6183</b></div>
            <div><span>HQ</span><b>Peninsula, Business Bay</b></div>
          </div>
        </div>
        <div className="modal-body">
          {sent ? (
            <div className="form form--sent" style={{ minHeight: 260 }}>
              <div className="sent-mark"><Icon name="check" size={28} /></div>
              <p className="sent-msg">{sentMsg}</p>
              <button type="button" className="btn btn--ghost" onClick={onClose}>{m.close}</button>
            </div>
          ) : (
            <form className="form" onSubmit={doSubmit}>
              <div className="form-grid">
                <label className="field field--full">
                  <span className="field-lbl">{f.name}</span>
                  <input value={name} onChange={(e) => setName(e.target.value)} required />
                </label>
                <label className="field">
                  <span className="field-lbl">{f.email}</span>
                  <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
                </label>
                <div className="field"><PhoneField label={f.phone} value={phone} onChange={setPhone} /></div>
                {isViewing && (
                  <>
                    <label className="field">
                      <span className="field-lbl">{m.labelDate}</span>
                      <input type="date" value={date} onChange={(e) => setDate(e.target.value)} required />
                    </label>
                    <label className="field">
                      <span className="field-lbl">{m.labelTime}</span>
                      <input type="time" value={time} onChange={(e) => setTime(e.target.value)} required />
                    </label>
                    <label className="field field--full">
                      <span className="field-lbl">{m.labelLocation}</span>
                      <div className="select-wrap">
                        <select value={where} onChange={(e) => setWhere(e.target.value)}>
                          {m.locOpt.map((o) => <option key={o}>{o}</option>)}
                        </select>
                        <Icon name="chevron" size={14} />
                      </div>
                    </label>
                  </>
                )}
              </div>
              <button className="btn btn--primary btn--lg" type="submit">
                {submit}
                <Icon name="arrow-right" size={14} />
              </button>
            </form>
          )}
        </div>
      </div>
    </div>
  );
}

// ── WhatsApp floating button ────────────────────────────────────────────────
function WhatsAppFab({ dir }) {
  const [shown, setShown] = useState(false);
  useEffect(() => { const t = setTimeout(() => setShown(true), 1200); return () => clearTimeout(t); }, []);
  return (
    <a className={`fab ${shown ? 'is-shown' : ''}`} href="https://wa.me/971524596183" target="_blank" rel="noopener" aria-label="WhatsApp +971 52 459 6183" data-dir={dir}>
      <Icon name="whatsapp" size={22} />
      <span className="fab-label">+971 52 459 6183</span>
    </a>
  );
}

// ── Mobile sticky CTA ───────────────────────────────────────────────────────
function MobileBar({ locale, onRegister, onViewing }) {
  const t = COPY[locale] || COPY.en;
  return (
    <div className="mbar">
      <a className="mbar-icon" href="tel:+97143683355" aria-label="Call"><Icon name="phone" size={18} /></a>
      <a className="mbar-icon" href="https://wa.me/971524596183" target="_blank" rel="noopener" aria-label="WhatsApp"><Icon name="whatsapp" size={18} /></a>
      <button className="mbar-cta" onClick={onRegister}>
        {(t.nav && t.nav.register) || 'Register Interest'}
      </button>
    </div>
  );
}

// ── Footer ──────────────────────────────────────────────────────────────────
function Footer({ locale }) {
  const t = COPY[locale] || COPY.en;
  const f = t.footer || COPY.en.footer;
  return (
    <footer className="footer">
      <div className="wrap footer-grid">
        <div className="footer-brand">
          <img src="media/logo-select-group-white.svg" alt="Select Group" />
          <p className="footer-tag">{(t.hero && t.hero.tagline) || COPY.en.hero.tagline}</p>
        </div>
        <div>
          <h6>Contact</h6>
          <ul className="footer-list">
            <li><a href="tel:+97143683355">{f.phone}</a></li>
            <li><a href="tel:800100001">{f.tollfree}</a></li>
            <li><a href="https://wa.me/971524596183">WhatsApp · {f.whatsapp}</a></li>
            <li><a href={`mailto:${f.email}`}>{f.email}</a></li>
            <li><a href="#">{f.customerCare}</a></li>
          </ul>
        </div>
        <div>
          <h6>Address</h6>
          <ul className="footer-list">
            <li>{f.address}</li>
            <li>{f.address2}</li>
            <li>{f.pobox}</li>
            <li className="muted">{f.hours} <em>{f.hoursNote}</em></li>
          </ul>
        </div>
        <div>
          <h6>Follow</h6>
          <ul className="footer-list">
            <li><a href="https://instagram.com/selectgroupuae" target="_blank" rel="noopener">Instagram · @selectgroupuae</a></li>
            <li><a href="https://facebook.com/selectgroupuae" target="_blank" rel="noopener">Facebook · @selectgroupuae</a></li>
            <li><a href="https://x.com/selectgroupuae" target="_blank" rel="noopener">X · @selectgroupuae</a></li>
            <li><a href="https://linkedin.com/company/dubai-select-llc" target="_blank" rel="noopener">LinkedIn · /dubai-select-llc</a></li>
            <li><a href="#" target="_blank" rel="noopener">YouTube</a></li>
          </ul>
        </div>
      </div>
      <div className="wrap footer-base">
        <p className="footer-disc">{f.disclaimer}</p>
        <div className="footer-meta">
          <span>{f.copyright}</span>
          <ul>{f.legal.map((l) => <li key={l}><a href="#">{l}</a></li>)}</ul>
        </div>
      </div>
    </footer>
  );
}

// Export to window for cross-script use
Object.assign(window, {
  Icon, SectionHeader, CountUp, Nav,
  RegisterForm, Modal, WhatsAppFab, MobileBar, Footer, PhoneField,
});

{heading}