/* global React, CLINIC, IconPin, IconPhone, IconWhatsApp, IconMail, IconClock, IconCrown, IconArrow */

function Contact({ onBook }) {
  const mapQuery = encodeURIComponent("Empire Dental Clinic Office 901 Tower B Empire Heights Business Bay Dubai");
  return (
    <section id="contact" className="section" style={{ background: 'var(--pearl)' }}>
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">05 · Visit us</div>
            <h2 className="h2" style={{ marginTop: 14 }}>
              On the 9th floor,<br/>
              with a view of the <em style={{ fontStyle: 'italic', color: 'var(--primary)' }}>Burj</em>.
            </h2>
          </div>
          <p className="lead">
            Empire Heights is a twin-tower commercial complex on Marasi Drive in Business Bay, three minutes from Downtown Dubai. The clinic is in Tower B, Office 901 — turn right out of the lift on the 9th floor.
          </p>
        </div>

        <div className="cnt-grid">
          <div className="map" aria-label="Google Maps showing Empire Heights, Business Bay, Dubai">
            <iframe
              title="Google Maps for Empire Dental Clinic"
              src={`https://www.google.com/maps?q=${mapQuery}&z=16&output=embed`}
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
            />
            <div className="map__overlay">
              <div className="l">Google Maps</div>
              <div className="v">Empire Heights, Marasi Drive, Business Bay</div>
              <div className="h"><a href={`https://www.google.com/maps/search/?api=1&query=${mapQuery}`} target="_blank" rel="noopener">Open directions</a></div>
            </div>
          </div>

          <div className="cnt-card">
            <div className="row">
              <IconPin size={20} />
              <div>
                <div className="lbl">Address</div>
                <div className="val">{CLINIC.address.line1}</div>
                <div className="val muted" style={{ fontWeight: 400, fontSize: 14, color: 'var(--slate)' }}>{CLINIC.address.line2}</div>
                <div className="val muted" style={{ fontWeight: 400, fontSize: 14, color: 'var(--slate)' }}>{CLINIC.address.line3}</div>
              </div>
              <span className="pill ok">Verified</span>
            </div>
            <div className="row">
              <IconPhone size={20} />
              <div>
                <div className="lbl">Phone</div>
                <div className="val"><a href={CLINIC.phoneHref}>{CLINIC.phone}</a></div>
              </div>
              <span className="pill ok">Verified</span>
            </div>
            <div className="row">
              <IconWhatsApp size={20} />
              <div>
                <div className="lbl">WhatsApp</div>
                <div className="val muted" style={{ color: 'var(--slate)', fontWeight: 400, fontSize: 14 }}>To be supplied by clinic</div>
              </div>
              <span className="pill todo">Pending</span>
            </div>
            <div className="row">
              <IconMail size={20} />
              <div>
                <div className="lbl">Email</div>
                <div className="val muted" style={{ color: 'var(--slate)', fontWeight: 400, fontSize: 14 }}>To be supplied by clinic</div>
              </div>
              <span className="pill todo">Pending</span>
            </div>
            <div className="row">
              <IconClock size={20} />
              <div>
                <div className="lbl">Hours</div>
                <div className="val">{CLINIC.hoursLine}</div>
                <div className="val muted" style={{ color: 'var(--slate)', fontWeight: 400, fontSize: 13 }}>Friday likely closed · confirm before publishing</div>
              </div>
              <span className="pill todo">Confirm</span>
            </div>
            <div className="row" style={{ borderBottom: 0, paddingBottom: 0, marginTop: 8 }}>
              <span style={{ width: 32 }} />
              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                <button className="btn btn--primary" onClick={() => onBook()}>
                  Book a Consultation <IconArrow size={14} />
                </button>
                <a className="btn btn--ghost" href={CLINIC.phoneHref}>Call clinic</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Contact = Contact;