<dialog id="locations" class="modal">
    <div class="modal-box w-11/12 max-w-5xl">
      <h3 class="text-lg font-bold">Lokasi</h3>
      <div class="flex gap-5 py-3">
        <a href="https://www.google.com/maps/place/Dewan+Jubli+Perak+Sultan+Haji+Ahmad+Shah,+25050+Kuantan,+Pahang/@3.8135328,103.3555221,17z/data=!3m1!4b1!4m6!3m5!1s0x31c8bab328852f97:0x7e3efd0d22856f1c!8m2!3d3.8135275!4d103.358097!16s%2Fg%2F12hm16lfh?entry=ttu" target="_blank" class="flex items-center space-x-2 font-medium text-blue-600">
          <i class="fa-solid fa-location-dot text-2xl"></i>
          <span>Google Maps</span>
        </a>
        <a href="https://waze.com/ul?ll=3.813773712972233,103.3581291828455&navigate=yes" target="_blank" class="flex items-center space-x-2 font-medium text-blue-600">
          <i class="fa-brands fa-waze text-2xl"></i>
          <span>Waze</span>
        </a>
      </div>
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3980.9840129264994!2d103.35552207581303!3d3.813532848707699!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31c8bab328852f97%3A0x7e3efd0d22856f1c!2sDewan%20Jubli%20Perak%20Sultan%20Haji%20Ahmad%20Shah%2C%2025050%20Kuantan%2C%20Pahang!5e0!3m2!1sen!2smy!4v1720312231149!5m2!1sen!2smy"
        width="100%"
        height="300"
        frameborder="0"
        style="border:0"
        allowfullscreen=""
        aria-hidden="false"
        tabindex="0"
        class="rounded-md">
      </iframe>
      <div class="modal-action">
        <form method="dialog">
          <!-- if there is a button, it will close the modal -->
          <button class="btn">Tutup</button>
        </form>
      </div>
    </div>
  </dialog>