const FRESHA_URL = 'https://www.fresha.com/a/hayre-grooming-salon-abu-dhabi-hayre-grooming-salon-united-square-gwywnytl/booking';
const MAPS_URL   = 'https://share.google/s0vmIT502uhOf8Tir';
const IG_URL     = 'https://instagram.com/hayre.ae';
const WHATSAPP_URL = 'https://wa.me/971563690151?text=Hi%20HAYRE%2C%20I%27d%20like%20to%20book%20an%20appointment.';
const { InstagramIcon, WhatsAppIcon, FreshaIcon, ArrowIcon } = window.HayreIcons;

const Contact = () => {
  return (
    <section className="contact" id="contact" data-screen-label="06 Contact">

      <div className="contact-grid">

        {/* Location */}
        <div className="contact-card contact-card-location">
          <div className="contact-card-label">Location</div>
          <div className="contact-location-main">
            <div className="contact-location-copy">
              <h3 className="contact-card-val contact-location-title">
                United Square Mall
                <span className="contact-location-title-sub">
                  Al Danah - Zone 1, Abu Dhabi
                </span>
              </h3>
              <div className="contact-location-tags" aria-label="Location details">
                <span>Al Danah</span>
                <span>Zone 1</span>
                <span>Abu Dhabi</span>
              </div>
            </div>
            <div className="contact-location-badge" aria-hidden="true">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"/>
                <circle cx="12" cy="9" r="2.5"/>
              </svg>
            </div>
          </div>
          <a href={MAPS_URL} target="_blank" rel="noopener noreferrer" className="contact-card-link contact-location-cta">
            <span className="contact-link-icon" aria-hidden="true">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" vectorEffect="non-scaling-stroke">
                <path d="M12 3.25c-3.87 0-7 3.13-7 7 0 5.03 7 10.5 7 10.5s7-5.47 7-10.5c0-3.87-3.13-7-7-7Z"/>
                <circle cx="12" cy="10.25" r="2.4"/>
              </svg>
            </span>
            Open in Maps
            <ArrowIcon className="contact-link-arrow" />
          </a>
        </div>

        {/* Hours */}
        <div className="contact-card">
          <div className="contact-card-label">Hours</div>
          <div className="contact-hours">
            <div className="contact-hours-row">
              <span>Daily</span>
              <span>10:00 AM — 11:00 PM</span>
            </div>
            <div className="contact-hours-row">
              <span>7 days a week</span>
            </div>
          </div>
        </div>

        {/* Connect */}
        <div className="contact-card">
          <div className="contact-card-label">Connect</div>
          <div className="contact-links">
            <a href={IG_URL} target="_blank" rel="noopener noreferrer" className="contact-card-link">
              <span className="contact-link-icon" aria-hidden="true">
                <InstagramIcon />
              </span>
              @hayre.ae
              <ArrowIcon className="contact-link-arrow" />
            </a>
            <a href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer" className="contact-card-link contact-card-link-whatsapp">
              <span className="contact-link-icon contact-link-icon-whatsapp" aria-hidden="true">
                <WhatsAppIcon />
              </span>
              WhatsApp · 056 369 0151
              <ArrowIcon className="contact-link-arrow" />
            </a>
            <a href="https://www.fresha.com/a/hayre-grooming-salon-abu-dhabi-hayre-grooming-salon-united-square-gwywnytl" target="_blank" rel="noopener noreferrer" className="contact-card-link">
              <span className="contact-link-icon" aria-hidden="true">
                <FreshaIcon />
              </span>
              Fresha · 5.0 ★ · 51 reviews
              <ArrowIcon className="contact-link-arrow" />
            </a>
          </div>
        </div>

      </div>

    </section>
  );
};

window.Contact = Contact;