@bigz-app/booking-widget 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/dist/booking-widget.js +1240 -1037
  2. package/dist/booking-widget.js.map +1 -1
  3. package/dist/components/BookingForm.d.ts +4 -1
  4. package/dist/components/BookingForm.d.ts.map +1 -1
  5. package/dist/components/EventInstanceSelection.d.ts +3 -1
  6. package/dist/components/EventInstanceSelection.d.ts.map +1 -1
  7. package/dist/components/EventTypeSelection.d.ts.map +1 -1
  8. package/dist/components/NextEventsPreview.d.ts +11 -0
  9. package/dist/components/NextEventsPreview.d.ts.map +1 -0
  10. package/dist/components/Sidebar.d.ts +19 -0
  11. package/dist/components/Sidebar.d.ts.map +1 -0
  12. package/dist/components/UniversalBookingWidget.d.ts +26 -0
  13. package/dist/components/UniversalBookingWidget.d.ts.map +1 -1
  14. package/dist/index.cjs +1240 -1037
  15. package/dist/index.cjs.map +1 -1
  16. package/dist/index.esm.js +1240 -1037
  17. package/dist/index.esm.js.map +1 -1
  18. package/package.json +1 -1
package/dist/booking-widget.js CHANGED
@@ -293,6 +293,26 @@
293
293
  }
294
294
  return formatted;
295
295
  };
296
+ /**
297
+ * Format date with timezone and locale support
298
+ */
299
+ const formatDate = (date, timezone = "Europe/Berlin", locale = "de") => {
300
+ const dateObj = typeof date === "string" ? parseDate(date, timezone) : date;
301
+ if (locale === "en") {
302
+ return dateObj.toLocaleDateString("en-US", {
303
+ timeZone: timezone,
304
+ month: "2-digit",
305
+ day: "2-digit",
306
+ year: "numeric",
307
+ });
308
+ }
309
+ return dateObj.toLocaleDateString("de-DE", {
310
+ timeZone: timezone,
311
+ day: "2-digit",
312
+ month: "2-digit",
313
+ year: "numeric",
314
+ });
315
+ };
296
316
  /**
297
317
  * Format time with timezone and locale support
298
318
  */
@@ -7610,7 +7630,144 @@
7610
7630
  ` })] }));
7611
7631
  }
7612
7632
 
7613
- // Accordion component
7633
+ function Sidebar({ isOpen, onClose, title, children, width = "400px" }) {
7634
+ const [isVisible, setIsVisible] = d(false);
7635
+ const [isAnimating, setIsAnimating] = d(false);
7636
+ y(() => {
7637
+ if (isOpen) {
7638
+ setIsVisible(true);
7639
+ setTimeout(() => setIsAnimating(true), 10);
7640
+ }
7641
+ else {
7642
+ setIsAnimating(false);
7643
+ setTimeout(() => setIsVisible(false), 300);
7644
+ }
7645
+ }, [isOpen]);
7646
+ y(() => {
7647
+ const handleEscape = (e) => {
7648
+ if (e.key === "Escape") {
7649
+ onClose();
7650
+ }
7651
+ };
7652
+ if (isOpen) {
7653
+ document.addEventListener("keydown", handleEscape);
7654
+ document.body.style.overflow = "hidden";
7655
+ }
7656
+ return () => {
7657
+ document.removeEventListener("keydown", handleEscape);
7658
+ document.body.style.overflow = "";
7659
+ };
7660
+ }, [isOpen, onClose]);
7661
+ if (!isVisible)
7662
+ return null;
7663
+ return (u$1("div", { style: {
7664
+ position: "fixed",
7665
+ top: 0,
7666
+ left: 0,
7667
+ right: 0,
7668
+ bottom: 0,
7669
+ zIndex: 1000,
7670
+ fontFamily: "var(--bw-font-family)",
7671
+ }, children: [u$1("div", { style: {
7672
+ position: "absolute",
7673
+ inset: 0,
7674
+ backgroundColor: "rgba(0, 0, 0, 0.5)",
7675
+ opacity: isAnimating ? 1 : 0,
7676
+ transition: "opacity 0.3s ease-in-out",
7677
+ }, onClick: onClose }), u$1("div", { style: {
7678
+ position: "absolute",
7679
+ top: 0,
7680
+ right: 0,
7681
+ bottom: 0,
7682
+ width,
7683
+ maxWidth: "90vw",
7684
+ backgroundColor: "var(--bw-surface-color)",
7685
+ borderLeft: `1px solid var(--bw-border-color)`,
7686
+ boxShadow: "var(--bw-shadow-lg)",
7687
+ transform: isAnimating ? "translateX(0)" : "translateX(100%)",
7688
+ transition: "transform 0.3s ease-in-out",
7689
+ display: "flex",
7690
+ flexDirection: "column",
7691
+ overflow: "hidden",
7692
+ }, children: [u$1("div", { style: {
7693
+ padding: "var(--bw-spacing)",
7694
+ borderBottom: `1px solid var(--bw-border-color)`,
7695
+ display: "flex",
7696
+ alignItems: "center",
7697
+ justifyContent: "space-between",
7698
+ backgroundColor: "var(--bw-background-color)",
7699
+ }, children: [u$1("h2", { style: {
7700
+ fontSize: "var(--bw-font-size-large)",
7701
+ fontWeight: "600",
7702
+ color: "var(--bw-text-color)",
7703
+ margin: 0,
7704
+ fontFamily: "var(--bw-font-family)",
7705
+ }, children: title }), u$1("button", { onClick: onClose, style: {
7706
+ width: "32px",
7707
+ height: "32px",
7708
+ borderRadius: "var(--bw-border-radius-small)",
7709
+ backgroundColor: "transparent",
7710
+ border: `1px solid var(--bw-border-color)`,
7711
+ color: "var(--bw-text-muted)",
7712
+ cursor: "pointer",
7713
+ display: "flex",
7714
+ alignItems: "center",
7715
+ justifyContent: "center",
7716
+ fontSize: "18px",
7717
+ transition: "all 0.2s ease",
7718
+ fontFamily: "var(--bw-font-family)",
7719
+ }, onMouseEnter: (e) => {
7720
+ e.currentTarget.style.backgroundColor = "var(--bw-border-color)";
7721
+ e.currentTarget.style.color = "var(--bw-text-color)";
7722
+ }, onMouseLeave: (e) => {
7723
+ e.currentTarget.style.backgroundColor = "transparent";
7724
+ e.currentTarget.style.color = "var(--bw-text-muted)";
7725
+ }, children: "\u2715" })] }), u$1("div", { style: {
7726
+ flex: 1,
7727
+ overflow: "auto",
7728
+ backgroundColor: "var(--bw-background-color)",
7729
+ }, children: children })] })] }));
7730
+ }
7731
+ function Accordion$1({ title, priceInfo, children, isOpen, onToggle }) {
7732
+ return (u$1("div", { style: {
7733
+ backgroundColor: "var(--bw-surface-color)",
7734
+ border: `1px solid var(--bw-border-color)`,
7735
+ borderRadius: "var(--bw-border-radius)",
7736
+ overflow: "hidden",
7737
+ }, children: [u$1("button", { type: "button", style: {
7738
+ width: "100%",
7739
+ display: "flex",
7740
+ justifyContent: "space-between",
7741
+ alignItems: "center",
7742
+ padding: "var(--bw-spacing)",
7743
+ textAlign: "left",
7744
+ backgroundColor: "transparent",
7745
+ border: "none",
7746
+ cursor: "pointer",
7747
+ fontFamily: "var(--bw-font-family)",
7748
+ transition: "background-color 0.2s ease",
7749
+ }, onClick: onToggle, onMouseEnter: (e) => {
7750
+ e.currentTarget.style.backgroundColor = "var(--bw-surface-hover, rgba(0, 0, 0, 0.05))";
7751
+ }, onMouseLeave: (e) => {
7752
+ e.currentTarget.style.backgroundColor = "transparent";
7753
+ }, children: [u$1("span", { style: { fontSize: "1.25rem", fontWeight: 700, color: "var(--bw-text-color)" }, children: title }), priceInfo && (u$1("span", { style: {
7754
+ fontSize: "1rem",
7755
+ color: "var(--bw-highlight-color)",
7756
+ fontWeight: 500,
7757
+ marginLeft: "auto",
7758
+ }, children: priceInfo })), u$1("span", { style: {
7759
+ transform: isOpen ? "rotate(180deg)" : "rotate(0deg)",
7760
+ transition: "transform 0.2s ease",
7761
+ fontSize: "16px",
7762
+ marginLeft: "16px",
7763
+ }, children: "\u25BC" })] }), isOpen && (u$1("div", { style: {
7764
+ padding: "0 var(--bw-spacing) var(--bw-spacing)",
7765
+ borderTop: `1px solid var(--bw-border-color)`,
7766
+ backgroundColor: "var(--bw-background-color)",
7767
+ }, children: children }))] }));
7768
+ }
7769
+
7770
+ // Accordion component for the booking form
7614
7771
  const Accordion = ({ title, children, isOpen, onToggle, }) => (u$1("div", { style: {
7615
7772
  backgroundColor: "var(--bw-surface-color)",
7616
7773
  border: `1px solid var(--bw-border-color)`,
@@ -7648,7 +7805,7 @@
7648
7805
  acceptTerms: booleanType()
7649
7806
  .refine((val) => val === true, "Bitte akzeptiere die Allgemeinen Geschäftsbedingungen"),
7650
7807
  });
7651
- function BookingForm({ config, eventDetails, stripePromise, clientSecret, onSuccess, onError, onBackToEventInstances, onBackToEventTypes, selectedEventType, selectedEventInstance, }) {
7808
+ function BookingForm({ config, eventDetails, stripePromise, clientSecret, onSuccess, onError, onBackToEventInstances, onBackToEventTypes, selectedEventType, selectedEventInstance, isOpen, onClose, }) {
7652
7809
  const [discountCode, setDiscountCode] = d(null);
7653
7810
  const [discountLoading, setDiscountLoading] = d(false);
7654
7811
  const [discountError, setDiscountError] = d(null);
@@ -7752,31 +7909,36 @@
7752
7909
  },
7753
7910
  });
7754
7911
  }, [config.theme]);
7912
+ const handleClose = () => {
7913
+ onClose();
7914
+ if (selectedEventInstance && selectedEventType) {
7915
+ onBackToEventInstances?.();
7916
+ }
7917
+ else if (selectedEventType) {
7918
+ onBackToEventTypes?.();
7919
+ }
7920
+ };
7755
7921
  if (!eventDetails.bookingOpen) {
7756
- return (u$1("div", { style: {
7757
- minHeight: "400px",
7758
- background: `linear-gradient(135deg, var(--bw-background-color), var(--bw-surface-color))`,
7759
- color: "var(--bw-text-color)",
7760
- borderRadius: "var(--bw-border-radius)",
7761
- display: "flex",
7762
- alignItems: "center",
7763
- justifyContent: "center",
7764
- }, children: u$1("div", { style: { textAlign: "center" }, children: [u$1("div", { style: {
7765
- margin: "0 auto 16px",
7766
- width: "48px",
7767
- height: "48px",
7768
- color: "var(--bw-text-muted)",
7769
- fontSize: "48px",
7770
- }, children: "\u26A0\uFE0F" }), u$1("h3", { style: {
7771
- marginBottom: "8px",
7772
- fontWeight: "600",
7773
- fontSize: "var(--bw-font-size-large)",
7774
- color: "var(--bw-text-muted)",
7775
- fontFamily: "var(--bw-font-family)",
7776
- }, children: "Buchung nicht m\u00F6glich" }), u$1("p", { style: {
7777
- color: "var(--bw-text-muted)",
7778
- fontFamily: "var(--bw-font-family)",
7779
- }, children: "F\u00FCr diese Veranstaltung sind derzeit keine Buchungen m\u00F6glich." })] }) }));
7922
+ return (u$1(Sidebar, { isOpen: isOpen, onClose: handleClose, title: "Buchung nicht m\u00F6glich", children: u$1("div", { style: {
7923
+ display: "flex",
7924
+ alignItems: "center",
7925
+ justifyContent: "center",
7926
+ minHeight: "400px",
7927
+ textAlign: "center",
7928
+ padding: "var(--bw-spacing)",
7929
+ }, children: u$1("div", { children: [u$1("div", { style: {
7930
+ margin: "0 auto 16px",
7931
+ fontSize: "48px",
7932
+ }, children: "\u26A0\uFE0F" }), u$1("h3", { style: {
7933
+ marginBottom: "8px",
7934
+ fontWeight: "600",
7935
+ fontSize: "var(--bw-font-size-large)",
7936
+ color: "var(--bw-text-muted)",
7937
+ fontFamily: "var(--bw-font-family)",
7938
+ }, children: "Buchung nicht m\u00F6glich" }), u$1("p", { style: {
7939
+ color: "var(--bw-text-muted)",
7940
+ fontFamily: "var(--bw-font-family)",
7941
+ }, children: "F\u00FCr diese Veranstaltung sind derzeit keine Buchungen m\u00F6glich." })] }) }) }));
7780
7942
  }
7781
7943
  const inputStyle = {
7782
7944
  width: "100%",
@@ -7810,309 +7972,280 @@
7810
7972
  transition: "all 0.2s ease",
7811
7973
  fontFamily: "var(--bw-font-family)",
7812
7974
  };
7813
- return (u$1("div", { className: "booking-widget-container", children: [u$1("div", { style: { padding: "8px", paddingTop: "32px", paddingBottom: "32px" }, children: [u$1("div", { style: {
7814
- display: "flex",
7815
- alignItems: "center",
7816
- justifyContent: "space-between",
7817
- marginBottom: "var(--bw-spacing-large)",
7818
- padding: "8px",
7819
- }, children: [u$1("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [u$1("div", { style: { fontSize: "32px" }, children: "\uD83D\uDCDD" }), u$1("div", { children: [u$1("h1", { style: {
7820
- fontSize: "var(--bw-font-size-large)",
7821
- fontWeight: "bold",
7822
- color: "var(--bw-text-color)",
7823
- fontFamily: "var(--bw-font-family)",
7824
- margin: 0,
7825
- }, children: ["Buchung f\u00FCr ", eventDetails.name] }), u$1("p", { style: {
7826
- fontSize: "var(--bw-font-size)",
7827
- color: "var(--bw-text-muted)",
7828
- fontFamily: "var(--bw-font-family)",
7829
- margin: 0,
7830
- }, children: "Vervollst\u00E4ndige deine Buchung" })] })] }), (selectedEventType || selectedEventInstance) && (u$1("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: selectedEventInstance && selectedEventType ? (u$1("button", { onClick: onBackToEventInstances, style: buttonStyle, onMouseEnter: (e) => {
7831
- e.currentTarget.style.backgroundColor = "var(--bw-border-color)";
7832
- }, onMouseLeave: (e) => {
7833
- e.currentTarget.style.backgroundColor = "rgba(51, 65, 85, 0.5)";
7834
- }, children: "\u2190 Zur\u00FCck" })) : (selectedEventType && (u$1("button", { onClick: onBackToEventTypes, style: buttonStyle, onMouseEnter: (e) => {
7835
- e.currentTarget.style.backgroundColor = "var(--bw-border-color)";
7836
- }, onMouseLeave: (e) => {
7837
- e.currentTarget.style.backgroundColor = "rgba(51, 65, 85, 0.5)";
7838
- }, children: "\u2190 Zur\u00FCck" }))) }))] }), u$1("div", { style: {
7839
- backgroundColor: "var(--bw-surface-color)",
7840
- border: `1px solid var(--bw-border-color)`,
7841
- backdropFilter: "blur(4px)",
7842
- borderRadius: "var(--bw-border-radius)",
7843
- padding: "var(--bw-spacing)",
7844
- marginBottom: "var(--bw-spacing-large)",
7845
- }, children: [u$1("h2", { style: {
7846
- fontSize: "var(--bw-font-size-large)",
7847
- fontWeight: "600",
7848
- color: "var(--bw-text-color)",
7849
- marginBottom: "12px",
7850
- fontFamily: "var(--bw-font-family)",
7851
- }, children: "Event Details" }), u$1("div", { style: {
7852
- display: "grid",
7853
- gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
7854
- gap: "12px",
7855
- fontSize: "var(--bw-font-size)",
7856
- }, children: [u$1("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [u$1("span", { style: {
7857
- color: "var(--bw-text-muted)",
7858
- fontFamily: "var(--bw-font-family)",
7859
- }, children: "\uD83D\uDCC5 Datum:" }), u$1("span", { style: {
7860
- color: "var(--bw-text-color)",
7861
- fontWeight: "500",
7862
- fontFamily: "var(--bw-font-family)",
7863
- }, children: formatEventDate(eventDetails.startTime) })] }), u$1("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [u$1("span", { style: {
7864
- color: "var(--bw-text-muted)",
7865
- fontFamily: "var(--bw-font-family)",
7866
- }, children: "\uD83D\uDCB0 Preis:" }), u$1("span", { style: {
7867
- color: "var(--bw-text-color)",
7868
- fontWeight: "500",
7869
- fontFamily: "var(--bw-font-family)",
7870
- }, children: [formatCurrency(eventDetails.price), " pro Person"] })] }), u$1("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [u$1("span", { style: {
7871
- color: "var(--bw-text-muted)",
7872
- fontFamily: "var(--bw-font-family)",
7873
- }, children: "\uD83D\uDC65 Verf\u00FCgbar:" }), u$1("span", { style: {
7874
- color: "var(--bw-text-color)",
7875
- fontWeight: "500",
7876
- fontFamily: "var(--bw-font-family)",
7877
- }, children: [eventDetails.availableSpots, " Pl\u00E4tze"] })] }), u$1("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [u$1("span", { style: {
7878
- color: "var(--bw-text-muted)",
7879
- fontFamily: "var(--bw-font-family)",
7880
- }, children: "\u23F1\uFE0F Dauer:" }), u$1("span", { style: {
7881
- color: "var(--bw-text-color)",
7882
- fontWeight: "500",
7883
- fontFamily: "var(--bw-font-family)",
7884
- }, children: [eventDetails.durationDays, "T, ", Math.round(eventDetails.durationPerDay / 60), "h/T"] })] })] })] }), u$1("div", { style: {
7885
- display: "grid",
7886
- gridTemplateColumns: "repeat(auto-fit, minmax(400px, 1fr))",
7887
- gap: "var(--bw-spacing-large)",
7888
- }, children: [u$1("div", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing-large)" }, children: u$1("form", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing-large)" }, children: [u$1(Accordion, { title: "1. Kontaktdaten", isOpen: openSection === "contact", onToggle: () => setOpenSection(openSection === "contact" ? "contact" : "contact"), children: u$1("div", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing)" }, children: [u$1("div", { style: {
7889
- display: "grid",
7890
- gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
7891
- gap: "var(--bw-spacing)",
7892
- }, children: [u$1("div", { children: [u$1("label", { htmlFor: "customerName", style: labelStyle, children: "Name *" }), u$1("input", { id: "customerName", ...form.register("customerName"), type: "text", style: inputStyle, placeholder: "Dein vollst\u00E4ndiger Name", onFocus: (e) => {
7893
- e.target.style.borderColor = "var(--bw-highlight-color)";
7894
- e.target.style.boxShadow = "0 0 0 2px rgba(59, 130, 246, 0.2)";
7895
- }, onBlur: (e) => {
7896
- e.target.style.borderColor = "var(--bw-border-color)";
7897
- e.target.style.boxShadow = "none";
7898
- } }), form.formState.errors.customerName && (u$1("p", { style: {
7899
- color: "var(--bw-error-color)",
7900
- fontSize: "var(--bw-font-size)",
7901
- marginTop: "4px",
7902
- fontFamily: "var(--bw-font-family)",
7903
- }, children: form.formState.errors.customerName.message }))] }), u$1("div", { children: [u$1("label", { htmlFor: "customerEmail", style: labelStyle, children: "E-Mail *" }), u$1("input", { id: "customerEmail", ...form.register("customerEmail"), type: "email", style: inputStyle, placeholder: "deine@email.de", onFocus: (e) => {
7904
- e.target.style.borderColor = "var(--bw-highlight-color)";
7905
- e.target.style.boxShadow = "0 0 0 2px rgba(59, 130, 246, 0.2)";
7906
- }, onBlur: (e) => {
7907
- e.target.style.borderColor = "var(--bw-border-color)";
7908
- e.target.style.boxShadow = "none";
7909
- } }), form.formState.errors.customerEmail && (u$1("p", { style: {
7910
- color: "var(--bw-error-color)",
7911
- fontSize: "var(--bw-font-size)",
7912
- marginTop: "4px",
7913
- fontFamily: "var(--bw-font-family)",
7914
- }, children: form.formState.errors.customerEmail.message }))] })] }), u$1("div", { children: [u$1("label", { htmlFor: "customerPhone", style: labelStyle, children: "Telefon (optional)" }), u$1("input", { id: "customerPhone", ...form.register("customerPhone"), type: "tel", style: inputStyle, placeholder: "+49 123 456789", onFocus: (e) => {
7975
+ return (u$1(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `Buchung - ${eventDetails.name}`, width: "600px", children: u$1("div", { className: "booking-widget-container", style: { padding: "var(--bw-spacing)" }, children: [u$1("div", { style: {
7976
+ backgroundColor: "var(--bw-surface-color)",
7977
+ border: `1px solid var(--bw-border-color)`,
7978
+ backdropFilter: "blur(4px)",
7979
+ borderRadius: "var(--bw-border-radius)",
7980
+ padding: "var(--bw-spacing)",
7981
+ marginBottom: "var(--bw-spacing-large)",
7982
+ }, children: [u$1("h2", { style: {
7983
+ fontSize: "var(--bw-font-size-large)",
7984
+ fontWeight: "600",
7985
+ color: "var(--bw-text-color)",
7986
+ marginBottom: "12px",
7987
+ fontFamily: "var(--bw-font-family)",
7988
+ }, children: "Event Details" }), u$1("div", { style: {
7989
+ display: "grid",
7990
+ gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
7991
+ gap: "12px",
7992
+ fontSize: "var(--bw-font-size)",
7993
+ }, children: [u$1("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [u$1("span", { style: {
7994
+ color: "var(--bw-text-muted)",
7995
+ fontFamily: "var(--bw-font-family)",
7996
+ }, children: "\uD83D\uDCC5 Datum:" }), u$1("span", { style: {
7997
+ color: "var(--bw-text-color)",
7998
+ fontWeight: "500",
7999
+ fontFamily: "var(--bw-font-family)",
8000
+ }, children: formatEventDate(eventDetails.startTime) })] }), u$1("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [u$1("span", { style: {
8001
+ color: "var(--bw-text-muted)",
8002
+ fontFamily: "var(--bw-font-family)",
8003
+ }, children: "\uD83D\uDCB0 Preis:" }), u$1("span", { style: {
8004
+ color: "var(--bw-text-color)",
8005
+ fontWeight: "500",
8006
+ fontFamily: "var(--bw-font-family)",
8007
+ }, children: [formatCurrency(eventDetails.price), " pro Person"] })] }), u$1("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [u$1("span", { style: {
8008
+ color: "var(--bw-text-muted)",
8009
+ fontFamily: "var(--bw-font-family)",
8010
+ }, children: "\uD83D\uDC65 Verf\u00FCgbar:" }), u$1("span", { style: {
8011
+ color: "var(--bw-text-color)",
8012
+ fontWeight: "500",
8013
+ fontFamily: "var(--bw-font-family)",
8014
+ }, children: [eventDetails.availableSpots, " Pl\u00E4tze"] })] }), u$1("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [u$1("span", { style: {
8015
+ color: "var(--bw-text-muted)",
8016
+ fontFamily: "var(--bw-font-family)",
8017
+ }, children: "\u23F1\uFE0F Dauer:" }), u$1("span", { style: {
8018
+ color: "var(--bw-text-color)",
8019
+ fontWeight: "500",
8020
+ fontFamily: "var(--bw-font-family)",
8021
+ }, children: [eventDetails.durationDays, "T, ", Math.round(eventDetails.durationPerDay / 60), "h/T"] })] })] })] }), u$1("div", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing-large)" }, children: [u$1("form", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing-large)" }, children: [u$1(Accordion, { title: "1. Kontaktdaten", isOpen: openSection === "contact", onToggle: () => setOpenSection(openSection === "contact" ? "contact" : "contact"), children: u$1("div", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing)" }, children: [u$1("div", { style: {
8022
+ display: "grid",
8023
+ gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
8024
+ gap: "var(--bw-spacing)",
8025
+ }, children: [u$1("div", { children: [u$1("label", { htmlFor: "customerName", style: labelStyle, children: "Name *" }), u$1("input", { id: "customerName", ...form.register("customerName"), type: "text", style: inputStyle, placeholder: "Dein vollst\u00E4ndiger Name", onFocus: (e) => {
7915
8026
  e.target.style.borderColor = "var(--bw-highlight-color)";
7916
8027
  e.target.style.boxShadow = "0 0 0 2px rgba(59, 130, 246, 0.2)";
7917
8028
  }, onBlur: (e) => {
7918
8029
  e.target.style.borderColor = "var(--bw-border-color)";
7919
8030
  e.target.style.boxShadow = "none";
7920
- } })] })] }) }), u$1(Accordion, { title: "2. Teilnehmer", isOpen: openSection === "participants", onToggle: () => setOpenSection(openSection === "participants" ? "participants" : "participants"), children: [u$1("div", { style: {
7921
- display: "flex",
7922
- justifyContent: "space-between",
7923
- alignItems: "center",
7924
- marginBottom: "var(--bw-spacing)",
7925
- }, children: [u$1("h2", { style: {
7926
- fontSize: "var(--bw-font-size-large)",
7927
- fontWeight: "600",
7928
- color: "var(--bw-text-color)",
7929
- fontFamily: "var(--bw-font-family)",
7930
- margin: 0,
7931
- }, children: "Teilnehmer" }), watchedParticipants.length < eventDetails.availableSpots && (u$1("button", { type: "button", onClick: addParticipant, style: {
7932
- ...buttonStyle,
7933
- fontSize: "var(--bw-font-size)",
7934
- padding: "4px 12px",
7935
- }, onMouseEnter: (e) => {
7936
- e.currentTarget.style.backgroundColor = "var(--bw-border-color)";
7937
- }, onMouseLeave: (e) => {
7938
- e.currentTarget.style.backgroundColor = "rgba(51, 65, 85, 0.5)";
7939
- }, children: "+ Hinzuf\u00FCgen" }))] }), u$1("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: watchedParticipants.map((participant, index) => (u$1("div", { style: { display: "flex", gap: "12px", alignItems: "end" }, children: [u$1("div", { style: { flex: 1 }, children: [u$1("label", { htmlFor: `participant-name-${index}`, style: labelStyle, children: "Name *" }), u$1("input", { id: `participant-name-${index}`, ...form.register(`participants.${index}.name`), type: "text", style: inputStyle, placeholder: "Teilnehmername", onFocus: (e) => {
7940
- e.target.style.borderColor = "var(--bw-highlight-color)";
7941
- e.target.style.boxShadow = "0 0 0 2px rgba(59, 130, 246, 0.2)";
7942
- }, onBlur: (e) => {
7943
- e.target.style.borderColor = "var(--bw-border-color)";
7944
- e.target.style.boxShadow = "none";
7945
- } }), form.formState.errors.participants?.[index]?.name && (u$1("p", { style: {
7946
- color: "var(--bw-error-color)",
7947
- fontSize: "var(--bw-font-size)",
7948
- marginTop: "4px",
7949
- fontFamily: "var(--bw-font-family)",
7950
- }, children: form.formState.errors.participants[index]?.name?.message }))] }), u$1("div", { style: { width: "80px" }, children: [u$1("label", { htmlFor: `participant-age-${index}`, style: labelStyle, children: "Alter" }), u$1("input", { id: `participant-age-${index}`, ...form.register(`participants.${index}.age`, {
7951
- setValueAs: (value) => {
7952
- if (value === "" || value === null || value === undefined) {
7953
- return undefined;
7954
- }
7955
- const num = Number(value);
7956
- return Number.isNaN(num) ? undefined : num;
7957
- },
7958
- }), type: "number", min: "0", max: "120", style: inputStyle, placeholder: "25", onFocus: (e) => {
7959
- e.target.style.borderColor = "var(--bw-highlight-color)";
7960
- e.target.style.boxShadow = "0 0 0 2px rgba(59, 130, 246, 0.2)";
7961
- }, onBlur: (e) => {
7962
- e.target.style.borderColor = "var(--bw-border-color)";
7963
- e.target.style.boxShadow = "none";
7964
- } })] }), watchedParticipants.length > 1 && (u$1("button", { type: "button", onClick: () => removeParticipant(index), style: {
8031
+ } }), form.formState.errors.customerName && (u$1("p", { style: {
8032
+ color: "var(--bw-error-color)",
8033
+ fontSize: "var(--bw-font-size)",
8034
+ marginTop: "4px",
8035
+ fontFamily: "var(--bw-font-family)",
8036
+ }, children: form.formState.errors.customerName.message }))] }), u$1("div", { children: [u$1("label", { htmlFor: "customerEmail", style: labelStyle, children: "E-Mail *" }), u$1("input", { id: "customerEmail", ...form.register("customerEmail"), type: "email", style: inputStyle, placeholder: "deine@email.de", onFocus: (e) => {
8037
+ e.target.style.borderColor = "var(--bw-highlight-color)";
8038
+ e.target.style.boxShadow = "0 0 0 2px rgba(59, 130, 246, 0.2)";
8039
+ }, onBlur: (e) => {
8040
+ e.target.style.borderColor = "var(--bw-border-color)";
8041
+ e.target.style.boxShadow = "none";
8042
+ } }), form.formState.errors.customerEmail && (u$1("p", { style: {
7965
8043
  color: "var(--bw-error-color)",
7966
- padding: "12px",
7967
- backgroundColor: "rgba(51, 65, 85, 0.5)",
7968
- border: `1px solid var(--bw-border-color)`,
7969
- borderRadius: "var(--bw-border-radius)",
7970
- cursor: "pointer",
7971
- transition: "all 0.2s ease",
7972
- fontSize: "18px",
7973
- }, onMouseEnter: (e) => {
7974
- e.currentTarget.style.backgroundColor = "var(--bw-border-color)";
7975
- }, onMouseLeave: (e) => {
7976
- e.currentTarget.style.backgroundColor = "rgba(51, 65, 85, 0.5)";
7977
- }, children: "\u00D7" }))] }, index))) })] }), u$1(Accordion, { title: "3. Rabattcode (optional)", isOpen: openSection === "discount", onToggle: () => setOpenSection(openSection === "discount" ? "discount" : "discount"), children: u$1("div", { children: [u$1("input", { ...form.register("discountCode"), type: "text", style: inputStyle, placeholder: "Rabattcode eingeben", onFocus: (e) => {
8044
+ fontSize: "var(--bw-font-size)",
8045
+ marginTop: "4px",
8046
+ fontFamily: "var(--bw-font-family)",
8047
+ }, children: form.formState.errors.customerEmail.message }))] })] }), u$1("div", { children: [u$1("label", { htmlFor: "customerPhone", style: labelStyle, children: "Telefon (optional)" }), u$1("input", { id: "customerPhone", ...form.register("customerPhone"), type: "tel", style: inputStyle, placeholder: "+49 123 456789", onFocus: (e) => {
7978
8048
  e.target.style.borderColor = "var(--bw-highlight-color)";
7979
8049
  e.target.style.boxShadow = "0 0 0 2px rgba(59, 130, 246, 0.2)";
7980
8050
  }, onBlur: (e) => {
7981
8051
  e.target.style.borderColor = "var(--bw-border-color)";
7982
8052
  e.target.style.boxShadow = "none";
7983
- } }), discountLoading && (u$1("p", { style: {
7984
- color: "var(--bw-highlight-color)",
7985
- fontSize: "var(--bw-font-size)",
7986
- marginTop: "8px",
7987
- display: "flex",
7988
- alignItems: "center",
7989
- gap: "8px",
7990
- fontFamily: "var(--bw-font-family)",
7991
- }, children: [u$1("div", { style: {
7992
- width: "16px",
7993
- height: "16px",
7994
- color: "var(--bw-highlight-color)",
7995
- animation: "spin 1s linear infinite",
7996
- }, children: "\u27F3" }), "Validiere Rabattcode..."] })), discountError && (u$1("p", { style: {
8053
+ } })] })] }) }), u$1(Accordion, { title: "2. Teilnehmer", isOpen: openSection === "participants", onToggle: () => setOpenSection(openSection === "participants" ? "participants" : "participants"), children: [u$1("div", { style: {
8054
+ display: "flex",
8055
+ justifyContent: "space-between",
8056
+ alignItems: "center",
8057
+ marginBottom: "var(--bw-spacing)",
8058
+ }, children: [u$1("h2", { style: {
8059
+ fontSize: "var(--bw-font-size-large)",
8060
+ fontWeight: "600",
8061
+ color: "var(--bw-text-color)",
8062
+ fontFamily: "var(--bw-font-family)",
8063
+ margin: 0,
8064
+ }, children: "Teilnehmer" }), watchedParticipants.length < eventDetails.availableSpots && (u$1("button", { type: "button", onClick: addParticipant, style: {
8065
+ ...buttonStyle,
8066
+ fontSize: "var(--bw-font-size)",
8067
+ padding: "4px 12px",
8068
+ }, onMouseEnter: (e) => {
8069
+ e.currentTarget.style.backgroundColor = "var(--bw-border-color)";
8070
+ }, onMouseLeave: (e) => {
8071
+ e.currentTarget.style.backgroundColor = "rgba(51, 65, 85, 0.5)";
8072
+ }, children: "+ Hinzuf\u00FCgen" }))] }), u$1("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: watchedParticipants.map((participant, index) => (u$1("div", { style: { display: "flex", gap: "12px", alignItems: "end" }, children: [u$1("div", { style: { flex: 1 }, children: [u$1("label", { htmlFor: `participant-name-${index}`, style: labelStyle, children: "Name *" }), u$1("input", { id: `participant-name-${index}`, ...form.register(`participants.${index}.name`), type: "text", style: inputStyle, placeholder: "Teilnehmername", onFocus: (e) => {
8073
+ e.target.style.borderColor = "var(--bw-highlight-color)";
8074
+ e.target.style.boxShadow = "0 0 0 2px rgba(59, 130, 246, 0.2)";
8075
+ }, onBlur: (e) => {
8076
+ e.target.style.borderColor = "var(--bw-border-color)";
8077
+ e.target.style.boxShadow = "none";
8078
+ } }), form.formState.errors.participants?.[index]?.name && (u$1("p", { style: {
8079
+ color: "var(--bw-error-color)",
8080
+ fontSize: "var(--bw-font-size)",
8081
+ marginTop: "4px",
8082
+ fontFamily: "var(--bw-font-family)",
8083
+ }, children: form.formState.errors.participants[index]?.name?.message }))] }), u$1("div", { style: { width: "80px" }, children: [u$1("label", { htmlFor: `participant-age-${index}`, style: labelStyle, children: "Alter" }), u$1("input", { id: `participant-age-${index}`, ...form.register(`participants.${index}.age`, {
8084
+ setValueAs: (value) => {
8085
+ if (value === "" || value === null || value === undefined) {
8086
+ return undefined;
8087
+ }
8088
+ const num = Number(value);
8089
+ return Number.isNaN(num) ? undefined : num;
8090
+ },
8091
+ }), type: "number", min: "0", max: "120", style: inputStyle, placeholder: "25", onFocus: (e) => {
8092
+ e.target.style.borderColor = "var(--bw-highlight-color)";
8093
+ e.target.style.boxShadow = "0 0 0 2px rgba(59, 130, 246, 0.2)";
8094
+ }, onBlur: (e) => {
8095
+ e.target.style.borderColor = "var(--bw-border-color)";
8096
+ e.target.style.boxShadow = "none";
8097
+ } })] }), watchedParticipants.length > 1 && (u$1("button", { type: "button", onClick: () => removeParticipant(index), style: {
7997
8098
  color: "var(--bw-error-color)",
7998
- fontSize: "var(--bw-font-size)",
7999
- marginTop: "8px",
8000
- fontFamily: "var(--bw-font-family)",
8001
- }, children: discountError })), discountCode && (u$1("p", { style: {
8002
- color: "var(--bw-success-color)",
8003
- fontSize: "var(--bw-font-size)",
8004
- marginTop: "8px",
8005
- fontFamily: "var(--bw-font-family)",
8006
- }, children: ["\u2713 Rabatt angewendet: ", discountCode.description, " (-", formatCurrency(discountCode.discountAmount), ")"] }))] }) }), u$1("div", { style: {
8007
- backgroundColor: "var(--bw-surface-color)",
8008
- border: `1px solid var(--bw-border-color)`,
8009
- backdropFilter: "blur(4px)",
8010
- borderRadius: "var(--bw-border-radius)",
8011
- padding: "var(--bw-spacing)",
8012
- }, children: [u$1("div", { style: { display: "flex", alignItems: "start", gap: "12px" }, children: [u$1("input", { id: "acceptTerms", ...form.register("acceptTerms"), type: "checkbox", style: {
8013
- marginTop: "4px",
8014
- width: "16px",
8015
- height: "16px",
8016
- accentColor: "var(--bw-highlight-color)",
8017
- backgroundColor: "rgba(51, 65, 85, 0.5)",
8018
- borderColor: "var(--bw-border-color)",
8019
- borderRadius: "var(--bw-border-radius-small)",
8020
- } }), u$1("label", { htmlFor: "acceptTerms", style: {
8021
- fontSize: "var(--bw-font-size)",
8022
- color: "var(--bw-text-muted)",
8023
- fontFamily: "var(--bw-font-family)",
8024
- }, children: ["Ich akzeptiere die", " ", u$1("a", { href: "/terms", style: {
8025
- color: "var(--bw-highlight-color)",
8026
- textDecoration: "none",
8027
- }, children: "Allgemeinen Gesch\u00E4ftsbedingungen" }), "*"] })] }), form.formState.errors.acceptTerms && (u$1("p", { style: {
8028
- color: "var(--bw-error-color)",
8099
+ padding: "12px",
8100
+ backgroundColor: "rgba(51, 65, 85, 0.5)",
8101
+ border: `1px solid var(--bw-border-color)`,
8102
+ borderRadius: "var(--bw-border-radius)",
8103
+ cursor: "pointer",
8104
+ transition: "all 0.2s ease",
8105
+ fontSize: "18px",
8106
+ }, onMouseEnter: (e) => {
8107
+ e.currentTarget.style.backgroundColor = "var(--bw-border-color)";
8108
+ }, onMouseLeave: (e) => {
8109
+ e.currentTarget.style.backgroundColor = "rgba(51, 65, 85, 0.5)";
8110
+ }, children: "\u00D7" }))] }, index))) })] }), u$1(Accordion, { title: "3. Rabattcode (optional)", isOpen: openSection === "discount", onToggle: () => setOpenSection(openSection === "discount" ? "discount" : "discount"), children: u$1("div", { children: [u$1("input", { ...form.register("discountCode"), type: "text", style: inputStyle, placeholder: "Rabattcode eingeben", onFocus: (e) => {
8111
+ e.target.style.borderColor = "var(--bw-highlight-color)";
8112
+ e.target.style.boxShadow = "0 0 0 2px rgba(59, 130, 246, 0.2)";
8113
+ }, onBlur: (e) => {
8114
+ e.target.style.borderColor = "var(--bw-border-color)";
8115
+ e.target.style.boxShadow = "none";
8116
+ } }), discountLoading && (u$1("p", { style: {
8117
+ color: "var(--bw-highlight-color)",
8118
+ fontSize: "var(--bw-font-size)",
8119
+ marginTop: "8px",
8120
+ display: "flex",
8121
+ alignItems: "center",
8122
+ gap: "8px",
8123
+ fontFamily: "var(--bw-font-family)",
8124
+ }, children: [u$1("div", { style: {
8125
+ width: "16px",
8126
+ height: "16px",
8127
+ color: "var(--bw-highlight-color)",
8128
+ animation: "spin 1s linear infinite",
8129
+ }, children: "\u27F3" }), "Validiere Rabattcode..."] })), discountError && (u$1("p", { style: {
8130
+ color: "var(--bw-error-color)",
8131
+ fontSize: "var(--bw-font-size)",
8132
+ marginTop: "8px",
8133
+ fontFamily: "var(--bw-font-family)",
8134
+ }, children: discountError })), discountCode && (u$1("p", { style: {
8135
+ color: "var(--bw-success-color)",
8136
+ fontSize: "var(--bw-font-size)",
8137
+ marginTop: "8px",
8138
+ fontFamily: "var(--bw-font-family)",
8139
+ }, children: ["\u2713 Rabatt angewendet: ", discountCode.description, " (-", formatCurrency(discountCode.discountAmount), ")"] }))] }) }), u$1("div", { style: {
8140
+ backgroundColor: "var(--bw-surface-color)",
8141
+ border: `1px solid var(--bw-border-color)`,
8142
+ backdropFilter: "blur(4px)",
8143
+ borderRadius: "var(--bw-border-radius)",
8144
+ padding: "var(--bw-spacing)",
8145
+ }, children: [u$1("div", { style: { display: "flex", alignItems: "start", gap: "12px" }, children: [u$1("input", { id: "acceptTerms", ...form.register("acceptTerms"), type: "checkbox", style: {
8146
+ marginTop: "4px",
8147
+ width: "16px",
8148
+ height: "16px",
8149
+ accentColor: "var(--bw-highlight-color)",
8150
+ backgroundColor: "rgba(51, 65, 85, 0.5)",
8151
+ borderColor: "var(--bw-border-color)",
8152
+ borderRadius: "var(--bw-border-radius-small)",
8153
+ } }), u$1("label", { htmlFor: "acceptTerms", style: {
8029
8154
  fontSize: "var(--bw-font-size)",
8030
- marginTop: "8px",
8155
+ color: "var(--bw-text-muted)",
8031
8156
  fontFamily: "var(--bw-font-family)",
8032
- }, children: form.formState.errors.acceptTerms.message }))] })] }) }), u$1("div", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing-large)" }, children: [u$1("div", { style: {
8033
- backgroundColor: "var(--bw-surface-color)",
8034
- border: `1px solid var(--bw-border-color)`,
8035
- backdropFilter: "blur(4px)",
8036
- borderRadius: "var(--bw-border-radius)",
8037
- padding: "var(--bw-spacing)",
8038
- }, children: [u$1("h2", { style: {
8039
- fontSize: "var(--bw-font-size-large)",
8040
- fontWeight: "600",
8041
- color: "var(--bw-text-color)",
8042
- marginBottom: "var(--bw-spacing)",
8043
- fontFamily: "var(--bw-font-family)",
8044
- }, children: "Buchungszusammenfassung" }), u$1("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [u$1("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$1("span", { style: {
8045
- color: "var(--bw-text-muted)",
8046
- fontFamily: "var(--bw-font-family)",
8047
- }, children: "Anzahl Teilnehmer:" }), u$1("span", { style: {
8048
- color: "var(--bw-text-color)",
8049
- fontWeight: "500",
8050
- fontFamily: "var(--bw-font-family)",
8051
- }, children: watchedParticipants.filter((p) => p.name.trim()).length })] }), u$1("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$1("span", { style: {
8052
- color: "var(--bw-text-muted)",
8053
- fontFamily: "var(--bw-font-family)",
8054
- }, children: "Preis pro Person:" }), u$1("span", { style: {
8055
- color: "var(--bw-text-color)",
8056
- fontWeight: "500",
8057
- fontFamily: "var(--bw-font-family)",
8058
- }, children: formatCurrency(eventDetails.price) })] }), discountCode && (u$1(k$2, { children: [u$1("div", { style: {
8059
- display: "flex",
8060
- justifyContent: "space-between",
8061
- alignItems: "center",
8062
- }, children: [u$1("span", { style: {
8063
- color: "var(--bw-text-muted)",
8064
- fontFamily: "var(--bw-font-family)",
8065
- }, children: "Zwischensumme:" }), u$1("span", { style: {
8066
- color: "var(--bw-text-muted)",
8067
- textDecoration: "line-through",
8068
- fontFamily: "var(--bw-font-family)",
8069
- }, children: formatCurrency(eventDetails.price *
8070
- watchedParticipants.filter((p) => p.name.trim()).length) })] }), u$1("div", { style: {
8071
- display: "flex",
8072
- justifyContent: "space-between",
8073
- alignItems: "center",
8074
- }, children: [u$1("span", { style: {
8075
- color: "var(--bw-success-color)",
8076
- fontFamily: "var(--bw-font-family)",
8077
- }, children: "Rabatt:" }), u$1("span", { style: {
8078
- color: "var(--bw-success-color)",
8079
- fontFamily: "var(--bw-font-family)",
8080
- }, children: ["-", formatCurrency(discountCode.discountAmount)] })] })] })), u$1("div", { style: {
8081
- borderTop: `1px solid var(--bw-border-color)`,
8082
- paddingTop: "12px",
8083
- }, children: u$1("div", { style: {
8157
+ }, children: ["Ich akzeptiere die", " ", u$1("a", { href: eventDetails.agbUrl || "/terms", style: {
8158
+ color: "var(--bw-highlight-color)",
8159
+ textDecoration: "none",
8160
+ }, target: "_blank", rel: "noopener noreferrer", children: "Allgemeinen Gesch\u00E4ftsbedingungen" }), "*"] })] }), form.formState.errors.acceptTerms && (u$1("p", { style: {
8161
+ color: "var(--bw-error-color)",
8162
+ fontSize: "var(--bw-font-size)",
8163
+ marginTop: "8px",
8164
+ fontFamily: "var(--bw-font-family)",
8165
+ }, children: form.formState.errors.acceptTerms.message }))] })] }), u$1("div", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing-large)" }, children: [u$1("div", { style: {
8166
+ backgroundColor: "var(--bw-surface-color)",
8167
+ border: `1px solid var(--bw-border-color)`,
8168
+ backdropFilter: "blur(4px)",
8169
+ borderRadius: "var(--bw-border-radius)",
8170
+ padding: "var(--bw-spacing)",
8171
+ }, children: [u$1("h2", { style: {
8172
+ fontSize: "var(--bw-font-size-large)",
8173
+ fontWeight: "600",
8174
+ color: "var(--bw-text-color)",
8175
+ marginBottom: "var(--bw-spacing)",
8176
+ fontFamily: "var(--bw-font-family)",
8177
+ }, children: "Buchungszusammenfassung" }), u$1("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [u$1("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$1("span", { style: {
8178
+ color: "var(--bw-text-muted)",
8179
+ fontFamily: "var(--bw-font-family)",
8180
+ }, children: "Anzahl Teilnehmer:" }), u$1("span", { style: {
8181
+ color: "var(--bw-text-color)",
8182
+ fontWeight: "500",
8183
+ fontFamily: "var(--bw-font-family)",
8184
+ }, children: watchedParticipants.filter((p) => p.name.trim()).length })] }), u$1("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$1("span", { style: {
8185
+ color: "var(--bw-text-muted)",
8186
+ fontFamily: "var(--bw-font-family)",
8187
+ }, children: "Preis pro Person:" }), u$1("span", { style: {
8188
+ color: "var(--bw-text-color)",
8189
+ fontWeight: "500",
8190
+ fontFamily: "var(--bw-font-family)",
8191
+ }, children: formatCurrency(eventDetails.price) })] }), discountCode && (u$1(k$2, { children: [u$1("div", { style: {
8084
8192
  display: "flex",
8085
8193
  justifyContent: "space-between",
8086
8194
  alignItems: "center",
8087
- fontSize: "var(--bw-font-size-large)",
8088
- fontWeight: "600",
8089
- }, children: [u$1("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: "Gesamtbetrag:" }), u$1("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: formatCurrency(totalAmount) })] }) })] })] }), stripePromise && clientSecret && (u$1("div", { style: {
8090
- backgroundColor: "var(--bw-surface-color)",
8091
- border: `1px solid var(--bw-border-color)`,
8092
- backdropFilter: "blur(4px)",
8093
- borderRadius: "var(--bw-border-radius)",
8094
- padding: "var(--bw-spacing)",
8095
- }, children: [u$1("h2", { style: {
8096
- fontSize: "var(--bw-font-size-large)",
8097
- fontWeight: "600",
8098
- color: "var(--bw-text-color)",
8099
- marginBottom: "var(--bw-spacing)",
8100
- fontFamily: "var(--bw-font-family)",
8101
- }, children: "Zahlung" }), u$1(reactStripe_umdExports.Elements, { stripe: stripePromise, options: {
8102
- clientSecret,
8103
- appearance: stripeAppearance || { theme: "stripe" },
8104
- locale: config.locale || "de",
8105
- }, children: u$1(PaymentForm, { config: config, eventDetails: eventDetails, formData: form.getValues(), totalAmount: totalAmount, discountCode: discountCode, onSuccess: onSuccess, onError: onError }) })] }))] })] })] }), u$1("style", { children: `
8106
- .booking-widget-container *,
8107
- .booking-widget-container *::before,
8108
- .booking-widget-container *::after {
8109
- box-sizing: border-box;
8110
- }
8111
- @keyframes spin {
8112
- from { transform: rotate(0deg); }
8113
- to { transform: rotate(360deg); }
8114
- }
8115
- ` })] }));
8195
+ }, children: [u$1("span", { style: {
8196
+ color: "var(--bw-text-muted)",
8197
+ fontFamily: "var(--bw-font-family)",
8198
+ }, children: "Zwischensumme:" }), u$1("span", { style: {
8199
+ color: "var(--bw-text-muted)",
8200
+ textDecoration: "line-through",
8201
+ fontFamily: "var(--bw-font-family)",
8202
+ }, children: formatCurrency(eventDetails.price *
8203
+ watchedParticipants.filter((p) => p.name.trim()).length) })] }), u$1("div", { style: {
8204
+ display: "flex",
8205
+ justifyContent: "space-between",
8206
+ alignItems: "center",
8207
+ }, children: [u$1("span", { style: {
8208
+ color: "var(--bw-success-color)",
8209
+ fontFamily: "var(--bw-font-family)",
8210
+ }, children: "Rabatt:" }), u$1("span", { style: {
8211
+ color: "var(--bw-success-color)",
8212
+ fontFamily: "var(--bw-font-family)",
8213
+ }, children: ["-", formatCurrency(discountCode.discountAmount)] })] })] })), u$1("div", { style: {
8214
+ borderTop: `1px solid var(--bw-border-color)`,
8215
+ paddingTop: "12px",
8216
+ }, children: u$1("div", { style: {
8217
+ display: "flex",
8218
+ justifyContent: "space-between",
8219
+ alignItems: "center",
8220
+ fontSize: "var(--bw-font-size-large)",
8221
+ fontWeight: "600",
8222
+ }, children: [u$1("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: "Gesamtbetrag:" }), u$1("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: formatCurrency(totalAmount) })] }) })] })] }), stripePromise && clientSecret && (u$1("div", { style: {
8223
+ backgroundColor: "var(--bw-surface-color)",
8224
+ border: `1px solid var(--bw-border-color)`,
8225
+ backdropFilter: "blur(4px)",
8226
+ borderRadius: "var(--bw-border-radius)",
8227
+ padding: "var(--bw-spacing)",
8228
+ }, children: [u$1("h2", { style: {
8229
+ fontSize: "var(--bw-font-size-large)",
8230
+ fontWeight: "600",
8231
+ color: "var(--bw-text-color)",
8232
+ marginBottom: "var(--bw-spacing)",
8233
+ fontFamily: "var(--bw-font-family)",
8234
+ }, children: "Zahlung" }), u$1(reactStripe_umdExports.Elements, { stripe: stripePromise, options: {
8235
+ clientSecret,
8236
+ appearance: stripeAppearance || { theme: "stripe" },
8237
+ locale: config.locale || "de",
8238
+ }, children: u$1(PaymentForm, { config: config, eventDetails: eventDetails, formData: form.getValues(), totalAmount: totalAmount, discountCode: discountCode, onSuccess: onSuccess, onError: onError }) })] }))] })] }), u$1("style", { children: `
8239
+ .booking-widget-container *,
8240
+ .booking-widget-container *::before,
8241
+ .booking-widget-container *::after {
8242
+ box-sizing: border-box;
8243
+ }
8244
+ @keyframes spin {
8245
+ from { transform: rotate(0deg); }
8246
+ to { transform: rotate(360deg); }
8247
+ }
8248
+ ` })] }) }));
8116
8249
  }
8117
8250
 
8118
8251
  const months = [
@@ -8129,160 +8262,17 @@
8129
8262
  "November",
8130
8263
  "Dezember",
8131
8264
  ];
8132
- // Carousel Components
8133
- function CarouselContext() {
8134
- return Rn.createContext(null);
8135
- }
8136
- const carouselContext = CarouselContext();
8137
- function useCarousel() {
8138
- const context = Rn.useContext(carouselContext);
8139
- if (!context) {
8140
- throw new Error("useCarousel must be used within a Carousel");
8141
- }
8142
- return context;
8143
- }
8144
- function Carousel({ children, className }) {
8145
- const [currentIndex, setCurrentIndex] = d(0);
8146
- const [totalItems, setTotalItems] = d(0);
8147
- const [slidesToShow, setSlidesToShow] = d(3); // Show 3 slides by default
8148
- const canScrollPrev = currentIndex > 0;
8149
- const canScrollNext = currentIndex < totalItems - slidesToShow;
8150
- const scrollPrev = () => {
8151
- if (canScrollPrev) {
8152
- setCurrentIndex(Math.max(0, currentIndex - 1));
8153
- }
8265
+ function EventInstanceSelection({ eventInstances, selectedEventType, onEventInstanceSelect, onBackToEventTypes, isOpen, onClose, }) {
8266
+ const [selectedEventInstanceId, setSelectedEventInstanceId] = d(null);
8267
+ const [openMonths, setOpenMonths] = d(new Set());
8268
+ const getEventsForMonth = (monthIndex) => {
8269
+ return eventInstances.filter((instance) => new Date(instance.startTime).getMonth() === monthIndex);
8154
8270
  };
8155
- const scrollNext = () => {
8156
- if (canScrollNext) {
8157
- setCurrentIndex(Math.min(totalItems - slidesToShow, currentIndex + 1));
8158
- }
8159
- };
8160
- const contextValue = {
8161
- currentIndex,
8162
- totalItems,
8163
- canScrollPrev,
8164
- canScrollNext,
8165
- scrollPrev,
8166
- scrollNext,
8167
- slidesToShow,
8168
- };
8169
- // Update total items and responsive slides when children change
8170
- Rn.useEffect(() => {
8171
- const contentElement = document.querySelector("[data-carousel-content]");
8172
- if (contentElement) {
8173
- const items = contentElement.querySelectorAll("[data-carousel-item]");
8174
- setTotalItems(items.length);
8175
- }
8176
- // Responsive slides based on container width
8177
- const updateSlidesToShow = () => {
8178
- const container = document.querySelector("[data-carousel-content]");
8179
- if (container) {
8180
- const containerWidth = container.getBoundingClientRect().width;
8181
- if (containerWidth < 600) {
8182
- setSlidesToShow(1);
8183
- }
8184
- else if (containerWidth < 900) {
8185
- setSlidesToShow(2);
8186
- }
8187
- else {
8188
- setSlidesToShow(3);
8189
- }
8190
- }
8191
- };
8192
- updateSlidesToShow();
8193
- window.addEventListener("resize", updateSlidesToShow);
8194
- return () => window.removeEventListener("resize", updateSlidesToShow);
8195
- }, [children]);
8196
- return (u$1(carouselContext.Provider, { value: contextValue, children: u$1("div", { style: { position: "relative" }, className: className, children: children }) }));
8197
- }
8198
- function CarouselContent({ children, className, }) {
8199
- const { currentIndex, slidesToShow } = useCarousel();
8200
- return (u$1("div", { style: { overflow: "hidden" }, "data-carousel-content": true, children: u$1("div", { style: {
8201
- display: "flex",
8202
- transform: `translateX(-${currentIndex * (100 / slidesToShow)}%)`,
8203
- transition: "transform 0.3s ease-in-out",
8204
- }, className: className, children: children }) }));
8205
- }
8206
- function CarouselItem({ children, className }) {
8207
- const { slidesToShow } = useCarousel();
8208
- return (u$1("div", { style: {
8209
- minWidth: `${100 / slidesToShow}%`,
8210
- flexShrink: 0,
8211
- paddingRight: "8px", // Add some spacing between slides
8212
- }, "data-carousel-item": true, className: className, children: children }));
8213
- }
8214
- function CarouselPrevious({ className }) {
8215
- const { scrollPrev, canScrollPrev } = useCarousel();
8216
- return (u$1("button", { onClick: scrollPrev, disabled: !canScrollPrev, style: {
8217
- position: "absolute",
8218
- top: "50%",
8219
- left: "-48px",
8220
- transform: "translateY(-50%)",
8221
- width: "40px",
8222
- height: "40px",
8223
- borderRadius: "50%",
8224
- backgroundColor: "var(--bw-surface-color)",
8225
- border: `1px solid var(--bw-border-color)`,
8226
- color: "var(--bw-text-color)",
8227
- cursor: canScrollPrev ? "pointer" : "not-allowed",
8228
- opacity: canScrollPrev ? 1 : 0.5,
8229
- display: "flex",
8230
- alignItems: "center",
8231
- justifyContent: "center",
8232
- fontSize: "18px",
8233
- fontFamily: "var(--bw-font-family)",
8234
- transition: "all 0.2s ease",
8235
- zIndex: 10,
8236
- }, onMouseEnter: (e) => {
8237
- if (canScrollPrev) {
8238
- e.currentTarget.style.backgroundColor = "var(--bw-highlight-color)";
8239
- e.currentTarget.style.color = "white";
8240
- }
8241
- }, onMouseLeave: (e) => {
8242
- if (canScrollPrev) {
8243
- e.currentTarget.style.backgroundColor = "var(--bw-surface-color)";
8244
- e.currentTarget.style.color = "var(--bw-text-color)";
8245
- }
8246
- }, className: className, children: "\u2190" }));
8247
- }
8248
- function CarouselNext({ className }) {
8249
- const { scrollNext, canScrollNext } = useCarousel();
8250
- return (u$1("button", { onClick: scrollNext, disabled: !canScrollNext, style: {
8251
- position: "absolute",
8252
- top: "50%",
8253
- right: "-48px",
8254
- transform: "translateY(-50%)",
8255
- width: "40px",
8256
- height: "40px",
8257
- borderRadius: "50%",
8258
- backgroundColor: "var(--bw-surface-color)",
8259
- border: `1px solid var(--bw-border-color)`,
8260
- color: "var(--bw-text-color)",
8261
- cursor: canScrollNext ? "pointer" : "not-allowed",
8262
- opacity: canScrollNext ? 1 : 0.5,
8263
- display: "flex",
8264
- alignItems: "center",
8265
- justifyContent: "center",
8266
- fontSize: "18px",
8267
- fontFamily: "var(--bw-font-family)",
8268
- transition: "all 0.2s ease",
8269
- zIndex: 10,
8270
- }, onMouseEnter: (e) => {
8271
- if (canScrollNext) {
8272
- e.currentTarget.style.backgroundColor = "var(--bw-highlight-color)";
8273
- e.currentTarget.style.color = "white";
8274
- }
8275
- }, onMouseLeave: (e) => {
8276
- if (canScrollNext) {
8277
- e.currentTarget.style.backgroundColor = "var(--bw-surface-color)";
8278
- e.currentTarget.style.color = "var(--bw-text-color)";
8279
- }
8280
- }, className: className, children: "\u2192" }));
8281
- }
8282
- function EventInstanceSelection({ eventInstances, selectedEventType, onEventInstanceSelect, onBackToEventTypes, }) {
8283
- const [selectedEventInstanceId, setSelectedEventInstanceId] = d(null);
8284
- const getEventsForMonth = (monthIndex) => {
8285
- return eventInstances.filter((instance) => new Date(instance.startTime).getMonth() === monthIndex);
8271
+ const getMinPriceForMonth = (monthIndex) => {
8272
+ const monthEvents = getEventsForMonth(monthIndex);
8273
+ if (monthEvents.length === 0)
8274
+ return 0;
8275
+ return Math.min(...monthEvents.map((event) => event.price));
8286
8276
  };
8287
8277
  const today = new Date();
8288
8278
  // Get months that have events
@@ -8291,284 +8281,197 @@
8291
8281
  month,
8292
8282
  index,
8293
8283
  events: getEventsForMonth(index).sort((a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime()),
8284
+ minPrice: getMinPriceForMonth(index),
8294
8285
  }))
8295
8286
  .filter((monthData) => monthData.events.length > 0);
8296
8287
  const handleEventInstanceSelect = (eventInstance) => {
8297
8288
  setSelectedEventInstanceId(eventInstance.id);
8298
8289
  onEventInstanceSelect(eventInstance);
8299
8290
  };
8291
+ const toggleMonth = (monthIndex) => {
8292
+ if (openMonths.has(monthIndex)) {
8293
+ // Close if already open
8294
+ setOpenMonths(new Set());
8295
+ }
8296
+ else {
8297
+ // Open only this one, close others
8298
+ setOpenMonths(new Set([monthIndex]));
8299
+ }
8300
+ };
8301
+ const handleClose = () => {
8302
+ onClose();
8303
+ onBackToEventTypes();
8304
+ };
8300
8305
  if (eventInstances.length === 0) {
8301
- return (u$1("div", { style: {
8302
- minHeight: "400px",
8303
- background: `linear-gradient(135deg, var(--bw-background-color), var(--bw-surface-color))`,
8304
- color: "var(--bw-text-color)",
8305
- borderRadius: "var(--bw-border-radius)",
8306
- display: "flex",
8307
- alignItems: "center",
8308
- justifyContent: "center",
8309
- }, children: u$1("div", { style: { textAlign: "center" }, children: [u$1("div", { style: {
8310
- margin: "0 auto 16px",
8311
- width: "48px",
8312
- height: "48px",
8313
- color: "var(--bw-text-muted)",
8314
- fontSize: "48px",
8315
- }, children: "\uD83D\uDCC5" }), u$1("h3", { style: {
8316
- marginBottom: "8px",
8317
- fontWeight: "600",
8318
- fontSize: "var(--bw-font-size-large)",
8319
- color: "var(--bw-text-muted)",
8320
- fontFamily: "var(--bw-font-family)",
8321
- }, children: "Keine verf\u00FCgbaren Termine" }), u$1("p", { style: {
8322
- color: "var(--bw-text-muted)",
8323
- fontFamily: "var(--bw-font-family)",
8324
- }, children: "F\u00FCr diesen Event-Typ sind derzeit keine Termine verf\u00FCgbar." })] }) }));
8325
- }
8326
- return (u$1("div", { className: "booking-widget-container", style: { width: "100%", margin: "0 auto", padding: "0 16px" }, children: [u$1("div", { style: { padding: "8px", paddingTop: "32px", paddingBottom: "32px" }, children: [u$1("div", { style: {
8327
- display: "flex",
8328
- alignItems: "center",
8329
- justifyContent: "space-between",
8330
- marginBottom: "var(--bw-spacing-large)",
8331
- padding: "8px",
8332
- }, children: [u$1("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [u$1("div", { style: { fontSize: "32px" }, children: "\uD83D\uDCC5" }), u$1("div", { children: [u$1("h1", { style: {
8333
- fontSize: "var(--bw-font-size-large)",
8334
- fontWeight: "bold",
8335
- color: "var(--bw-text-color)",
8336
- fontFamily: "var(--bw-font-family)",
8337
- margin: 0,
8338
- }, children: ["Terminauswahl f\u00FCr ", selectedEventType?.name] }), u$1("p", { style: {
8339
- fontSize: "var(--bw-font-size)",
8340
- color: "var(--bw-text-muted)",
8341
- fontFamily: "var(--bw-font-family)",
8342
- margin: 0,
8343
- }, children: selectedEventType?.description || "Wähle deinen bevorzugten Termin" })] })] }), u$1("button", { onClick: onBackToEventTypes, style: {
8344
- color: "var(--bw-highlight-color)",
8345
- fontSize: "var(--bw-font-size)",
8346
- fontWeight: "500",
8347
- padding: "8px 16px",
8348
- borderRadius: "var(--bw-border-radius)",
8349
- backgroundColor: "var(--bw-surface-color)",
8350
- border: `1px solid var(--bw-border-color)`,
8351
- cursor: "pointer",
8352
- transition: "all 0.2s ease",
8353
- fontFamily: "var(--bw-font-family)",
8354
- }, onMouseEnter: (e) => {
8355
- e.currentTarget.style.backgroundColor = "var(--bw-border-color)";
8356
- }, onMouseLeave: (e) => {
8357
- e.currentTarget.style.backgroundColor = "var(--bw-surface-color)";
8358
- }, children: "\u2190 Zur\u00FCck zur Auswahl" })] }), u$1(Carousel, { children: [u$1(CarouselContent, { children: monthsWithEvents.map(({ month, events }) => (u$1(CarouselItem, { children: u$1("div", { style: {
8359
- width: "100%",
8360
- backgroundColor: "var(--bw-surface-color)",
8361
- borderColor: "var(--bw-border-color)",
8362
- backdropFilter: "blur(4px)",
8363
- height: "100%",
8364
- borderRadius: "var(--bw-border-radius)",
8365
- border: "1px solid",
8366
- }, children: [u$1("div", { style: { padding: "var(--bw-spacing)" }, children: u$1("div", { style: {
8306
+ return (u$1(Sidebar, { isOpen: isOpen, onClose: handleClose, title: "Keine verf\u00FCgbaren Termine", children: u$1("div", { style: {
8307
+ display: "flex",
8308
+ alignItems: "center",
8309
+ justifyContent: "center",
8310
+ minHeight: "400px",
8311
+ textAlign: "center",
8312
+ padding: "var(--bw-spacing)",
8313
+ }, children: u$1("div", { children: [u$1("div", { style: {
8314
+ margin: "0 auto 16px",
8315
+ fontSize: "48px",
8316
+ }, children: "\uD83D\uDCC5" }), u$1("h3", { style: {
8317
+ marginBottom: "8px",
8318
+ fontWeight: "600",
8319
+ fontSize: "var(--bw-font-size-large)",
8320
+ color: "var(--bw-text-muted)",
8321
+ fontFamily: "var(--bw-font-family)",
8322
+ }, children: "Keine verf\u00FCgbaren Termine" }), u$1("p", { style: {
8323
+ color: "var(--bw-text-muted)",
8324
+ fontFamily: "var(--bw-font-family)",
8325
+ }, children: "F\u00FCr diesen Event-Typ sind derzeit keine Termine verf\u00FCgbar." })] }) }) }));
8326
+ }
8327
+ return (u$1(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `Terminauswahl - ${selectedEventType?.name || "Event"}`, width: "500px", children: [u$1("div", { style: { padding: "var(--bw-spacing)" }, children: u$1("div", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing)" }, children: monthsWithEvents.map(({ month, index, events, minPrice }) => (u$1(Accordion$1, { title: month, priceInfo: `ab ${formatCurrency(minPrice)}`, isOpen: openMonths.has(index), onToggle: () => toggleMonth(index), children: u$1("div", { style: {
8328
+ display: "flex",
8329
+ flexDirection: "column",
8330
+ gap: "12px",
8331
+ paddingTop: "12px",
8332
+ }, children: events.map((event) => {
8333
+ const availableSpots = event.maxParticipants - event.participantCount;
8334
+ const isFullyBooked = availableSpots === 0;
8335
+ const startDate = new Date(event.startTime);
8336
+ const isFullAvailability = availableSpots / event.maxParticipants >= 0.8;
8337
+ const isHighAvailability = availableSpots / event.maxParticipants >= 0.5;
8338
+ const isMediumAvailability = availableSpots / event.maxParticipants >= 0.3;
8339
+ const isLowAvailability = availableSpots / event.maxParticipants >= 0.15;
8340
+ const isPastEvent = today.toISOString() >= startDate.toISOString();
8341
+ const getAvailabilityColor = () => {
8342
+ if (isFullAvailability)
8343
+ return "var(--bw-success-color)";
8344
+ if (isHighAvailability)
8345
+ return "var(--bw-warning-color)";
8346
+ if (isMediumAvailability)
8347
+ return "var(--bw-availability-medium-color, #f97316)"; // orange fallback
8348
+ if (isLowAvailability)
8349
+ return "var(--bw-availability-low-color, #8b5cf6)"; // purple fallback
8350
+ return "var(--bw-highlight-color)";
8351
+ };
8352
+ return (u$1("div", { style: {
8353
+ position: "relative",
8354
+ cursor: !isFullyBooked && !isPastEvent && event.bookingOpen
8355
+ ? "pointer"
8356
+ : "not-allowed",
8357
+ border: "1px solid",
8358
+ backgroundColor: "var(--bw-surface-color)",
8359
+ borderRadius: "var(--bw-border-radius)",
8360
+ padding: "8px 10px",
8361
+ transition: "all 0.2s ease",
8362
+ opacity: isFullyBooked || isPastEvent ? 0.3 : 1,
8363
+ filter: isFullyBooked || isPastEvent ? "grayscale(100%)" : "none",
8364
+ borderColor: getAvailabilityColor(),
8365
+ fontFamily: "var(--bw-font-family)",
8366
+ }, onClick: () => {
8367
+ if (!isFullyBooked && !isPastEvent && event.bookingOpen) {
8368
+ handleEventInstanceSelect(event);
8369
+ }
8370
+ }, onMouseEnter: (e) => {
8371
+ if (!isFullyBooked && !isPastEvent && event.bookingOpen) {
8372
+ e.currentTarget.style.transform = "scale(1.02)";
8373
+ e.currentTarget.style.backgroundColor =
8374
+ "var(--bw-surface-hover, rgba(0, 0, 0, 0.05))";
8375
+ }
8376
+ }, onMouseLeave: (e) => {
8377
+ if (!isFullyBooked && !isPastEvent && event.bookingOpen) {
8378
+ e.currentTarget.style.transform = "scale(1)";
8379
+ e.currentTarget.style.backgroundColor = "var(--bw-surface-color)";
8380
+ }
8381
+ }, children: [selectedEventInstanceId === event.id && (u$1("div", { style: {
8382
+ position: "absolute",
8383
+ top: 0,
8384
+ left: 0,
8385
+ width: "100%",
8386
+ height: "100%",
8387
+ backgroundColor: "var(--bw-overlay-color, rgba(15, 23, 42, 0.8))",
8388
+ borderRadius: "var(--bw-border-radius)",
8389
+ display: "flex",
8390
+ alignItems: "center",
8391
+ justifyContent: "center",
8392
+ }, children: u$1("div", { style: {
8393
+ width: "32px",
8394
+ height: "32px",
8395
+ color: "var(--bw-highlight-color-muted, rgba(59, 130, 246, 0.8))",
8396
+ animation: "spin 1s linear infinite",
8397
+ fontSize: "32px",
8398
+ }, children: "\u27F3" }) })), u$1("div", { style: {
8399
+ display: "flex",
8400
+ justifyContent: "space-between",
8401
+ width: "100%",
8402
+ alignItems: "start",
8403
+ gap: "12px",
8404
+ marginBottom: "4px",
8405
+ }, children: [u$1("div", { style: { display: "flex", alignItems: "start", gap: "12px" }, children: [u$1("div", { style: {
8406
+ fontSize: "var(--bw-font-size)",
8407
+ transition: "all 0.2s ease",
8408
+ borderRadius: "var(--bw-border-radius-small)",
8409
+ borderTop: `4px solid ${getAvailabilityColor()}`,
8410
+ border: "1px solid",
8411
+ width: "40px",
8412
+ height: "40px",
8413
+ display: "flex",
8414
+ alignItems: "center",
8415
+ justifyContent: "center",
8416
+ fontWeight: "bold",
8417
+ color: "var(--bw-text-color)",
8418
+ borderColor: getAvailabilityColor(),
8419
+ backgroundColor: "var(--bw-background-color)",
8420
+ }, children: startDate.getDate() }), u$1("div", { style: {
8421
+ fontSize: "var(--bw-font-size)",
8422
+ color: "var(--bw-text-color)",
8423
+ display: "flex",
8424
+ flexDirection: "column",
8425
+ alignItems: "start",
8426
+ justifyContent: "start",
8427
+ lineHeight: "1.2",
8428
+ }, children: [u$1("span", { style: {
8429
+ fontWeight: "600",
8430
+ marginBottom: "2px",
8431
+ }, children: formatWeekday(event.startTime) }), u$1("span", { style: {
8432
+ color: "var(--bw-text-muted)",
8433
+ fontSize: "14px",
8434
+ }, children: formatTime(event.startTime) })] })] }), u$1("div", { style: {
8435
+ textAlign: "right",
8367
8436
  display: "flex",
8437
+ flexDirection: "column",
8368
8438
  alignItems: "end",
8369
- justifyContent: "space-between",
8370
8439
  }, children: [u$1("div", { style: {
8371
- fontSize: "32px",
8372
- textTransform: "uppercase",
8440
+ color: "var(--bw-highlight-color)",
8441
+ fontSize: "var(--bw-font-size-large)",
8373
8442
  fontWeight: "bold",
8374
- borderBottom: `2px solid var(--bw-highlight-color)`,
8375
- paddingRight: "12px",
8376
- color: "var(--bw-text-color)",
8377
- fontFamily: "var(--bw-font-family)",
8378
- }, children: month }), u$1("div", { style: {
8379
- backgroundColor: "var(--bw-muted-bg, rgba(100, 116, 139, 0.1))",
8380
- color: "var(--bw-text-muted)",
8443
+ }, children: formatCurrency(event.price) }), event.deposit && event.deposit > 0 && (u$1("div", { style: {
8381
8444
  fontSize: "12px",
8382
- padding: "4px 8px",
8383
- borderRadius: "var(--bw-border-radius-small)",
8384
- fontFamily: "var(--bw-font-family)",
8385
- }, children: [events.length, " Termine"] })] }) }), u$1("div", { style: {
8386
- padding: "0 12px",
8387
- paddingBottom: "var(--bw-spacing)",
8388
- display: "flex",
8389
- flexDirection: "column",
8390
- gap: "12px",
8391
- width: "100%",
8392
- maxWidth: "320px",
8393
- }, children: events.map((event) => {
8394
- const availableSpots = event.maxParticipants - event.participantCount;
8395
- const isFullyBooked = availableSpots === 0;
8396
- const startDate = new Date(event.startTime);
8397
- const isFullAvailability = availableSpots / event.maxParticipants >= 0.8;
8398
- const isHighAvailability = availableSpots / event.maxParticipants >= 0.5;
8399
- const isMediumAvailability = availableSpots / event.maxParticipants >= 0.3;
8400
- const isLowAvailability = availableSpots / event.maxParticipants >= 0.15;
8401
- const isPastEvent = today.toISOString() >= startDate.toISOString();
8402
- const getAvailabilityColor = () => {
8403
- if (isFullAvailability)
8404
- return "var(--bw-success-color)";
8405
- if (isHighAvailability)
8406
- return "var(--bw-warning-color)";
8407
- if (isMediumAvailability)
8408
- return "var(--bw-availability-medium-color, #f97316)"; // orange fallback
8409
- if (isLowAvailability)
8410
- return "var(--bw-availability-low-color, #8b5cf6)"; // purple fallback
8411
- return "var(--bw-highlight-color)";
8412
- };
8413
- return (u$1("div", { style: {
8414
- position: "relative",
8415
- cursor: !isFullyBooked && !isPastEvent && event.bookingOpen
8416
- ? "pointer"
8417
- : "not-allowed",
8418
- border: "1px solid",
8419
- backgroundColor: "var(--bw-primary-bg-light, rgba(59, 130, 246, 0.05))",
8420
- borderRadius: "var(--bw-border-radius)",
8421
- padding: "8px 12px 8px 20px",
8422
- transition: "all 0.2s ease",
8423
- opacity: isFullyBooked || isPastEvent ? 0.3 : 1,
8424
- filter: isFullyBooked || isPastEvent ? "grayscale(100%)" : "none",
8425
- borderColor: getAvailabilityColor(),
8426
- fontFamily: "var(--bw-font-family)",
8427
- }, onClick: () => {
8428
- if (!isFullyBooked && !isPastEvent && event.bookingOpen) {
8429
- handleEventInstanceSelect(event);
8430
- }
8431
- }, onMouseEnter: (e) => {
8432
- if (!isFullyBooked && !isPastEvent && event.bookingOpen) {
8433
- e.currentTarget.style.transform = "scale(1.02)";
8434
- e.currentTarget.style.backgroundColor =
8435
- "var(--bw-primary-bg-hover, rgba(59, 130, 246, 0.3))";
8436
- }
8437
- }, onMouseLeave: (e) => {
8438
- if (!isFullyBooked && !isPastEvent && event.bookingOpen) {
8439
- e.currentTarget.style.transform = "scale(1)";
8440
- e.currentTarget.style.backgroundColor =
8441
- "var(--bw-primary-bg-light, rgba(59, 130, 246, 0.05))";
8442
- }
8443
- }, children: [selectedEventInstanceId === event.id && (u$1("div", { style: {
8444
- position: "absolute",
8445
- top: 0,
8446
- left: 0,
8447
- width: "100%",
8448
- height: "100%",
8449
- backgroundColor: "var(--bw-overlay-color, rgba(15, 23, 42, 0.8))",
8450
- borderRadius: "var(--bw-border-radius)",
8451
- display: "flex",
8452
- alignItems: "center",
8453
- justifyContent: "center",
8454
- }, children: u$1("div", { style: {
8455
- width: "32px",
8456
- height: "32px",
8457
- color: "var(--bw-highlight-color-muted, rgba(59, 130, 246, 0.8))",
8458
- animation: "spin 1s linear infinite",
8459
- fontSize: "32px",
8460
- }, children: "\u27F3" }) })), u$1("div", { style: {
8461
- display: "flex",
8462
- justifyContent: "space-between",
8463
- width: "100%",
8464
- alignItems: "center",
8465
- gap: "8px",
8466
- marginBottom: "4px",
8467
- }, children: [u$1("div", { style: { display: "flex", alignItems: "start", gap: "8px" }, children: [u$1("div", { style: {
8468
- marginLeft: "-8px",
8469
- fontSize: "var(--bw-font-size)",
8470
- transition: "all 0.2s ease",
8471
- borderRadius: "var(--bw-border-radius-small)",
8472
- borderTop: `4px solid ${getAvailabilityColor()}`,
8473
- border: "1px solid",
8474
- width: "32px",
8475
- height: "32px",
8476
- display: "flex",
8477
- alignItems: "center",
8478
- justifyContent: "center",
8479
- fontWeight: "bold",
8480
- color: "var(--bw-text-muted)",
8481
- borderColor: getAvailabilityColor(),
8482
- }, children: startDate.getDate() }), u$1("div", { style: {
8483
- fontSize: "12px",
8484
- color: "var(--bw-text-muted)",
8485
- display: "flex",
8486
- flexDirection: "column",
8487
- alignItems: "start",
8488
- justifyContent: "start",
8489
- lineHeight: "1.2",
8490
- }, children: [u$1("span", { style: {
8491
- color: "var(--bw-text-color)",
8492
- fontSize: "var(--bw-font-size)",
8493
- fontWeight: "600",
8494
- }, children: formatWeekday(event.startTime) }), u$1("span", { children: formatTime(event.startTime) })] })] }), u$1("div", { style: {
8495
- fontSize: "12px",
8496
- color: "var(--bw-text-muted)",
8497
- display: "flex",
8498
- flexDirection: "column",
8499
- alignItems: "center",
8500
- gap: "4px",
8501
- }, children: [u$1("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [u$1("div", { style: { width: "12px", height: "12px", display: "inline" }, children: "\uD83D\uDCC5" }), u$1("span", { children: [event.durationDays, " T"] })] }), u$1("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [u$1("div", { style: { width: "12px", height: "12px", display: "inline" }, children: "\uD83D\uDD50" }), u$1("span", { children: [Math.round(event.durationPerDay / 60), " h"] })] })] }), u$1("div", { style: {
8502
- display: "flex",
8503
- flexDirection: "column",
8504
- alignItems: "end",
8505
- justifyContent: "start",
8506
- lineHeight: "1.2",
8507
- }, children: u$1("div", { style: {
8508
- justifySelf: "end",
8509
- display: "flex",
8510
- alignItems: "center",
8511
- gap: "4px",
8512
- fontSize: "var(--bw-font-size)",
8513
- color: "var(--bw-highlight-color-muted, rgba(59, 130, 246, 0.8))",
8514
- fontWeight: "bold",
8515
- }, children: formatCurrency(event.price) }) })] }), u$1("h4", { style: {
8516
- fontSize: "var(--bw-font-size)",
8517
- paddingTop: "4px",
8518
- fontWeight: "600",
8519
- color: "var(--bw-text-color)",
8520
- lineHeight: "1.25",
8521
- margin: 0,
8522
- }, children: event.name }), event.notes && (u$1("p", { style: {
8523
- fontSize: "12px",
8524
- color: "var(--bw-text-muted)",
8525
- marginTop: "4px",
8526
- display: "-webkit-box",
8527
- WebkitBoxOrient: "vertical",
8528
- WebkitLineClamp: 2,
8529
- overflow: "hidden",
8530
- margin: "4px 0 0 0",
8531
- }, children: event.notes })), event.deposit && event.deposit > 0 && (u$1("div", { style: {
8532
- fontSize: "12px",
8533
- color: "var(--bw-success-color)",
8534
- marginTop: "4px",
8535
- }, children: ["ab ", formatCurrency(event.deposit)] }))] }, event.id));
8536
- }) })] }) }, month))) }), u$1(CarouselPrevious, {}), u$1(CarouselNext, {})] }), u$1("div", { style: {
8537
- display: "flex",
8538
- justifyContent: "center",
8539
- gap: "var(--bw-spacing-large)",
8540
- marginTop: "32px",
8541
- fontSize: "var(--bw-font-size)",
8542
- }, children: [u$1("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [u$1("div", { style: {
8543
- backgroundColor: "var(--bw-success-color)",
8544
- borderRadius: "var(--bw-border-radius-small)",
8545
- width: "12px",
8546
- height: "12px",
8547
- } }), u$1("span", { style: {
8548
- color: "var(--bw-text-muted)",
8549
- fontFamily: "var(--bw-font-family)",
8550
- }, children: "Verf\u00FCgbar" })] }), u$1("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [u$1("div", { style: {
8551
- backgroundColor: "var(--bw-warning-color)",
8552
- borderRadius: "var(--bw-border-radius-small)",
8553
- width: "12px",
8554
- height: "12px",
8555
- } }), u$1("span", { style: {
8556
- color: "var(--bw-text-muted)",
8557
- fontFamily: "var(--bw-font-family)",
8558
- }, children: "Wenige Pl\u00E4tze" })] }), u$1("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [u$1("div", { style: {
8559
- backgroundColor: "var(--bw-error-color)",
8560
- borderRadius: "var(--bw-border-radius-small)",
8561
- width: "12px",
8562
- height: "12px",
8563
- } }), u$1("span", { style: {
8564
- color: "var(--bw-text-muted)",
8565
- fontFamily: "var(--bw-font-family)",
8566
- }, children: "Ausgebucht" })] })] })] }), u$1("style", { children: `
8567
- .booking-widget-container *,
8568
- .booking-widget-container *::before,
8569
- .booking-widget-container *::after {
8570
- box-sizing: border-box;
8571
- }
8445
+ color: "var(--bw-text-muted)",
8446
+ }, children: ["ab ", formatCurrency(event.deposit)] }))] })] }), u$1("h4", { style: {
8447
+ fontSize: "var(--bw-font-size)",
8448
+ fontWeight: "600",
8449
+ color: "var(--bw-text-color)",
8450
+ lineHeight: "1.25",
8451
+ margin: "0 0 2px 0",
8452
+ display: "flex",
8453
+ alignItems: "center",
8454
+ gap: "8px",
8455
+ }, children: [event.name, u$1("span", { style: {
8456
+ fontSize: "12px",
8457
+ fontWeight: 400,
8458
+ color: "var(--bw-text-muted)",
8459
+ marginLeft: "6px",
8460
+ background: "var(--bw-surface-muted)",
8461
+ borderRadius: "8px",
8462
+ padding: "2px 8px",
8463
+ }, children: [event.durationDays, " Tag", event.durationDays > 1 ? "e" : ""] })] }), event.notes && (u$1("p", { style: {
8464
+ fontSize: "12px",
8465
+ color: "var(--bw-text-muted)",
8466
+ marginTop: "8px",
8467
+ display: "-webkit-box",
8468
+ WebkitBoxOrient: "vertical",
8469
+ WebkitLineClamp: 2,
8470
+ overflow: "hidden",
8471
+ margin: "0",
8472
+ lineHeight: "1.3",
8473
+ }, children: event.notes }))] }, event.id));
8474
+ }) }) }, month))) }) }), u$1("style", { children: `
8572
8475
  @keyframes spin {
8573
8476
  from { transform: rotate(0deg); }
8574
8477
  to { transform: rotate(360deg); }
@@ -8576,6 +8479,18 @@
8576
8479
  ` })] }));
8577
8480
  }
8578
8481
 
8482
+ // Custom minimal SVG icons (Lucide-style)
8483
+ const IconClock = ({ size = 16, color = "#10b981" }) => (u$1("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [u$1("circle", { cx: "12", cy: "12", r: "10" }), u$1("polyline", { points: "12 6 12 12 16 14" })] }));
8484
+ const IconCalendar = ({ size = 16, color = "#3b82f6" }) => (u$1("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [u$1("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }), u$1("line", { x1: "16", y1: "2", x2: "16", y2: "6" }), u$1("line", { x1: "8", y1: "2", x2: "8", y2: "6" }), u$1("line", { x1: "3", y1: "10", x2: "21", y2: "10" })] }));
8485
+ const IconTarget = ({ size = 48 }) => (u$1("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [u$1("circle", { cx: "12", cy: "12", r: "10" }), u$1("circle", { cx: "12", cy: "12", r: "6" }), u$1("circle", { cx: "12", cy: "12", r: "2" })] }));
8486
+ // Wave icon for booking action
8487
+ const IconWave = ({ size = 20, color = "#0ea5e9" }) => (u$1("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [u$1("path", { d: "M2 18c2-2 6-2 8 0s6 2 8 0 6-2 8 0" }), u$1("path", { d: "M2 12c2-2 6-2 8 0s6 2 8 0 6-2 8 0" }), u$1("path", { d: "M2 6c2-2 6-2 8 0s6 2 8 0 6-2 8 0" })] }));
8488
+ // Helper to truncate text to a max length with ellipsis
8489
+ function truncateText(text, maxLength) {
8490
+ if (!text)
8491
+ return "";
8492
+ return text.length > maxLength ? `${text.slice(0, maxLength - 1)}…` : text;
8493
+ }
8579
8494
  function EventTypeSelection({ eventTypes, onEventTypeSelect }) {
8580
8495
  if (eventTypes.length === 0) {
8581
8496
  return (u$1("div", { style: {
@@ -8592,7 +8507,7 @@
8592
8507
  height: "48px",
8593
8508
  color: "var(--bw-text-muted)",
8594
8509
  fontSize: "48px",
8595
- }, children: "\uD83C\uDFAF" }), u$1("h3", { style: {
8510
+ }, children: u$1(IconTarget, { size: 48 }) }), u$1("h3", { style: {
8596
8511
  marginBottom: "8px",
8597
8512
  fontWeight: "600",
8598
8513
  fontSize: "var(--bw-font-size-large)",
@@ -8603,275 +8518,361 @@
8603
8518
  fontFamily: "var(--bw-font-family)",
8604
8519
  }, children: "Derzeit sind keine Veranstaltungen verf\u00FCgbar." })] }) }));
8605
8520
  }
8606
- return (u$1("div", { className: "", children: u$1("div", { style: { padding: "8px", paddingTop: "32px", paddingBottom: "32px" }, children: [u$1("div", { style: { marginBottom: "var(--bw-spacing-large)", padding: "8px" }, children: u$1("div", { style: {
8607
- display: "flex",
8608
- alignItems: "center",
8609
- gap: "12px",
8610
- marginBottom: "var(--bw-spacing)",
8611
- }, children: [u$1("div", { style: { fontSize: "32px" }, children: "\uD83C\uDFAF" }), u$1("div", { children: [u$1("h1", { style: {
8612
- fontSize: "var(--bw-font-size-large)",
8613
- fontWeight: "bold",
8614
- color: "var(--bw-text-color)",
8615
- fontFamily: "var(--bw-font-family)",
8616
- margin: 0,
8617
- }, children: "W\u00E4hle dein Event" }), u$1("p", { style: {
8618
- fontSize: "var(--bw-font-size)",
8619
- color: "var(--bw-text-muted)",
8620
- fontFamily: "var(--bw-font-family)",
8621
- margin: 0,
8622
- }, children: "Entdecke unsere einzigartigen Veranstaltungen und finde das perfekte Erlebnis f\u00FCr dich" })] })] }) }), u$1("div", { style: {
8623
- display: "grid",
8624
- gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))",
8625
- gap: "var(--bw-spacing-large)",
8626
- }, children: eventTypes.map((eventType) => {
8627
- const isAvailable = eventType.hasAvailableInstances;
8628
- const nextDate = eventType.nextAvailableDate
8629
- ? new Date(eventType.nextAvailableDate)
8630
- : null;
8631
- return (u$1("div", { style: {
8632
- position: "relative",
8633
- backgroundColor: "var(--bw-surface-color)",
8634
- border: `1px solid var(--bw-border-color)`,
8635
- backdropFilter: "blur(4px)",
8636
- borderRadius: "var(--bw-border-radius)",
8637
- overflow: "hidden",
8638
- transition: "all 0.3s ease",
8639
- height: "100%",
8640
- cursor: isAvailable ? "pointer" : "not-allowed",
8641
- opacity: isAvailable ? 1 : 0.6,
8642
- filter: isAvailable ? "none" : "grayscale(50%)",
8643
- transform: "scale(1)",
8644
- fontFamily: "var(--bw-font-family)",
8645
- maxWidth: "340px",
8646
- }, onClick: () => isAvailable && onEventTypeSelect(eventType), onMouseEnter: (e) => {
8647
- if (isAvailable) {
8648
- e.currentTarget.style.transform = "scale(1.02)";
8649
- e.currentTarget.style.borderColor = "var(--bw-highlight-color)";
8650
- e.currentTarget.style.boxShadow =
8651
- "0 8px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)";
8652
- }
8653
- }, onMouseLeave: (e) => {
8654
- if (isAvailable) {
8655
- e.currentTarget.style.transform = "scale(1)";
8656
- e.currentTarget.style.borderColor = "var(--bw-border-color)";
8657
- e.currentTarget.style.boxShadow = "none";
8658
- }
8659
- }, children: [u$1("div", { style: { position: "relative", height: "200px", overflow: "hidden" }, children: [eventType.images.length > 0 ? (u$1(k$2, { children: [u$1("img", { src: eventType.images[0], alt: eventType.name, style: {
8660
- width: "100%",
8661
- height: "100%",
8662
- objectFit: "cover",
8663
- transition: "transform 0.5s ease",
8664
- } }), u$1("div", { style: {
8665
- position: "absolute",
8666
- inset: 0,
8667
- background: "linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, transparent 50%, transparent 100%)",
8668
- } })] })) : (u$1("div", { style: {
8669
- width: "100%",
8670
- height: "100%",
8671
- background: `linear-gradient(135deg, var(--bw-highlight-color), var(--bw-highlight-muted))`,
8672
- display: "flex",
8673
- alignItems: "center",
8674
- justifyContent: "center",
8675
- }, children: u$1("div", { style: {
8676
- fontSize: "64px",
8677
- color: "rgba(255, 255, 255, 0.8)",
8678
- }, children: "\uD83C\uDFAF" }) })), u$1("div", { style: { position: "absolute", top: "12px", left: "12px" }, children: u$1("div", { style: {
8679
- padding: "6px 12px",
8680
- borderRadius: "var(--bw-border-radius-small)",
8681
- fontSize: "12px",
8682
- fontWeight: "600",
8683
- backdropFilter: "blur(8px)",
8684
- backgroundColor: "rgba(255, 255, 255, 0.9)",
8685
- color: "var(--bw-text-color)",
8686
- fontFamily: "var(--bw-font-family)",
8687
- boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
8688
- }, children: eventType.category.name }) }), u$1("div", { style: { position: "absolute", top: "12px", right: "12px" }, children: u$1("div", { style: {
8689
- padding: "6px 12px",
8690
- borderRadius: "var(--bw-border-radius-small)",
8691
- fontSize: "12px",
8692
- fontWeight: "600",
8693
- backdropFilter: "blur(8px)",
8694
- backgroundColor: isAvailable
8695
- ? "var(--bw-success-color)"
8696
- : "var(--bw-error-color)",
8697
- color: "white",
8698
- fontFamily: "var(--bw-font-family)",
8699
- boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
8700
- }, children: isAvailable
8701
- ? `${eventType.availableInstancesCount} verfügbar`
8702
- : "Ausgebucht" }) }), u$1("div", { style: { position: "absolute", bottom: "12px", right: "12px" }, children: u$1("div", { style: {
8703
- backgroundColor: "rgba(255, 255, 255, 0.95)",
8704
- backdropFilter: "blur(8px)",
8705
- padding: "8px 12px",
8706
- borderRadius: "var(--bw-border-radius-small)",
8707
- boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
8708
- }, children: u$1("div", { style: {
8709
- color: "var(--bw-text-color)",
8710
- fontWeight: "bold",
8711
- fontSize: "var(--bw-font-size)",
8712
- fontFamily: "var(--bw-font-family)",
8713
- }, children: ["ab ", formatCurrency(eventType.basePrice)] }) }) })] }), u$1("div", { style: { padding: "var(--bw-spacing)" }, children: [u$1("h3", { style: {
8714
- fontSize: "var(--bw-font-size-large)",
8715
- fontWeight: "bold",
8716
- color: "var(--bw-text-color)",
8717
- marginBottom: "8px",
8718
- lineHeight: "1.25",
8719
- display: "-webkit-box",
8720
- WebkitBoxOrient: "vertical",
8721
- WebkitLineClamp: 2,
8722
- overflow: "hidden",
8521
+ return (u$1("div", { style: { padding: "24px" }, children: u$1("div", { style: {
8522
+ display: "flex",
8523
+ flexWrap: "wrap",
8524
+ justifyContent: "center",
8525
+ gap: "32px",
8526
+ }, children: eventTypes.map((eventType) => {
8527
+ const isAvailable = eventType.hasAvailableInstances;
8528
+ return (u$1("div", { style: {
8529
+ position: "relative",
8530
+ backgroundColor: "var(--bw-surface-color)",
8531
+ border: `1px solid var(--bw-border-color)`,
8532
+ borderRadius: "var(--bw-border-radius)",
8533
+ overflow: "hidden",
8534
+ transition: "all 0.3s ease",
8535
+ cursor: isAvailable ? "pointer" : "not-allowed",
8536
+ opacity: isAvailable ? 1 : 0.6,
8537
+ boxShadow: "var(--bw-shadow-md)",
8538
+ fontFamily: "var(--bw-font-family)",
8539
+ maxWidth: "500px",
8540
+ flex: "1 1 350px",
8541
+ display: "flex",
8542
+ flexDirection: "column",
8543
+ }, onClick: () => isAvailable && onEventTypeSelect(eventType), onMouseEnter: (e) => {
8544
+ if (isAvailable) {
8545
+ e.currentTarget.style.transform = "translateY(-2px)";
8546
+ e.currentTarget.style.boxShadow = "var(--bw-shadow-lg)";
8547
+ }
8548
+ }, onMouseLeave: (e) => {
8549
+ if (isAvailable) {
8550
+ e.currentTarget.style.transform = "translateY(0)";
8551
+ e.currentTarget.style.boxShadow = "var(--bw-shadow-md)";
8552
+ }
8553
+ }, children: [u$1("div", { style: { position: "absolute", top: "16px", left: "16px", zIndex: 10 }, children: u$1("div", { style: {
8554
+ padding: "4px 8px",
8555
+ borderRadius: "var(--bw-border-radius-small)",
8556
+ fontSize: "12px",
8557
+ fontWeight: "600",
8558
+ backgroundColor: isAvailable
8559
+ ? "var(--bw-success-color)"
8560
+ : "var(--bw-error-color)",
8561
+ color: "white",
8562
+ fontFamily: "var(--bw-font-family)",
8563
+ }, children: isAvailable ? "freie Plätze" : "Ausgebucht" }) }), u$1("div", { style: { position: "relative", width: "100%", height: "300px" }, children: eventType.images.length > 0 ? (u$1(k$2, { children: u$1("img", { src: eventType.images[0], alt: eventType.name, style: {
8564
+ width: "100%",
8565
+ height: "100%",
8566
+ objectFit: "cover",
8567
+ } }) })) : (u$1("div", { style: {
8568
+ width: "100%",
8569
+ height: "100%",
8570
+ background: `linear-gradient(135deg, var(--bw-highlight-color), var(--bw-highlight-muted))`,
8571
+ display: "flex",
8572
+ alignItems: "center",
8573
+ justifyContent: "center",
8574
+ }, children: u$1("div", { style: {
8575
+ fontSize: "64px",
8576
+ color: "rgba(255, 255, 255, 0.8)",
8577
+ }, children: u$1(IconTarget, { size: 64 }) }) })) }), u$1("div", { style: { padding: "24px" }, children: [u$1("div", { style: {
8578
+ fontSize: "14px",
8579
+ fontWeight: "600",
8580
+ color: "var(--bw-highlight-color)",
8581
+ marginBottom: "8px",
8582
+ fontFamily: "var(--bw-font-family)",
8583
+ }, children: eventType.category.name }), u$1("h2", { style: {
8584
+ fontSize: "24px",
8585
+ fontWeight: "700",
8586
+ color: "var(--bw-text-color)",
8587
+ marginBottom: "12px",
8588
+ lineHeight: "1.3",
8589
+ fontFamily: "var(--bw-font-family)",
8590
+ margin: "0 0 12px 0",
8591
+ }, children: eventType.name }), u$1("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [u$1(IconClock, { size: 16, color: "var(--bw-text-color)" }), u$1("span", { style: {
8723
8592
  fontFamily: "var(--bw-font-family)",
8724
- }, children: eventType.name }), eventType.description && (u$1("p", { style: {
8593
+ fontSize: "14px",
8725
8594
  color: "var(--bw-text-muted)",
8726
- fontSize: "var(--bw-font-size)",
8727
- marginBottom: "16px",
8728
- lineHeight: "1.5",
8729
- display: "-webkit-box",
8730
- WebkitBoxOrient: "vertical",
8731
- WebkitLineClamp: 3,
8732
- overflow: "hidden",
8595
+ }, children: [eventType.durationDays, " Tag", eventType.durationDays > 1 ? "e" : ""] })] }), u$1("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [u$1(IconCalendar, { size: 16, color: "var(--bw-text-color)" }), u$1("span", { style: {
8733
8596
  fontFamily: "var(--bw-font-family)",
8734
- }, children: eventType.description })), u$1("div", { style: {
8735
- display: "grid",
8736
- gridTemplateColumns: "1fr 1fr",
8737
- gap: "12px",
8738
- marginBottom: "16px",
8739
- fontSize: "var(--bw-font-size)",
8740
- }, children: [u$1("div", { style: {
8741
- display: "flex",
8742
- flexDirection: "column",
8743
- alignItems: "center",
8744
- padding: "8px",
8745
- backgroundColor: "rgba(var(--bw-highlight-color-rgb, 59, 130, 246), 0.05)",
8746
- borderRadius: "var(--bw-border-radius-small)",
8747
- border: `1px solid rgba(var(--bw-highlight-color-rgb, 59, 130, 246), 0.1)`,
8748
- }, children: [u$1("div", { style: { fontSize: "16px", marginBottom: "4px" }, children: "\u23F1\uFE0F" }), u$1("div", { style: {
8749
- color: "var(--bw-text-muted)",
8750
- fontSize: "12px",
8751
- fontFamily: "var(--bw-font-family)",
8752
- }, children: "Dauer" }), u$1("div", { style: {
8753
- color: "var(--bw-text-color)",
8754
- fontWeight: "600",
8755
- fontSize: "var(--bw-font-size)",
8756
- fontFamily: "var(--bw-font-family)",
8757
- }, children: [eventType.durationDays, " Tage"] })] }), u$1("div", { style: {
8758
- display: "flex",
8759
- flexDirection: "column",
8760
- alignItems: "center",
8761
- padding: "8px",
8762
- backgroundColor: "rgba(var(--bw-success-color-rgb, 16, 185, 129), 0.05)",
8763
- borderRadius: "var(--bw-border-radius-small)",
8764
- border: `1px solid rgba(var(--bw-success-color-rgb, 16, 185, 129), 0.1)`,
8765
- }, children: [u$1("div", { style: { fontSize: "16px", marginBottom: "4px" }, children: "\uD83D\uDC65" }), u$1("div", { style: {
8766
- color: "var(--bw-text-muted)",
8767
- fontSize: "12px",
8768
- fontFamily: "var(--bw-font-family)",
8769
- }, children: "Max. Teilnehmer" }), u$1("div", { style: {
8770
- color: "var(--bw-text-color)",
8771
- fontWeight: "600",
8772
- fontSize: "var(--bw-font-size)",
8773
- fontFamily: "var(--bw-font-family)",
8774
- }, children: eventType.maxParticipants })] }), nextDate && (u$1("div", { style: {
8775
- gridColumn: "1 / -1",
8776
- display: "flex",
8777
- alignItems: "center",
8778
- justifyContent: "center",
8779
- padding: "8px",
8780
- backgroundColor: "rgba(var(--bw-warning-color-rgb, 245, 158, 11), 0.05)",
8781
- borderRadius: "var(--bw-border-radius-small)",
8782
- border: `1px solid rgba(var(--bw-warning-color-rgb, 245, 158, 11), 0.1)`,
8783
- gap: "8px",
8784
- }, children: [u$1("div", { style: { fontSize: "16px" }, children: "\uD83D\uDCC5" }), u$1("div", { children: [u$1("div", { style: {
8785
- color: "var(--bw-text-muted)",
8786
- fontSize: "12px",
8787
- fontFamily: "var(--bw-font-family)",
8788
- }, children: "N\u00E4chster Termin" }), u$1("div", { style: {
8789
- color: "var(--bw-highlight-color)",
8790
- fontWeight: "600",
8791
- fontSize: "var(--bw-font-size)",
8792
- fontFamily: "var(--bw-font-family)",
8793
- }, children: nextDate.toLocaleDateString("de-DE", {
8794
- day: "2-digit",
8795
- month: "short",
8796
- year: "numeric",
8797
- }) })] })] }))] }), u$1("div", { style: {
8798
- paddingTop: "16px",
8799
- borderTop: `1px solid var(--bw-border-color)`,
8800
- }, children: isAvailable ? (u$1("div", { style: {
8597
+ fontSize: "14px",
8598
+ color: "var(--bw-text-muted)",
8599
+ }, children: eventType.nextAvailableDate
8600
+ ? `Freie Plätze ab ${formatDate(eventType.nextAvailableDate)}`
8601
+ : "Keine Termine frei" })] }), u$1("p", { style: {
8602
+ color: "var(--bw-text-muted)",
8603
+ fontSize: "16px",
8604
+ lineHeight: "1.6",
8605
+ fontFamily: "var(--bw-font-family)",
8606
+ margin: "10px 0 10px 0",
8607
+ display: "-webkit-box",
8608
+ WebkitLineClamp: 5,
8609
+ WebkitBoxOrient: "vertical",
8610
+ overflow: "hidden",
8611
+ textOverflow: "ellipsis",
8612
+ minHeight: "128px",
8613
+ maxHeight: "128px",
8614
+ }, children: eventType.description ? truncateText(eventType.description, 300) : " " }), u$1("div", { style: {
8615
+ display: "flex",
8616
+ justifyContent: "space-between",
8617
+ alignItems: "center",
8618
+ marginTop: "20px",
8619
+ }, children: [u$1("div", { children: u$1("div", { style: {
8620
+ fontSize: "32px",
8621
+ fontWeight: "700",
8622
+ color: "var(--bw-text-color)",
8623
+ fontFamily: "var(--bw-font-family)",
8624
+ }, children: formatCurrency(eventType.basePrice) }) }), isAvailable && (u$1("div", { style: {
8625
+ backgroundColor: "var(--bw-highlight-color)",
8626
+ color: "white",
8627
+ padding: "12px 24px",
8628
+ borderRadius: "var(--bw-border-radius)",
8629
+ fontSize: "16px",
8630
+ fontWeight: "600",
8631
+ fontFamily: "var(--bw-font-family)",
8632
+ display: "flex",
8633
+ alignItems: "center",
8634
+ gap: "8px",
8635
+ border: "none",
8636
+ cursor: "pointer",
8637
+ }, children: [u$1(IconWave, { size: 20, color: "var(--bw-text-color)" }), " Jetzt buchen"] }))] })] }), !isAvailable && (u$1("div", { style: {
8638
+ position: "absolute",
8639
+ inset: 0,
8640
+ backgroundColor: "rgba(0, 0, 0, 0.3)",
8641
+ backdropFilter: "blur(2px)",
8642
+ display: "flex",
8643
+ alignItems: "center",
8644
+ justifyContent: "center",
8645
+ }, children: u$1("div", { style: {
8646
+ backgroundColor: "rgba(255, 255, 255, 0.9)",
8647
+ padding: "12px 24px",
8648
+ borderRadius: "var(--bw-border-radius)",
8649
+ color: "var(--bw-text-color)",
8650
+ fontWeight: "600",
8651
+ fontSize: "16px",
8652
+ fontFamily: "var(--bw-font-family)",
8653
+ boxShadow: "var(--bw-shadow-md)",
8654
+ }, children: "Ausgebucht" }) }))] }, eventType.id));
8655
+ }) }) }));
8656
+ }
8657
+
8658
+ function NextEventsPreview({ events, onEventSelect, onShowAll, showAllButtonText, showAllButton, }) {
8659
+ const [selectedEventInstanceId, setSelectedEventInstanceId] = d(null);
8660
+ const handleEventSelect = (eventInstanceId) => {
8661
+ setSelectedEventInstanceId(eventInstanceId);
8662
+ onEventSelect(eventInstanceId);
8663
+ };
8664
+ if (events.length === 0) {
8665
+ return (u$1("div", { style: {
8666
+ textAlign: "center",
8667
+ padding: "var(--bw-spacing-lg)",
8668
+ color: "var(--bw-text-muted)",
8669
+ fontFamily: "var(--bw-font-family)",
8670
+ }, children: [u$1("div", { style: { fontSize: "48px", marginBottom: "16px" }, children: "\uD83D\uDCC5" }), u$1("h3", { style: { marginBottom: "8px", fontWeight: "600" }, children: "Keine bevorstehenden Termine" }), u$1("p", { style: { margin: "0", fontSize: "14px" }, children: "Aktuell sind keine Termine verf\u00FCgbar." })] }));
8671
+ }
8672
+ return (u$1("div", { style: {
8673
+ maxWidth: "500px",
8674
+ margin: "0 auto",
8675
+ padding: "var(--bw-spacing)",
8676
+ fontFamily: "var(--bw-font-family)",
8677
+ }, children: [u$1("div", { style: {
8678
+ marginBottom: "var(--bw-spacing-lg)",
8679
+ textAlign: "center",
8680
+ }, children: [u$1("h2", { style: {
8681
+ margin: "0 0 8px 0",
8682
+ fontSize: "var(--bw-font-size-large)",
8683
+ fontWeight: "600",
8684
+ color: "var(--bw-text-color)",
8685
+ fontFamily: "var(--bw-font-family)",
8686
+ }, children: "N\u00E4chste verf\u00FCgbare Termine" }), u$1("p", { style: {
8687
+ margin: "0",
8688
+ fontSize: "var(--bw-font-size)",
8689
+ color: "var(--bw-text-muted)",
8690
+ fontFamily: "var(--bw-font-family)",
8691
+ }, children: "W\u00E4hle einen Termin aus oder zeige alle verf\u00FCgbaren Termine an" })] }), u$1("div", { style: {
8692
+ display: "flex",
8693
+ flexDirection: "column",
8694
+ gap: "12px",
8695
+ marginBottom: "var(--bw-spacing-lg)",
8696
+ }, children: events.map((event) => {
8697
+ const availableSpots = event.maxParticipants - event.participantCount;
8698
+ const isFullyBooked = availableSpots === 0;
8699
+ const startDate = new Date(event.startTime);
8700
+ const today = new Date();
8701
+ const isPastEvent = today.toISOString() >= startDate.toISOString();
8702
+ const isFullAvailability = availableSpots / event.maxParticipants >= 0.8;
8703
+ const isHighAvailability = availableSpots / event.maxParticipants >= 0.5;
8704
+ const isMediumAvailability = availableSpots / event.maxParticipants >= 0.3;
8705
+ const isLowAvailability = availableSpots / event.maxParticipants >= 0.15;
8706
+ const getAvailabilityColor = () => {
8707
+ if (isFullAvailability)
8708
+ return "var(--bw-success-color)";
8709
+ if (isHighAvailability)
8710
+ return "var(--bw-warning-color)";
8711
+ if (isMediumAvailability)
8712
+ return "var(--bw-availability-medium-color, #f97316)"; // orange fallback
8713
+ if (isLowAvailability)
8714
+ return "var(--bw-availability-low-color, #8b5cf6)"; // purple fallback
8715
+ return "var(--bw-highlight-color)";
8716
+ };
8717
+ return (u$1("div", { style: {
8718
+ position: "relative",
8719
+ cursor: !isFullyBooked && !isPastEvent && event.bookingOpen ? "pointer" : "not-allowed",
8720
+ border: "1px solid",
8721
+ backgroundColor: "var(--bw-surface-color)",
8722
+ borderRadius: "var(--bw-border-radius)",
8723
+ padding: "8px 10px",
8724
+ transition: "all 0.2s ease",
8725
+ opacity: isFullyBooked || isPastEvent ? 0.3 : 1,
8726
+ filter: isFullyBooked || isPastEvent ? "grayscale(100%)" : "none",
8727
+ borderColor: getAvailabilityColor(),
8728
+ fontFamily: "var(--bw-font-family)",
8729
+ }, onClick: () => {
8730
+ if (!isFullyBooked && !isPastEvent && event.bookingOpen) {
8731
+ handleEventSelect(event.id);
8732
+ }
8733
+ }, onMouseEnter: (e) => {
8734
+ if (!isFullyBooked && !isPastEvent && event.bookingOpen) {
8735
+ e.currentTarget.style.transform = "scale(1.02)";
8736
+ e.currentTarget.style.backgroundColor =
8737
+ "var(--bw-surface-hover, rgba(0, 0, 0, 0.05))";
8738
+ }
8739
+ }, onMouseLeave: (e) => {
8740
+ if (!isFullyBooked && !isPastEvent && event.bookingOpen) {
8741
+ e.currentTarget.style.transform = "scale(1)";
8742
+ e.currentTarget.style.backgroundColor = "var(--bw-surface-color)";
8743
+ }
8744
+ }, children: [selectedEventInstanceId === event.id && (u$1("div", { style: {
8745
+ position: "absolute",
8746
+ top: 0,
8747
+ left: 0,
8748
+ width: "100%",
8749
+ height: "100%",
8750
+ backgroundColor: "var(--bw-overlay-color, rgba(15, 23, 42, 0.8))",
8751
+ borderRadius: "var(--bw-border-radius)",
8752
+ display: "flex",
8753
+ alignItems: "center",
8754
+ justifyContent: "center",
8755
+ }, children: u$1("div", { style: {
8756
+ width: "32px",
8757
+ height: "32px",
8758
+ color: "var(--bw-highlight-color-muted, rgba(59, 130, 246, 0.8))",
8759
+ animation: "spin 1s linear infinite",
8760
+ fontSize: "32px",
8761
+ }, children: "\u27F3" }) })), u$1("div", { style: {
8762
+ display: "flex",
8763
+ justifyContent: "space-between",
8764
+ width: "100%",
8765
+ alignItems: "start",
8766
+ gap: "12px",
8767
+ marginBottom: "4px",
8768
+ }, children: [u$1("div", { style: { display: "flex", alignItems: "start", gap: "12px" }, children: [u$1("div", { style: {
8769
+ fontSize: "var(--bw-font-size)",
8770
+ transition: "all 0.2s ease",
8771
+ borderRadius: "var(--bw-border-radius-small)",
8772
+ borderTop: `4px solid ${getAvailabilityColor()}`,
8773
+ border: "1px solid",
8774
+ width: "40px",
8775
+ height: "40px",
8801
8776
  display: "flex",
8802
8777
  alignItems: "center",
8803
8778
  justifyContent: "center",
8804
- gap: "8px",
8805
- color: "var(--bw-highlight-color)",
8806
- fontWeight: "600",
8779
+ fontWeight: "bold",
8780
+ color: "var(--bw-text-color)",
8781
+ borderColor: getAvailabilityColor(),
8782
+ backgroundColor: "var(--bw-background-color)",
8783
+ }, children: startDate.getDate() }), u$1("div", { style: {
8807
8784
  fontSize: "var(--bw-font-size)",
8808
- fontFamily: "var(--bw-font-family)",
8809
- }, children: [u$1("span", { children: "Termine anzeigen" }), u$1("div", { style: { fontSize: "16px" }, children: "\u2192" })] })) : (u$1("div", { style: {
8785
+ color: "var(--bw-text-color)",
8810
8786
  display: "flex",
8811
- alignItems: "center",
8812
- justifyContent: "center",
8813
- gap: "8px",
8787
+ flexDirection: "column",
8788
+ alignItems: "start",
8789
+ justifyContent: "start",
8790
+ lineHeight: "1.2",
8791
+ }, children: [u$1("span", { style: {
8792
+ fontWeight: "600",
8793
+ marginBottom: "2px",
8794
+ }, children: formatWeekday(event.startTime) }), u$1("span", { style: {
8795
+ color: "var(--bw-text-muted)",
8796
+ fontSize: "14px",
8797
+ }, children: formatTime(event.startTime) })] })] }), u$1("div", { style: {
8798
+ textAlign: "right",
8799
+ display: "flex",
8800
+ flexDirection: "column",
8801
+ alignItems: "end",
8802
+ }, children: [u$1("div", { style: {
8803
+ color: "var(--bw-highlight-color)",
8804
+ fontSize: "var(--bw-font-size-large)",
8805
+ fontWeight: "bold",
8806
+ }, children: event.price !== null ? formatCurrency(event.price) : "Preis auf Anfrage" }), event.deposit && event.deposit > 0 && (u$1("div", { style: {
8807
+ fontSize: "12px",
8814
8808
  color: "var(--bw-text-muted)",
8815
- fontWeight: "500",
8816
- fontSize: "var(--bw-font-size)",
8817
- fontFamily: "var(--bw-font-family)",
8818
- }, children: [u$1("span", { children: "Nicht verf\u00FCgbar" }), u$1("div", { style: { fontSize: "16px" }, children: "\u2715" })] })) })] }), !isAvailable && (u$1("div", { style: {
8819
- position: "absolute",
8820
- inset: 0,
8821
- backgroundColor: "rgba(0, 0, 0, 0.3)",
8822
- backdropFilter: "blur(2px)",
8823
- display: "flex",
8824
- alignItems: "center",
8825
- justifyContent: "center",
8826
- }, children: u$1("div", { style: {
8827
- backgroundColor: "rgba(255, 255, 255, 0.9)",
8828
- padding: "12px 24px",
8829
- borderRadius: "var(--bw-border-radius)",
8830
- color: "var(--bw-text-color)",
8831
- fontWeight: "600",
8832
- fontSize: "var(--bw-font-size)",
8833
- fontFamily: "var(--bw-font-family)",
8834
- boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
8835
- }, children: "Ausgebucht" }) }))] }, eventType.id));
8836
- }) }), u$1("div", { style: {
8837
- display: "flex",
8838
- justifyContent: "center",
8839
- gap: "var(--bw-spacing-large)",
8840
- marginTop: "32px",
8809
+ }, children: ["ab ", formatCurrency(event.deposit)] }))] })] }), u$1("h4", { style: {
8810
+ fontSize: "var(--bw-font-size)",
8811
+ fontWeight: "600",
8812
+ color: "var(--bw-text-color)",
8813
+ lineHeight: "1.25",
8814
+ margin: "0 0 2px 0",
8815
+ display: "flex",
8816
+ alignItems: "center",
8817
+ gap: "8px",
8818
+ }, children: [event.name, u$1("span", { style: {
8819
+ fontSize: "12px",
8820
+ fontWeight: 400,
8821
+ color: "var(--bw-text-muted)",
8822
+ marginLeft: "6px",
8823
+ background: "var(--bw-surface-muted)",
8824
+ borderRadius: "8px",
8825
+ padding: "2px 8px",
8826
+ }, children: [event.durationDays, " Tag", event.durationDays > 1 ? "e" : ""] })] }), event.notes && (u$1("p", { style: {
8827
+ fontSize: "12px",
8828
+ color: "var(--bw-text-muted)",
8829
+ marginTop: "8px",
8830
+ display: "-webkit-box",
8831
+ WebkitBoxOrient: "vertical",
8832
+ WebkitLineClamp: 2,
8833
+ overflow: "hidden",
8834
+ margin: "0",
8835
+ lineHeight: "1.3",
8836
+ }, children: event.notes }))] }, event.id));
8837
+ }) }), showAllButton && (u$1("div", { style: { textAlign: "center" }, children: u$1("button", { type: "button", style: {
8838
+ backgroundColor: "var(--bw-surface-color)",
8839
+ color: "var(--bw-highlight-color)",
8840
+ border: "1px solid var(--bw-highlight-color)",
8841
+ padding: "12px 24px",
8842
+ borderRadius: "var(--bw-border-radius)",
8841
8843
  fontSize: "var(--bw-font-size)",
8842
- }, children: [u$1("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [u$1("div", { style: {
8843
- backgroundColor: "var(--bw-success-color)",
8844
- borderRadius: "50%",
8845
- width: "12px",
8846
- height: "12px",
8847
- } }), u$1("span", { style: {
8848
- color: "var(--bw-text-muted)",
8849
- fontFamily: "var(--bw-font-family)",
8850
- }, children: "Verf\u00FCgbar" })] }), u$1("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [u$1("div", { style: {
8851
- backgroundColor: "var(--bw-error-color)",
8852
- borderRadius: "50%",
8853
- width: "12px",
8854
- height: "12px",
8855
- } }), u$1("span", { style: {
8856
- color: "var(--bw-text-muted)",
8857
- fontFamily: "var(--bw-font-family)",
8858
- }, children: "Ausgebucht" })] })] })] }) }));
8844
+ fontWeight: "500",
8845
+ fontFamily: "var(--bw-font-family)",
8846
+ cursor: "pointer",
8847
+ transition: "all 0.2s ease",
8848
+ }, onClick: onShowAll, onMouseEnter: (e) => {
8849
+ e.currentTarget.style.backgroundColor = "var(--bw-highlight-color)";
8850
+ e.currentTarget.style.color = "white";
8851
+ }, onMouseLeave: (e) => {
8852
+ e.currentTarget.style.backgroundColor = "var(--bw-surface-color)";
8853
+ e.currentTarget.style.color = "var(--bw-highlight-color)";
8854
+ }, children: showAllButtonText }) })), u$1("style", { children: `
8855
+ @keyframes spin {
8856
+ from { transform: rotate(0deg); }
8857
+ to { transform: rotate(360deg); }
8858
+ }
8859
+ ` })] }));
8859
8860
  }
8860
8861
 
8861
8862
  // Predefined themes (modern, accessibility-tested)
8862
8863
  const themes = {
8863
8864
  // --- Light Themes ---
8864
8865
  "light-fresh": {
8865
- highlight: "#10b981", // Emerald 500
8866
- background: "#f0fdf4", // Green 50
8867
- surface: "#ffffff", // White
8868
- text: "#064e3b", // Green 950
8869
- border: "#dcfce7", // Green 100
8870
- success: "#22c55e", // Green 500
8871
- warning: "#f59e0b", // Amber 500
8872
- error: "#ef4444", // Red 500
8873
- borderRadius: "8px",
8874
- fontFamily: "Inter, system-ui, sans-serif",
8866
+ highlight: "#06b6d4", // Turquoise 500
8867
+ background: "#e0f2fe", // Light Blue 100
8868
+ surface: "#f0fdff", // Very light turquoise/blue
8869
+ text: "#0e7490", // Turquoise 800
8870
+ border: "#bae6fd", // Blue 200
8871
+ success: "#38bdf8", // Blue 400
8872
+ warning: "#fbbf24", // Amber 400
8873
+ error: "#f43f5e", // Rose 500
8874
+ borderRadius: "18px", // Very rounded corners
8875
+ fontFamily: "'Inter', system-ui, sans-serif",
8875
8876
  },
8876
8877
  "light-elegant": {
8877
8878
  highlight: "#8b5cf6", // Violet 500
@@ -9172,12 +9173,28 @@
9172
9173
  function UniversalBookingWidget({ config: baseConfig }) {
9173
9174
  // Apply URL parameter inference
9174
9175
  const config = inferConfigFromUrl(baseConfig);
9176
+ // Determine view mode and settings
9177
+ const viewMode = config.viewMode || (config.eventInstanceId ? "button" : "cards");
9178
+ const nextEventsSettings = {
9179
+ count: 3,
9180
+ showAllButton: true,
9181
+ showAllButtonText: "Alle Events anzeigen",
9182
+ ...config.nextEventsSettings,
9183
+ };
9184
+ // Detect single event type mode and direct instance mode
9185
+ const isSingleEventTypeMode = !!config.eventTypeId && !config.categoryId && !config.eventTypeIds;
9186
+ const isDirectInstanceMode = !!config.eventInstanceId;
9175
9187
  // Selection flow state
9176
9188
  const [currentStep, setCurrentStep] = d("eventTypes");
9177
9189
  const [eventTypes, setEventTypes] = d([]);
9178
9190
  const [selectedEventType, setSelectedEventType] = d(null);
9179
9191
  const [eventInstances, setEventInstances] = d([]);
9180
9192
  const [selectedEventInstance, setSelectedEventInstance] = d(null);
9193
+ // State for upcoming events (next-events view mode)
9194
+ const [upcomingEvents, setUpcomingEvents] = d([]);
9195
+ const [showingPreview, setShowingPreview] = d(true);
9196
+ // New: sidebar open state for single event type mode
9197
+ const [sidebarOpen, setSidebarOpen] = d(false);
9181
9198
  // Booking flow state
9182
9199
  const [eventDetails, setEventDetails] = d(null);
9183
9200
  const [stripePromise, setStripePromise] = d(null);
@@ -9191,13 +9208,23 @@
9191
9208
  try {
9192
9209
  setIsLoading(true);
9193
9210
  // Direct instance selection (old behavior)
9194
- if (config.eventInstanceId) {
9211
+ if (isDirectInstanceMode) {
9195
9212
  setCurrentStep("booking");
9196
9213
  await loadEventDetails(config.eventInstanceId);
9197
9214
  return;
9198
9215
  }
9199
- // Event type selection flow
9200
- if (config.categoryId || config.eventTypeIds || config.eventTypeId) {
9216
+ // Next events view mode: load upcoming events
9217
+ if (viewMode === "next-events") {
9218
+ await loadUpcomingEvents();
9219
+ return;
9220
+ }
9221
+ // Single event type mode: load event type and instances, but don't open sidebar yet
9222
+ if (isSingleEventTypeMode) {
9223
+ await loadEventTypes();
9224
+ return;
9225
+ }
9226
+ // Event type selection flow (cards mode)
9227
+ if (config.categoryId || config.eventTypeIds) {
9201
9228
  setCurrentStep("eventTypes");
9202
9229
  await loadEventTypes();
9203
9230
  return;
@@ -9214,6 +9241,7 @@
9214
9241
  }
9215
9242
  };
9216
9243
  initializeWidget();
9244
+ // eslint-disable-next-line react-hooks/exhaustive-deps
9217
9245
  }, [config]);
9218
9246
  const loadEventTypes = async () => {
9219
9247
  const requestBody = {
@@ -9236,8 +9264,13 @@
9236
9264
  const data = await response.json();
9237
9265
  if (response.ok) {
9238
9266
  setEventTypes(data.eventTypes);
9239
- // If only one event type, skip to instances
9240
- if (data.eventTypes.length === 1) {
9267
+ // Single event type mode: preselect the type and load instances, but don't open sidebar yet
9268
+ if (isSingleEventTypeMode && data.eventTypes.length === 1) {
9269
+ setSelectedEventType(data.eventTypes[0]);
9270
+ await loadEventInstances(data.eventTypes[0].id);
9271
+ }
9272
+ // If only one event type (multi mode), skip to instances
9273
+ if (!isSingleEventTypeMode && data.eventTypes.length === 1) {
9241
9274
  setSelectedEventType(data.eventTypes[0]);
9242
9275
  setCurrentStep("eventInstances");
9243
9276
  await loadEventInstances(data.eventTypes[0].id);
@@ -9247,6 +9280,34 @@
9247
9280
  setError(data.error || "Fehler beim Laden der Veranstaltungstypen");
9248
9281
  }
9249
9282
  };
9283
+ const loadUpcomingEvents = async () => {
9284
+ const requestBody = {
9285
+ organizationId: config.organizationId,
9286
+ limit: nextEventsSettings.count,
9287
+ };
9288
+ // Add event selection filters
9289
+ if (config.categoryId) {
9290
+ requestBody.categoryId = config.categoryId;
9291
+ }
9292
+ else if (config.eventTypeIds) {
9293
+ requestBody.eventTypeIds = config.eventTypeIds;
9294
+ }
9295
+ else if (config.eventTypeId) {
9296
+ requestBody.eventTypeId = config.eventTypeId;
9297
+ }
9298
+ const response = await fetch(getApiUrl(config.apiBaseUrl, "/booking/upcoming-events"), {
9299
+ method: "POST",
9300
+ headers: createApiHeaders(),
9301
+ body: JSON.stringify(requestBody),
9302
+ });
9303
+ const data = await response.json();
9304
+ if (response.ok) {
9305
+ setUpcomingEvents(data.upcomingEvents || []);
9306
+ }
9307
+ else {
9308
+ setError(data.error || "Fehler beim Laden der bevorstehenden Termine");
9309
+ }
9310
+ };
9250
9311
  const loadEventInstances = async (eventTypeId) => {
9251
9312
  const response = await fetch(getApiUrl(config.apiBaseUrl, "/booking/event-instances"), {
9252
9313
  method: "POST",
@@ -9281,29 +9342,44 @@
9281
9342
  }
9282
9343
  };
9283
9344
  const loadEventDetails = async (eventInstanceId) => {
9284
- const response = await fetch(getApiUrl(config.apiBaseUrl, "/booking/event-details"), {
9285
- method: "POST",
9286
- headers: createApiHeaders(),
9287
- body: JSON.stringify(createRequestBody(config, {
9288
- eventInstanceId,
9289
- })),
9290
- });
9291
- const data = await response.json();
9292
- if (response.ok) {
9293
- setEventDetails(data.eventDetails);
9294
- // Initialize Stripe if not already done
9295
- if (!stripePromise && data.stripePublishableKey) {
9296
- const stripeOptions = {
9297
- locale: config.locale || "de",
9298
- };
9299
- if (data.connectedAccountId) {
9300
- stripeOptions.stripeAccount = data.connectedAccountId;
9345
+ try {
9346
+ const requestBody = createRequestBody(config, {
9347
+ eventInstanceId: Number(eventInstanceId), // Ensure it's a number
9348
+ });
9349
+ console.log("Loading event details with request:", requestBody); // Debug log
9350
+ const response = await fetch(getApiUrl(config.apiBaseUrl, "/booking/event-details"), {
9351
+ method: "POST",
9352
+ headers: createApiHeaders(config),
9353
+ body: JSON.stringify(requestBody),
9354
+ });
9355
+ const data = await response.json();
9356
+ console.log("Event details response:", { status: response.status, data }); // Debug log
9357
+ if (response.ok) {
9358
+ setEventDetails(data.eventDetails);
9359
+ // Initialize Stripe if not already done
9360
+ if (!stripePromise && data.stripePublishableKey) {
9361
+ const stripeOptions = {
9362
+ locale: config.locale || "de",
9363
+ };
9364
+ if (data.connectedAccountId) {
9365
+ stripeOptions.stripeAccount = data.connectedAccountId;
9366
+ }
9367
+ setStripePromise(loadStripe(data.stripePublishableKey, stripeOptions));
9301
9368
  }
9302
- setStripePromise(loadStripe(data.stripePublishableKey, stripeOptions));
9369
+ }
9370
+ else {
9371
+ const errorMessage = data.error || "Fehler beim Laden der Veranstaltungsdetails";
9372
+ console.error("Event details API error:", {
9373
+ status: response.status,
9374
+ error: errorMessage,
9375
+ details: data.details,
9376
+ });
9377
+ setError(errorMessage);
9303
9378
  }
9304
9379
  }
9305
- else {
9306
- setError(data.error || "Fehler beim Laden der Veranstaltungsdetails");
9380
+ catch (err) {
9381
+ console.error("Event details fetch error:", err);
9382
+ setError("Fehler beim Laden der Veranstaltungsdetails");
9307
9383
  }
9308
9384
  };
9309
9385
  // Create payment intent when participants or total changes
@@ -9391,6 +9467,63 @@
9391
9467
  setError(errorMessage);
9392
9468
  config.onError?.(errorMessage);
9393
9469
  };
9470
+ const handleUpcomingEventSelect = async (eventInstanceId) => {
9471
+ // Find the corresponding upcoming event to create a basic EventInstance
9472
+ const upcomingEvent = upcomingEvents.find((event) => event.id === eventInstanceId);
9473
+ if (upcomingEvent) {
9474
+ // Create a basic EventInstance object for consistency
9475
+ const eventInstance = {
9476
+ id: upcomingEvent.id,
9477
+ name: upcomingEvent.name,
9478
+ startTime: upcomingEvent.startTime,
9479
+ endTime: upcomingEvent.endTime,
9480
+ price: upcomingEvent.price || 0,
9481
+ maxParticipants: upcomingEvent.maxParticipants,
9482
+ participantCount: upcomingEvent.participantCount,
9483
+ availableSpots: upcomingEvent.availableSpots,
9484
+ durationDays: upcomingEvent.durationDays,
9485
+ durationPerDay: upcomingEvent.durationPerDay,
9486
+ deposit: upcomingEvent.deposit,
9487
+ notes: upcomingEvent.notes,
9488
+ bookingOpen: upcomingEvent.bookingOpen,
9489
+ };
9490
+ setSelectedEventInstance(eventInstance);
9491
+ }
9492
+ setCurrentStep("booking");
9493
+ setIsLoading(true);
9494
+ setError(null);
9495
+ try {
9496
+ await loadEventDetails(eventInstanceId);
9497
+ }
9498
+ catch (err) {
9499
+ setError("Fehler beim Laden der Veranstaltungsdetails");
9500
+ setCurrentStep("eventTypes");
9501
+ setShowingPreview(true);
9502
+ }
9503
+ finally {
9504
+ setIsLoading(false);
9505
+ }
9506
+ };
9507
+ const handleShowAllEvents = async () => {
9508
+ setIsLoading(true);
9509
+ try {
9510
+ // In next-events mode, we should show the event instance selection for the single event type
9511
+ if (isSingleEventTypeMode && selectedEventType) {
9512
+ await loadEventInstances(selectedEventType.id);
9513
+ setCurrentStep("eventInstances");
9514
+ setShowingPreview(false);
9515
+ }
9516
+ else {
9517
+ // Fallback to event types view
9518
+ await loadEventTypes();
9519
+ setCurrentStep("eventTypes");
9520
+ setShowingPreview(false);
9521
+ }
9522
+ }
9523
+ finally {
9524
+ setIsLoading(false);
9525
+ }
9526
+ };
9394
9527
  // Loading state
9395
9528
  if (isLoading) {
9396
9529
  return (u$1(StyleProvider, { config: config, children: u$1("div", { className: "max-w-2xl mx-auto p-6", children: u$1("div", { className: "animate-pulse space-y-4", children: [u$1("div", { style: {
@@ -9445,36 +9578,106 @@
9445
9578
  fontFamily: "var(--bw-font-family)",
9446
9579
  }, children: "Deine Buchung wurde erfolgreich abgeschlossen. Du erh\u00E4ltst eine Best\u00E4tigungs-E-Mail in K\u00FCrze." })] }) }) }));
9447
9580
  }
9448
- // Event Type Selection Step
9449
- if (currentStep === "eventTypes") {
9450
- return (u$1(StyleProvider, { config: config, children: u$1(EventTypeSelection, { eventTypes: eventTypes, onEventTypeSelect: handleEventTypeSelect }) }));
9451
- }
9452
- // Event Instance Selection Step
9453
- if (currentStep === "eventInstances") {
9454
- return (u$1(StyleProvider, { config: config, children: u$1(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: handleBackToEventTypes }) }));
9581
+ // Main view based on view mode
9582
+ if (viewMode === "next-events" && showingPreview) {
9583
+ // Next events preview mode
9584
+ return (u$1(StyleProvider, { config: config, children: [u$1(NextEventsPreview, { events: upcomingEvents, onEventSelect: handleUpcomingEventSelect, onShowAll: handleShowAllEvents, showAllButtonText: nextEventsSettings.showAllButtonText, showAllButton: nextEventsSettings.showAllButton }), eventDetails && (u$1(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, clientSecret: clientSecret, onSuccess: handleBookingSuccess, onError: handleBookingError, onBackToEventInstances: () => {
9585
+ setCurrentStep("eventTypes");
9586
+ setShowingPreview(true);
9587
+ setEventDetails(null);
9588
+ }, onBackToEventTypes: () => {
9589
+ setCurrentStep("eventTypes");
9590
+ setShowingPreview(true);
9591
+ setEventDetails(null);
9592
+ }, selectedEventType: selectedEventType, selectedEventInstance: selectedEventInstance, isOpen: currentStep === "booking", onClose: () => {
9593
+ setCurrentStep("eventTypes");
9594
+ setShowingPreview(true);
9595
+ setEventDetails(null);
9596
+ } }))] }));
9597
+ }
9598
+ if (viewMode === "next-events" && !showingPreview && currentStep === "eventInstances") {
9599
+ // Show all events for the single event type
9600
+ return (u$1(StyleProvider, { config: config, children: u$1(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => {
9601
+ setShowingPreview(true);
9602
+ setCurrentStep("eventTypes");
9603
+ }, isOpen: true, onClose: () => {
9604
+ setShowingPreview(true);
9605
+ setCurrentStep("eventTypes");
9606
+ } }) }));
9455
9607
  }
9456
- // Booking Step
9457
- if (currentStep === "booking") {
9458
- if (!eventDetails) {
9459
- return (u$1(StyleProvider, { config: config, children: u$1("div", { className: "max-w-2xl mx-auto p-6", children: u$1("div", { style: {
9460
- backgroundColor: "var(--bw-warning-color)",
9461
- borderColor: "var(--bw-warning-color)",
9608
+ if (viewMode === "button" && (isSingleEventTypeMode || isDirectInstanceMode)) {
9609
+ // Button mode - show button that opens sidebar/booking directly
9610
+ if (isDirectInstanceMode) {
9611
+ // Direct instance mode: button opens booking form directly
9612
+ return (u$1(StyleProvider, { config: config, children: u$1("div", { style: {
9613
+ display: "flex",
9614
+ justifyContent: "center",
9615
+ alignItems: "center",
9616
+ minHeight: "120px",
9617
+ }, children: [u$1("button", { type: "button", style: {
9618
+ backgroundColor: "var(--bw-highlight-color)",
9619
+ color: "white",
9620
+ padding: "16px 32px",
9621
+ border: "none",
9622
+ borderRadius: "var(--bw-border-radius)",
9623
+ fontSize: "18px",
9624
+ fontWeight: 600,
9625
+ fontFamily: "var(--bw-font-family)",
9626
+ boxShadow: "var(--bw-shadow-md)",
9627
+ cursor: "pointer",
9628
+ }, onClick: () => setCurrentStep("booking"), children: config.buttonText || "Jetzt buchen" }), eventDetails && (u$1(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, clientSecret: clientSecret, onSuccess: handleBookingSuccess, onError: handleBookingError, onBackToEventInstances: () => setCurrentStep("eventTypes"), onBackToEventTypes: () => setCurrentStep("eventTypes"), selectedEventType: selectedEventType, selectedEventInstance: selectedEventInstance, isOpen: currentStep === "booking", onClose: () => setCurrentStep("eventTypes") }))] }) }));
9629
+ }
9630
+ // Single event type mode: button opens instance selection
9631
+ return (u$1(StyleProvider, { config: config, children: u$1("div", { style: {
9632
+ display: "flex",
9633
+ justifyContent: "center",
9634
+ alignItems: "center",
9635
+ minHeight: "120px",
9636
+ }, children: [u$1("button", { type: "button", style: {
9637
+ backgroundColor: "var(--bw-highlight-color)",
9638
+ color: "white",
9639
+ padding: "16px 32px",
9640
+ border: "none",
9462
9641
  borderRadius: "var(--bw-border-radius)",
9463
- border: "1px solid",
9464
- padding: "var(--bw-spacing)",
9465
- }, children: [u$1("h2", { style: {
9466
- color: "var(--bw-text-color)",
9467
- fontWeight: "600",
9468
- fontFamily: "var(--bw-font-family)",
9469
- }, children: "Veranstaltung nicht gefunden" }), u$1("p", { style: {
9470
- color: "var(--bw-text-muted)",
9471
- fontFamily: "var(--bw-font-family)",
9472
- }, children: "Die angeforderte Veranstaltung konnte nicht geladen werden." })] }) }) }));
9642
+ fontSize: "18px",
9643
+ fontWeight: 600,
9644
+ fontFamily: "var(--bw-font-family)",
9645
+ boxShadow: "var(--bw-shadow-md)",
9646
+ cursor: "pointer",
9647
+ }, onClick: () => setSidebarOpen(true), children: config.buttonText || "Jetzt Termin auswählen" }), u$1(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => setSidebarOpen(false), isOpen: sidebarOpen, onClose: () => setSidebarOpen(false) }), eventDetails && (u$1(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, clientSecret: clientSecret, onSuccess: handleBookingSuccess, onError: handleBookingError, onBackToEventInstances: () => setCurrentStep("eventInstances"), onBackToEventTypes: () => setSidebarOpen(false), selectedEventType: selectedEventType, selectedEventInstance: selectedEventInstance, isOpen: currentStep === "booking", onClose: () => setCurrentStep("eventInstances") }))] }) }));
9648
+ }
9649
+ // Cards mode (default) - show event type selection
9650
+ const cardsView = (u$1(EventTypeSelection, { eventTypes: eventTypes, onEventTypeSelect: handleEventTypeSelect }));
9651
+ // Determine the correct back handlers based on view mode
9652
+ const getBackHandlers = () => {
9653
+ if (viewMode === "next-events") {
9654
+ return {
9655
+ onBackToEventInstances: () => {
9656
+ setCurrentStep("eventInstances");
9657
+ setShowingPreview(false);
9658
+ setEventDetails(null);
9659
+ },
9660
+ onBackToEventTypes: () => {
9661
+ setShowingPreview(true);
9662
+ setCurrentStep("eventTypes");
9663
+ setEventDetails(null);
9664
+ },
9665
+ onClose: () => {
9666
+ setCurrentStep("eventInstances");
9667
+ setShowingPreview(false);
9668
+ setEventDetails(null);
9669
+ },
9670
+ };
9473
9671
  }
9474
- return (u$1(StyleProvider, { config: config, children: u$1(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, clientSecret: clientSecret, onSuccess: handleBookingSuccess, onError: handleBookingError, onBackToEventInstances: handleBackToEventInstances, onBackToEventTypes: handleBackToEventTypes, selectedEventType: selectedEventType, selectedEventInstance: selectedEventInstance }) }));
9475
- }
9476
- // Fallback (should not reach here)
9477
- return (u$1("div", { className: "max-w-2xl mx-auto p-6", children: u$1("div", { className: "bg-yellow-50 border border-yellow-200 rounded-lg p-4", children: [u$1("h2", { className: "text-yellow-800 font-semibold", children: "Unbekannter Zustand" }), u$1("p", { className: "text-yellow-600", children: "Das Widget befindet sich in einem unbekannten Zustand." })] }) }));
9672
+ // Default handlers for cards and button modes
9673
+ return {
9674
+ onBackToEventInstances: handleBackToEventInstances,
9675
+ onBackToEventTypes: handleBackToEventTypes,
9676
+ onClose: handleBackToEventInstances,
9677
+ };
9678
+ };
9679
+ const backHandlers = getBackHandlers();
9680
+ return (u$1(StyleProvider, { config: config, children: [cardsView, u$1(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: handleBackToEventTypes, isOpen: currentStep === "eventInstances", onClose: handleBackToEventTypes }), eventDetails && (u$1(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, clientSecret: clientSecret, onSuccess: handleBookingSuccess, onError: handleBookingError, onBackToEventInstances: backHandlers.onBackToEventInstances, onBackToEventTypes: backHandlers.onBackToEventTypes, selectedEventType: selectedEventType, selectedEventInstance: selectedEventInstance, isOpen: currentStep === "booking", onClose: backHandlers.onClose }))] }));
9478
9681
  }
9479
9682
 
9480
9683
  // Export init function for vanilla JS usage with Preact