@bigz-app/booking-widget 0.3.6 → 0.3.9

package/dist/index.cjs

@@ -6908,7 +6908,7 @@ const preprocessMarkdown$1 = (markdown) => {
     // Convert double underscores to HTML underline tags for React Markdown
     return markdown.replace(/__([^_]+)__/g, "<u>$1</u>");
 };
-const IconCheck$1 = ({ size = 16, color = "#10b981" }) => (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) }));
+const IconCheck$2 = ({ size = 16, color = "#10b981" }) => (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) }));
 const IconWave$1 = ({ size = 20, color = "#0ea5e9" }) => (jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("path", { d: "M2 18c2-2 6-2 8 0s6 2 8 0 6-2 8 0" }), jsxRuntime.jsx("path", { d: "M2 12c2-2 6-2 8 0s6 2 8 0 6-2 8 0" }), jsxRuntime.jsx("path", { d: "M2 6c2-2 6-2 8 0s6 2 8 0 6-2 8 0" })] }));
 function EventTypeDetailsDialog({ isOpen, onClose, eventType, onEventTypeSelect, }) {
     if (!isOpen || !eventType)
@@ -6955,7 +6955,7 @@ function EventTypeDetailsDialog({ isOpen, onClose, eventType, onEventTypeSelect,
                                             fontSize: "16px",
                                             lineHeight: "1.6",
                                             color: "var(--bw-text-color)",
-                                        }, children: [jsxRuntime.jsx("div", { style: { marginTop: "4px", flexShrink: 0 }, children: jsxRuntime.jsx(IconCheck$1, { size: 16, color: "var(--bw-success-color)" }) }), jsxRuntime.jsx("span", { children: highlight.trim() })] }, index))) }) }) }))] }), eventType.description && (jsxRuntime.jsxs("div", { style: {
+                                        }, children: [jsxRuntime.jsx("div", { style: { marginTop: "4px", flexShrink: 0 }, children: jsxRuntime.jsx(IconCheck$2, { size: 16, color: "var(--bw-success-color)" }) }), jsxRuntime.jsx("span", { children: highlight.trim() })] }, index))) }) }) }))] }), eventType.description && (jsxRuntime.jsxs("div", { style: {
                         marginBottom: "24px",
                         color: "var(--bw-text-muted)",
                         fontSize: "16px",
@@ -7264,7 +7264,7 @@ const preprocessMarkdown = (markdown) => {
 // Custom minimal SVG icons (Lucide-style)
 const IconClock = ({ size = 16, color = "#10b981" }) => (jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }), jsxRuntime.jsx("polyline", { points: "12 6 12 12 16 14" })] }));
 const IconCalendar = ({ size = 16, color = "#3b82f6" }) => (jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }), jsxRuntime.jsx("line", { x1: "16", y1: "2", x2: "16", y2: "6" }), jsxRuntime.jsx("line", { x1: "8", y1: "2", x2: "8", y2: "6" }), jsxRuntime.jsx("line", { x1: "3", y1: "10", x2: "21", y2: "10" })] }));
-const IconCheck = ({ size = 16, color = "#10b981" }) => (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) }));
+const IconCheck$1 = ({ size = 16, color = "#10b981" }) => (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) }));
 // Wave icon for booking action
 const IconWave = ({ size = 20, color = "#0ea5e9" }) => (jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("path", { d: "M2 18c2-2 6-2 8 0s6 2 8 0 6-2 8 0" }), jsxRuntime.jsx("path", { d: "M2 12c2-2 6-2 8 0s6 2 8 0 6-2 8 0" }), jsxRuntime.jsx("path", { d: "M2 6c2-2 6-2 8 0s6 2 8 0 6-2 8 0" })] }));
 // Loading skeleton component that matches the actual design
@@ -7728,7 +7728,7 @@ function EventTypeSelection({ eventTypes, onEventTypeSelect, isLoading = false,
                                                                     color: "var(--bw-text-muted)",
                                                                     position: "relative",
                                                                     maxWidth: "100%",
-                                                                }, children: [jsxRuntime.jsx("div", { style: { marginTop: "4px", flexShrink: 0 }, children: jsxRuntime.jsx(IconCheck, { size: 16, color: "var(--bw-success-color)" }) }), jsxRuntime.jsx("span", { style: {
+                                                                }, children: [jsxRuntime.jsx("div", { style: { marginTop: "4px", flexShrink: 0 }, children: jsxRuntime.jsx(IconCheck$1, { size: 16, color: "var(--bw-success-color)" }) }), jsxRuntime.jsx("span", { style: {
                                                                             textOverflow: "ellipsis",
                                                                             overflow: "hidden",
                                                                             whiteSpace: "nowrap",
@@ -9131,6 +9131,110 @@ var reactStripe_umd = {exports: {}};
 
 var reactStripe_umdExports = reactStripe_umd.exports;
 
+// Component for bookings fully covered by gift cards (no Stripe payment needed)
+function GiftCardOnlyBooking({ config, eventDetails, formData, discountCode, giftCards, onSuccess, onError, }) {
+    const [isLoading, setIsLoading] = React__default.useState(false);
+    const [error, setError] = React__default.useState(null);
+    const handleBooking = async () => {
+        setIsLoading(true);
+        setError(null);
+        try {
+            // Create booking directly without Stripe payment
+            const requestData = {
+                eventInstanceId: config.eventInstanceId || eventDetails.id,
+                organizationId: config.organizationId,
+                participants: formData.participants.filter((p) => p.name?.trim()),
+                discountCode: discountCode?.code,
+                giftCardCodes: giftCards.map((gc) => gc.code),
+                customerName: formData.customerName?.trim(),
+                customerEmail: formData.customerEmail?.trim(),
+                customerPhone: formData.customerPhone?.trim(),
+                comment: formData.comment?.trim(),
+                paymentMethod: "gift_card",
+            };
+            const response = await fetch(getApiUrl(config.apiBaseUrl, "/booking/create-gift-card-booking"), {
+                method: "POST",
+                headers: createApiHeaders(config),
+                body: JSON.stringify(createRequestBody(config, requestData)),
+            });
+            const data = await response.json();
+            if (response.ok) {
+                onSuccess({
+                    booking: data.booking,
+                    order: data.order,
+                    giftCardRedemptions: data.giftCardRedemptions,
+                });
+            }
+            else {
+                setError(data.error || "Fehler beim Erstellen der Buchung");
+                onError(data.error || "Fehler beim Erstellen der Buchung");
+            }
+        }
+        catch (err) {
+            setError(err.message || "Fehler beim Erstellen der Buchung");
+            onError(err.message || "Fehler beim Erstellen der Buchung");
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    const totalGiftCardAmount = giftCards.reduce((sum, gc) => sum + (gc.balanceToUse || gc.discountAmount || 0), 0);
+    return (jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing)" }, children: [jsxRuntime.jsxs("div", { style: {
+                    backgroundColor: "var(--bw-success-color)15",
+                    border: "1px solid var(--bw-success-color)40",
+                    borderRadius: "var(--bw-border-radius)",
+                    padding: "var(--bw-spacing)",
+                }, children: [jsxRuntime.jsx("div", { style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "8px",
+                            marginBottom: "8px",
+                            color: "var(--bw-success-color)",
+                            fontFamily: "var(--bw-font-family)",
+                            fontWeight: "600",
+                        }, children: "\uD83C\uDF81 Vollst\u00E4ndig durch Gutschein(e) gedeckt" }), jsxRuntime.jsxs("div", { style: {
+                            fontSize: "var(--bw-font-size)",
+                            color: "var(--bw-text-muted)",
+                            fontFamily: "var(--bw-font-family)",
+                        }, children: ["Gutschein-Guthaben: ", formatCurrency(totalGiftCardAmount)] })] }), error && (jsxRuntime.jsxs("div", { style: {
+                    backgroundColor: "var(--bw-error-color)15",
+                    border: "1px solid var(--bw-error-color)40",
+                    borderRadius: "var(--bw-border-radius)",
+                    padding: "var(--bw-spacing)",
+                    color: "var(--bw-error-color)",
+                    fontSize: "var(--bw-font-size)",
+                    fontFamily: "var(--bw-font-family)",
+                }, children: ["\u26A0\uFE0F ", error] })), jsxRuntime.jsx("button", { type: "button", onClick: handleBooking, disabled: isLoading, style: {
+                    width: "100%",
+                    padding: "12px 24px",
+                    backgroundColor: "var(--bw-highlight-color)",
+                    color: "#fff",
+                    border: "none",
+                    borderRadius: "var(--bw-border-radius)",
+                    fontSize: "var(--bw-font-size)",
+                    fontWeight: "600",
+                    cursor: isLoading ? "not-allowed" : "pointer",
+                    opacity: isLoading ? 0.6 : 1,
+                    transition: "all 0.2s ease",
+                    fontFamily: "var(--bw-font-family)",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: "8px",
+                }, children: isLoading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { style: {
+                                width: "16px",
+                                height: "16px",
+                                border: "2px solid #fff",
+                                borderTopColor: "transparent",
+                                borderRadius: "50%",
+                                animation: "spin 1s linear infinite",
+                            } }), "Buchung wird erstellt..."] })) : ("Mit Gutschein buchen") }), jsxRuntime.jsx("style", { children: `
+				@keyframes spin {
+					from { transform: rotate(0deg); }
+					to { transform: rotate(360deg); }
+				}
+			` })] }));
+}
 const spinner$1 = (borderColor) => (jsxRuntime.jsx("div", { style: {
         width: "auto",
         height: "auto",
@@ -9147,7 +9251,7 @@ const spinner$1 = (borderColor) => (jsxRuntime.jsx("div", { style: {
             borderRadius: "50%",
         } }) }));
 // Inner component that uses the Stripe hooks
-function PaymentFormInner({ config, eventDetails, formData, totalAmount, discountCode, onSuccess, onError, }) {
+function PaymentFormInner({ config, eventDetails, formData, totalAmount, discountCode, giftCards, onSuccess, onError, }) {
     const stripe = reactStripe_umdExports.useStripe();
     const elements = reactStripe_umdExports.useElements();
     const [isLoading, setIsLoading] = React__default.useState(false);
@@ -9278,7 +9382,7 @@ function PaymentFormInner({ config, eventDetails, formData, totalAmount, discoun
 			` })] }));
 }
 // Main PaymentForm component that handles payment intent creation and Elements wrapper
-function PaymentForm({ config, eventDetails, formData, totalAmount, discountCode, onSuccess, onError, systemConfig, stripePromise, stripeAppearance, }) {
+function PaymentForm({ config, eventDetails, formData, totalAmount, discountCode, giftCards, onSuccess, onError, systemConfig, stripePromise, stripeAppearance, }) {
     const [clientSecret, setClientSecret] = React__default.useState(null);
     const [paymentIntentId, setPaymentIntentId] = React__default.useState(null);
     const [isCreatingPaymentIntent, setIsCreatingPaymentIntent] = React__default.useState(false);
@@ -9374,6 +9478,7 @@ function PaymentForm({ config, eventDetails, formData, totalAmount, discountCode
                     currency: "eur",
                     participants: formData.participants.filter((p) => p.name?.trim()),
                     discountCode: discountCode?.code,
+                    giftCardCodes: giftCards?.map((gc) => gc.code) || [],
                     customerName: formData.customerName?.trim(),
                     customerEmail: formData.customerEmail?.trim(),
                     customerPhone: formData.customerPhone?.trim(),
@@ -9435,8 +9540,21 @@ function PaymentForm({ config, eventDetails, formData, totalAmount, discountCode
         formData.customerName,
         totalAmount,
         discountCode,
+        giftCards,
         config,
     ]);
+    // Calculate total gift card coverage
+    const totalGiftCardAmount = giftCards?.reduce((sum, gc) => sum + (gc.balanceToUse || gc.discountAmount || 0), 0) || 0;
+    const baseTotal = eventDetails?.price
+        ? eventDetails.price * (formData.participants?.filter((p) => p.name?.trim()).length || 0)
+        : 0;
+    const discountAmount = discountCode?.discountAmount || 0;
+    const amountAfterDiscount = Math.max(0, baseTotal - discountAmount);
+    const isFullyCoveredByGiftCards = totalGiftCardAmount >= amountAfterDiscount && amountAfterDiscount > 0;
+    // If gift cards fully cover the payment, show a simplified booking button
+    if (isFullyCoveredByGiftCards && totalAmount <= 0) {
+        return (jsxRuntime.jsx(GiftCardOnlyBooking, { config: config, eventDetails: eventDetails, formData: formData, discountCode: discountCode, giftCards: giftCards || [], onSuccess: onSuccess, onError: onError }));
+    }
     // Show loading state while creating payment intent
     if (isCreatingPaymentIntent || !clientSecret) {
         return (jsxRuntime.jsxs("div", { style: {
@@ -9470,7 +9588,7 @@ function PaymentForm({ config, eventDetails, formData, totalAmount, discountCode
             clientSecret,
             appearance: stripeAppearance || { theme: "stripe" },
             locale: config.locale || "de",
-        }, children: jsxRuntime.jsx(PaymentFormInner, { config: config, eventDetails: eventDetails, formData: formData, totalAmount: totalAmount, discountCode: discountCode, onSuccess: (result) => {
+        }, children: jsxRuntime.jsx(PaymentFormInner, { config: config, eventDetails: eventDetails, formData: formData, totalAmount: totalAmount, discountCode: discountCode, giftCards: giftCards, onSuccess: (result) => {
                 // Clear persisted PI data on successful payment
                 clearPersistedPaymentIntent();
                 setPaymentIntentId(null);
@@ -9675,6 +9793,222 @@ function Accordion({ title, priceInfo, children, isOpen, onToggle }) {
                 }, children: children }))] }));
 }
 
+// Icons
+const IconTicket = ({ size = 20, color = "currentColor" }) => (jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("path", { d: "M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z" }), jsxRuntime.jsx("path", { d: "M13 5v2" }), jsxRuntime.jsx("path", { d: "M13 17v2" }), jsxRuntime.jsx("path", { d: "M13 11v2" })] }));
+const IconGift = ({ size = 20, color = "currentColor" }) => (jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("rect", { x: "3", y: "8", width: "18", height: "4", rx: "1" }), jsxRuntime.jsx("path", { d: "M12 8v13" }), jsxRuntime.jsx("path", { d: "M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7" }), jsxRuntime.jsx("path", { d: "M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5" })] }));
+const IconCheck = ({ size = 16, color = "currentColor" }) => (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) }));
+const IconX = ({ size = 16, color = "currentColor" }) => (jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }));
+const IconSpinner = ({ size = 16, color = "currentColor" }) => (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { animation: "spin 1s linear infinite" }, children: jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }));
+function VoucherInput({ config, orderValue, eventInstanceId, customerEmail, onVoucherValidated, appliedVouchers, onRemoveVoucher, disabled = false, }) {
+    const [inputValue, setInputValue] = React__default.useState("");
+    const [isLoading, setIsLoading] = React__default.useState(false);
+    const [error, setError] = React__default.useState(null);
+    const [isExpanded, setIsExpanded] = React__default.useState(false);
+    // Check if a discount code is already applied (only one allowed)
+    const hasDiscountCode = appliedVouchers.some((v) => v.type === "discount");
+    const validateVoucher = React__default.useCallback(async (code) => {
+        if (!code.trim()) {
+            setError(null);
+            return;
+        }
+        // Check if code is already applied
+        if (appliedVouchers.some((v) => v.code.toUpperCase() === code.toUpperCase())) {
+            setError("Dieser Code wurde bereits angewendet");
+            return;
+        }
+        setIsLoading(true);
+        setError(null);
+        try {
+            const response = await fetch(getApiUrl(config.apiBaseUrl, "/booking/validate-voucher"), {
+                method: "POST",
+                headers: createApiHeaders(config),
+                body: JSON.stringify(createRequestBody(config, {
+                    code: code.trim(),
+                    orderValue: orderValue,
+                    eventInstanceId: eventInstanceId,
+                    customerEmail: customerEmail,
+                })),
+            });
+            const data = await response.json();
+            if (data.valid && data.voucher) {
+                // Check if trying to add a second discount code
+                if (data.voucher.type === "discount" && hasDiscountCode) {
+                    setError("Es kann nur ein Rabattcode verwendet werden");
+                    onVoucherValidated(null, "Es kann nur ein Rabattcode verwendet werden");
+                    return;
+                }
+                onVoucherValidated(data.voucher);
+                setInputValue("");
+                setError(null);
+            }
+            else {
+                setError(data.error || "Code nicht gefunden oder ungültig");
+                onVoucherValidated(null, data.error);
+            }
+        }
+        catch (err) {
+            const errorMsg = "Fehler beim Validieren des Codes";
+            setError(errorMsg);
+            onVoucherValidated(null, errorMsg);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [
+        config,
+        orderValue,
+        eventInstanceId,
+        customerEmail,
+        appliedVouchers,
+        hasDiscountCode,
+        onVoucherValidated,
+    ]);
+    const handleSubmit = () => {
+        if (inputValue.trim() && !isLoading && !disabled) {
+            validateVoucher(inputValue);
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            if (inputValue.trim() && !isLoading && !disabled) {
+                validateVoucher(inputValue);
+            }
+        }
+    };
+    const inputStyle = {
+        flex: 1,
+        padding: "10px 12px",
+        backgroundColor: "var(--bw-background-color)",
+        border: "1px solid var(--bw-border-color)",
+        borderRadius: "var(--bw-border-radius)",
+        color: "var(--bw-text-color)",
+        fontSize: "var(--bw-font-size)",
+        fontFamily: "var(--bw-font-family)",
+        outline: "none",
+        transition: "all 0.2s ease",
+        textTransform: "uppercase",
+    };
+    const buttonStyle = {
+        padding: "10px 16px",
+        backgroundColor: "var(--bw-highlight-color)",
+        border: "none",
+        borderRadius: "var(--bw-border-radius)",
+        color: "#fff",
+        fontSize: "var(--bw-font-size)",
+        fontFamily: "var(--bw-font-family)",
+        fontWeight: "600",
+        cursor: disabled || isLoading ? "not-allowed" : "pointer",
+        opacity: disabled || isLoading ? 0.6 : 1,
+        transition: "all 0.2s ease",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "6px",
+        minWidth: "100px",
+    };
+    const appliedVoucherStyle = {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: "10px 12px",
+        backgroundColor: "var(--bw-surface-color)",
+        border: "1px solid var(--bw-border-color)",
+        borderRadius: "var(--bw-border-radius)",
+        marginBottom: "8px",
+    };
+    const removeButtonStyle = {
+        background: "none",
+        border: "none",
+        padding: "4px",
+        cursor: "pointer",
+        color: "var(--bw-error-color)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: "50%",
+        transition: "background-color 0.2s ease",
+    };
+    return (jsxRuntime.jsxs("div", { style: {
+            backgroundColor: "var(--bw-surface-color)",
+            border: "1px solid var(--bw-border-color)",
+            borderRadius: "var(--bw-border-radius)",
+            overflow: "hidden",
+        }, children: [jsxRuntime.jsxs("button", { type: "button", onClick: () => setIsExpanded(!isExpanded), style: {
+                    width: "100%",
+                    padding: "var(--bw-spacing)",
+                    backgroundColor: "transparent",
+                    border: "none",
+                    cursor: "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    color: "var(--bw-text-color)",
+                    fontFamily: "var(--bw-font-family)",
+                    fontSize: "var(--bw-font-size)",
+                    fontWeight: "500",
+                }, children: [jsxRuntime.jsxs("span", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [jsxRuntime.jsx(IconTicket, { size: 18, color: "var(--bw-highlight-color)" }), "Rabattcode oder Gutschein", appliedVouchers.length > 0 && (jsxRuntime.jsx("span", { style: {
+                                    backgroundColor: "var(--bw-highlight-color)",
+                                    color: "#fff",
+                                    padding: "2px 8px",
+                                    borderRadius: "12px",
+                                    fontSize: "12px",
+                                    fontWeight: "600",
+                                }, children: appliedVouchers.length }))] }), jsxRuntime.jsx("span", { style: {
+                            transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
+                            transition: "transform 0.2s ease",
+                        }, children: "\u25BC" })] }), isExpanded && (jsxRuntime.jsxs("div", { style: { padding: "0 var(--bw-spacing) var(--bw-spacing)" }, children: [appliedVouchers.length > 0 && (jsxRuntime.jsx("div", { style: { marginBottom: "12px" }, children: appliedVouchers.map((voucher) => (jsxRuntime.jsxs("div", { style: appliedVoucherStyle, children: [jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "10px" }, children: [voucher.type === "discount" ? (jsxRuntime.jsx(IconTicket, { size: 18, color: "var(--bw-success-color)" })) : (jsxRuntime.jsx(IconGift, { size: 18, color: "var(--bw-success-color)" })), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { style: {
+                                                        fontFamily: "var(--bw-font-family)",
+                                                        fontSize: "var(--bw-font-size)",
+                                                        fontWeight: "600",
+                                                        color: "var(--bw-text-color)",
+                                                        display: "flex",
+                                                        alignItems: "center",
+                                                        gap: "6px",
+                                                    }, children: [jsxRuntime.jsx("span", { style: { fontFamily: "monospace" }, children: voucher.code }), jsxRuntime.jsx(IconCheck, { size: 14, color: "var(--bw-success-color)" })] }), jsxRuntime.jsxs("div", { style: {
+                                                        fontFamily: "var(--bw-font-family)",
+                                                        fontSize: "12px",
+                                                        color: "var(--bw-success-color)",
+                                                    }, children: [voucher.type === "discount"
+                                                            ? `−${formatCurrency(voucher.discountAmount)} Rabatt`
+                                                            : `−${formatCurrency(voucher.balanceToUse || voucher.discountAmount)} Gutschein`, voucher.type === "giftCard" &&
+                                                            voucher.remainingBalance !== undefined &&
+                                                            voucher.remainingBalance > 0 && (jsxRuntime.jsxs("span", { style: { color: "var(--bw-text-muted)", marginLeft: "8px" }, children: ["(Rest: ", formatCurrency(voucher.remainingBalance), ")"] }))] })] })] }), jsxRuntime.jsx("button", { type: "button", onClick: () => onRemoveVoucher(voucher.code), style: removeButtonStyle, title: "Entfernen", children: jsxRuntime.jsx(IconX, { size: 16 }) })] }, voucher.code))) })), jsxRuntime.jsxs("div", { style: { display: "flex", gap: "8px" }, children: [jsxRuntime.jsx("input", { type: "text", value: inputValue, onChange: (e) => {
+                                    setInputValue(e.target.value.toUpperCase());
+                                    setError(null);
+                                }, onKeyDown: handleKeyDown, placeholder: hasDiscountCode
+                                    ? "Gutscheincode eingeben..."
+                                    : "Rabatt- oder Gutscheincode eingeben...", style: inputStyle, disabled: disabled || isLoading, onFocus: (e) => {
+                                    e.target.style.borderColor = "var(--bw-highlight-color)";
+                                    e.target.style.boxShadow = "0 0 0 2px var(--bw-highlight-color)33";
+                                }, onBlur: (e) => {
+                                    e.target.style.borderColor = "var(--bw-border-color)";
+                                    e.target.style.boxShadow = "none";
+                                } }), jsxRuntime.jsx("button", { type: "button", onClick: handleSubmit, style: buttonStyle, disabled: disabled || isLoading || !inputValue.trim(), children: isLoading ? (jsxRuntime.jsx(IconSpinner, { size: 16, color: "#fff" })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(IconCheck, { size: 16 }), "Einl\u00F6sen"] })) })] }), error && (jsxRuntime.jsxs("div", { style: {
+                            marginTop: "8px",
+                            padding: "8px 12px",
+                            backgroundColor: "var(--bw-error-color)15",
+                            border: "1px solid var(--bw-error-color)40",
+                            borderRadius: "var(--bw-border-radius)",
+                            color: "var(--bw-error-color)",
+                            fontSize: "var(--bw-font-size)",
+                            fontFamily: "var(--bw-font-family)",
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "8px",
+                        }, children: [jsxRuntime.jsx(IconX, { size: 16 }), error] })), hasDiscountCode && (jsxRuntime.jsx("div", { style: {
+                            marginTop: "8px",
+                            fontSize: "12px",
+                            color: "var(--bw-text-muted)",
+                            fontFamily: "var(--bw-font-family)",
+                        }, children: "\uD83D\uDCA1 Es wurde bereits ein Rabattcode angewendet. Du kannst weitere Gutscheine hinzuf\u00FCgen." }))] })), jsxRuntime.jsx("style", { children: `
+				@keyframes spin {
+					from { transform: rotate(0deg); }
+					to { transform: rotate(360deg); }
+				}
+			` })] }));
+}
+
 // Form schemas
 const participantSchema = objectType({
     name: stringType().min(1, "Name ist erforderlich"),
@@ -9694,6 +10028,10 @@ const bookingFormSchema = objectType({
 const IconWarning = ({ size = 48, color = "var(--bw-error-color)" }) => (jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }), jsxRuntime.jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }), jsxRuntime.jsx("circle", { cx: "12", cy: "16", r: "1" })] }));
 const IconMoney = ({ size = 20, color = "var(--bw-text-muted)" }) => (jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("rect", { x: "2", y: "6", width: "20", height: "12", rx: "2" }), jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "4" }), jsxRuntime.jsx("line", { x1: "2", y1: "10", x2: "2", y2: "14" }), jsxRuntime.jsx("line", { x1: "22", y1: "10", x2: "22", y2: "14" })] }));
 function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError, onBackToEventInstances, onBackToEventTypes, selectedEventType, selectedEventInstance, isOpen, onClose, systemConfig, }) {
+    // New voucher system - supports multiple gift cards + one discount code
+    const [appliedVouchers, setAppliedVouchers] = React__default.useState([]);
+    const [voucherError, setVoucherError] = React__default.useState(null);
+    // Legacy state for backward compatibility
     const [discountCode, setDiscountCode] = React__default.useState(null);
     const [discountLoading, setDiscountLoading] = React__default.useState(false);
     const [discountError, setDiscountError] = React__default.useState(null);
@@ -9707,28 +10045,66 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
         },
     });
     const watchedParticipants = form.watch("participants");
-    const watchedDiscountCode = form.watch("discountCode");
+    form.watch("discountCode");
     const watchedCustomerName = form.watch("customerName");
     const watchedCustomerEmail = form.watch("customerEmail");
     const customerNameError = form.formState.errors.customerName;
     const customerEmailError = form.formState.errors.customerEmail;
     const watchedAcceptTerms = form.watch("acceptTerms");
-    // Calculate total amount and deposit amount
-    const calculateTotal = () => {
+    // Calculate base total before any discounts
+    const calculateBaseTotal = React__default.useCallback(() => {
         if (!eventDetails)
             return 0;
-        const baseTotal = eventDetails.price * watchedParticipants.filter((p) => p.name.trim()).length;
-        return discountCode ? discountCode.newTotal : baseTotal;
-    };
+        return eventDetails.price * watchedParticipants.filter((p) => p.name.trim()).length;
+    }, [eventDetails, watchedParticipants]);
+    // Calculate total discount from all applied vouchers
+    const calculateTotalDiscount = React__default.useCallback(() => {
+        return appliedVouchers.reduce((total, voucher) => {
+            if (voucher.type === "discount") {
+                return total + voucher.discountAmount;
+            }
+            else if (voucher.type === "giftCard") {
+                return total + (voucher.balanceToUse || voucher.discountAmount);
+            }
+            return total;
+        }, 0);
+    }, [appliedVouchers]);
+    // Calculate total amount after discounts
+    const calculateTotal = React__default.useCallback(() => {
+        const baseTotal = calculateBaseTotal();
+        const totalDiscount = calculateTotalDiscount();
+        return Math.max(0, baseTotal - totalDiscount);
+    }, [calculateBaseTotal, calculateTotalDiscount]);
     const calculateDeposit = () => {
         if (!eventDetails || !eventDetails.deposit)
             return 0;
         const participantCount = watchedParticipants.filter((p) => p.name.trim()).length;
         return eventDetails.deposit * participantCount;
     };
+    const baseTotal = calculateBaseTotal();
+    const totalDiscount = calculateTotalDiscount();
     const totalAmount = calculateTotal();
     const depositAmount = calculateDeposit();
-    const paymentAmount = depositAmount > 0 ? depositAmount : totalAmount;
+    // If there's a deposit, we pay the deposit; otherwise we pay the total after discounts
+    const paymentAmount = depositAmount > 0 ? Math.max(0, depositAmount - totalDiscount) : totalAmount;
+    // Get discount code for legacy compatibility
+    const appliedDiscountCode = appliedVouchers.find((v) => v.type === "discount");
+    // Get gift cards
+    const appliedGiftCards = appliedVouchers.filter((v) => v.type === "giftCard");
+    // Voucher handlers
+    const handleVoucherValidated = React__default.useCallback((voucher, error) => {
+        if (error) {
+            setVoucherError(error);
+            return;
+        }
+        if (voucher) {
+            setAppliedVouchers((prev) => [...prev, voucher]);
+            setVoucherError(null);
+        }
+    }, []);
+    const handleRemoveVoucher = React__default.useCallback((code) => {
+        setAppliedVouchers((prev) => prev.filter((v) => v.code !== code));
+    }, []);
     // Form validation helper
     const isFormValid = () => {
         const participantCount = watchedParticipants.filter((p) => p.name.trim()).length;
@@ -9742,48 +10118,51 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
         const hasAcceptedTerms = watchedAcceptTerms === true;
         return validParticipants && participantsWithinLimit && hasName && hasEmail && hasAcceptedTerms;
     };
-    // Validate discount codes
+    // Re-validate vouchers when participant count changes (affects order value)
     React__default.useEffect(() => {
-        const validateDiscountCode = async (code) => {
-            if (!code.trim() || !eventDetails) {
-                setDiscountCode(null);
-                setDiscountError(null);
-                return;
-            }
-            setDiscountLoading(true);
-            setDiscountError(null);
-            try {
-                const baseTotal = eventDetails.price * watchedParticipants.filter((p) => p.name.trim()).length;
-                const response = await fetch(getApiUrl(config.apiBaseUrl, "/booking/validate-discount"), {
-                    method: "POST",
-                    headers: createApiHeaders(config),
-                    body: JSON.stringify(createRequestBody(config, {
-                        code: code.trim(),
-                        orderValue: baseTotal,
-                    })),
-                });
-                const data = await response.json();
-                if (data.valid) {
-                    setDiscountCode(data.discountCode);
+        // When participants change, we need to recalculate voucher amounts
+        // For now, we'll clear vouchers if the order value changes significantly
+        // In a production app, you might want to re-validate each voucher
+        if (appliedVouchers.length > 0) {
+            // Recalculate discount amounts based on new order value
+            const newBaseTotal = eventDetails?.price
+                ? eventDetails.price * watchedParticipants.filter((p) => p.name.trim()).length
+                : 0;
+            // Update voucher amounts (simplified - in production, re-validate via API)
+            setAppliedVouchers((prev) => prev.map((voucher) => {
+                if (voucher.type === "discount") {
+                    let newDiscountAmount = 0;
+                    if (voucher.discountType === "percentage") {
+                        newDiscountAmount = Math.round((newBaseTotal * (voucher.discountValue || 0)) / 10000);
+                    }
+                    else {
+                        newDiscountAmount = voucher.discountValue || 0;
+                    }
+                    newDiscountAmount = Math.min(newDiscountAmount, newBaseTotal);
+                    return {
+                        ...voucher,
+                        discountAmount: newDiscountAmount,
+                        newTotal: newBaseTotal - newDiscountAmount,
+                    };
                 }
-                else {
-                    setDiscountCode(null);
-                    setDiscountError(data.error);
+                else if (voucher.type === "giftCard") {
+                    // Gift card balance stays the same, but amount to use might change
+                    const remainingAfterDiscount = newBaseTotal -
+                        prev
+                            .filter((v) => v.type === "discount")
+                            .reduce((sum, v) => sum + v.discountAmount, 0);
+                    const balanceToUse = Math.min(voucher.currentBalance || 0, Math.max(0, remainingAfterDiscount));
+                    return {
+                        ...voucher,
+                        balanceToUse,
+                        remainingBalance: (voucher.currentBalance || 0) - balanceToUse,
+                        discountAmount: balanceToUse,
+                    };
                 }
-            }
-            catch (err) {
-                setDiscountError("Fehler beim Validieren des Rabattcodes");
-                setDiscountCode(null);
-            }
-            finally {
-                setDiscountLoading(false);
-            }
-        };
-        const timer = setTimeout(() => {
-            validateDiscountCode(watchedDiscountCode || "");
-        }, 500);
-        return () => clearTimeout(timer);
-    }, [watchedDiscountCode, watchedParticipants, eventDetails, config]);
+                return voucher;
+            }));
+        }
+    }, [watchedParticipants, eventDetails]);
     // Helper functions
     const addParticipant = () => {
         const currentParticipants = form.getValues("participants");
@@ -9938,7 +10317,7 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
                                                 color: "var(--bw-text-color)",
                                                 fontWeight: "500",
                                                 fontFamily: "var(--bw-font-family)",
-                                            }, children: [formatCurrency(eventDetails.price), " pro Person"] })] })] })] }), jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing-large)" }, children: [jsxRuntime.jsxs("form", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing-large)" }, children: [jsxRuntime.jsxs("div", { style: {
+                                            }, children: [formatCurrency(eventDetails.price), " pro Person"] })] })] })] }), jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing-large)" }, children: [jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing-large)" }, children: [jsxRuntime.jsxs("div", { style: {
                                         backgroundColor: "var(--bw-surface-color)",
                                         border: `1px solid var(--bw-border-color)`,
                                         backdropFilter: "blur(4px)",
@@ -10083,7 +10462,7 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
                                                         color: "var(--bw-error-color)",
                                                         fontSize: "var(--bw-font-size)",
                                                         fontFamily: "var(--bw-font-family)",
-                                                    }, children: ["Maximal ", eventDetails.availableSpots, " Pl\u00E4tze verf\u00FCgbar."] }))] })] }), jsxRuntime.jsxs("div", { style: {
+                                                    }, children: ["Maximal ", eventDetails.availableSpots, " Pl\u00E4tze verf\u00FCgbar."] }))] })] }), jsxRuntime.jsx(VoucherInput, { config: config, orderValue: baseTotal, eventInstanceId: eventDetails?.id, customerEmail: watchedCustomerEmail, onVoucherValidated: handleVoucherValidated, appliedVouchers: appliedVouchers, onRemoveVoucher: handleRemoveVoucher, disabled: !eventDetails }), jsxRuntime.jsxs("div", { style: {
                                         backgroundColor: "var(--bw-surface-color)",
                                         border: `1px solid var(--bw-border-color)`,
                                         backdropFilter: "blur(4px)",
@@ -10182,7 +10561,7 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
                                                                 color: "var(--bw-text-color)",
                                                                 fontWeight: "500",
                                                                 fontFamily: "var(--bw-font-family)",
-                                                            }, children: formatCurrency(eventDetails.deposit || 0) })] })), discountCode && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { style: {
+                                                            }, children: formatCurrency(eventDetails.deposit || 0) })] })), appliedVouchers.length > 0 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { style: {
                                                                 display: "flex",
                                                                 justifyContent: "space-between",
                                                                 alignItems: "center",
@@ -10191,20 +10570,31 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
                                                                         fontFamily: "var(--bw-font-family)",
                                                                     }, children: "Zwischensumme:" }), jsxRuntime.jsx("span", { style: {
                                                                         color: "var(--bw-text-muted)",
-                                                                        textDecoration: "line-through",
+                                                                        textDecoration: totalDiscount > 0 ? "line-through" : "none",
                                                                         fontFamily: "var(--bw-font-family)",
-                                                                    }, children: formatCurrency(eventDetails.price *
-                                                                        watchedParticipants.filter((p) => p.name.trim()).length) })] }), jsxRuntime.jsxs("div", { style: {
+                                                                    }, children: formatCurrency(baseTotal) })] }), appliedDiscountCode && (jsxRuntime.jsxs("div", { style: {
                                                                 display: "flex",
                                                                 justifyContent: "space-between",
                                                                 alignItems: "center",
-                                                            }, children: [jsxRuntime.jsx("span", { style: {
+                                                            }, children: [jsxRuntime.jsxs("span", { style: {
                                                                         color: "var(--bw-success-color)",
                                                                         fontFamily: "var(--bw-font-family)",
-                                                                    }, children: "Rabatt:" }), jsxRuntime.jsxs("span", { style: {
+                                                                        fontSize: "var(--bw-font-size)",
+                                                                    }, children: ["Rabatt (", appliedDiscountCode.code, "):"] }), jsxRuntime.jsxs("span", { style: {
                                                                         color: "var(--bw-success-color)",
                                                                         fontFamily: "var(--bw-font-family)",
-                                                                    }, children: ["-", formatCurrency(discountCode.discountAmount)] })] })] })), jsxRuntime.jsxs("div", { style: {
+                                                                    }, children: ["-", formatCurrency(appliedDiscountCode.discountAmount)] })] })), appliedGiftCards.map((giftCard) => (jsxRuntime.jsxs("div", { style: {
+                                                                display: "flex",
+                                                                justifyContent: "space-between",
+                                                                alignItems: "center",
+                                                            }, children: [jsxRuntime.jsxs("span", { style: {
+                                                                        color: "var(--bw-success-color)",
+                                                                        fontFamily: "var(--bw-font-family)",
+                                                                        fontSize: "var(--bw-font-size)",
+                                                                    }, children: ["Gutschein (", giftCard.code, "):"] }), jsxRuntime.jsxs("span", { style: {
+                                                                        color: "var(--bw-success-color)",
+                                                                        fontFamily: "var(--bw-font-family)",
+                                                                    }, children: ["-", formatCurrency(giftCard.balanceToUse || giftCard.discountAmount)] })] }, giftCard.code)))] })), jsxRuntime.jsxs("div", { style: {
                                                         borderTop: `1px solid var(--bw-border-color)`,
                                                         paddingTop: "12px",
                                                     }, children: [depositAmount > 0 && (jsxRuntime.jsxs("div", { style: {
@@ -10277,7 +10667,15 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
                                                         fontFamily: "var(--bw-font-family)",
                                                         borderBottom: "2px solid var(--bw-highlight-color)",
                                                         paddingBottom: 4,
-                                                    }, children: "Zahlung" }), jsxRuntime.jsx(PaymentForm, { config: config, eventDetails: eventDetails, formData: form.getValues(), totalAmount: paymentAmount, discountCode: discountCode, onSuccess: onSuccess, onError: onError, systemConfig: systemConfig, stripePromise: stripePromise, stripeAppearance: stripeAppearance })] }));
+                                                    }, children: "Zahlung" }), jsxRuntime.jsx(PaymentForm, { config: config, eventDetails: eventDetails, formData: form.getValues(), totalAmount: paymentAmount, discountCode: appliedDiscountCode ? {
+                                                        id: appliedDiscountCode.id,
+                                                        code: appliedDiscountCode.code,
+                                                        description: appliedDiscountCode.description || undefined,
+                                                        type: appliedDiscountCode.discountType || "percentage",
+                                                        value: appliedDiscountCode.discountValue || 0,
+                                                        discountAmount: appliedDiscountCode.discountAmount,
+                                                        newTotal: appliedDiscountCode.newTotal,
+                                                    } : null, giftCards: appliedGiftCards, onSuccess: onSuccess, onError: onError, systemConfig: systemConfig, stripePromise: stripePromise, stripeAppearance: stripeAppearance })] }));
                                     })()] })] }), jsxRuntime.jsx("style", { children: `
                     .booking-widget-container *,
                     .booking-widget-container *::before,
@@ -11304,137 +11702,155 @@ function EventInstanceSelection({ eventInstances, selectedEventType, onEventInst
 						font-size: 1.1rem !important;
 					}
 				}
-			` }), jsxRuntime.jsxs(Sidebar, { isOpen: isOpen, onClose: handleClose, title: "Termin-Auswahl", children: [jsxRuntime.jsx("p", { className: "bw-event-instance-title", children: selectedEventType?.name }), jsxRuntime.jsx("div", { className: "bw-event-instance-list", style: { padding: "24px" }, children: jsxRuntime.jsx("div", { style: {
-                                display: "flex",
-                                flexDirection: "column",
-                                gap: "20px",
-                            }, children: monthYearGroups.map(({ key, label, events, minPrice }) => {
-                                const monthPriceDisplayInfo = getMonthPriceDisplayInfo(minPrice);
-                                return (jsxRuntime.jsx(Accordion, { title: label, priceInfo: jsxRuntime.jsx("div", { style: {
-                                            fontSize: "1rem",
-                                            backgroundColor: monthPriceDisplayInfo
-                                                ? monthPriceDisplayInfo.backgroundColor
-                                                : "#14532d",
-                                            color: monthPriceDisplayInfo ? monthPriceDisplayInfo.textColor : "#4ade80",
-                                            fontWeight: 500,
-                                            marginLeft: "auto",
-                                            padding: "4px 8px",
-                                            borderRadius: "var(--bw-border-radius-small)",
-                                            border: monthPriceDisplayInfo ? "none" : undefined,
-                                            boxShadow: monthPriceDisplayInfo
-                                                ? "0 2px 4px rgba(0, 0, 0, 0.2)"
-                                                : undefined,
-                                        }, children: `ab ${formatCurrency(minPrice)}` }), isOpen: openGroups.has(key), onToggle: () => toggleGroup(key), children: jsxRuntime.jsx("div", { style: {
-                                            display: "flex",
-                                            flexDirection: "column",
-                                            gap: "12px",
-                                            paddingTop: "12px",
-                                        }, children: events.map((event) => {
-                                            const availableSpots = event.maxParticipants - event.participantCount;
-                                            const isFullyBooked = availableSpots === 0;
-                                            const startDate = new Date(event.startTime);
-                                            const isPastEvent = today.toISOString() >= startDate.toISOString();
-                                            return (jsxRuntime.jsxs("div", { className: "bw-event-instance-card", style: {
-                                                    position: "relative",
-                                                    cursor: !isFullyBooked && !isPastEvent && event.bookingOpen
-                                                        ? "pointer"
-                                                        : "not-allowed",
-                                                    border: "1px solid var(--bw-border-color)",
-                                                    backgroundColor: "var(--bw-surface-color)",
-                                                    borderRadius: "var(--bw-border-radius)",
-                                                    padding: "16px 20px",
-                                                    transition: "all 0.2s ease",
-                                                    opacity: isFullyBooked || isPastEvent ? 0.3 : 1,
-                                                    filter: isFullyBooked || isPastEvent ? "grayscale(40%)" : "none",
-                                                    fontFamily: "var(--bw-font-family)",
-                                                }, onClick: () => {
-                                                    if (!isFullyBooked && !isPastEvent && event.bookingOpen) {
-                                                        handleEventInstanceSelect(event);
-                                                    }
-                                                }, onMouseEnter: (e) => {
-                                                    if (!isFullyBooked && !isPastEvent && event.bookingOpen) {
-                                                        e.currentTarget.style.transform = "scale(1.02)";
-                                                        e.currentTarget.style.backgroundColor =
-                                                            "var(--bw-surface-muted, rgba(59, 130, 246, 0.1))";
-                                                    }
-                                                }, onMouseLeave: (e) => {
-                                                    if (!isFullyBooked && !isPastEvent && event.bookingOpen) {
-                                                        e.currentTarget.style.transform = "scale(1)";
-                                                        e.currentTarget.style.backgroundColor = "var(--bw-surface-color)";
-                                                    }
-                                                }, children: [selectedEventInstanceId === event.id && isLoadingEventDetails && (jsxRuntime.jsx("div", { style: {
-                                                            position: "absolute",
-                                                            top: 0,
-                                                            left: 0,
-                                                            width: "100%",
-                                                            height: "100%",
-                                                            backgroundColor: "var(--bw-overlay-color, rgba(15, 23, 42, 0.8))",
-                                                            borderRadius: "var(--bw-border-radius)",
-                                                            display: "flex",
-                                                            alignItems: "center",
-                                                            justifyContent: "center",
-                                                        }, children: jsxRuntime.jsx("div", { style: {
-                                                                width: "32px",
-                                                                height: "32px",
-                                                                color: "var(--bw-highlight-color-muted, rgba(59, 130, 246, 0.8))",
-                                                                animation: "spin 1s linear infinite",
-                                                                fontSize: "32px",
-                                                            }, children: spinner() }) })), jsxRuntime.jsx(SpecialPriceBadge, { price: event.price, yearPrices: yearPrices }), jsxRuntime.jsx(AllocationBadge, { availableSpots: availableSpots, maxParticipants: event.maxParticipants }), jsxRuntime.jsxs("div", { style: {
-                                                            display: "flex",
-                                                            justifyContent: "space-between",
-                                                            width: "100%",
-                                                            alignItems: "start",
-                                                            gap: "12px",
-                                                            marginBottom: "4px",
-                                                        }, children: [jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "start", gap: "12px" }, children: [jsxRuntime.jsx("div", { className: "bw-event-instance-datebox", style: {
-                                                                            fontSize: "var(--bw-font-size)",
-                                                                            transition: "all 0.2s ease",
-                                                                            borderRadius: "var(--bw-border-radius-small)",
-                                                                            borderTop: `4px solid var(--bw-border-color)`,
-                                                                            border: "1px solid var(--bw-border-color)",
-                                                                            width: "40px",
-                                                                            height: "40px",
-                                                                            display: "flex",
-                                                                            alignItems: "center",
-                                                                            justifyContent: "center",
-                                                                            fontWeight: "bold",
-                                                                            color: "var(--bw-text-color)",
-                                                                            backgroundColor: "var(--bw-background-color)",
-                                                                        }, children: startDate.getDate() }), jsxRuntime.jsxs("div", { style: {
-                                                                            fontSize: "var(--bw-font-size)",
-                                                                            color: "var(--bw-text-color)",
-                                                                            display: "flex",
-                                                                            flexDirection: "column",
-                                                                            alignItems: "start",
-                                                                            justifyContent: "start",
-                                                                            lineHeight: "1.2",
-                                                                        }, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("span", { className: "bw-event-instance-title", style: { fontWeight: "600", marginBottom: "2px" }, children: formatWeekday(event.startTime) }), formatWeekday(event.startTime) !==
-                                                                                        formatWeekday(event.endTime) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: " - " }), jsxRuntime.jsx("span", { className: "bw-event-instance-title", style: { fontWeight: "600", marginBottom: "2px" }, children: formatWeekday(event.endTime) })] }))] }), jsxRuntime.jsx("div", { children: formatWeekday(event.startTime) ===
-                                                                                    formatWeekday(event.endTime) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.startTime) }), jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: " - " }), jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.endTime) })] })) : (jsxRuntime.jsxs("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: [formatTime(event.startTime), " Uhr"] })) })] }), jsxRuntime.jsxs("span", { style: {
-                                                                            fontSize: "12px",
-                                                                            fontWeight: 400,
-                                                                            color: "var(--bw-text-muted)",
-                                                                            marginLeft: "6px",
-                                                                            background: "var(--bw-background-muted)",
-                                                                            whiteSpace: "nowrap",
-                                                                        }, children: [event.durationDays, " Tag", event.durationDays > 1 ? "e" : ""] })] }), jsxRuntime.jsx("div", { className: "bw-event-instance-price", style: {
-                                                                    textAlign: "right",
-                                                                    display: "flex",
-                                                                    flexDirection: "column",
-                                                                    alignItems: "end",
-                                                                }, children: jsxRuntime.jsx(PriceDisplay, { price: event.price, yearPrices: yearPrices }) })] }), event.name !== selectedEventType?.name && (jsxRuntime.jsx("h4", { className: "bw-event-instance-title", style: {
-                                                            fontSize: "var(--bw-font-size)",
-                                                            fontWeight: "600",
-                                                            color: "var(--bw-text-color)",
-                                                            lineHeight: "1.25",
-                                                            margin: "0 0 2px 0",
-                                                            display: "flex",
-                                                            alignItems: "center",
-                                                            gap: "8px",
-                                                            maxWidth: "230px",
-                                                        }, children: event.name }))] }, event.id));
-                                        }) }) }, key));
-                            }) }) })] })] }));
+			` }), jsxRuntime.jsx(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `${selectedEventType?.name}`, children: jsxRuntime.jsx("div", { className: "bw-event-instance-list", style: { padding: "24px" }, children: jsxRuntime.jsx("div", { style: {
+                            display: "flex",
+                            flexDirection: "column",
+                            gap: "20px",
+                        }, children: monthYearGroups.map(({ key, label, events, minPrice, year }, idx) => {
+                            const monthPriceDisplayInfo = getMonthPriceDisplayInfo(minPrice);
+                            return (jsxRuntime.jsxs(React__default.Fragment, { children: [idx > 0 && monthYearGroups[idx - 1].year !== year && (jsxRuntime.jsx("div", { style: {
+                                            height: 1,
+                                            backgroundColor: "var(--bw-border-color)",
+                                            margin: "4px 0",
+                                        } })), jsxRuntime.jsx(Accordion, { title: label, priceInfo: jsxRuntime.jsx("div", { style: {
+                                                fontSize: "1rem",
+                                                backgroundColor: monthPriceDisplayInfo
+                                                    ? monthPriceDisplayInfo.backgroundColor
+                                                    : "#14532d",
+                                                color: monthPriceDisplayInfo
+                                                    ? monthPriceDisplayInfo.textColor
+                                                    : "#4ade80",
+                                                fontWeight: 500,
+                                                marginLeft: "auto",
+                                                padding: "4px 8px",
+                                                borderRadius: "var(--bw-border-radius-small)",
+                                                border: monthPriceDisplayInfo ? "none" : undefined,
+                                                boxShadow: monthPriceDisplayInfo
+                                                    ? "0 2px 4px rgba(0, 0, 0, 0.2)"
+                                                    : undefined,
+                                            }, children: `ab ${formatCurrency(minPrice)}` }), isOpen: openGroups.has(key), onToggle: () => toggleGroup(key), children: jsxRuntime.jsx("div", { style: {
+                                                display: "flex",
+                                                flexDirection: "column",
+                                                gap: "12px",
+                                                paddingTop: "12px",
+                                            }, children: events.map((event) => {
+                                                const availableSpots = event.maxParticipants - event.participantCount;
+                                                const isFullyBooked = availableSpots === 0;
+                                                const startDate = new Date(event.startTime);
+                                                const isPastEvent = today.toISOString() >= startDate.toISOString();
+                                                return (jsxRuntime.jsxs("div", { className: "bw-event-instance-card", style: {
+                                                        position: "relative",
+                                                        cursor: !isFullyBooked && !isPastEvent && event.bookingOpen
+                                                            ? "pointer"
+                                                            : "not-allowed",
+                                                        border: "1px solid var(--bw-border-color)",
+                                                        backgroundColor: "var(--bw-surface-color)",
+                                                        borderRadius: "var(--bw-border-radius)",
+                                                        padding: "16px 20px",
+                                                        transition: "all 0.2s ease",
+                                                        opacity: isFullyBooked || isPastEvent ? 0.3 : 1,
+                                                        filter: isFullyBooked || isPastEvent ? "grayscale(40%)" : "none",
+                                                        fontFamily: "var(--bw-font-family)",
+                                                    }, onClick: () => {
+                                                        if (!isFullyBooked && !isPastEvent && event.bookingOpen) {
+                                                            handleEventInstanceSelect(event);
+                                                        }
+                                                    }, onMouseEnter: (e) => {
+                                                        if (!isFullyBooked && !isPastEvent && event.bookingOpen) {
+                                                            e.currentTarget.style.transform = "scale(1.02)";
+                                                            e.currentTarget.style.backgroundColor =
+                                                                "var(--bw-surface-muted, rgba(59, 130, 246, 0.1))";
+                                                        }
+                                                    }, onMouseLeave: (e) => {
+                                                        if (!isFullyBooked && !isPastEvent && event.bookingOpen) {
+                                                            e.currentTarget.style.transform = "scale(1)";
+                                                            e.currentTarget.style.backgroundColor = "var(--bw-surface-color)";
+                                                        }
+                                                    }, children: [selectedEventInstanceId === event.id && isLoadingEventDetails && (jsxRuntime.jsx("div", { style: {
+                                                                position: "absolute",
+                                                                top: 0,
+                                                                left: 0,
+                                                                width: "100%",
+                                                                height: "100%",
+                                                                backgroundColor: "var(--bw-overlay-color, rgba(15, 23, 42, 0.8))",
+                                                                borderRadius: "var(--bw-border-radius)",
+                                                                display: "flex",
+                                                                alignItems: "center",
+                                                                justifyContent: "center",
+                                                            }, children: jsxRuntime.jsx("div", { style: {
+                                                                    width: "32px",
+                                                                    height: "32px",
+                                                                    color: "var(--bw-highlight-color-muted, rgba(59, 130, 246, 0.8))",
+                                                                    animation: "spin 1s linear infinite",
+                                                                    fontSize: "32px",
+                                                                }, children: spinner() }) })), jsxRuntime.jsx(SpecialPriceBadge, { price: event.price, yearPrices: yearPrices }), jsxRuntime.jsx(AllocationBadge, { availableSpots: availableSpots, maxParticipants: event.maxParticipants }), jsxRuntime.jsxs("div", { style: {
+                                                                display: "flex",
+                                                                justifyContent: "space-between",
+                                                                width: "100%",
+                                                                alignItems: "start",
+                                                                gap: "12px",
+                                                                marginBottom: "4px",
+                                                            }, children: [jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "start", gap: "12px" }, children: [jsxRuntime.jsx("div", { className: "bw-event-instance-datebox", style: {
+                                                                                fontSize: "var(--bw-font-size)",
+                                                                                transition: "all 0.2s ease",
+                                                                                borderRadius: "var(--bw-border-radius-small)",
+                                                                                borderTop: `4px solid var(--bw-border-color)`,
+                                                                                border: "1px solid var(--bw-border-color)",
+                                                                                width: "40px",
+                                                                                height: "40px",
+                                                                                display: "flex",
+                                                                                alignItems: "center",
+                                                                                justifyContent: "center",
+                                                                                fontWeight: "bold",
+                                                                                color: "var(--bw-text-color)",
+                                                                                backgroundColor: "var(--bw-background-color)",
+                                                                            }, children: startDate.getDate() }), jsxRuntime.jsxs("div", { style: {
+                                                                                fontSize: "var(--bw-font-size)",
+                                                                                color: "var(--bw-text-color)",
+                                                                                display: "flex",
+                                                                                flexDirection: "column",
+                                                                                alignItems: "start",
+                                                                                justifyContent: "start",
+                                                                                lineHeight: "1.2",
+                                                                            }, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("span", { className: "bw-event-instance-title", style: { fontWeight: "600", marginBottom: "2px" }, children: formatWeekday(event.startTime) }), formatWeekday(event.startTime) !==
+                                                                                            formatWeekday(event.endTime) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { style: {
+                                                                                                        color: "var(--bw-text-muted)",
+                                                                                                        fontSize: "14px",
+                                                                                                    }, children: " - " }), jsxRuntime.jsx("span", { className: "bw-event-instance-title", style: { fontWeight: "600", marginBottom: "2px" }, children: formatWeekday(event.endTime) })] }))] }), jsxRuntime.jsx("div", { children: formatWeekday(event.startTime) ===
+                                                                                        formatWeekday(event.endTime) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { style: {
+                                                                                                    color: "var(--bw-text-muted)",
+                                                                                                    fontSize: "14px",
+                                                                                                }, children: formatTime(event.startTime) }), jsxRuntime.jsx("span", { style: {
+                                                                                                    color: "var(--bw-text-muted)",
+                                                                                                    fontSize: "14px",
+                                                                                                }, children: " - " }), jsxRuntime.jsx("span", { style: {
+                                                                                                    color: "var(--bw-text-muted)",
+                                                                                                    fontSize: "14px",
+                                                                                                }, children: formatTime(event.endTime) })] })) : (jsxRuntime.jsxs("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: [formatTime(event.startTime), " Uhr"] })) })] }), jsxRuntime.jsxs("span", { style: {
+                                                                                fontSize: "12px",
+                                                                                fontWeight: 400,
+                                                                                color: "var(--bw-text-muted)",
+                                                                                marginLeft: "6px",
+                                                                                background: "var(--bw-background-muted)",
+                                                                                whiteSpace: "nowrap",
+                                                                            }, children: [event.durationDays, " Tag", event.durationDays > 1 ? "e" : ""] })] }), jsxRuntime.jsx("div", { className: "bw-event-instance-price", style: {
+                                                                        textAlign: "right",
+                                                                        display: "flex",
+                                                                        flexDirection: "column",
+                                                                        alignItems: "end",
+                                                                    }, children: jsxRuntime.jsx(PriceDisplay, { price: event.price, yearPrices: yearPrices }) })] }), event.name !== selectedEventType?.name && (jsxRuntime.jsx("h4", { className: "bw-event-instance-title", style: {
+                                                                fontSize: "var(--bw-font-size)",
+                                                                fontWeight: "600",
+                                                                color: "var(--bw-text-color)",
+                                                                lineHeight: "1.25",
+                                                                margin: "0 0 2px 0",
+                                                                display: "flex",
+                                                                alignItems: "center",
+                                                                gap: "8px",
+                                                                maxWidth: "230px",
+                                                            }, children: event.name }))] }, event.id));
+                                            }) }) })] }, key));
+                        }) }) }) })] }));
 }
 
 // Loading skeleton component for NextEventsPreview
@@ -11829,6 +12245,263 @@ function NextEventsPreview({ events, onEventSelect, onShowAll, showAllButtonText
 			` })] }));
 }
 
+function PromoDialog({ onClose, onCtaClick }) {
+    const [copied, setCopied] = React__default.useState(false);
+    const [isVisible, setIsVisible] = React__default.useState(false);
+    // Hardcoded Xmas surf school content
+    const discountCode = "X-MAS";
+    // Animate in on mount
+    React__default.useEffect(() => {
+        const timer = setTimeout(() => setIsVisible(true), 50);
+        return () => clearTimeout(timer);
+    }, []);
+    const handleCopyCode = async () => {
+        try {
+            await navigator.clipboard.writeText(discountCode);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+        catch (err) {
+            // Fallback for older browsers
+            const textArea = document.createElement("textarea");
+            textArea.value = discountCode;
+            document.body.appendChild(textArea);
+            textArea.select();
+            document.execCommand("copy");
+            document.body.removeChild(textArea);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+    };
+    const handleClose = () => {
+        setIsVisible(false);
+        setTimeout(onClose, 200);
+    };
+    const handleCtaClick = () => {
+        setIsVisible(false);
+        setTimeout(onCtaClick, 200);
+    };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("style", { children: `
+					@keyframes promo-wave {
+						0%, 100% { transform: translateX(0) translateY(0); }
+						25% { transform: translateX(5px) translateY(-3px); }
+						50% { transform: translateX(0) translateY(-5px); }
+						75% { transform: translateX(-5px) translateY(-3px); }
+					}
+					@keyframes promo-float {
+						0%, 100% { transform: translateY(0); }
+						50% { transform: translateY(-8px); }
+					}
+					@keyframes promo-shimmer {
+						0% { background-position: -200% center; }
+						100% { background-position: 200% center; }
+					}
+					@keyframes promo-sparkle {
+						0%, 100% { opacity: 0.3; transform: scale(1); }
+						50% { opacity: 1; transform: scale(1.2); }
+					}
+					@keyframes promo-snow {
+						0% { transform: translateY(-10px) rotate(0deg); opacity: 0; }
+						10% { opacity: 1; }
+						90% { opacity: 1; }
+						100% { transform: translateY(350px) rotate(360deg); opacity: 0; }
+					}
+				` }), jsxRuntime.jsx("div", { onClick: handleClose, style: {
+                    position: "fixed",
+                    inset: 0,
+                    backgroundColor: "rgba(0, 20, 40, 0.85)",
+                    backdropFilter: "blur(8px)",
+                    zIndex: 9998,
+                    opacity: isVisible ? 1 : 0,
+                    transition: "opacity 300ms ease-out",
+                } }), jsxRuntime.jsx("div", { style: {
+                    position: "fixed",
+                    top: "50%",
+                    left: "50%",
+                    transform: `translate(-50%, -50%) scale(${isVisible ? 1 : 0.9})`,
+                    zIndex: 9999,
+                    width: "92%",
+                    maxWidth: "440px",
+                    opacity: isVisible ? 1 : 0,
+                    transition: "all 300ms cubic-bezier(0.34, 1.56, 0.64, 1)",
+                }, children: jsxRuntime.jsxs("div", { style: {
+                        position: "relative",
+                        background: "linear-gradient(165deg, #0c4a6e 0%, #0e7490 40%, #0891b2 100%)",
+                        borderRadius: "28px",
+                        overflow: "hidden",
+                        boxShadow: "0 25px 60px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.1), inset 0 1px 0 rgba(255,255,255,0.2)",
+                    }, children: [Array.from({ length: 15 }).map((_, i) => (jsxRuntime.jsx("div", { style: {
+                                position: "absolute",
+                                left: `${5 + Math.random() * 90}%`,
+                                top: "-10px",
+                                fontSize: `${10 + Math.random() * 14}px`,
+                                color: "white",
+                                opacity: 0,
+                                animation: `promo-snow ${4 + Math.random() * 3}s linear infinite`,
+                                animationDelay: `${Math.random() * 4}s`,
+                                pointerEvents: "none",
+                                zIndex: 1,
+                            }, children: "\u2744" }, i))), jsxRuntime.jsxs("div", { style: {
+                                position: "relative",
+                                height: "180px",
+                                background: "linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(12,74,110,0.8) 100%)",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                overflow: "hidden",
+                            }, children: [jsxRuntime.jsx("img", { src: "https://images.unsplash.com/photo-1502680390469-be75c86b636f?w=600&q=80", alt: "Surfer at sunset", style: {
+                                        position: "absolute",
+                                        inset: 0,
+                                        width: "100%",
+                                        height: "100%",
+                                        objectFit: "cover",
+                                        opacity: 0.6,
+                                    } }), jsxRuntime.jsx("div", { style: {
+                                        position: "absolute",
+                                        inset: 0,
+                                        background: "linear-gradient(180deg, rgba(12,74,110,0.3) 0%, rgba(12,74,110,0.95) 100%)",
+                                    } }), jsxRuntime.jsx("div", { style: {
+                                        position: "relative",
+                                        zIndex: 2,
+                                        fontSize: "64px",
+                                        animation: "promo-float 3s ease-in-out infinite",
+                                        filter: "drop-shadow(0 8px 16px rgba(0,0,0,0.4))",
+                                    }, children: "\uD83C\uDFC4\u200D\u2642\uFE0F" }), jsxRuntime.jsx("div", { style: {
+                                        position: "absolute",
+                                        top: "16px",
+                                        left: "20px",
+                                        fontSize: "28px",
+                                        animation: "promo-sparkle 2s ease-in-out infinite",
+                                    }, children: "\uD83C\uDF84" }), jsxRuntime.jsx("div", { style: {
+                                        position: "absolute",
+                                        top: "20px",
+                                        right: "20px",
+                                        fontSize: "24px",
+                                        animation: "promo-sparkle 2s ease-in-out infinite 0.5s",
+                                    }, children: "\u2B50" })] }), jsxRuntime.jsx("button", { onClick: handleClose, style: {
+                                position: "absolute",
+                                top: "16px",
+                                right: "16px",
+                                width: "36px",
+                                height: "36px",
+                                borderRadius: "50%",
+                                border: "none",
+                                background: "rgba(0, 0, 0, 0.3)",
+                                backdropFilter: "blur(4px)",
+                                color: "white",
+                                fontSize: "22px",
+                                cursor: "pointer",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                transition: "all 150ms ease",
+                                zIndex: 10,
+                                lineHeight: 1,
+                            }, onMouseEnter: (e) => {
+                                e.currentTarget.style.background = "rgba(0, 0, 0, 0.5)";
+                                e.currentTarget.style.transform = "scale(1.1)";
+                            }, onMouseLeave: (e) => {
+                                e.currentTarget.style.background = "rgba(0, 0, 0, 0.3)";
+                                e.currentTarget.style.transform = "scale(1)";
+                            }, children: "\u00D7" }), jsxRuntime.jsxs("div", { style: { padding: "28px 28px 32px", textAlign: "center", position: "relative", zIndex: 2 }, children: [jsxRuntime.jsx("h2", { style: {
+                                        fontSize: "26px",
+                                        fontWeight: "800",
+                                        color: "white",
+                                        marginBottom: "6px",
+                                        textShadow: "0 2px 8px rgba(0,0,0,0.3)",
+                                        letterSpacing: "-0.5px",
+                                    }, children: "Frohe Weihnachten! \uD83C\uDF85" }), jsxRuntime.jsxs("p", { style: {
+                                        fontSize: "17px",
+                                        color: "rgba(255, 255, 255, 0.9)",
+                                        marginBottom: "20px",
+                                        lineHeight: 1.5,
+                                    }, children: ["Schenk dir oder deinen Liebsten", jsxRuntime.jsx("br", {}), jsxRuntime.jsx("strong", { style: { color: "#fbbf24" }, children: "10% Rabatt" }), " auf alle Kurse!"] }), jsxRuntime.jsxs("div", { style: {
+                                        background: "white",
+                                        borderRadius: "16px",
+                                        padding: "18px 20px",
+                                        marginBottom: "20px",
+                                        boxShadow: "0 8px 24px rgba(0,0,0,0.15), inset 0 -2px 0 rgba(0,0,0,0.05)",
+                                    }, children: [jsxRuntime.jsx("p", { style: {
+                                                fontSize: "11px",
+                                                textTransform: "uppercase",
+                                                letterSpacing: "1.5px",
+                                                color: "#64748b",
+                                                marginBottom: "10px",
+                                                fontWeight: "600",
+                                            }, children: "Dein Geschenk-Code" }), jsxRuntime.jsxs("div", { style: {
+                                                display: "flex",
+                                                alignItems: "center",
+                                                justifyContent: "center",
+                                                gap: "14px",
+                                            }, children: [jsxRuntime.jsx("div", { style: {
+                                                        background: "linear-gradient(135deg, #dc2626 0%, #b91c1c 100%)",
+                                                        padding: "10px 20px",
+                                                        borderRadius: "10px",
+                                                        boxShadow: "0 4px 12px rgba(220, 38, 38, 0.3)",
+                                                    }, children: jsxRuntime.jsx("span", { style: {
+                                                            fontSize: "28px",
+                                                            fontWeight: "900",
+                                                            color: "white",
+                                                            letterSpacing: "6px",
+                                                            textShadow: "0 2px 4px rgba(0,0,0,0.2)",
+                                                        }, children: discountCode }) }), jsxRuntime.jsx("button", { onClick: handleCopyCode, style: {
+                                                        padding: "12px 16px",
+                                                        borderRadius: "10px",
+                                                        border: "2px solid",
+                                                        borderColor: copied ? "#22c55e" : "#e2e8f0",
+                                                        background: copied ? "#dcfce7" : "#f8fafc",
+                                                        color: copied ? "#15803d" : "#475569",
+                                                        fontSize: "13px",
+                                                        fontWeight: "600",
+                                                        cursor: "pointer",
+                                                        transition: "all 150ms ease",
+                                                        display: "flex",
+                                                        alignItems: "center",
+                                                        gap: "6px",
+                                                        whiteSpace: "nowrap",
+                                                    }, children: copied ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u2713 Kopiert!" })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: [jsxRuntime.jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }), jsxRuntime.jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })] }), "Kopieren"] })) })] })] }), jsxRuntime.jsx("div", { style: {
+                                        display: "flex",
+                                        justifyContent: "center",
+                                        gap: "8px",
+                                        marginBottom: "20px",
+                                        flexWrap: "wrap",
+                                    }, children: ["🏄 Surfen", "🪁 Wingen", "🏄‍♀️ SUP", "💨 Windsurfen"].map((activity) => (jsxRuntime.jsx("span", { style: {
+                                            background: "rgba(255,255,255,0.15)",
+                                            backdropFilter: "blur(4px)",
+                                            padding: "6px 12px",
+                                            borderRadius: "20px",
+                                            fontSize: "13px",
+                                            color: "white",
+                                            fontWeight: "500",
+                                        }, children: activity }, activity))) }), jsxRuntime.jsxs("button", { onClick: handleCtaClick, style: {
+                                        width: "100%",
+                                        padding: "18px 24px",
+                                        borderRadius: "14px",
+                                        border: "none",
+                                        background: "linear-gradient(135deg, #f59e0b 0%, #d97706 100%)",
+                                        color: "white",
+                                        fontSize: "18px",
+                                        fontWeight: "700",
+                                        cursor: "pointer",
+                                        transition: "all 150ms ease",
+                                        boxShadow: "0 8px 24px rgba(245, 158, 11, 0.4), inset 0 1px 0 rgba(255,255,255,0.2)",
+                                        display: "flex",
+                                        alignItems: "center",
+                                        justifyContent: "center",
+                                        gap: "10px",
+                                    }, onMouseEnter: (e) => {
+                                        e.currentTarget.style.transform = "translateY(-2px)";
+                                        e.currentTarget.style.boxShadow = "0 12px 28px rgba(245, 158, 11, 0.5), inset 0 1px 0 rgba(255,255,255,0.2)";
+                                    }, onMouseLeave: (e) => {
+                                        e.currentTarget.style.transform = "translateY(0)";
+                                        e.currentTarget.style.boxShadow = "0 8px 24px rgba(245, 158, 11, 0.4), inset 0 1px 0 rgba(255,255,255,0.2)";
+                                    }, children: [jsxRuntime.jsx("span", { style: { animation: "promo-wave 2s ease-in-out infinite" }, children: "\uD83C\uDF81" }), "Jetzt Kurs buchen", jsxRuntime.jsx("span", { children: "\u2192" })] }), jsxRuntime.jsx("p", { style: {
+                                        marginTop: "16px",
+                                        fontSize: "12px",
+                                        color: "rgba(255,255,255,0.6)",
+                                    }, children: "G\u00FCltig f\u00FCr alle Buchungen bis 31. Dezember 2025" })] })] }) })] }));
+}
+
 // Predefined themes & Style Provider have been moved to ../styles/StyleProvider.tsx
 // Main widget component
 function UniversalBookingWidget({ config: baseConfig }) {
@@ -11871,6 +12544,9 @@ function UniversalBookingWidget({ config: baseConfig }) {
     // PERFORMANCE OPTIMIZATION: Lazy component loading
     const [shouldRenderInstanceSelection, setShouldRenderInstanceSelection] = React__default.useState(false);
     const [shouldRenderBookingForm, setShouldRenderBookingForm] = React__default.useState(false);
+    // Promo dialog state
+    const [showPromoDialog, setShowPromoDialog] = React__default.useState(false);
+    const [widgetContainerRef, setWidgetContainerRef] = React__default.useState(null);
     // Determine initial step and load data
     React__default.useEffect(() => {
         const initializeWidget = async () => {
@@ -11945,6 +12621,46 @@ function UniversalBookingWidget({ config: baseConfig }) {
             setShouldRenderBookingForm(true);
         }
     }, [currentStep, shouldRenderInstanceSelection, shouldRenderBookingForm]);
+    // Promo dialog: show Xmas promo once per user during holiday season, prevent double-opening across multiple widgets
+    React__default.useEffect(() => {
+        // Only show during holiday season (December and January)
+        const now = new Date();
+        const month = now.getMonth(); // 0 = January, 11 = December
+        const isHolidaySeason = month === 11 || month === 0; // December (11) or January (0)
+        if (!isHolidaySeason) {
+            return;
+        }
+        const promoId = "xmas-2024";
+        const storageKey = `bigz-promo-${promoId}-shown`;
+        const globalFlagKey = `__bigzPromoShown_${promoId}`;
+        // Check if already shown in this session (localStorage) or claimed by another widget (global flag)
+        const alreadyShown = localStorage.getItem(storageKey) === "true";
+        const claimedByOtherWidget = window[globalFlagKey] === true;
+        if (alreadyShown || claimedByOtherWidget) {
+            return;
+        }
+        // Claim this promo for this widget instance (prevents other widgets from showing it)
+        window[globalFlagKey] = true;
+        // Show the dialog after a short delay for better UX
+        const timer = setTimeout(() => {
+            setShowPromoDialog(true);
+        }, 1000);
+        return () => clearTimeout(timer);
+    }, []);
+    // Handle promo dialog close
+    const handlePromoDialogClose = () => {
+        setShowPromoDialog(false);
+        localStorage.setItem("bigz-promo-xmas-2024-shown", "true");
+    };
+    // Handle promo dialog CTA click - scroll to widget
+    const handlePromoCtaClick = () => {
+        setShowPromoDialog(false);
+        localStorage.setItem("bigz-promo-xmas-2024-shown", "true");
+        // Scroll to the widget container
+        if (widgetContainerRef) {
+            widgetContainerRef.scrollIntoView({ behavior: "smooth", block: "start" });
+        }
+    };
     const loadEventTypes = async () => {
         const requestBody = {
             organizationId: config.organizationId,
@@ -12344,104 +13060,104 @@ function UniversalBookingWidget({ config: baseConfig }) {
     // Main view based on view mode
     if (viewMode === "next-events" && showingPreview) {
         // Next events preview mode
-        return (jsxRuntime.jsxs(StyleProvider, { config: config, children: [jsxRuntime.jsx(NextEventsPreview, { events: upcomingEvents, onEventSelect: handleUpcomingEventSelect, onShowAll: handleShowAllEvents, showAllButtonText: nextEventsSettings.showAllButtonText, showAllButton: nextEventsSettings.showAllButton, isLoadingEventDetails: isLoadingEventDetails, isLoadingShowAll: isLoadingShowAll, isLoading: isLoading }), shouldRenderBookingForm && eventDetails && (jsxRuntime.jsx(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, onBackToEventInstances: () => {
-                        setCurrentStep("eventTypes");
-                        setShowingPreview(true);
-                        setEventDetails(null);
-                    }, onBackToEventTypes: () => {
-                        setCurrentStep("eventTypes");
-                        setShowingPreview(true);
-                        setEventDetails(null);
-                    }, selectedEventType: selectedEventType, selectedEventInstance: selectedEventInstance, isOpen: currentStep === "booking" && !!eventDetails, onClose: () => {
-                        setCurrentStep("eventTypes");
-                        setShowingPreview(true);
-                        setEventDetails(null);
-                    }, systemConfig: systemConfig })), jsxRuntime.jsx(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
-                        setIsSuccess(false);
-                        setCurrentStep("eventTypes");
-                        setShowingPreview(true);
-                        // Reset state
-                        setSuccessPaymentIntentId(null);
-                        // Reset lazy loading flags
-                        setShouldRenderInstanceSelection(false);
-                        setShouldRenderBookingForm(false);
-                        // Clean up URL to remove Stripe parameters
-                        const url = new URL(window.location.href);
-                        url.searchParams.delete("payment_intent");
-                        url.searchParams.delete("payment_intent_client_secret");
-                        url.searchParams.delete("redirect_status");
-                        window.history.replaceState({}, "", url.toString());
-                    }, config: config, onError: setError, paymentIntentId: successPaymentIntentId })] }));
+        return (jsxRuntime.jsxs(StyleProvider, { config: config, children: [jsxRuntime.jsxs("div", { ref: setWidgetContainerRef, children: [jsxRuntime.jsx(NextEventsPreview, { events: upcomingEvents, onEventSelect: handleUpcomingEventSelect, onShowAll: handleShowAllEvents, showAllButtonText: nextEventsSettings.showAllButtonText, showAllButton: nextEventsSettings.showAllButton, isLoadingEventDetails: isLoadingEventDetails, isLoadingShowAll: isLoadingShowAll, isLoading: isLoading }), shouldRenderBookingForm && eventDetails && (jsxRuntime.jsx(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, onBackToEventInstances: () => {
+                                setCurrentStep("eventTypes");
+                                setShowingPreview(true);
+                                setEventDetails(null);
+                            }, onBackToEventTypes: () => {
+                                setCurrentStep("eventTypes");
+                                setShowingPreview(true);
+                                setEventDetails(null);
+                            }, selectedEventType: selectedEventType, selectedEventInstance: selectedEventInstance, isOpen: currentStep === "booking" && !!eventDetails, onClose: () => {
+                                setCurrentStep("eventTypes");
+                                setShowingPreview(true);
+                                setEventDetails(null);
+                            }, systemConfig: systemConfig })), jsxRuntime.jsx(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
+                                setIsSuccess(false);
+                                setCurrentStep("eventTypes");
+                                setShowingPreview(true);
+                                // Reset state
+                                setSuccessPaymentIntentId(null);
+                                // Reset lazy loading flags
+                                setShouldRenderInstanceSelection(false);
+                                setShouldRenderBookingForm(false);
+                                // Clean up URL to remove Stripe parameters
+                                const url = new URL(window.location.href);
+                                url.searchParams.delete("payment_intent");
+                                url.searchParams.delete("payment_intent_client_secret");
+                                url.searchParams.delete("redirect_status");
+                                window.history.replaceState({}, "", url.toString());
+                            }, config: config, onError: setError, paymentIntentId: successPaymentIntentId })] }), showPromoDialog && (jsxRuntime.jsx(PromoDialog, { onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
     }
     if (viewMode === "next-events" && !showingPreview && currentStep === "eventInstances") {
         // Show all events for the single event type
-        return (jsxRuntime.jsxs(StyleProvider, { config: config, children: [shouldRenderInstanceSelection && (jsxRuntime.jsx(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => {
-                        setShowingPreview(true);
-                        setCurrentStep("eventTypes");
-                    }, isOpen: currentStep === "eventInstances", onClose: () => {
-                        setShowingPreview(true);
-                        setCurrentStep("eventTypes");
-                    }, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), jsxRuntime.jsx(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
-                        setIsSuccess(false);
-                        setCurrentStep("eventTypes");
-                        setShowingPreview(true);
-                        // Reset state
-                        setSuccessPaymentIntentId(null);
-                        // Reset lazy loading flags
-                        setShouldRenderInstanceSelection(false);
-                        setShouldRenderBookingForm(false);
-                        // Clean up URL to remove Stripe parameters
-                        const url = new URL(window.location.href);
-                        url.searchParams.delete("payment_intent");
-                        url.searchParams.delete("payment_intent_client_secret");
-                        url.searchParams.delete("redirect_status");
-                        window.history.replaceState({}, "", url.toString());
-                    }, config: config, onError: setError, paymentIntentId: successPaymentIntentId })] }));
+        return (jsxRuntime.jsxs(StyleProvider, { config: config, children: [jsxRuntime.jsxs("div", { ref: setWidgetContainerRef, children: [shouldRenderInstanceSelection && (jsxRuntime.jsx(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => {
+                                setShowingPreview(true);
+                                setCurrentStep("eventTypes");
+                            }, isOpen: currentStep === "eventInstances", onClose: () => {
+                                setShowingPreview(true);
+                                setCurrentStep("eventTypes");
+                            }, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), jsxRuntime.jsx(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
+                                setIsSuccess(false);
+                                setCurrentStep("eventTypes");
+                                setShowingPreview(true);
+                                // Reset state
+                                setSuccessPaymentIntentId(null);
+                                // Reset lazy loading flags
+                                setShouldRenderInstanceSelection(false);
+                                setShouldRenderBookingForm(false);
+                                // Clean up URL to remove Stripe parameters
+                                const url = new URL(window.location.href);
+                                url.searchParams.delete("payment_intent");
+                                url.searchParams.delete("payment_intent_client_secret");
+                                url.searchParams.delete("redirect_status");
+                                window.history.replaceState({}, "", url.toString());
+                            }, config: config, onError: setError, paymentIntentId: successPaymentIntentId })] }), showPromoDialog && (jsxRuntime.jsx(PromoDialog, { onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
     }
     if (viewMode === "button" && (isSingleEventTypeMode || isDirectInstanceMode)) {
         // Button mode - show button that opens sidebar/booking directly
-        return (jsxRuntime.jsx(StyleProvider, { config: config, children: jsxRuntime.jsxs("div", { style: {
-                    display: "flex",
-                    justifyContent: "center",
-                    alignItems: "center",
-                    minHeight: "120px",
-                }, children: [jsxRuntime.jsx("button", { type: "button", style: {
-                            backgroundColor: "var(--bw-highlight-color)",
-                            color: "white",
-                            padding: "16px 32px",
-                            border: "none",
-                            borderRadius: "var(--bw-border-radius)",
-                            fontSize: "18px",
-                            fontWeight: 600,
-                            fontFamily: "var(--bw-font-family)",
-                            boxShadow: "var(--bw-shadow-md)",
-                            cursor: "pointer",
-                        }, onClick: () => {
-                            if (isDirectInstanceMode) {
-                                setCurrentStep("booking");
-                                setShouldRenderBookingForm(true);
-                            }
-                            else {
-                                setSidebarOpen(true);
-                                setShouldRenderInstanceSelection(true);
-                            }
-                        }, children: config.buttonText ||
-                            (isDirectInstanceMode ? "Jetzt buchen" : "Jetzt Termin auswählen") }), shouldRenderInstanceSelection && (jsxRuntime.jsx(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => setSidebarOpen(false), isOpen: sidebarOpen, onClose: () => setSidebarOpen(false), isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), shouldRenderBookingForm && eventDetails && (jsxRuntime.jsx(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, onBackToEventInstances: () => setCurrentStep(isDirectInstanceMode ? "eventTypes" : "eventInstances"), onBackToEventTypes: () => setSidebarOpen(false), selectedEventType: selectedEventType, selectedEventInstance: selectedEventInstance, isOpen: currentStep === "booking" && !!eventDetails, onClose: () => setCurrentStep(isDirectInstanceMode ? "eventTypes" : "eventInstances"), systemConfig: systemConfig })), jsxRuntime.jsx(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
-                            setIsSuccess(false);
-                            setCurrentStep("eventTypes");
-                            setSidebarOpen(false);
-                            // Reset state
-                            setSuccessPaymentIntentId(null);
-                            // Reset lazy loading flags
-                            setShouldRenderInstanceSelection(false);
-                            setShouldRenderBookingForm(false);
-                            // Clean up URL to remove Stripe parameters
-                            const url = new URL(window.location.href);
-                            url.searchParams.delete("payment_intent");
-                            url.searchParams.delete("payment_intent_client_secret");
-                            url.searchParams.delete("redirect_status");
-                            window.history.replaceState({}, "", url.toString());
-                        }, config: config, onError: setError, paymentIntentId: successPaymentIntentId })] }) }));
+        return (jsxRuntime.jsxs(StyleProvider, { config: config, children: [jsxRuntime.jsxs("div", { ref: setWidgetContainerRef, style: {
+                        display: "flex",
+                        justifyContent: "center",
+                        alignItems: "center",
+                        minHeight: "120px",
+                    }, children: [jsxRuntime.jsx("button", { type: "button", style: {
+                                backgroundColor: "var(--bw-highlight-color)",
+                                color: "white",
+                                padding: "16px 32px",
+                                border: "none",
+                                borderRadius: "var(--bw-border-radius)",
+                                fontSize: "18px",
+                                fontWeight: 600,
+                                fontFamily: "var(--bw-font-family)",
+                                boxShadow: "var(--bw-shadow-md)",
+                                cursor: "pointer",
+                            }, onClick: () => {
+                                if (isDirectInstanceMode) {
+                                    setCurrentStep("booking");
+                                    setShouldRenderBookingForm(true);
+                                }
+                                else {
+                                    setSidebarOpen(true);
+                                    setShouldRenderInstanceSelection(true);
+                                }
+                            }, children: config.buttonText ||
+                                (isDirectInstanceMode ? "Jetzt buchen" : "Jetzt Termin auswählen") }), shouldRenderInstanceSelection && (jsxRuntime.jsx(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => setSidebarOpen(false), isOpen: sidebarOpen, onClose: () => setSidebarOpen(false), isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), shouldRenderBookingForm && eventDetails && (jsxRuntime.jsx(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, onBackToEventInstances: () => setCurrentStep(isDirectInstanceMode ? "eventTypes" : "eventInstances"), onBackToEventTypes: () => setSidebarOpen(false), selectedEventType: selectedEventType, selectedEventInstance: selectedEventInstance, isOpen: currentStep === "booking" && !!eventDetails, onClose: () => setCurrentStep(isDirectInstanceMode ? "eventTypes" : "eventInstances"), systemConfig: systemConfig })), jsxRuntime.jsx(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
+                                setIsSuccess(false);
+                                setCurrentStep("eventTypes");
+                                setSidebarOpen(false);
+                                // Reset state
+                                setSuccessPaymentIntentId(null);
+                                // Reset lazy loading flags
+                                setShouldRenderInstanceSelection(false);
+                                setShouldRenderBookingForm(false);
+                                // Clean up URL to remove Stripe parameters
+                                const url = new URL(window.location.href);
+                                url.searchParams.delete("payment_intent");
+                                url.searchParams.delete("payment_intent_client_secret");
+                                url.searchParams.delete("redirect_status");
+                                window.history.replaceState({}, "", url.toString());
+                            }, config: config, onError: setError, paymentIntentId: successPaymentIntentId })] }), showPromoDialog && (jsxRuntime.jsx(PromoDialog, { onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
     }
     // Cards mode (default) - show event type selection
     const cardsView = (jsxRuntime.jsx(EventTypeSelection, { eventTypes: eventTypes, onEventTypeSelect: handleEventTypeSelect, isLoading: isLoading, skeletonCount: getSkeletonCount() }));
@@ -12474,21 +13190,21 @@ function UniversalBookingWidget({ config: baseConfig }) {
         };
     };
     const backHandlers = getBackHandlers();
-    return (jsxRuntime.jsxs(StyleProvider, { config: config, children: [cardsView, shouldRenderInstanceSelection && (jsxRuntime.jsx(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: handleBackToEventTypes, isOpen: currentStep === "eventInstances", onClose: handleBackToEventTypes, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), shouldRenderBookingForm && eventDetails && (jsxRuntime.jsx(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, onBackToEventInstances: backHandlers.onBackToEventInstances, onBackToEventTypes: backHandlers.onBackToEventTypes, selectedEventType: selectedEventType, selectedEventInstance: selectedEventInstance, isOpen: currentStep === "booking" && !!eventDetails, onClose: backHandlers.onClose, systemConfig: systemConfig })), jsxRuntime.jsx(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
-                    setIsSuccess(false);
-                    setCurrentStep("eventTypes");
-                    // Reset state
-                    setSuccessPaymentIntentId(null);
-                    // Reset lazy loading flags
-                    setShouldRenderInstanceSelection(false);
-                    setShouldRenderBookingForm(false);
-                    // Clean up URL to remove Stripe parameters
-                    const url = new URL(window.location.href);
-                    url.searchParams.delete("payment_intent");
-                    url.searchParams.delete("payment_intent_client_secret");
-                    url.searchParams.delete("redirect_status");
-                    window.history.replaceState({}, "", url.toString());
-                }, config: config, onError: setError, paymentIntentId: successPaymentIntentId })] }));
+    return (jsxRuntime.jsxs(StyleProvider, { config: config, children: [jsxRuntime.jsxs("div", { ref: setWidgetContainerRef, children: [cardsView, shouldRenderInstanceSelection && (jsxRuntime.jsx(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: handleBackToEventTypes, isOpen: currentStep === "eventInstances", onClose: handleBackToEventTypes, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), shouldRenderBookingForm && eventDetails && (jsxRuntime.jsx(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, onBackToEventInstances: backHandlers.onBackToEventInstances, onBackToEventTypes: backHandlers.onBackToEventTypes, selectedEventType: selectedEventType, selectedEventInstance: selectedEventInstance, isOpen: currentStep === "booking" && !!eventDetails, onClose: backHandlers.onClose, systemConfig: systemConfig })), jsxRuntime.jsx(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
+                            setIsSuccess(false);
+                            setCurrentStep("eventTypes");
+                            // Reset state
+                            setSuccessPaymentIntentId(null);
+                            // Reset lazy loading flags
+                            setShouldRenderInstanceSelection(false);
+                            setShouldRenderBookingForm(false);
+                            // Clean up URL to remove Stripe parameters
+                            const url = new URL(window.location.href);
+                            url.searchParams.delete("payment_intent");
+                            url.searchParams.delete("payment_intent_client_secret");
+                            url.searchParams.delete("redirect_status");
+                            window.history.replaceState({}, "", url.toString());
+                        }, config: config, onError: setError, paymentIntentId: successPaymentIntentId })] }), showPromoDialog && (jsxRuntime.jsx(PromoDialog, { onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
 }
 
 // Export init function for vanilla JS usage