feat: implement SEO improvements, listing profiles, service images, and towns serviced

src/lib/components/ImageCropModal.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  export let open = false;
+  export let imageSrc = '';
+
+  const dispatch = createEventDispatcher<{
+    crop: Blob;
+    cancel: void;
+  }>();
+
+  let cropperInstance: import('cropperjs').default | null = null;
+  let isProcessing = false;
+
+  // Svelte action — only runs in the browser, so dynamic import is safe here
+  function initCropper(node: HTMLImageElement) {
+    import('cropperjs').then(({ default: Cropper }) => {
+      cropperInstance = new Cropper(node, {
+        aspectRatio: 1,
+        viewMode: 0,          // no restriction — canvas can move freely
+        dragMode: 'move',     // drag moves the image, not the crop box
+        cropBoxMovable: false,
+        cropBoxResizable: false,
+        toggleDragModeOnDblclick: false,
+        autoCropArea: 0.8,    // crop box = 80% so image extends beyond it and can be dragged
+      });
+    });
+
+    return {
+      destroy() {
+        cropperInstance?.destroy();
+        cropperInstance = null;
+      }
+    };
+  }
+
+  function handleApply() {
+    if (!cropperInstance) return;
+    isProcessing = true;
+
+    const canvas = cropperInstance.getCroppedCanvas({ width: 500, height: 500 });
+    canvas.toBlob(
+      (blob) => {
+        if (blob) dispatch('crop', blob);
+        isProcessing = false;
+      },
+      'image/jpeg',
+      0.92
+    );
+  }
+
+  function handleCancel() {
+    dispatch('cancel');
+  }
+</script>
+
+{#if open}
+  <div class="modal modal-open z-50">
+    <div class="modal-box max-w-2xl w-full">
+      <h3 class="font-bold text-lg mb-1">Crop Logo</h3>
+      <p class="text-sm text-base-content/50 mb-4">Drag to reposition &bull; Scroll or pinch to zoom</p>
+
+      <div class="w-full h-80 bg-base-300 rounded-lg overflow-hidden">
+        <img
+          src={imageSrc}
+          alt="Crop preview"
+          use:initCropper
+          class="block max-w-full"
+        />
+      </div>
+
+      <div class="modal-action mt-6">
+        <button class="btn btn-ghost" on:click={handleCancel} disabled={isProcessing}>
+          Cancel
+        </button>
+        <button class="btn btn-primary" on:click={handleApply} disabled={isProcessing}>
+          {#if isProcessing}
+            <span class="loading loading-spinner loading-sm"></span>
+            Processing...
+          {:else}
+            Apply Crop
+          {/if}
+        </button>
+      </div>
+    </div>
+    <div class="modal-backdrop bg-black/60" on:click={handleCancel} role="presentation"></div>
+  </div>
+{/if}