From 07f504c98943b47f73cc9267379072c7e95f63df Mon Sep 17 00:00:00 2001
From: Frank Meeuwsen <frank@frankmeeuwsen.com>
Date: Tue, 3 Mar 2026 10:17:48 +0100
Subject: [PATCH] fix: update availableSpots message to handle singular and
 plural forms

---
 src/components/FinalCTA.jsx  | 2 +-
 src/components/Hero.jsx      | 2 +-
 src/components/StickyBar.jsx | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/FinalCTA.jsx b/src/components/FinalCTA.jsx
index 957f3cd..1200bb5 100644
--- a/src/components/FinalCTA.jsx
+++ b/src/components/FinalCTA.jsx
@@ -51,7 +51,7 @@ function FinalCTA() {
               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
               </svg>
-              <span>Er zijn nog {availableSpots} plekken beschikbaar</span>
+              <span>Er zijn nog {availableSpots} {availableSpots === 1 ? 'plek' : 'plekken'} beschikbaar</span>
             </div>
             <div className="flex items-center gap-2">
               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
index 305b6f0..a6f6252 100644
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -39,7 +39,7 @@ function Hero() {
                 </span>
                 {isSoldOut
                   ? 'Volgeboekt - wachtlijst beschikbaar'
-                  : <><span className="line-through opacity-60">{totalSpots}</span>{' '}{availableSpots} plekken - kleine groep, persoonlijke aandacht</>
+                  : <><span className="line-through opacity-60">{totalSpots}</span>{' '}{availableSpots} {availableSpots === 1 ? 'plek' : 'plekken'} - kleine groep, persoonlijke aandacht</>
                 }
               </span>
             </div>
diff --git a/src/components/StickyBar.jsx b/src/components/StickyBar.jsx
index 9f98bf3..2121ba3 100644
--- a/src/components/StickyBar.jsx
+++ b/src/components/StickyBar.jsx
@@ -64,7 +64,7 @@ function StickyBar() {
                   <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
                   </svg>
-                  Nog {availableSpots} plekken beschikbaar
+                  Nog {availableSpots} {availableSpots === 1 ? 'plek' : 'plekken'} beschikbaar
                 </span>
               </div>
             </div>
@@ -98,7 +98,7 @@ function StickyBar() {
                 6 maart 2026 | Utrecht
               </div>
               <div className="text-xs text-coral-600 font-medium">
-                {isSoldOut ? 'Volgeboekt' : `Nog ${availableSpots} plekken beschikbaar`}
+                {isSoldOut ? 'Volgeboekt' : `Nog ${availableSpots} ${availableSpots === 1 ? 'plek' : 'plekken'} beschikbaar`}
               </div>
             </div>