(function () {
  window.ContactPage = function ContactPage() {
    const b = window.NAJMAT_DATA.brand;
    const mapsUrl = `https://maps.google.com/?q=${encodeURIComponent(b.addressMapsQuery)}`;
    return (
      <section className="contact-page">
        <div className="rail contact-grid">
          <div className="contact-left">
            <div className="label-mono">Visit · call · message · mail</div>
            <h1 className="contact-h">Find us, call us, or message.</h1>
            <div className="contact-blocks">
              <div className="contact-block">
                <div className="label-mono">Address</div>
                <p>{b.address}</p>
                <a href={mapsUrl} target="_blank" rel="noopener noreferrer" className="contact-block-link">Open in Google Maps →</a>
              </div>
              <div className="contact-block">
                <div className="label-mono">Hours</div>
                <p>{b.hoursLabel}<br/><span style={{color:'var(--steel)'}}>{b.hoursClosedLabel}</span></p>
              </div>
              <div className="contact-block">
                <div className="label-mono">Phone · WhatsApp</div>
                <p className="tnum"><a href={`tel:+${b.mobileDigits}`}>{b.mobile}</a></p>
                <window.WhatsAppButton variant="ghost" />
              </div>
              <div className="contact-block">
                <div className="label-mono">Email</div>
                <p><a href={`mailto:${b.email}`}>{b.email}</a></p>
              </div>
            </div>
          </div>
          <div className="contact-right">
            <div className="contact-map">
              <div className="contact-map-label label-mono">Al Quoz IA 1 · Dubai</div>
              <a href={mapsUrl} target="_blank" rel="noopener noreferrer" className="contact-map-cta">Open in Google Maps →</a>
            </div>
          </div>
        </div>
      </section>
    );
  };
})();