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,6 +178,10 @@
     </div>
   {/if}
 
+  <div class="flex items-start justify-between gap-4 min-h-[65px]">
+    <!-- Turnstile Widget (300x65 for normal size) -->
+    <div bind:this={turnstileContainer} class="min-w-[300px]"></div>
+
     <button
       type="submit"
       disabled={formState === 'submitting'}
@@ -187,4 +195,5 @@
         Send Message
       {/if}
     </button>
+  </div>
 </form>