const BERATER_NAMEN = [ "Mustafa", "Michael", "Elisa", "Samuel" ]; function SmileaChatbot({ initialMessages = [ { role: "assistant", content: "Hallo! Ich bin Ihr SMILEA-Assistent. Wie kann ich Ihnen bei Ihrer Zahnbehandlung in der Türkei helfen?" } ], isInitiallyOpen = false, onSendMessage }) { const [isOpen, setIsOpen] = useState(isInitiallyOpen); const [messages, setMessages] = useState(initialMessages); const [inputMessage, setInputMessage] = useState(""); const [isTyping, setIsTyping] = useState(false); const [beraterName, setBeraterName] = useState(null); const [showContactButtons, setShowContactButtons] = useState(false); const messagesEndRef = useRef(null); const scrollToBottom = ()=>{ messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }; useEffect(()=>{ scrollToBottom(); }, [ messages ]); const handleSend = async (message = inputMessage)=>{ if (!message.trim()) return; if (!beraterName) { const randomBerater = BERATER_NAMEN[Math.floor(Math.random() * BERATER_NAMEN.length)]; setBeraterName(randomBerater); setMessages((prev)=>[ ...prev, { role: "system", content: `Sie werden mit unserem Mitarbeiter **${randomBerater}** verbunden...` } ]); await new Promise((resolve)=>setTimeout(resolve, 1000)); } const userMessage = { role: "user", content: message }; setMessages((prev)=>[ ...prev, userMessage ]); setInputMessage(""); setIsTyping(true); try { const response = await fetch("/api/chat-handler", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ ...messages, userMessage ], beraterName }) }); if (!response.ok) { throw new Error(`Error: ${response.status}`); } const data = await response.json(); const contactKeywords = [ "kontakt", "erreichen", "anrufen", "telefon", "email", "whatsapp", "schreiben", "termin" ]; const shouldShowContactButtons = contactKeywords.some((keyword)=>message.toLowerCase().includes(keyword)); if (shouldShowContactButtons) { setShowContactButtons(true); } const assistantMessage = { role: "assistant", content: data.response.content }; setMessages((prev)=>[ ...prev, assistantMessage ]); if (onSendMessage) { onSendMessage([ ...messages, userMessage, assistantMessage ]); } } catch (error) { console.error("Chat error:", error); setMessages((prev)=>[ ...prev, { role: "assistant", content: "Entschuldigung, es gab einen Fehler. Bitte versuchen Sie es erneut." } ]); } setIsTyping(false); }; return /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-8 right-8 z-50", __source: { fileName: "", lineNumber: 119, columnNumber: 5 }, __self: this }, isOpen ? /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-2xl shadow-xl w-96 max-h-[600px] flex flex-col", __source: { fileName: "", lineNumber: 121, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-r from-[#0066CC] to-[#0099FF] p-4 rounded-t-2xl flex justify-between items-center", __source: { fileName: "", lineNumber: 122, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 123, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 bg-white rounded-full flex items-center justify-center", __source: { fileName: "", lineNumber: 124, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-tooth text-[#0066CC]", __source: { fileName: "", lineNumber: 125, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("h3", { className: "text-white font-bold", __source: { fileName: "", lineNumber: 127, columnNumber: 15 }, __self: this }, beraterName ? `${beraterName} - SMILEA` : "SMILEA Assistent")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsOpen(false), className: "text-white hover:text-gray-200", __source: { fileName: "", lineNumber: 131, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 135, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto p-4 space-y-4", __source: { fileName: "", lineNumber: 139, columnNumber: 11 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex ${message.role === "user" ? "justify-end" : "justify-start"}`, __source: { fileName: "", lineNumber: 141, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-[80%] p-3 rounded-2xl ${message.role === "user" ? "bg-[#0066CC] text-white rounded-tr-none" : "bg-gray-100 text-gray-800 rounded-tl-none"}`, dangerouslySetInnerHTML: { __html: message.content }, __source: { fileName: "", lineNumber: 147, columnNumber: 17 }, __self: this }))), showContactButtons && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center gap-2 my-2", __source: { fileName: "", lineNumber: 158, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>window.location.href = "/contact", className: "px-4 py-2 bg-[#0066CC] text-white rounded-full text-sm hover:bg-[#0055BB] transition-all", __source: { fileName: "", lineNumber: 159, columnNumber: 17 }, __self: this }, "Kontaktformular"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>window.open("https://wa.me/YOUR_WHATSAPP_NUMBER", "_blank"), className: "px-4 py-2 bg-[#25D366] text-white rounded-full text-sm hover:bg-[#128C7E] transition-all flex items-center gap-2", __source: { fileName: "", lineNumber: 165, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-whatsapp", __source: { fileName: "", lineNumber: 171, columnNumber: 19 }, __self: this }), "WhatsApp")), isTyping && /*#__PURE__*/ React.createElement("div", { className: "flex justify-start", __source: { fileName: "", lineNumber: 177, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 p-3 rounded-2xl rounded-tl-none", __source: { fileName: "", lineNumber: 178, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 179, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 bg-gray-300 rounded-full animate-bounce", __source: { fileName: "", lineNumber: 180, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 bg-gray-300 rounded-full animate-bounce delay-100", __source: { fileName: "", lineNumber: 181, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 bg-gray-300 rounded-full animate-bounce delay-200", __source: { fileName: "", lineNumber: 182, columnNumber: 21 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { ref: messagesEndRef, __source: { fileName: "", lineNumber: 187, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "border-t p-4", __source: { fileName: "", lineNumber: 190, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 191, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: inputMessage, onChange: (e)=>setInputMessage(e.target.value), onKeyPress: (e)=>e.key === "Enter" && handleSend(), placeholder: "Ihre Frage...", className: "flex-1 border rounded-full px-4 py-2 focus:outline-none focus:border-[#0066CC]", __source: { fileName: "", lineNumber: 192, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleSend(), className: "bg-gradient-to-r from-[#0066CC] to-[#0099FF] text-white rounded-full w-10 h-10 flex items-center justify-center hover:shadow-lg transition-all", __source: { fileName: "", lineNumber: 200, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 204, columnNumber: 17 }, __self: this }))))) : /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsOpen(true), className: "bg-gradient-to-r from-[#0066CC] to-[#0099FF] text-white rounded-full w-16 h-16 flex items-center justify-center shadow-lg hover:shadow-xl transition-all transform hover:scale-105", __source: { fileName: "", lineNumber: 210, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-comments text-2xl", __source: { fileName: "", lineNumber: 214, columnNumber: 11 }, __self: this }))); } function SmileaChatbotStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 223, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 224, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 225, columnNumber: 9 }, __self: this }, "Standard (Geschlossen)"), /*#__PURE__*/ React.createElement(SmileaChatbot, { __source: { fileName: "", lineNumber: 226, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 229, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 230, columnNumber: 9 }, __self: this }, "Initial Geöffnet"), /*#__PURE__*/ React.createElement(SmileaChatbot, { isInitiallyOpen: true, __source: { fileName: "", lineNumber: 231, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 234, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 235, columnNumber: 9 }, __self: this }, "Benutzerdefinierte Startnachricht"), /*#__PURE__*/ React.createElement(SmileaChatbot, { initialMessages: [ { role: "assistant", content: "Willkommen! Wie kann ich Ihnen heute mit Ihrer Zahnbehandlung helfen?" } ], isInitiallyOpen: true, __source: { fileName: "", lineNumber: 238, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 250, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 251, columnNumber: 9 }, __self: this }, "Mit Nachrichtenprotokoll"), /*#__PURE__*/ React.createElement(SmileaChatbot, { onSendMessage: (messages)=>console.log("Nachrichten aktualisiert:", messages), isInitiallyOpen: true, __source: { fileName: "", lineNumber: 252, columnNumber: 9 }, __self: this }))); } function SmileaChatbot2({ initialMessages = [ { role: "assistant", content: "Willkommen bei SMILEA! Ich bin Ihr persönlicher Assistent. Wie kann ich Ihnen helfen?" } ], isInitiallyOpen = false, onSendMessage }) { const [isOpen, setIsOpen] = useState(isInitiallyOpen); const [messages, setMessages] = useState(initialMessages); const [inputMessage, setInputMessage] = useState(""); const [isTyping, setIsTyping] = useState(false); const [beraterName, setBeraterName] = useState(null); const messagesEndRef = useRef(null); const BERATER_NAMEN = [ "Mustafa", "Michael", "Elisa", "Samuel" ]; const scrollToBottom = ()=>{ messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }; useEffect(()=>{ scrollToBottom(); }, [ messages ]); const renderMessage = (content)=>{ const parts = content.split(/(\*\*.*?\*\*)/g); return parts.map((part, index)=>{ if (part.startsWith("**") && part.endsWith("**")) { return /*#__PURE__*/ React.createElement("strong", { key: index, __source: { fileName: "", lineNumber: 33, columnNumber: 16 }, __self: this }, part.slice(2, -2)); } return /*#__PURE__*/ React.createElement("span", { key: index, __source: { fileName: "", lineNumber: 35, columnNumber: 14 }, __self: this }, part); }); }; const renderServiceButtons = ()=>/*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/contact", className: "w-full px-4 py-2 bg-[#0066CC] text-white rounded-full hover:bg-[#0055BB] transition-all text-center", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, "Zum Kontaktformular"), /*#__PURE__*/ React.createElement("a", { href: "https://wa.me/1234567890", target: "_blank", rel: "noopener noreferrer", className: "w-full px-4 py-2 bg-green-500 text-white rounded-full hover:bg-green-600 transition-all text-center", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-whatsapp mr-2", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }), "WhatsApp Chat")); const handleSend = async (message = inputMessage)=>{ if (!message.trim()) return; if (!beraterName) { const randomBerater = BERATER_NAMEN[Math.floor(Math.random() * BERATER_NAMEN.length)]; setBeraterName(randomBerater); setMessages((prev)=>[ ...prev, { role: "system", content: `Sie werden mit unserem Mitarbeiter **${randomBerater}** verbunden...` } ]); await new Promise((resolve)=>setTimeout(resolve, 1000)); } const userMessage = { role: "user", content: message }; setMessages((prev)=>[ ...prev, userMessage ]); setInputMessage(""); setIsTyping(true); try { const response = await fetch("/api/chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ ...messages, userMessage ], beraterName }) }); if (!response.ok) throw new Error(`Error: ${response.status}`); const data = await response.json(); const assistantMessage = { role: "assistant", content: data.response.content, showServiceButtons: data.response.showServiceButtons }; setMessages((prev)=>[ ...prev, assistantMessage ]); if (onSendMessage) { onSendMessage([ ...messages, userMessage, assistantMessage ]); } } catch (error) { console.error("Chat error:", error); setMessages((prev)=>[ ...prev, { role: "assistant", content: "Entschuldigung, es gab einen Fehler. Bitte versuchen Sie es erneut.", showServiceButtons: true } ]); } setIsTyping(false); }; return /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-8 right-8 z-50", __source: { fileName: "", lineNumber: 128, columnNumber: 5 }, __self: this }, isOpen ? /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-2xl shadow-xl w-96 max-h-[600px] flex flex-col", __source: { fileName: "", lineNumber: 130, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-r from-[#0066CC] to-[#0099FF] p-4 rounded-t-2xl flex justify-between items-center", __source: { fileName: "", lineNumber: 131, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 132, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 bg-white rounded-full flex items-center justify-center", __source: { fileName: "", lineNumber: 133, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-tooth text-[#0066CC]", __source: { fileName: "", lineNumber: 134, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 136, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white font-bold", __source: { fileName: "", lineNumber: 137, columnNumber: 17 }, __self: this }, beraterName ? `${beraterName} - SMILEA` : "SMILEA Assistent"), beraterName && /*#__PURE__*/ React.createElement("span", { className: "text-xs text-white opacity-75", __source: { fileName: "", lineNumber: 141, columnNumber: 19 }, __self: this }, "Kundenberater"))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsOpen(false), className: "text-white hover:text-gray-200", __source: { fileName: "", lineNumber: 147, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 151, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto p-4 space-y-4", __source: { fileName: "", lineNumber: 155, columnNumber: 11 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, __source: { fileName: "", lineNumber: 157, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `flex ${message.role === "user" ? "justify-end" : "justify-start"}`, __source: { fileName: "", lineNumber: 158, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-[80%] p-3 rounded-2xl ${message.role === "user" ? "bg-[#0066CC] text-white rounded-tr-none" : message.role === "system" ? "bg-gray-200 text-gray-600 text-sm" : "bg-gray-100 text-gray-800 rounded-tl-none"}`, __source: { fileName: "", lineNumber: 163, columnNumber: 19 }, __self: this }, renderMessage(message.content))), message.showServiceButtons && /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 176, columnNumber: 19 }, __self: this }, renderServiceButtons()))), isTyping && /*#__PURE__*/ React.createElement("div", { className: "flex justify-start", __source: { fileName: "", lineNumber: 181, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 p-3 rounded-2xl rounded-tl-none", __source: { fileName: "", lineNumber: 182, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 183, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 bg-gray-300 rounded-full animate-bounce", __source: { fileName: "", lineNumber: 184, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 bg-gray-300 rounded-full animate-bounce delay-100", __source: { fileName: "", lineNumber: 185, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 bg-gray-300 rounded-full animate-bounce delay-200", __source: { fileName: "", lineNumber: 186, columnNumber: 21 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { ref: messagesEndRef, __source: { fileName: "", lineNumber: 191, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "border-t p-4", __source: { fileName: "", lineNumber: 194, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 195, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: inputMessage, onChange: (e)=>setInputMessage(e.target.value), onKeyPress: (e)=>e.key === "Enter" && handleSend(), placeholder: "Ihre Frage...", className: "flex-1 border rounded-full px-4 py-2 focus:outline-none focus:border-[#0066CC]", __source: { fileName: "", lineNumber: 196, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleSend(), className: "bg-gradient-to-r from-[#0066CC] to-[#0099FF] text-white rounded-full w-10 h-10 flex items-center justify-center hover:shadow-lg transition-all", __source: { fileName: "", lineNumber: 204, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 208, columnNumber: 17 }, __self: this }))))) : /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsOpen(true), className: "bg-gradient-to-r from-[#0066CC] to-[#0099FF] text-white rounded-full w-16 h-16 flex items-center justify-center shadow-lg hover:shadow-xl transition-all transform hover:scale-105", __source: { fileName: "", lineNumber: 214, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-comments text-2xl", __source: { fileName: "", lineNumber: 218, columnNumber: 11 }, __self: this }))); } function SmileaChatbot2Story() { return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 227, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 228, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 229, columnNumber: 9 }, __self: this }, "Default State (Closed)"), /*#__PURE__*/ React.createElement(SmileaChatbot2, { __source: { fileName: "", lineNumber: 230, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 233, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 234, columnNumber: 9 }, __self: this }, "Initially Open"), /*#__PURE__*/ React.createElement(SmileaChatbot2, { isInitiallyOpen: true, __source: { fileName: "", lineNumber: 235, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 238, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 239, columnNumber: 9 }, __self: this }, "With Custom Initial Message"), /*#__PURE__*/ React.createElement(SmileaChatbot2, { initialMessages: [ { role: "assistant", content: "Willkommen! Wie kann ich Ihnen heute mit Ihrer Zahnbehandlung helfen?" } ], __source: { fileName: "", lineNumber: 240, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 251, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 252, columnNumber: 9 }, __self: this }, "With Message Handler"), /*#__PURE__*/ React.createElement(SmileaChatbot2, { onSendMessage: (messages)=>console.log("Messages updated:", messages), __source: { fileName: "", lineNumber: 253, columnNumber: 9 }, __self: this }))); } function MainComponent() { const [treatments, setTreatments] = useState([]); const [clinics, setClinics] = useState([]); const [activeSection, setActiveSection] = useState("home"); const [showContactForm, setShowContactForm] = useState(false); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const [formData, setFormData] = useState({ fullName: "", email: "", phone: "", message: "", treatmentInterest: "" }); const [formStatus, setFormStatus] = useState({ success: false, error: null }); useEffect(()=>{ const fetchData = async ()=>{ try { const [treatmentsRes, clinicsRes] = await Promise.all([ fetch("/api/treatments/list", { method: "POST" }), fetch("/api/clinics/list", { method: "POST" }) ]); if (!treatmentsRes.ok || !clinicsRes.ok) { throw new Error("Fehler beim Laden der Daten"); } const treatmentsData = await treatmentsRes.json(); const clinicsData = await clinicsRes.json(); setTreatments(treatmentsData.treatments || []); setClinics(clinicsData.clinics || []); } catch (error) { console.error("Fehler beim Laden der Daten:", error); } }; fetchData(); }, []); const handleContactSubmit = async (e)=>{ e.preventDefault(); try { const response = await fetch("/api/contact/submit", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(formData) }); if (!response.ok) { throw new Error("Fehler beim Senden der Anfrage"); } const data = await response.json(); if (data.success) { setFormStatus({ success: true, error: null }); setShowContactForm(false); setFormData({ fullName: "", email: "", phone: "", message: "", treatmentInterest: "" }); } else { setFormStatus({ success: false, error: data.error }); } } catch (error) { console.error("Kontaktformular Fehler:", error); setFormStatus({ success: false, error: "Es gab einen Fehler beim Senden Ihrer Anfrage. Bitte versuchen Sie es später erneut." }); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-[#E8F4FF] to-white", __source: { fileName: "", lineNumber: 82, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "fixed top-0 w-full bg-white bg-opacity-70 backdrop-blur-lg shadow-lg z-50", __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 sm:px-6 py-4", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold text-[#0066CC]", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, "SMILEA"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsMobileMenuOpen(!isMobileMenuOpen), className: "md:hidden text-gray-600 hover:text-[#0066CC]", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isMobileMenuOpen ? "fa-times" : "fa-bars"} text-2xl`, __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex space-x-8", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveSection("home"), className: "text-gray-600 hover:text-[#0066CC]", __source: { fileName: "", lineNumber: 99, columnNumber: 15 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveSection("treatments"), className: "text-gray-600 hover:text-[#0066CC]", __source: { fileName: "", lineNumber: 105, columnNumber: 15 }, __self: this }, "Behandlungen"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveSection("clinics"), className: "text-gray-600 hover:text-[#0066CC]", __source: { fileName: "", lineNumber: 111, columnNumber: 15 }, __self: this }, "Kliniken"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowContactForm(true), className: "px-6 py-2 bg-gradient-to-r from-[#0066CC] to-[#0099FF] text-white rounded-full hover:shadow-lg transition-all", __source: { fileName: "", lineNumber: 117, columnNumber: 15 }, __self: this }, "Kontakt"))), isMobileMenuOpen && /*#__PURE__*/ React.createElement("div", { className: "md:hidden mt-4 space-y-4 pb-4", __source: { fileName: "", lineNumber: 127, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setActiveSection("home"); setIsMobileMenuOpen(false); }, className: "block w-full text-left px-4 py-2 text-gray-600 hover:text-[#0066CC]", __source: { fileName: "", lineNumber: 128, columnNumber: 15 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setActiveSection("treatments"); setIsMobileMenuOpen(false); }, className: "block w-full text-left px-4 py-2 text-gray-600 hover:text-[#0066CC]", __source: { fileName: "", lineNumber: 137, columnNumber: 15 }, __self: this }, "Behandlungen"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setActiveSection("clinics"); setIsMobileMenuOpen(false); }, className: "block w-full text-left px-4 py-2 text-gray-600 hover:text-[#0066CC]", __source: { fileName: "", lineNumber: 146, columnNumber: 15 }, __self: this }, "Kliniken"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setShowContactForm(true); setIsMobileMenuOpen(false); }, className: "block w-full px-4 py-2 bg-gradient-to-r from-[#0066CC] to-[#0099FF] text-white rounded-full hover:shadow-lg transition-all", __source: { fileName: "", lineNumber: 155, columnNumber: 15 }, __self: this }, "Kontakt")))), /*#__PURE__*/ React.createElement("section", { className: "pt-32 pb-20 px-4 sm:px-6", __source: { fileName: "", lineNumber: 170, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto", __source: { fileName: "", lineNumber: 171, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 172, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl sm:text-5xl md:text-6xl font-bold bg-gradient-to-r from-[#0066CC] to-[#0099FF] text-transparent bg-clip-text mb-6", __source: { fileName: "", lineNumber: 173, columnNumber: 13 }, __self: this }, "Qualitativ hochwertiger Zahnersatz zu günstigen Preisen"), /*#__PURE__*/ React.createElement("p", { className: "text-lg sm:text-xl text-gray-600 mb-12", __source: { fileName: "", lineNumber: 176, columnNumber: 13 }, __self: this }, "Entdecken Sie erstklassige Zahnbehandlungen in der Türkei zu einem Bruchteil der deutschen Preise"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowContactForm(true), className: "px-6 sm:px-8 py-3 sm:py-4 bg-gradient-to-r from-[#0066CC] to-[#0099FF] text-white rounded-full text-lg hover:shadow-xl transition-all transform hover:scale-105", __source: { fileName: "", lineNumber: 180, columnNumber: 13 }, __self: this }, "Jetzt kostenlos beraten lassen")))), /*#__PURE__*/ React.createElement("section", { className: "py-20 bg-white", __source: { fileName: "", lineNumber: 191, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 sm:px-6", __source: { fileName: "", lineNumber: 192, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold text-center mb-16", __source: { fileName: "", lineNumber: 193, columnNumber: 11 }, __self: this }, "Unsere Behandlungen"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 196, columnNumber: 11 }, __self: this }, treatments.map((treatment)=>/*#__PURE__*/ React.createElement("div", { key: treatment.id, className: "bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all", __source: { fileName: "", lineNumber: 198, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 202, columnNumber: 17 }, __self: this }, treatment.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-4", __source: { fileName: "", lineNumber: 203, columnNumber: 17 }, __self: this }, treatment.description), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 204, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 205, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 206, columnNumber: 21 }, __self: this }, "Preis ab"), /*#__PURE__*/ React.createElement("div", { className: "text-[#0066CC] font-bold", __source: { fileName: "", lineNumber: 207, columnNumber: 21 }, __self: this }, treatment.price_tr, "€")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowContactForm(true), className: "px-4 py-2 bg-[#0066CC] text-white rounded-full hover:bg-[#0055BB] transition-all", __source: { fileName: "", lineNumber: 211, columnNumber: 19 }, __self: this }, "Anfragen"))))))), /*#__PURE__*/ React.createElement("section", { className: "py-20 bg-gray-50", __source: { fileName: "", lineNumber: 225, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 sm:px-6", __source: { fileName: "", lineNumber: 226, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold text-center mb-16", __source: { fileName: "", lineNumber: 227, columnNumber: 11 }, __self: this }, "Unsere Partnerkliniken"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 230, columnNumber: 11 }, __self: this }, clinics.map((clinic)=>/*#__PURE__*/ React.createElement("div", { key: clinic.id, className: "bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all", __source: { fileName: "", lineNumber: 232, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: clinic.image_url, alt: clinic.name, className: "w-full h-48 object-cover", __source: { fileName: "", lineNumber: 236, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 241, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 242, columnNumber: 19 }, __self: this }, clinic.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-4", __source: { fileName: "", lineNumber: 243, columnNumber: 19 }, __self: this }, clinic.description), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2 mb-4", __source: { fileName: "", lineNumber: 244, columnNumber: 19 }, __self: this }, clinic.certifications.map((cert, index)=>/*#__PURE__*/ React.createElement("span", { key: index, className: "px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm", __source: { fileName: "", lineNumber: 246, columnNumber: 23 }, __self: this }, cert))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowContactForm(true), className: "w-full px-4 py-2 bg-gradient-to-r from-[#0066CC] to-[#0099FF] text-white rounded-full hover:shadow-lg transition-all", __source: { fileName: "", lineNumber: 254, columnNumber: 19 }, __self: this }, "Mehr erfahren"))))))), showContactForm && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4", __source: { fileName: "", lineNumber: 269, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-2xl p-4 sm:p-8 w-full max-w-md mx-auto", __source: { fileName: "", lineNumber: 270, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 271, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl sm:text-2xl font-bold", __source: { fileName: "", lineNumber: 272, columnNumber: 15 }, __self: this }, "Kontaktieren Sie uns"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowContactForm(false), className: "text-gray-400 hover:text-gray-600", __source: { fileName: "", lineNumber: 275, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times text-xl", __source: { fileName: "", lineNumber: 279, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleContactSubmit, __source: { fileName: "", lineNumber: 282, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 283, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "fullName", placeholder: "Ihr Name", value: formData.fullName, onChange: (e)=>setFormData({ ...formData, fullName: e.target.value }), className: "w-full p-3 border rounded-lg", required: true, __source: { fileName: "", lineNumber: 284, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", placeholder: "Ihre E-Mail", value: formData.email, onChange: (e)=>setFormData({ ...formData, email: e.target.value }), className: "w-full p-3 border rounded-lg", required: true, __source: { fileName: "", lineNumber: 295, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "tel", name: "phone", placeholder: "Ihre Telefonnummer", value: formData.phone, onChange: (e)=>setFormData({ ...formData, phone: e.target.value }), className: "w-full p-3 border rounded-lg", __source: { fileName: "", lineNumber: 306, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "message", placeholder: "Ihre Nachricht", value: formData.message, onChange: (e)=>setFormData({ ...formData, message: e.target.value }), className: "w-full p-3 border rounded-lg", rows: "4", required: true, __source: { fileName: "", lineNumber: 316, columnNumber: 17 }, __self: this })), formStatus.error && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-red-500", __source: { fileName: "", lineNumber: 329, columnNumber: 17 }, __self: this }, formStatus.error), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row justify-end gap-4 mt-6", __source: { fileName: "", lineNumber: 331, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>setShowContactForm(false), className: "px-6 py-2 text-gray-600 hover:text-gray-800", __source: { fileName: "", lineNumber: 332, columnNumber: 17 }, __self: this }, "Abbrechen"), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-6 py-2 bg-gradient-to-r from-[#0066CC] to-[#0099FF] text-white rounded-full hover:shadow-lg", __source: { fileName: "", lineNumber: 339, columnNumber: 17 }, __self: this }, "Absenden"))))), /*#__PURE__*/ React.createElement(SmileaChatbot, { initialMessages: [ { role: "assistant", content: "Willkommen bei SMILEA! Ich bin Ihr persönlicher Assistent. Wie kann ich Ihnen bei Ihrer Zahnbehandlung in der Türkei helfen?" } ], __source: { fileName: "", lineNumber: 352, columnNumber: 7 }, __self: this })); }