import { useState, useEffect, useRef } from "react"; const BOOKING_AN = "https://zwergengruppe.thrivecart.com/elterngeld-basispaket-an/"; const BOOKING_UN = "https://zwergengruppe.thrivecart.com/elterngeld-basispaket-un/"; const C = { forest: "#1b4332", green: "#2d6a4f", greenMid: "#40916c", greenLight: "#52b788", greenPale: "#d8f3dc", greenFaint: "#f0faf4", cream: "#fffdf7", accent: "#e76f51", accentSoft: "#fce8e2", accentDark: "#c4553d", warm: "#f4a261", text: "#1a1a2e", textMed: "#3d4550", textLight: "#6b7280", border: "#e5e7eb", borderLight: "#f3f4f6", }; function calcEG(a) { var b = a.einkommen || 2000; var sk = a.steuerklasse || "1"; var abz = 0.60; if (sk === "3") abz = 0.73; else if (sk === "5") abz = 0.54; else if (sk === "2") abz = 0.62; else if (sk === "4") abz = 0.59; var n = b * abz; var pct = 0.67; if (n < 1000) pct = Math.min(0.67 + (1000 - n) * 0.001, 1.0); else if (n > 1200) pct = Math.max(0.67 - (n - 1200) * 0.001, 0.65); var eg = Math.max(300, Math.min(Math.round(n * pct), 1800)); var opt = eg; var tipps = []; if (sk === "5" || sk === "4") { var bEG = Math.min(Math.round(b * 0.73 * 0.67), 1800); var d = bEG - eg; if (d > 30) { opt = bEG; tipps.push({ icon: "💡", title: "Steuerklassenwechsel", text: "Wechsel auf Klasse III → ca. " + d + " €/Monat mehr. Über 12 Monate = " + (d * 12) + " € zusätzlich.", urgent: true }); } } if (sk === "unknown") tipps.push({ icon: "⚠️", title: "Steuerklasse klären", text: "Die Steuerklasse beeinflusst dein Elterngeld massiv. Muss vor der Geburt geklärt werden.", urgent: true }); if (a.partner === "ja" || a.partner === "unklar") tipps.push({ icon: "👫", title: "Partnerschaftsbonus", text: "Bis zu 4 Extra-Monate ElterngeldPlus — über 3.600 € zusätzlich möglich." }); if (a.partner === "alleinerziehend") tipps.push({ icon: "💪", title: "Alleinerziehenden-Regel", text: "Dir stehen 14 statt 12 Monate zu — bis zu 3.600 € mehr." }); if (a.arbeitsmodell === "selbststaendig") tipps.push({ icon: "📊", title: "Gewinnermittlung", text: "Bei Selbstständigen zählt der Gewinn der letzten 12 Monate. Richtige Gestaltung = mehr Elterngeld." }); if (a.arbeitsmodell === "teilzeit" || a.arbeitsmodell === "minijob") tipps.push({ icon: "⏱️", title: "ElterngeldPlus", text: "Bei Teilzeit oft lukrativer: doppelte Dauer bei halbem Satz." }); if (tipps.length === 0) tipps.push({ icon: "🎯", title: "Individuelle Analyse", text: "Jede Situation ist anders — in der Beratung finden wir die optimale Kombination." }); return { eg: eg, opt: opt, diff: (opt * 14) - (eg * 12), tipps: tipps }; } function Stars() { return ★★★★★; } function Dots() { return ( ); } function Bot(props) { var delay = props.delay || 0; var [show, setShow] = useState(delay === 0); useEffect(function () { if (delay > 0) { var t = setTimeout(function () { setShow(true); }, delay); return function () { clearTimeout(t); }; } }, [delay]); return ( ); } function User(props) { return ( ); } function Btn(props) { var [h, setH] = useState(false); return ( {props.label} ); } function EmailGate(props) { var [email, setEmail] = useState(""); var [name, setName] = useState(""); var [err, setErr] = useState(""); function submit(e) { e.preventDefault(); if (!name.trim() || email.indexOf("@") < 0 || email.indexOf(".") < 0) { setErr("Bitte Name und gültige E-Mail eingeben."); return; } setErr(""); props.onSubmit(email.trim(), name.trim()); } return ( ); } function Result(props) { var r = props.result; var url = props.answers.arbeitsmodell === "selbststaendig" ? BOOKING_UN : BOOKING_AN; return ( ); } function FAQ(props) { var [open, setOpen] = useState(false); return ( ); } export default function App() { var [step, setStep] = useState(0); var [answers, setAnswers] = useState({}); var [msgs, setMsgs] = useState([]); var [showOpts, setShowOpts] = useState(false); var [inputVal, setInputVal] = useState(""); var [started, setStarted] = useState(false); var [gated, setGated] = useState(false); var [submitting, setSubmitting] = useState(false); var [uName, setUName] = useState(""); var [showRes, setShowRes] = useState(false); var chatRef = useRef(null); var FLOW = [ { id: "welcome", bot: ["Hey! Ich bin der Elterngeld-Schnellcheck der Zwergengruppe.", "In unter 2 Minuten zeige ich dir, wie viel Elterngeld dir zusteht — und wo du Geld verschenkst."], type: "start" }, { id: "geburtstermin", bot: ["Wann ist der errechnete Geburtstermin?"], type: "date" }, { id: "einkommen", bot: ["Wie hoch ist dein monatliches Brutto-Einkommen?"], type: "select", options: [{ label: "Unter 1.500 €", value: 1200 }, { label: "1.500 – 2.500 €", value: 2000 }, { label: "2.500 – 3.500 €", value: 3000 }, { label: "3.500 – 4.500 €", value: 4000 }, { label: "Über 4.500 €", value: 5000 }] }, { id: "steuerklasse", bot: ["Welche Steuerklasse hast du aktuell?"], type: "select", options: [{ label: "Klasse I", value: "1" }, { label: "Klasse II", value: "2" }, { label: "Klasse III", value: "3" }, { label: "Klasse IV", value: "4" }, { label: "Klasse V", value: "5" }, { label: "Weiß ich nicht", value: "unknown" }] }, { id: "arbeitsmodell", bot: ["Wie bist du beschäftigt?"], type: "select", options: [{ label: "Angestellt (Vollzeit)", value: "vollzeit" }, { label: "Angestellt (Teilzeit)", value: "teilzeit" }, { label: "Selbstständig", value: "selbststaendig" }, { label: "Mini-Job", value: "minijob" }, { label: "Nicht berufstätig", value: "nicht_berufstaetig" }] }, { id: "partner", bot: ["Nimmt dein/e Partner/in auch Elternzeit?"], type: "select", options: [{ label: "Ja, beide", value: "ja" }, { label: "Nein, nur ich", value: "nein" }, { label: "Noch unklar", value: "unklar" }, { label: "Alleinerziehend", value: "alleinerziehend" }] }, { id: "emailgate", bot: ["Super! Dein Ergebnis ist fertig berechnet.", "Trag kurz deinen Namen und deine E-Mail ein — dann zeige ich dir sofort dein Ergebnis."], type: "emailgate" }, ]; var cur = FLOW[step]; var result = gated ? calcEG(answers) : null; useEffect(function () { if (!cur) return; var nm = []; for (var i = 0; i < cur.bot.length; i++) { nm.push({ from: "bot", text: cur.bot[i], delay: i * 850 + 350, id: step + "-b-" + i }); } setMsgs(function (p) { return p.concat(nm); }); setTimeout(function () { setShowOpts(true); }, cur.bot.length * 850 + 550); }, [step]); useEffect(function () { if (chatRef.current) setTimeout(function () { chatRef.current.scrollTop = chatRef.current.scrollHeight; }, 100); }, [msgs, showOpts, showRes, gated]); function answer(display, value) { setShowOpts(false); setMsgs(function (p) { return p.concat([{ from: "user", text: display, id: step + "-u" }]); }); var newAns = Object.assign({}, answers); newAns[cur.id] = value; setAnswers(newAns); setTimeout(function () { setStep(step + 1); }, 450); } function onDate(e) { e.preventDefault(); if (!inputVal) return; answer(inputVal, inputVal); setInputVal(""); } function onEmail(email, firstName) { setSubmitting(true); setUName(firstName); console.log("LEAD:", { email: email, name: firstName, answers: answers }); setMsgs(function (p) { return p.concat([{ from: "user", text: firstName + " — " + email, id: "email-u" }]); }); setTimeout(function () { setGated(true); setSubmitting(false); setShowOpts(false); setMsgs(function (p) { return p.concat([{ from: "bot", text: firstName + ", hier ist dein Ergebnis:", delay: 400, id: "res-b" }]); }); setTimeout(function () { setShowRes(true); }, 1200); }, 800); } var progPct = step > 0 && step < FLOW.length ? Math.round(Math.min((step - 1) / 5, 1) * 100) : 0; var progLabel = Math.min(step - 1, 5); return ( ); }