feat: statisches Chat-Mockup durch echten Sales-Chat ersetzt

- HeroSalesChat.tsx: funktionierender Chat mit Webhook-Anbindung,
  Typing-Indikator, Fehlerbehandlung und Enter-to-Send
- useChatSession.ts: Session-ID via crypto.randomUUID() + localStorage
- Hero.tsx: statischen Block durch <HeroSalesChat /> ersetzt,
  linke Seite vollständig erhalten

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

landing-react/src/components/Hero.tsx

@@ -1,4 +1,5 @@
-import { Rocket, Play, Info, Bot, Circle, Send } from 'lucide-react'
+import { Rocket, Play, Info } from 'lucide-react'
+import HeroSalesChat from './HeroSalesChat'
 
 export default function Hero() {
   const scrollTo = (id: string) => {
@@ -92,65 +93,9 @@ export default function Hero() {
           </div>
         </div>
 
-        {/* Chat Preview Widget */}
+        {/* Live Sales Chat */}
         <div className="flex justify-center lg:justify-end">
-          <div className="bg-white rounded-3xl shadow-xl overflow-hidden w-full max-w-[400px]">
+          <HeroSalesChat />
-            {/* Chat Header */}
-            <div
-              className="flex items-center gap-3 px-5 py-4 text-white"
-              style={{ background: 'linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%)' }}
-            >
-              <div className="w-11 h-11 bg-white/20 rounded-full flex items-center justify-center text-xl">
-                <Bot size={22} />
-              </div>
-              <div className="flex flex-col">
-                <span className="font-semibold text-sm">BotKonzept Assistent</span>
-                <span className="text-xs opacity-90 flex items-center gap-1">
-                  <Circle size={7} className="fill-emerald-400 text-emerald-400" />
-                  Online
-                </span>
-              </div>
-            </div>
-
-            {/* Messages */}
-            <div className="px-5 py-5 flex flex-col gap-3 min-h-[280px]">
-              <div className="max-w-[85%] bg-gray-100 px-4 py-3 rounded-2xl rounded-bl-sm text-[0.9375rem] self-start">
-                Hallo! 👋 Wie kann ich Ihnen heute helfen?
-              </div>
-              <div className="max-w-[85%] bg-primary text-white px-4 py-3 rounded-2xl rounded-br-sm text-[0.9375rem] self-end">
-                Was sind Ihre Öffnungszeiten?
-              </div>
-              <div className="max-w-[85%] bg-gray-100 px-4 py-3 rounded-2xl rounded-bl-sm text-[0.9375rem] self-start">
-                Unsere Öffnungszeiten sind Montag bis Freitag von 9:00 bis 18:00 Uhr. Am
-                Wochenende sind wir geschlossen.
-              </div>
-              <div className="max-w-[85%] bg-primary text-white px-4 py-3 rounded-2xl rounded-br-sm text-[0.9375rem] self-end">
-                Wie kann ich eine Bestellung aufgeben?
-              </div>
-              {/* Typing Indicator */}
-              <div className="max-w-[85%] bg-gray-100 px-5 py-4 rounded-2xl rounded-bl-sm self-start flex gap-1 items-center">
-                <span className="typing-dot" />
-                <span className="typing-dot" />
-                <span className="typing-dot" />
-              </div>
-            </div>
-
-            {/* Chat Input */}
-            <div className="flex items-center gap-3 px-5 py-4 border-t border-gray-200">
-              <input
-                type="text"
-                placeholder="Nachricht eingeben..."
-                className="flex-1 px-4 py-3 border border-gray-300 rounded-full text-[0.9375rem] outline-none focus:border-primary transition-colors"
-                readOnly
-              />
-              <button
-                className="w-11 h-11 rounded-full text-white flex items-center justify-center flex-shrink-0 hover:scale-105 transition-transform"
-                style={{ background: 'linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%)' }}
-              >
-                <Send size={16} />
-              </button>
-            </div>
-          </div>
         </div>
       </div>
     </section>

landing-react/src/components/HeroSalesChat.tsx

@@ -0,0 +1,167 @@
+import { useState, useRef, useEffect } from 'react'
+import { Bot, Circle, Send, AlertCircle } from 'lucide-react'
+import { useChatSession } from '../hooks/useChatSession'
+
+// ─── Webhook-Endpunkt ────────────────────────────────────────────────────────
+const WEBHOOK_URL = 'HIER_N8N_CHAT_WEBHOOK_EINTRAGEN'
+// ────────────────────────────────────────────────────────────────────────────
+
+interface Message {
+  id: string
+  role: 'bot' | 'user'
+  text: string
+}
+
+const GREETING: Message = {
+  id: 'greeting',
+  role: 'bot',
+  text: 'Hallo 👋 Wie kann ich Ihnen heute helfen?',
+}
+
+export default function HeroSalesChat() {
+  const sessionId = useChatSession()
+  const [messages, setMessages] = useState<Message[]>([GREETING])
+  const [input, setInput] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const bottomRef = useRef<HTMLDivElement>(null)
+
+  // Automatisch zum neuesten Eintrag scrollen
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [messages, isLoading])
+
+  const sendMessage = async () => {
+    const text = input.trim()
+    if (!text || isLoading) return
+
+    setInput('')
+    setError(null)
+
+    const userMsg: Message = { id: crypto.randomUUID(), role: 'user', text }
+    setMessages((prev) => [...prev, userMsg])
+    setIsLoading(true)
+
+    try {
+      const res = await fetch(WEBHOOK_URL, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ message: text, sessionId }),
+      })
+
+      if (!res.ok) throw new Error(`HTTP ${res.status}`)
+
+      const contentType = res.headers.get('content-type') ?? ''
+      let botText = ''
+
+      if (contentType.includes('application/json')) {
+        const data = await res.json()
+        // Bekannte Antwortformate abfangen
+        botText =
+          data?.message ??
+          data?.text ??
+          data?.reply ??
+          data?.output ??
+          JSON.stringify(data)
+      } else {
+        botText = (await res.text()).trim()
+      }
+
+      const botMsg: Message = { id: crypto.randomUUID(), role: 'bot', text: botText }
+      setMessages((prev) => [...prev, botMsg])
+    } catch (err) {
+      console.error('[Chat-Fehler]', err)
+      setError('Verbindungsfehler – bitte versuchen Sie es erneut.')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') sendMessage()
+  }
+
+  return (
+    <div className="bg-white rounded-3xl shadow-xl overflow-hidden w-full max-w-[400px] flex flex-col">
+      {/* ── Header ── */}
+      <div
+        className="flex items-center gap-3 px-5 py-4 text-white flex-shrink-0"
+        style={{ background: 'linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%)' }}
+      >
+        <div className="w-11 h-11 bg-white/20 rounded-full flex items-center justify-center flex-shrink-0">
+          <Bot size={22} />
+        </div>
+        <div className="flex flex-col">
+          <span className="font-semibold text-sm">BotKonzept Assistent</span>
+          <span className="text-xs opacity-90 flex items-center gap-1">
+            <Circle size={7} className="fill-emerald-400 text-emerald-400" />
+            Online
+          </span>
+        </div>
+      </div>
+
+      {/* ── Nachrichtenbereich ── */}
+      <div className="px-5 py-5 flex flex-col gap-3 overflow-y-auto min-h-[280px] max-h-[320px]">
+        {messages.map((msg) =>
+          msg.role === 'bot' ? (
+            <div
+              key={msg.id}
+              className="max-w-[85%] bg-gray-100 px-4 py-3 rounded-2xl rounded-bl-sm text-[0.9375rem] self-start leading-snug"
+            >
+              {msg.text}
+            </div>
+          ) : (
+            <div
+              key={msg.id}
+              className="max-w-[85%] bg-primary text-white px-4 py-3 rounded-2xl rounded-br-sm text-[0.9375rem] self-end leading-snug"
+            >
+              {msg.text}
+            </div>
+          ),
+        )}
+
+        {/* Typing-Indikator */}
+        {isLoading && (
+          <div className="max-w-[85%] bg-gray-100 px-5 py-4 rounded-2xl rounded-bl-sm self-start flex gap-1 items-center">
+            <span className="typing-dot" />
+            <span className="typing-dot" />
+            <span className="typing-dot" />
+          </div>
+        )}
+
+        {/* Fehlermeldung */}
+        {error && (
+          <div className="flex items-center gap-2 text-red-500 text-xs self-start">
+            <AlertCircle size={14} className="flex-shrink-0" />
+            <span>{error}</span>
+          </div>
+        )}
+
+        {/* Scroll-Anker */}
+        <div ref={bottomRef} />
+      </div>
+
+      {/* ── Eingabe ── */}
+      <div className="flex items-center gap-3 px-5 py-4 border-t border-gray-200 flex-shrink-0">
+        <input
+          type="text"
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder="Nachricht eingeben..."
+          disabled={isLoading}
+          className="flex-1 px-4 py-3 border border-gray-300 rounded-full text-[0.9375rem] outline-none focus:border-primary transition-colors disabled:opacity-50"
+        />
+        <button
+          onClick={sendMessage}
+          disabled={isLoading || !input.trim()}
+          className="w-11 h-11 rounded-full text-white flex items-center justify-center flex-shrink-0 transition-transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100"
+          style={{ background: 'linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%)' }}
+          aria-label="Nachricht senden"
+        >
+          <Send size={16} />
+        </button>
+      </div>
+    </div>
+  )
+}

landing-react/src/hooks/useChatSession.ts

@@ -0,0 +1,19 @@
+import { useState } from 'react'
+
+const STORAGE_KEY = 'bk_chat_session_id'
+
+/**
+ * Gibt eine stabile Session-ID zurück.
+ * Beim ersten Aufruf wird eine neue UUID erzeugt und in localStorage gespeichert.
+ * Bei jedem weiteren Seitenaufruf wird dieselbe ID wiederverwendet.
+ */
+export function useChatSession(): string {
+  const [sessionId] = useState<string>(() => {
+    const stored = localStorage.getItem(STORAGE_KEY)
+    if (stored) return stored
+    const newId = crypto.randomUUID()
+    localStorage.setItem(STORAGE_KEY, newId)
+    return newId
+  })
+  return sessionId
+}