Add newsletter form for non-logged-in users with success message

index.html

@@ -67,7 +67,9 @@
 
     .sidebar-col { position: sticky; top: 20px; height: fit-content; }
     .login-panel { background: var(--gray1); padding: 32px; border-radius: 16px; border: 1px solid var(--gray2); }
+    .newsletter-panel { background: var(--gray1); padding: 32px; border-radius: 16px; border: 1px solid var(--gray2); }
     .notebook { background: var(--white); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,.1); }
+    .newsletter-panel h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--gray2); }
     .notebook .tabs { display: flex; border-bottom: 2px solid var(--gray2); }
     .notebook .tab { flex: 1; padding: 14px; text-align: center; font-weight: 600; cursor: pointer; border: none; background: #f9fafb; color: #6b7280; }
     .notebook .tab.active { background: var(--white); color: var(--black); border-bottom: 3px solid var(--blue); }
@@ -245,6 +247,26 @@
         </div>
       </aside>
 
+      <aside class="sidebar-col hidden" id="newsletter-panel">
+        <div class="newsletter-panel">
+          <h3 class="hide-de">Newsletter</h3>
+          <h3 class="hide-en">Newsletter</h3>
+          <form id="newsletter-form">
+            <div class="form-group">
+              <label for="newsletter-email" class="hide-de">E-Mail-Adresse</label>
+              <label for="newsletter-email" class="hide-en">Email address</label>
+              <input type="email" id="newsletter-email" required placeholder="name@example.com" />
+            </div>
+            <button type="button" class="btn-primary hide-de" onclick="subscribeNewsletter()">Abonnieren</button>
+            <button type="button" class="btn-primary hide-en" onclick="subscribeNewsletter()">Subscribe</button>
+          </form>
+          <div id="newsletter-success" class="hidden">
+            <p class="hide-de">Bitte prüfen Sie Ihre E-Mails, um das Abonnement zu bestätigen.</p>
+            <p class="hide-en">Please check your emails to confirm your subscription.</p>
+          </div>
+        </div>
+      </aside>
+
       <aside class="sidebar-col hidden" id="notebook-panel">
         <div class="notebook">
           <div class="tabs">
@@ -286,21 +308,22 @@
     function checkSession() {
       const sessionid = getCookie('sessionid');
       console.log('checkSession: sessionid =', sessionid);
-      if (sessionid) {
       const intro = document.getElementById('intro-section');
       const news = document.getElementById('news-col');
       const login = document.getElementById('login-panel');
+      const newsletter = document.getElementById('newsletter-panel');
       const notebook = document.getElementById('notebook-panel');
-        console.log('checkSession elements:', { intro, news, login, notebook });
+      console.log('checkSession elements:', { intro, news, login, newsletter, notebook });
+      if (sessionid) {
         if (intro) intro.classList.add('hidden');
         if (news) news.classList.add('hidden');
         if (login) login.classList.add('hidden');
+        if (newsletter) newsletter.classList.add('hidden');
         if (notebook) notebook.classList.remove('hidden');
       } else {
-        const notebook = document.getElementById('notebook-panel');
-        const login = document.getElementById('login-panel');
         if (notebook) notebook.classList.add('hidden');
         if (login) login.classList.remove('hidden');
+        if (newsletter) newsletter.classList.remove('hidden');
       }
     }
 
@@ -408,6 +431,8 @@
       }
     }
 
+    const NEWSLETTER_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/newsletter';
+
     async function submitLoginData() {
       const name = document.getElementById('full-name').value.trim();
       const llc = document.getElementById('llc-name').value.trim();
@@ -448,6 +473,33 @@
       }
     }
 
+    async function subscribeNewsletter() {
+      const email = document.getElementById('newsletter-email').value.trim();
+      if (!email) { alert('Bitte geben Sie eine E-Mail-Adresse ein.'); return; }
+      const btn = document.querySelector('#newsletter-form .btn-primary');
+      btn.disabled = true; btn.textContent = document.body.dataset.lang === 'de' ? 'Absenden...' : 'Submitting...';
+      try {
+        const response = await fetch(NEWSLETTER_URL, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ email: email })
+        });
+        console.log('subscribeNewsletter response:', response.status, await response.clone().json());
+        if (response.ok) {
+          document.getElementById('newsletter-form').classList.add('hidden');
+          document.getElementById('newsletter-success').classList.remove('hidden');
+        } else {
+          alert('Fehler bei der Anmeldung. Bitte versuchen Sie es erneut.');
+          btn.disabled = false;
+          btn.textContent = document.body.dataset.lang === 'de' ? 'Abonnieren' : 'Subscribe';
+        }
+      } catch (error) {
+        console.error('subscribeNewsletter error:', error);
+        alert('Fehler bei der Verbindung. Bitte versuchen Sie es erneut.');
+        btn.disabled = false;
+        btn.textContent = document.body.dataset.lang === 'de' ? 'Abonnieren' : 'Subscribe';
+      }
+    }
 
     document.addEventListener('DOMContentLoaded', () => {
       checkSession();