gw-svelte/src/lib/components/ErrorModal.svelte

<script lang="ts">
  export let email = 'info@goodwalk.co.nz';
  export let onClose: () => void;
  export let onRetry: (() => void) | null = null;
  export let detail = '';

  $: mailtoHref =
    `mailto:${email}` +
    `?subject=${encodeURIComponent('Booking enquiry')}` +
    `&body=${encodeURIComponent(
      'Hi Aless,\n\nI tried to submit the booking form but it didn’t go through. Here are my details:\n\nName:\nPhone:\nDog’s name:\nLocation:\n\nThanks!'
    )}`;

  function handleKeydown(event: KeyboardEvent) {
    if (event.key === 'Escape') onClose();
  }
</script>

<div
  class="modal-backdrop"
  role="dialog"
  aria-modal="true"
  aria-labelledby="error-modal-heading"
  on:click|self={onClose}
  on:keydown={handleKeydown}
  tabindex="-1"
>
  <div class="modal-card">
    <button class="modal-close" type="button" aria-label="Close" on:click={onClose}>
      &#x2715;
    </button>

    <div class="modal-icon" aria-hidden="true">
      <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
        <path d="M12 9v4" />
        <path d="M12 17h.01" />
        <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
      </svg>
    </div>

    <h2 id="error-modal-heading" class="modal-heading">We couldn&rsquo;t send that</h2>

    <p class="modal-body">
      Something went wrong on our end and your message didn&rsquo;t reach us. The
      quickest way to get in touch is to email us directly &mdash; we&rsquo;ll
      get back to you the same day.
    </p>

    <a href={mailtoHref} class="modal-email">
      <span class="modal-email-label">Email us at</span>
      <span class="modal-email-address">{email}</span>
    </a>

    {#if detail}
      <p class="modal-detail" title={detail}>{detail}</p>
    {/if}

    <div class="modal-actions">
      <a href={mailtoHref} class="modal-btn modal-btn-primary">
        Open email
      </a>
      {#if onRetry}
        <button type="button" class="modal-btn modal-btn-secondary" on:click={onRetry}>
          Try again
        </button>
      {/if}
    </div>
  </div>
</div>

<style>
  .modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(10, 20, 10, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: backdrop-in 0.25s ease;
  }

  .modal-card {
    position: relative;
    width: 100%;
    max-width: 480px;
    padding: 52px 48px 40px;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 24px 80px rgba(10, 20, 10, 0.22);
    text-align: center;
    animation: card-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .modal-close {
    position: absolute;
    top: 18px;
    right: 20px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: #f2f2f0;
    color: #888;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
      background 0.15s ease,
      color 0.15s ease;
  }

  .modal-close:hover {
    background: #e8e8e4;
    color: #333;
  }

  .modal-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fdecea;
    color: #c0392b;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    animation: bounce-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
  }

  .modal-heading {
    margin: 0 0 12px;
    font-size: 24px;
    font-weight: 700;
    color: #213021;
    line-height: 1.25;
  }

  .modal-body {
    margin: 0 0 22px;
    font-size: 15px;
    color: #555;
    line-height: 1.65;
  }

  .modal-email {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 20px;
    margin: 0 auto 8px;
    border-radius: 14px;
    background: #f7f6f1;
    border: 1px solid #ebe9df;
    color: #213021;
    text-decoration: none;
    transition:
      background 0.15s ease,
      transform 0.15s ease,
      border-color 0.15s ease;
  }

  .modal-email:hover {
    background: #fff8d6;
    border-color: #ffd100;
    transform: translateY(-1px);
  }

  .modal-email-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #888;
  }

  .modal-email-address {
    font-size: 17px;
    font-weight: 600;
    color: #213021;
    word-break: break-all;
  }

  .modal-detail {
    margin: 12px 0 0;
    font-size: 12px;
    color: #aaa;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    word-break: break-word;
  }

  .modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 26px;
  }

  .modal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 28px;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    transition:
      background 0.18s ease,
      color 0.18s ease,
      transform 0.15s ease,
      border-color 0.15s ease;
  }

  .modal-btn-primary {
    background: #213021;
    color: #ffd100;
  }

  .modal-btn-primary:hover {
    background: #2e4a2e;
    transform: translateY(-1px);
  }

  .modal-btn-secondary {
    background: transparent;
    color: #213021;
    border: 1px solid #d4d2c6;
  }

  .modal-btn-secondary:hover {
    background: #f2f2f0;
    border-color: #213021;
  }

  @keyframes backdrop-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes card-in {
    from {
      opacity: 0;
      transform: scale(0.88) translateY(16px);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  @keyframes bounce-in {
    from {
      opacity: 0;
      transform: scale(0.4);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @media (max-width: 480px) {
    .modal-card {
      padding: 44px 28px 32px;
    }
    .modal-actions {
      flex-direction: column;
    }
    .modal-btn {
      width: 100%;
    }
  }
</style>