/* eslint-disable */
// CONTACT PAGE

const PB_C = window.PB_DATA;

function PageContact() {
  return (
    <div data-screen-label="Contact">
      <section className="page-head shell-wide">
        <div className="crumbs"><a href="#/">Home</a><span className="sep">/</span>Contact</div>
        <h1>Find <em>us</em><br />on the<br />ground floor.</h1>
        <p className="sub">
          We’re inside Emirates Financial Tower in DIFC — open seven days a week, ten to nine.
        </p>
      </section>

      <section className="shell-wide">
        <div className="contact-layout">
          <div className="contact-info">
            <div className="contact-block">
              <div className="k">Address</div>
              <div className="v">{PB_C.brand.addressLines[0]}<br />{PB_C.brand.addressLines[1]}<br />{PB_C.brand.addressLines[2]}</div>
              <div className="meta">
                <a href="https://maps.app.goo.gl/d3qBmBAw55ZK5KEL8" target="_blank" rel="noopener" className="btn btn-link" style={{ marginTop: 12 }}>Open in Google Maps ↗</a>
              </div>
            </div>

            <div className="contact-block">
              <div className="k">Hours</div>
              <div className="v">Mon — Sun<br /><span style={{ fontFamily: 'var(--f-body)', fontSize: 15, color: 'var(--ink-muted)', letterSpacing: '0.06em' }}>10:00 — 21:00</span></div>
              <div className="meta">Closed for major public holidays · advance notice on Instagram</div>
            </div>

            <div className="contact-block">
              <div className="k">WhatsApp</div>
              <div className="v"><a href={PB_C.brand.whatsappHref} target="_blank" rel="noopener">{PB_C.brand.whatsapp} ↗</a></div>
              <div className="meta">Fastest way to reach the front desk · same-day replies</div>
            </div>

            <div className="contact-block">
              <div className="k">Call</div>
              <div className="v"><a href={PB_C.brand.phoneCallHref}>{PB_C.brand.phoneCall}</a></div>
              <div className="meta">A different number to WhatsApp · call for same-day availability</div>
            </div>

            <div className="contact-block">
              <div className="k">Email</div>
              <div className="v"><a href={PB_C.brand.emailHref}>{PB_C.brand.email}</a></div>
              <div className="meta">For enquiries, bridal parties, partnerships</div>
            </div>

            <div className="contact-block">
              <div className="k">Follow</div>
              <div className="v" style={{ display: 'flex', gap: 24, fontSize: 17 }}>
                <a href="#">Instagram ↗</a>
                <a href="#">Facebook ↗</a>
                <a href={PB_C.brand.fresha} target="_blank" rel="noopener">Fresha ↗</a>
              </div>
            </div>
          </div>

          <div className="map-card">
            <iframe
              title="Platinum Black Ladies Salon location"
              src="https://www.google.com/maps?q=Platinum%20Black%20Ladies%20Salon%20Emirates%20Financial%20Tower%20DIFC%20Dubai&z=16&output=embed"
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
            />
            <div className="map-pin"><span>★</span></div>
            <div className="info">
              <h3>Platinum Black · DIFC</h3>
              <p>Ground floor, Emirates Financial Tower · Al Sukook St, DIFC · Dubai</p>
              <a className="btn btn-link" href="https://maps.app.goo.gl/d3qBmBAw55ZK5KEL8" target="_blank" rel="noopener">Open in Maps ↗</a>
            </div>
          </div>
        </div>
      </section>

      {/* Quick-pick CTA */}
      <section className="shell-wide section">
        <div className="pillars">
          <div className="pillar">
            <div className="num">→</div>
            <div className="title">For a quick booking</div>
            <p className="body" style={{ marginBottom: 20 }}>Online booking — under sixty seconds, no phone tag.</p>
            <a href="#/book" className="btn btn-primary btn-arrow">Book online</a>
          </div>
          <div className="pillar">
            <div className="num">→</div>
            <div className="title">For a stylist conversation</div>
            <p className="body" style={{ marginBottom: 20 }}>WhatsApp the salon — share photos, ask about colour, get a quote.</p>
            <a href={PB_C.brand.whatsappHref} target="_blank" rel="noopener" className="btn btn-ghost">WhatsApp us</a>
          </div>
          <div className="pillar">
            <div className="num">→</div>
            <div className="title">For something specific</div>
            <p className="body" style={{ marginBottom: 20 }}>Bridal parties, events, partner offers — drop us a note.</p>
            <a href={PB_C.brand.emailHref} className="btn btn-ghost">Send an email</a>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { PageContact });