fix footer email + style footer mobile

site/snippets/footer.php

@@ -13,10 +13,46 @@
       </p>
     </div>
   </div>
-  <form action="">
+  <div 
+    x-data="{
+      btnMsg: 's\'inscrire',
+      submit(event) {
+        event.preventDefault()
+        
+        const email = this.$refs.emailInput.value;
+        const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+        
+        if (emailRegex.test(email)) {
+          const options = {
+            method: 'POST',
+            body: JSON.stringify({
+              email
+            })
+          }
+
+          fetch('/brevo-create-contact.json', options)
+            .then(res => res.json())
+            .then(json => {
+              console.log(json)
+              this.$refs.emailInput.value = 'Vous êtes inscrit !'
+              this.$refs.emailSubmit.setAttribute('disabled', 'true')
+            })
+        } else {
+          this.btnMsg = 'email invalide'
+          this.$refs.emailInput.value = ''
+          setTimeout(() => {
+            this.btnMsg = 'réessayer'
+          }, 2000)
+        } 
+      }
+    }"
+  >
     <p>S'inscrire à la newsletter</p>
-    <input placeholder="e-mail" type="email" name="email" autocomplete="email" id="email">
-  </form>
+    <form action="">
+      <input placeholder="e-mail" type="email" name="email" autocomplete="email" id="email" x-ref="emailInput">
+      <button type="submit" @click="submit" x-ref="emailSubmit">→</button>
+    </form>
+  </div>
   <div class="main-footer__infos">
     <?= $site->footerInfos() ?>
   </div>