refactor contact form

- Change positions of submit button and turnstile widget
- Turnstile widget only appears on interaction with contact form

src/components/svelte/ContactForm.svelte

@@ -15,10 +15,14 @@
   let errorMessage = $state('')
   let turnstileWidgetId: string | null = $state(null)
   let turnstileContainer: HTMLElement
+  let turnstileInitialized = false
 
   const TURNSTILE_SITEKEY = sitekey
 
-  onMount(() => {
+  function initTurnstile() {
+    if (turnstileInitialized) return
+    turnstileInitialized = true
+
     // Wait for Turnstile script to load
     const interval = setInterval(() => {
       if (typeof window.turnstile !== 'undefined') {
@@ -32,9 +36,10 @@
         })
       }
     }, 100)
+  }
 
+  onMount(() => {
     return () => {
-      clearInterval(interval)
       if (turnstileWidgetId !== null && typeof window.turnstile !== 'undefined') {
         window.turnstile.remove(turnstileWidgetId)
       }
@@ -111,7 +116,7 @@
   }
 </script>
 
-<form onsubmit={handleSubmit} class="flex flex-col gap-4">
+<form onsubmit={handleSubmit} onfocusin={initTurnstile} class="flex flex-col gap-4">
   <div class="flex flex-col gap-2">
     <label for="name" class="text-sm font-medium text-foreground">
       Name <span class="text-destructive">*</span>
@@ -157,8 +162,7 @@
     ></textarea>
   </div>
 
-  <!-- Turnstile Widget -->
+  
-  <div bind:this={turnstileContainer} class="flex justify-center"></div>
 
   {#if formState === 'success'}
     <div class="flex items-center gap-2 rounded-md bg-primary/10 border border-primary/20 px-4 py-3 text-sm text-primary">
@@ -174,17 +178,22 @@
     </div>
   {/if}
 
-  <button
+  <div class="flex items-start justify-between gap-4 min-h-[65px]">
-    type="submit"
+    <!-- Turnstile Widget (300x65 for normal size) -->
-    disabled={formState === 'submitting'}
+    <div bind:this={turnstileContainer} class="min-w-[300px]"></div>
-    class="inline-flex items-center justify-center gap-2 rounded-md bg-primary px-6 py-2.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all duration-200"
+
-  >
+    <button
-    {#if formState === 'submitting'}
+      type="submit"
-      <span class="inline-block size-4 animate-spin rounded-full border-2 border-current border-t-transparent"></span>
+      disabled={formState === 'submitting'}
-      Sending...
+      class="inline-flex items-center justify-center gap-2 rounded-md bg-primary px-6 py-2.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all duration-200"
-    {:else}
+    >
-      <IconSend class="size-4" />
+      {#if formState === 'submitting'}
-      Send Message
+        <span class="inline-block size-4 animate-spin rounded-full border-2 border-current border-t-transparent"></span>
-    {/if}
+        Sending...
-  </button>
+      {:else}
+        <IconSend class="size-4" />
+        Send Message
+      {/if}
+    </button>
+  </div>
 </form>