feat(registration): add watcher capacity limits and update pricing

Add 70-person capacity limit for watchers with real-time availability checks.
Update drink card pricing to €5 per person (was €5 base + €2 per guest).
Add feature flag to bypass registration countdown.
Show under-review notice for performer registrations.
Update FAQ performance duration from 5-7 to 5 minutes.

apps/web/src/components/homepage/EventRegistrationForm.tsx

@@ -1,3 +1,4 @@
+import { useQuery } from "@tanstack/react-query";
 import confetti from "canvas-confetti";
 import { useEffect, useRef, useState } from "react";
 import { CountdownBanner } from "@/components/homepage/CountdownBanner";
@@ -5,6 +6,7 @@ import { PerformerForm } from "@/components/registration/PerformerForm";
 import { TypeSelector } from "@/components/registration/TypeSelector";
 import { WatcherForm } from "@/components/registration/WatcherForm";
 import { useRegistrationOpen } from "@/lib/useRegistrationOpen";
+import { orpc } from "@/utils/orpc";
 
 function fireConfetti() {
 	const colors = ["#d82560", "#52979b", "#d09035", "#214e51", "#ffffff"];
@@ -48,6 +50,8 @@ export default function EventRegistrationForm() {
 	const { isOpen } = useRegistrationOpen();
 	const confettiFired = useRef(false);
 
+	const { data: capacity } = useQuery(orpc.getWatcherCapacity.queryOptions());
+
 	useEffect(() => {
 		if (isOpen && !confettiFired.current) {
 			confettiFired.current = true;
@@ -88,7 +92,13 @@ export default function EventRegistrationForm() {
 					Doe je mee of kom je kijken? Kies je rol en vul het formulier in.
 				</p>
 
-				{!selectedType && <TypeSelector onSelect={setSelectedType} />}
+				{!selectedType && (
+					<TypeSelector
+						onSelect={setSelectedType}
+						watcherIsFull={capacity?.isFull ?? false}
+						watcherAvailable={capacity?.available ?? null}
+					/>
+				)}
 				{selectedType === "performer" && (
 					<PerformerForm
 						onBack={() => setSelectedType(null)}

apps/web/src/components/homepage/HoeInschrijven.tsx

@@ -39,9 +39,8 @@ export default function HoeInschrijven() {
 						</h3>
 						<p className="text-[#214e51]/70 text-base leading-relaxed">
 							We vragen een bijdrage van{" "}
-							<strong className="text-[#214e51]">€5 per inschrijving</strong> en{" "}
-							<strong className="text-[#214e51]">€2 per extra persoon</strong>{" "}
-							die je meebrengt.
+							<strong className="text-[#214e51]">€5 per persoon</strong> — voor
+							jou én iedereen die je meebrengt.
 						</p>
 					</div>
 

apps/web/src/components/homepage/Info.tsx

@@ -12,7 +12,7 @@ const faqQuestions = [
 	{
 		question: "Hoelang mag mijn optreden duren?",
 		answer:
-			"Elke deelnemer krijgt 5-7 minuten podiumtijd. Zo houden we de avond dynamisch en krijgt iedereen een kans om te shinen.",
+			"Elke deelnemer krijgt 5 minuten podiumtijd. Zo houden we de avond dynamisch en krijgt iedereen een kans om te shinen.",
 	},
 	{
 		question: "Waar vindt het plaats?",

apps/web/src/components/registration/PerformerForm.tsx

@@ -441,6 +441,33 @@ export function PerformerForm({ onBack, onSuccess }: Props) {
 					<GiftSelector value={giftAmount} onChange={setGiftAmount} />
 				</div>
 
+				{/* Under review notice */}
+				<div className="flex items-start gap-3 rounded-lg border border-amber-400/30 bg-amber-400/10 p-4">
+					<svg
+						className="mt-0.5 h-5 w-5 shrink-0 text-amber-300"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						strokeWidth={1.5}
+						aria-hidden="true"
+					>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
+						/>
+					</svg>
+					<div>
+						<p className="font-semibold text-amber-300 text-sm">
+							Jouw inschrijving staat onder voorbehoud
+						</p>
+						<p className="mt-1 text-sm text-white/70">
+							Na het indienen wordt je aanvraag beoordeeld. Je ontvangt een
+							bevestiging of je effectief uitgenodigd wordt om op te treden.
+						</p>
+					</div>
+				</div>
+
 				<div className="flex flex-col items-center gap-4 pt-4">
 					<button
 						type="submit"

apps/web/src/components/registration/TypeSelector.tsx

@@ -2,9 +2,15 @@ type RegistrationType = "performer" | "watcher";
 
 interface Props {
 	onSelect: (type: RegistrationType) => void;
+	watcherIsFull?: boolean;
+	watcherAvailable?: number | null;
 }
 
-export function TypeSelector({ onSelect }: Props) {
+export function TypeSelector({
+	onSelect,
+	watcherIsFull = false,
+	watcherAvailable = null,
+}: Props) {
 	return (
 		<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
 			{/* Performer card */}
@@ -59,10 +65,17 @@ export function TypeSelector({ onSelect }: Props) {
 			{/* Watcher card */}
 			<button
 				type="button"
-				onClick={() => onSelect("watcher")}
-				className="group relative flex flex-col overflow-hidden border border-white/20 bg-white/5 p-8 text-left transition-all duration-300 hover:border-white/50 hover:bg-white/10 md:p-10"
+				onClick={() => !watcherIsFull && onSelect("watcher")}
+				disabled={watcherIsFull}
+				className={`group relative flex flex-col overflow-hidden border p-8 text-left transition-all duration-300 md:p-10 ${
+					watcherIsFull
+						? "cursor-not-allowed border-white/10 bg-white/3 opacity-60"
+						: "border-white/20 bg-white/5 hover:border-white/50 hover:bg-white/10"
+				}`}
 			>
-				<div className="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-teal-400 to-cyan-400 opacity-80" />
+				<div
+					className={`absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-teal-400 to-cyan-400 ${watcherIsFull ? "opacity-30" : "opacity-80"}`}
+				/>
 				<div className="mb-6 flex h-14 w-14 items-center justify-center rounded-full bg-teal-400/15 text-teal-300">
 					<svg
 						className="h-7 w-7"
@@ -83,31 +96,47 @@ export function TypeSelector({ onSelect }: Props) {
 					Ik wil komen kijken
 				</h3>
 				<p className="mb-4 text-white/70">
-					Geniet van een avond vol talent en kunst. Je betaald 5EUR inkom dat je
-					mag gebruiken op je drinkkaart.
+					Geniet van een avond vol talent en kunst. Je betaalt €5 per persoon —
+					dit gaat volledig naar je drinkkaart.
 				</p>
-				<div className="mb-6 inline-flex items-center gap-2 rounded-full border border-teal-400/40 bg-teal-400/10 px-4 py-1.5">
-					<span className="font-semibold text-sm text-teal-300">
-						Drinkkaart 5 EUR te betalen bij registratie
-					</span>
-				</div>
-				<div className="mt-auto flex items-center gap-2 font-medium text-sm text-teal-300">
-					<span>Inschrijven als bezoeker</span>
-					<svg
-						className="h-4 w-4 transition-transform group-hover:translate-x-1"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke="currentColor"
-						strokeWidth={2}
-						aria-hidden="true"
-					>
-						<path
-							strokeLinecap="round"
-							strokeLinejoin="round"
-							d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"
-						/>
-					</svg>
-				</div>
+				{watcherIsFull ? (
+					<div className="mb-6 inline-flex items-center gap-2 rounded-full border border-red-400/40 bg-red-400/10 px-4 py-1.5">
+						<span className="font-semibold text-red-300 text-sm">
+							Volzet — geen plaatsen meer beschikbaar
+						</span>
+					</div>
+				) : (
+					<div className="mb-6 inline-flex items-center gap-2 rounded-full border border-teal-400/40 bg-teal-400/10 px-4 py-1.5">
+						<span className="font-semibold text-sm text-teal-300">
+							€5 per persoon — drinkkaart inbegrepen
+							{watcherAvailable !== null && watcherAvailable <= 10 && (
+								<span className="ml-1 text-amber-300">
+									({watcherAvailable}{" "}
+									{watcherAvailable === 1 ? "plaats" : "plaatsen"} vrij)
+								</span>
+							)}
+						</span>
+					</div>
+				)}
+				{!watcherIsFull && (
+					<div className="mt-auto flex items-center gap-2 font-medium text-sm text-teal-300">
+						<span>Inschrijven als bezoeker</span>
+						<svg
+							className="h-4 w-4 transition-transform group-hover:translate-x-1"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+							strokeWidth={2}
+							aria-hidden="true"
+						>
+							<path
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"
+							/>
+						</svg>
+					</div>
+				)}
 			</button>
 		</div>
 	);

apps/web/src/components/registration/WatcherForm.tsx

@@ -227,7 +227,7 @@ export function WatcherForm({ onBack, onSuccess }: Props) {
 					<p className="font-semibold text-white">Drinkkaart inbegrepen</p>
 					<p className="text-sm text-white/70">
 						Je betaald bij registratie
-						<strong className="text-teal-300">€5</strong> (+ €2 per
+						<strong className="text-teal-300"> €5</strong> (+ €5 per
 						medebezoeker) dat gaat naar je drinkkaart.
 						{guests.length > 0 && (
 							<span className="ml-1 font-semibold text-teal-300">

apps/web/src/lib/opening.ts

@@ -3,3 +3,10 @@
  * Change this date to reschedule — all gating logic imports from here.
  */
 export const REGISTRATION_OPENS_AT = new Date("2026-03-16T19:00:00+01:00");
+
+/**
+ * Feature flag for the registration countdown gate.
+ * Set to `false` to bypass the countdown and always show the registration form.
+ * Set to `true` to enforce the countdown until REGISTRATION_OPENS_AT.
+ */
+export const COUNTDOWN_ENABLED = true;

apps/web/src/lib/registration.ts

@@ -6,8 +6,9 @@
 // ---------------------------------------------------------------------------
 
 export const DRINK_CARD_BASE = 5; // €5 for primary registrant
-export const DRINK_CARD_PER_GUEST = 2; // €2 per additional guest
+export const DRINK_CARD_PER_GUEST = 5; // €5 per additional guest (same as primary)
 export const MAX_GUESTS = 9;
+export const MAX_WATCHERS = 70; // max total watcher spots (people, not registrations)
 
 /** Returns drink card value in euros for a given number of extra guests. */
 export function calculateDrinkCard(guestCount: number): number {

apps/web/src/lib/useRegistrationOpen.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { REGISTRATION_OPENS_AT } from "./opening";
+import { COUNTDOWN_ENABLED, REGISTRATION_OPENS_AT } from "./opening";
 
 interface RegistrationOpenState {
 	isOpen: boolean;
@@ -10,6 +10,9 @@ interface RegistrationOpenState {
 }
 
 function compute(): RegistrationOpenState {
+	if (!COUNTDOWN_ENABLED) {
+		return { isOpen: true, days: 0, hours: 0, minutes: 0, seconds: 0 };
+	}
 	const diff = REGISTRATION_OPENS_AT.getTime() - Date.now();
 	if (diff <= 0) {
 		return { isOpen: true, days: 0, hours: 0, minutes: 0, seconds: 0 };

apps/web/src/routes/manage.$token.tsx

@@ -569,7 +569,7 @@ function ManageRegistrationPage() {
 				Jouw inschrijving
 			</h1>
 			<p className="mb-8 text-white/60">
-				Open Mic Night — vrijdag 18 april 2026
+				Open Mic Night — vrijdag 24 april 2026
 			</p>
 
 			{/* Type badge */}

packages/api/src/routers/index.ts

@@ -62,9 +62,11 @@ const REMINDER_24H_WINDOW_END = new Date(
 // Shared helpers
 // ---------------------------------------------------------------------------
 
-/** Drink card price in euros: €5 base + €2 per extra guest. */
+const MAX_WATCHERS = 70; // max total watcher spots (people, not registrations)
+
+/** Drink card price in euros: €5 per person (primary + guests). */
 function drinkCardEuros(guestCount: number): number {
-	return 5 + guestCount * 2;
+	return 5 + guestCount * 5;
 }
 
 /** Drink card price in cents for payment processing. */
@@ -301,6 +303,28 @@ export const appRouter = {
 	healthCheck: publicProcedure.handler(() => "OK"),
 	drinkkaart: drinkkaartRouter,
 
+	getWatcherCapacity: publicProcedure.handler(async () => {
+		const rows = await db
+			.select({ guests: registration.guests })
+			.from(registration)
+			.where(
+				and(
+					eq(registration.registrationType, "watcher"),
+					isNull(registration.cancelledAt),
+				),
+			);
+		const takenSpots = rows.reduce((sum, r) => {
+			const g = r.guests ? (JSON.parse(r.guests) as unknown[]) : [];
+			return sum + 1 + g.length;
+		}, 0);
+		return {
+			total: MAX_WATCHERS,
+			taken: takenSpots,
+			available: Math.max(0, MAX_WATCHERS - takenSpots),
+			isFull: takenSpots >= MAX_WATCHERS,
+		};
+	}),
+
 	privateData: protectedProcedure.handler(({ context }) => ({
 		message: "This is private",
 		user: context.session?.user,
@@ -313,6 +337,29 @@ export const appRouter = {
 			const isPerformer = input.registrationType === "performer";
 			const guests = isPerformer ? [] : (input.guests ?? []);
 
+			// Enforce max watcher capacity (70 people total, counting guests)
+			if (!isPerformer) {
+				const rows = await db
+					.select({ guests: registration.guests })
+					.from(registration)
+					.where(
+						and(
+							eq(registration.registrationType, "watcher"),
+							isNull(registration.cancelledAt),
+						),
+					);
+				const takenSpots = rows.reduce((sum, r) => {
+					const g = r.guests ? (JSON.parse(r.guests) as unknown[]) : [];
+					return sum + 1 + g.length;
+				}, 0);
+				const newSpots = 1 + guests.length;
+				if (takenSpots + newSpots > MAX_WATCHERS) {
+					throw new Error(
+						`Er zijn helaas niet genoeg plaatsen meer beschikbaar. Nog ${MAX_WATCHERS - takenSpots} ${MAX_WATCHERS - takenSpots === 1 ? "plaats" : "plaatsen"} vrij.`,
+					);
+				}
+			}
+
 			await db.insert(registration).values({
 				id: randomUUID(),
 				firstName: input.firstName,