Added Email Integration

demo.html

@@ -176,7 +176,7 @@
   <div class="container">
     <div class="page-hero-inner">
       <span class="page-hero-label">Book a demo</span>
-      <h1 id="demo-hero-h1">30-45 minutes.<br>Tailored to your frameworks and needs.<br><span class="accent">No hard sell.</span></h1>
+      <h1 id="demo-hero-h1">30 minutes.<br>Tailored to your framework.<br><span class="accent">No hard sell.</span></h1>
       <p>We'll show you RTOSure mapped to the compliance frameworks your college actually operates under — not a generic walkthrough. Bring your compliance manager. Or just come yourself.</p>
     </div>
   </div>
@@ -201,7 +201,7 @@
           </div>
           <div style="display:flex;gap:var(--space-md);align-items:flex-start;">
             <div style="width:32px;height:32px;background:var(--color-teal);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--color-white);flex-shrink:0;">3</div>
-            <div><strong style="color:var(--color-navy);display:block;margin-bottom:4px;">You ask the hard questions</strong><span style="font-size:14px;color:var(--color-slate);">You can table all your questions. Pricing, data security, onboarding, TEAMS or your current SMS integration — nothing is off limits.</span></div>
+            <div><strong style="color:var(--color-navy);display:block;margin-bottom:4px;">You ask the hard questions</strong><span style="font-size:14px;color:var(--color-slate);">We leave 10 minutes at the end for your questions. Pricing, data security, onboarding, TEAMS integration — nothing is off limits.</span></div>
           </div>
         </div>
 
@@ -218,7 +218,11 @@
       <!-- Right: booking form -->
       <div style="background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-2xl);">
         <h2 style="font-size:22px;font-weight:700;color:var(--color-navy);margin-bottom:var(--space-xl);">Book your demo</h2>
-        <form action="#" method="POST" aria-label="Demo booking form">
+        <form id="demo-booking-form" action="https://api-demo.rtosure.com.au/api/book-demo" method="post" aria-label="Demo booking form">
+          <div aria-hidden="true" style="position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;">
+            <label for="f-website">Website</label>
+            <input type="text" id="f-website" name="website" tabindex="-1" autocomplete="off">
+          </div>
           <div class="form-field"><label class="form-label" for="f-name">Your name *</label><input class="form-input" type="text" id="f-name" name="name" autocomplete="name" required placeholder="Jane Smith"></div>
           <div class="form-field"><label class="form-label" for="f-org">Organisation *</label><input class="form-input" type="text" id="f-org" name="organisation" required placeholder="Australian Training College"></div>
           <div class="form-field"><label class="form-label" for="f-email">Work email *</label><input class="form-input" type="email" id="f-email" name="email" autocomplete="email" required placeholder="jane@college.edu.au"></div>
@@ -252,8 +256,8 @@
             </select>
           </div>
           <div class="form-field"><label class="form-label" for="f-notes">Anything specific you'd like us to cover?</label><textarea class="form-input" id="f-notes" name="notes" placeholder="Optional — any particular Standards, features, or questions you want to address"></textarea></div>
-          <button type="submit" class="btn btn-primary" style="width:100%;justify-content:center;font-size:16px;padding:16px;">Book My Demo</button>
+          <button id="demo-submit-button" type="submit" class="btn btn-primary" style="width:100%;justify-content:center;font-size:16px;padding:16px;">Book My Demo</button>
-          <p style="font-size:12px;color:var(--color-muted);text-align:center;margin-top:var(--space-md);">We'll confirm within one business day with a calendar link. Australian business hours.</p>
+          <p id="demo-form-status" aria-live="polite" style="font-size:12px;color:var(--color-muted);text-align:center;margin-top:var(--space-md);">We'll confirm within one business day with a calendar link. Australian business hours.</p>
         </form>
       </div>
     </div>
@@ -268,9 +272,72 @@
   function loadComp(id,f){var el=document.getElementById(id);if(!el)return;fetch(f).then(function(r){return r.text();}).then(function(h){el.innerHTML=h;el.querySelectorAll('script').forEach(function(s){var n=document.createElement('script');n.textContent=s.textContent;document.head.appendChild(n);});});}
   loadComp('site-header','header.html');
   loadComp('site-footer','footer.html');
+
+  var demoForm = document.getElementById('demo-booking-form');
+  if (demoForm) {
+    var status = document.getElementById('demo-form-status');
+    var submitButton = document.getElementById('demo-submit-button');
+
+    demoForm.addEventListener('submit', function(event) {
+      if (!demoForm.checkValidity()) return;
+
+      event.preventDefault();
+
+      var data = new FormData(demoForm);
+
+      if ((data.get('website') || '').toString().trim()) {
+        return;
+      }
+
+      var payload = {
+        name: (data.get('name') || '').toString().trim(),
+        organisation: (data.get('organisation') || '').toString().trim(),
+        email: (data.get('email') || '').toString().trim(),
+        framework: (data.get('framework') || '').toString(),
+        size: (data.get('size') || '').toString(),
+        method: (data.get('method') || '').toString(),
+        notes: (data.get('notes') || '').toString().trim(),
+        source: 'rtosure-demo-page',
+        sourcePage: window.location.href,
+        submittedAt: new Date().toISOString()
+      };
+
+      if (status) status.textContent = 'Submitting your demo request...';
+      if (submitButton) {
+        submitButton.disabled = true;
+        submitButton.textContent = 'Submitting...';
+      }
+
+      fetch(demoForm.action, {
+        method: 'POST',
+        mode: 'cors',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-RTOSure-Form': 'book-demo-v1'
+        },
+        body: JSON.stringify(payload)
+      })
+        .then(function(response) {
+          if (!response.ok) throw new Error('Request failed');
+          demoForm.reset();
+          if (status) status.textContent = 'Thanks. Your demo request has been submitted. Redirecting...';
+          window.location.href = 'demo-thank-you.html';
+        })
+        .catch(function() {
+          if (status) status.textContent = 'Sorry, the request could not be submitted. Please email support@rtosoftware.com.au and we will help you book the demo.';
+        })
+        .finally(function() {
+          if (submitButton) {
+            submitButton.disabled = false;
+            submitButton.textContent = 'Book My Demo';
+          }
+        });
+    });
+  }
+
   var obs=new IntersectionObserver(function(e){e.forEach(function(en){if(en.isIntersecting){en.target.style.opacity='1';en.target.style.transform='translateY(0)';}});},{threshold:.1,rootMargin:'0px 0px -40px 0px'});
   document.querySelectorAll('.cap-card,.pricing-card,.team-card,.resource-card,.trust-badge,.stat-block,.faq-item').forEach(function(el){el.style.opacity='0';el.style.transform='translateY(20px)';el.style.transition='opacity .5s ease,transform .5s ease';obs.observe(el);});
 })();
 </script>
 </body>
-</html>
+</html>