`; const el = { pricingView: root.querySelector('[data-view="pricing"]'), checkoutView: root.querySelector('[data-view="checkout"]'), pricingGrid: root.querySelector('[data-el="pricingGrid"]'), stepper: root.querySelector('[data-el="stepper"]'), main: root.querySelector('[data-el="main"]'), side: root.querySelector('[data-el="side"]'), toast: root.querySelector('[data-el="toast"]'), toastTitle: root.querySelector('[data-el="toastTitle"]'), toastText: root.querySelector('[data-el="toastText"]'), }; const checkSvg = `✓`; let toastTimer = null; function toast(title, text) { el.toastTitle.textContent = title; el.toastText.textContent = text; el.toast.classList.add("is-show"); clearTimeout(toastTimer); toastTimer = setTimeout(() => el.toast.classList.remove("is-show"), 3200); } function setView(v) { state.view = v; if (v === "pricing") { el.pricingView.style.display = "block"; el.checkoutView.classList.remove("is-open"); } else { el.pricingView.style.display = "none"; el.checkoutView.classList.add("is-open"); } window.scrollTo(0, 0); } function parseIban(iban) { return String(iban || "").toUpperCase().replace(/\s/g, ""); } function isValidIban(iban) { const clean = parseIban(iban); return /^[A-Z]{2}\d{20}$/.test(clean); } function durationToNumber(durationStr) { const s = String(durationStr || "").trim(); if (s.startsWith("23")) return 23; if (s.startsWith("12")) return 12; if (s.startsWith("1")) return 1; return ""; } function formatTierName(tierStr) { const s = String(tierStr || "").toLowerCase(); if (s.includes("black")) return "Black Label"; if (s.includes("red")) return "Red Label"; return String(tierStr || "") .toLowerCase() .split(" ") .filter(Boolean) .map(w => w.charAt(0).toUpperCase() + w.slice(1)) .join(" "); } function normalizePhoneDE(raw) { let p = String(raw || "").trim().replace(/\s+/g, ""); if (!p) return ""; if (p.startsWith("00")) p = "+" + p.slice(2); if (p.startsWith("+")) return p; if (p.startsWith("0")) return "+49" + p.slice(1); if (p.startsWith("49")) return "+" + p; return p; } function updateStep3UI() { if (state.view !== "checkout" || state.checkout.step !== 3) return; const f = state.form; const ibanOk = isValidIban(f.iban); const holderOk = !!String(f.kontoinhaber || "").trim(); const canSubmit = !!f.consentSepa && !!f.consentAgb && ibanOk && holderOk; const err = el.main.querySelector('[data-el="ibanError"]'); if (err) err.style.display = (f.iban && !ibanOk) ? "block" : "none"; const submitBtn = el.main.querySelector('[data-el="submitBtn"]'); if (submitBtn) submitBtn.disabled = !canSubmit; } function renderPricing() { el.pricingGrid.innerHTML = plans.map(p => { const dur = state.selectedDuration[p.tier]; const price = (p.prices.find(x => x.duration === dur) || p.prices[0]).price; const pills = p.prices.map(x => ` `).join(""); return `

${p.highlight ? `

${p.tier}

${p.description}

${p.tag ? `${p.tag}` : ``}

Laufzeit wählen

${pills}

${price}/ Monat

${p.features.map(f => `

${checkSvg}

${f}

`).join("")}

Vertragsdetails*

${p.contractDetails}

`; }).join(""); } function renderStepper() { const s = state.checkout.step; const dot = (n) => `

${s > n ? checkSvg : n}

`; const line = (n) => `

`; el.stepper.innerHTML = `

${dot(1)}${line(1)}${dot(2)}${line(2)}${dot(3)}

`; } function renderSide() { const { tier, duration, price } = state.checkout; el.side.innerHTML = `

Zusammenfassung

${tier}

${price} / Monat

Laufzeit

${duration}

Aktivierungsgebühr

${START_FEE}

einmalig

${state.checkout.duration !== "1 Monat" ? `

${SERVICE_FEE.label}

${SERVICE_FEE.amount}

${SERVICE_FEE.period}

` : ``}

Kündigungsfrist

1 Monat

Dein Beitrag ${price}

`; } function renderStep() { const step = state.checkout.step; const f = state.form; if (step === 1) { el.main.innerHTML = `

🛡 Deine Daten bleiben bei uns

Kontaktdaten

Hiermit stimme ich zu, dass meine Daten für die Erstellung der Mitgliedschaft und für eventuelle Rückfragen von unserem Team verwendet werden dürfen.

`; } if (step === 2) { const years = Array.from({ length: 80 }, (_, i) => String(2008 - i)); const days = Array.from({ length: 31 }, (_, i) => String(i + 1).padStart(2, "0")); const months = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"]; el.main.innerHTML = `

Adressdaten

Geburtsdatum (mind. 18 Jahre)

`; } if (step === 3) { const ibanOk = isValidIban(f.iban); const holderOk = !!String(f.kontoinhaber || "").trim(); const canSubmit = f.consentSepa && f.consentAgb && ibanOk && holderOk; el.main.innerHTML = `

Zahlung

IBAN muss mit 2 Buchstaben beginnen, gefolgt von 20 Ziffern.

„Ich ermächtige clever fit Hanau, Zahlungen von meinem Konto unter Angabe der Gläubiger ID-Nr DE23ZZZ00001791727 mittels Lastschrift einzuziehen..."

Ich bin mit AGB & Datenschutzhinweisen einverstanden (inkl. Einwilligung zur elektronischen Kontaktaufnahme, widerrufbar).

`; const err = el.main.querySelector('[data-el="ibanError"]'); if (err) err.style.display = (f.iban && !ibanOk) ? "block" : "none"; } } function renderCheckout() { renderStepper(); renderSide(); renderStep(); updateStep3UI(); } function selectPlan(tier) { const plan = plans.find(p => p.tier === tier); const duration = state.selectedDuration[tier]; const price = (plan.prices.find(x => x.duration === duration) || plan.prices[0]).price; state.checkout = { step: 1, tier, duration, price }; setView("checkout"); renderCheckout(); } function validateStep(step) { const f = state.form; if (step === 1) { if (!f.vorname || !f.nachname || !f.email || !f.phone) { toast("Pflichtfelder", "Bitte Kontaktdaten vollständig ausfüllen."); return false; } if (!f.consentContact) { toast("Einwilligung", "Bitte Zustimmung zur Datenverarbeitung setzen."); return false; } } if (step === 2) { if (!f.strasse || !f.hausnr || !f.plz || !f.ort) { toast("Pflichtfelder", "Bitte Adresse vollständig ausfüllen."); return false; } if (!f.dobDay || !f.dobMonth || !f.dobYear) { toast("Geburtsdatum", "Bitte Geburtsdatum vollständig auswählen."); return false; } const dob = new Date(Number(f.dobYear), Number(f.dobMonth) - 1, Number(f.dobDay)); const now = new Date(); const age = now.getFullYear() - dob.getFullYear() - (new Date(now.getFullYear(), dob.getMonth(), dob.getDate()) > now ? 1 : 0); if (age < 18) { toast("Altersprüfung", "Online-Abschluss nur ab 18 Jahren möglich."); return false; } } if (step === 3) { if (!String(f.kontoinhaber || "").trim()) { toast("Kontoinhaber", "Bitte den Kontoinhaber eintragen."); return false; } if (!isValidIban(f.iban)) { toast("IBAN", "Bitte eine gültige IBAN im Format DE + 20 Ziffern eingeben."); return false; } if (!f.consentSepa || !f.consentAgb) { toast("Einwilligungen", "Bitte SEPA- und AGB-Einwilligung setzen."); return false; } } return true; } async function submit() { const durNum = Number(durationToNumber(state.checkout.duration)); let tierBase = ""; const t = String(state.checkout.tier || "").toLowerCase(); if (t.includes("black")) tierBase = "Black Label"; else if (t.includes("red")) tierBase = "Red Label"; else tierBase = formatTierName(state.checkout.tier); const tierVal = `${tierBase} ${durNum}`; const dobISO = `${state.form.dobYear}-${state.form.dobMonth}-${state.form.dobDay}`; const phoneIntl = normalizePhoneDE(state.form.phone); const accountHolder = String(state.form.kontoinhaber || "").trim(); const p = { source: "cleverfit-membership-page", timestamp: new Date().toISOString(), tier: tierVal, duration: state.checkout.duration, price: state.checkout.price, startFee: START_FEE, serviceFeeAmount: state.checkout.duration !== "1 Monat" ? SERVICE_FEE.amount : "", serviceFeePeriod: state.checkout.duration !== "1 Monat" ? SERVICE_FEE.period : "", firstname: state.form.vorname, lastname: state.form.nachname, firstName: state.form.vorname, lastName: state.form.nachname, email: state.form.email, telephone_mobile: phoneIntl, phone: phoneIntl, dateOfBirth: dobISO, dob: dobISO, street: state.form.strasse, houseNumber: state.form.hausnr, zipCode: state.form.plz, zip: state.form.plz, city: state.form.ort, countryCode: "DE", paymentChoice: "DIRECT_DEBIT", iban: parseIban(state.form.iban), accountHolder: accountHolder, referralCode: state.form.code || "", consentContact: String(!!state.form.consentContact), consentSepa: String(!!state.form.consentSepa), consentAgb: String(!!state.form.consentAgb) }; const submitBtn = el.main.querySelector('[data-action="submit"]'); if (submitBtn) { submitBtn.disabled = true; submitBtn.textContent = "Wird übermittelt…"; } const body = new URLSearchParams(p); try { await fetch(GHL_WEBHOOK_URL, { method: "POST", mode: "no-cors", keepalive: true, headers: { "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8" }, body }); await new Promise(r => setTimeout(r, 350)); window.location.href = "https://mo5bbt0nlz.wpdns.site/willkommen"; } catch (err) { toast("Fehler", "Übermittlung fehlgeschlagen. Bitte erneut versuchen."); if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = "Mitgliedschaft aktivieren"; } } } root.addEventListener("click", (e) => { const btn = e.target.closest("[data-action]"); if (!btn) return; const action = btn.getAttribute("data-action"); if (action === "set-duration") { const tier = btn.getAttribute("data-tier"); const duration = btn.getAttribute("data-duration"); state.selectedDuration[tier] = duration; renderPricing(); return; } if (action === "select-plan") { selectPlan(btn.getAttribute("data-tier")); return; } if (action === "back-pricing") { setView("pricing"); renderPricing(); return; } if (action === "next") { if (!validateStep(state.checkout.step)) return; state.checkout.step = Math.min(3, state.checkout.step + 1); renderCheckout(); return; } if (action === "prev") { state.checkout.step = Math.max(1, state.checkout.step - 1); renderCheckout(); return; } if (action === "submit") { if (!validateStep(3)) return; submit().catch(() => toast("Fehler", "Übermittlung fehlgeschlagen. Bitte erneut versuchen.")); return; } }); root.addEventListener("input", (e) => { const t = e.target; const key = t.getAttribute("data-bind"); if (!key) return; if (t.type === "checkbox") { state.form[key] = t.checked; updateStep3UI(); } else { state.form[key] = t.value; if (state.view === "checkout" && state.checkout.step === 3 && (key === "iban" || key === "kontoinhaber")) { updateStep3UI(); } } }); root.addEventListener("change", (e) => { const t = e.target; const key = t.getAttribute("data-bind"); if (!key) return; state.form[key] = (t.type === "checkbox") ? t.checked : t.value; updateStep3UI(); }); setView("pricing"); renderPricing(); } if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", boot); } else { boot(); } })();