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

<script lang="ts">
  import ModalShell from '$lib/components/ModalShell.svelte';

  export let email = 'info@goodwalk.co.nz';
  export let enquiryType: 'booking' | 'general' = 'booking';
  export let onClose: () => void;
  export let onRetry: (() => void) | null = null;
  export let detail = '';

  $: isGeneralEnquiry = enquiryType === 'general';
  $: mailtoHref =
    `mailto:${email}` +
    `?subject=${encodeURIComponent(isGeneralEnquiry ? 'General enquiry' : 'Booking enquiry')}` +
    `&body=${encodeURIComponent(
      isGeneralEnquiry
        ? "Hi Aless,\n\nI tried to submit the contact form but it didn't go through. Here are my details:\n\nName:\nPhone:\nMessage:\n\nThanks!"
        : "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!"
    )}`;
</script>

<ModalShell {onClose} ariaLabelledBy="error-modal-heading">
    <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>
</ModalShell>

<style>
  .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: var(--gw-green);
    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: var(--gw-green);
    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: var(--gw-green);
    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: var(--gw-green);
    color: #ffd100;
  }

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

  .modal-btn-secondary {
    background: transparent;
    color: var(--gw-green);
    border: 1px solid #d4d2c6;
  }

  .modal-btn-secondary:hover {
    background: #f2f2f0;
    border-color: var(--gw-green);
  }

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