---
const { address, label = 'Business location' } = Astro.props;
const mapUrl = `https://www.google.com/maps?q=${encodeURIComponent(address)}&output=embed`;
const directionsUrl = `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(address)}`;
---
<section class="location-map" aria-labelledby="location-map-heading">
  <div class="map-copy"><p class="eyebrow">Find us</p><h3 id="location-map-heading">Visit the pack.</h3><p>{address}</p><a class="text-link" href={directionsUrl} target="_blank" rel="noopener">Get directions <span aria-hidden="true">↗</span></a></div>
  <iframe title={`${label} map`} src={mapUrl} loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</section>