From 1221674fd99417ca86eae571202b74d1e5543ce8 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Fri, 10 Apr 2026 14:56:04 -0400
Subject: [PATCH] feat: add spots counter, cancellation policy, and update
 registration perks

- Live spots counter (X of 60 remaining) with progress bar on registration sidebar
- Cancellation policy on step 2: 70% refund >1 month, 30% refund >1 week, none <1 week
- Updated sidebar perks to reflect actual offering (was "priority booking when tickets open")

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 index.html | 80 ++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 78 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 9e680ed..3d1e8ed 100644
--- a/index.html
+++ b/index.html
@@ -1164,6 +1164,57 @@
             border-color: var(--accent-purple);
         }
 
+        /* Spots counter */
+        .spots-counter {
+            background: rgba(255, 0, 110, 0.08);
+            border: 1px solid rgba(255, 0, 110, 0.3);
+            border-radius: 12px;
+            padding: 1.25rem 1.5rem;
+            margin-bottom: 2rem;
+            text-align: center;
+        }
+
+        .spots-number {
+            font-family: 'Space Mono', monospace;
+            font-size: 1.1rem;
+            color: var(--text-primary);
+            margin-bottom: 0.75rem;
+        }
+
+        .spots-number span:first-child {
+            font-size: 2rem;
+            font-weight: 700;
+            color: var(--accent-magenta);
+        }
+
+        .spots-label {
+            font-size: 0.9rem;
+            color: var(--text-secondary);
+        }
+
+        .spots-bar {
+            height: 6px;
+            background: rgba(255, 0, 110, 0.15);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 0.75rem;
+        }
+
+        .spots-bar-fill {
+            height: 100%;
+            background: var(--gradient-3);
+            border-radius: 3px;
+            transition: width 1s ease;
+            width: 0%;
+        }
+
+        .spots-note {
+            font-size: 0.8rem;
+            color: var(--text-secondary);
+            margin: 0;
+            font-style: italic;
+        }
+
         /* Call to Action */
         .cta-section {
             text-align: center;
@@ -1718,12 +1769,18 @@
 
             <div class="register-content">
                 <div class="register-info">
-                    <h3>Early registration gets you</h3>
+                    <div class="spots-counter" id="spots-counter">
+                        <div class="spots-number"><span id="spots-remaining">--</span> <span class="spots-label">of 60 spots remaining</span></div>
+                        <div class="spots-bar"><div class="spots-bar-fill" id="spots-bar-fill"></div></div>
+                        <p class="spots-note">Rooms are assigned first-come, first-served. Popular options fill up fast.</p>
+                    </div>
+
+                    <h3>What you get</h3>
 
                     <ul class="register-perks">
                         <li>
                             <span class="check">✓</span>
-                            <span>Priority booking when tickets open</span>
+                            <span>7 days of sessions, workshops, games and LARPs</span>
                         </li>
                         <li>
                             <span class="check">✓</span>
@@ -1985,6 +2042,10 @@
                             <strong>About food:</strong> Food is not included in this payment. Expect approximately &euro;15–20 per person per day. We'll be in touch about food choices and dietary preferences before the event.
                         </div>
 
+                        <div class="info-box" style="background: rgba(157, 78, 221, 0.08); border-color: rgba(157, 78, 221, 0.3);">
+                            <strong style="color: var(--accent-purple);">Deposit &amp; cancellation:</strong> This is a full payment. If you cancel more than 1 month before the event, you'll receive a 70% refund. If you cancel between 1 month and 1 week before, you'll receive a 30% refund. No refunds within 1 week of the event.
+                        </div>
+
                         <div class="form-submit">
                             <button type="button" class="btn btn-primary" id="btn-pay">Pay via Mollie</button>
                         </div>
@@ -2073,6 +2134,21 @@
             }, 800);
         });
 
+        // Spots counter — fetch registration count
+        const MAX_SPOTS = 60;
+        (async function loadSpots() {
+            try {
+                const res = await fetch('/api/stats');
+                if (!res.ok) return;
+                const stats = await res.json();
+                const taken = stats.totalRegistrations || 0;
+                const remaining = Math.max(0, MAX_SPOTS - taken);
+                document.getElementById('spots-remaining').textContent = remaining;
+                const pct = Math.min(100, Math.round((taken / MAX_SPOTS) * 100));
+                document.getElementById('spots-bar-fill').style.width = pct + '%';
+            } catch(e) { /* silently fail */ }
+        })();
+
         // Mobile navigation toggle
         const navToggle = document.querySelector('.nav-toggle');
         const navLinks = document.querySelector('.nav-links');