"use client"; import { motion, AnimatePresence } from "framer-motion"; import { useState, useEffect, useRef } from "react"; import type { DemoData } from "@/data/demos"; interface ChatbotTemplate2Props { data: DemoData; } interface Message { sender: "bot" | "user"; text: string; } const translations = { tr: { features: "Özellikler", simulator: "AI Simülatörü", integrations: "Entegrasyonlar", pricing: "Planlar", reviews: "Yorumlar", tryNow: "Hemen Dene", badge: "ZENITH COGNITIVE ENGINE V2.0", heroTitle1: "Özel Bilginizle Eğitilmiş", heroTitle2: "Sıfır Hatalı Yapay Zekâ", heroDesc: "Zenith AI; web sitenizi, dokümanlarınızı ve Notion sayfalarınızı saniyeler içinde analiz eder. %99.4 doğruluk oranıyla halüsinasyonsuz, 240ms altında çalışan ultra hızlı bir chatbot oluşturur.", startBtn: "Ücretsiz Başlat", exploreBtn: "Entegrasyonları Gör", sandboxTitle: "Zenith AI Arayüzü", statusOnline: "Çevrimiçi & Aktif", suggest1: "Semantik İndeksleme nedir?", suggest2: "Hangi kanalları destekler?", suggest3: "Sıfır halüsinasyon garantisi", typing: "Yapay zeka yanıt üretiyor...", inputPlaceholder: "Zenith AI'a bir soru sorun...", terminalTitle: "Zenith AI Semantik Konsol", terminalRunBtn: "Bilgi Tabanını İndeksle", featuresHeader: "Yapay Zeka Destekli Kabiliyetler", featuresSub: "Bento yapısında kurgulanmış üst segment altyapı mimarisi.", integrationsHeader: "Tam Entegre Çalışma Ortamı", integrationsSub: "Kullandığınız kurumsal araçlarla ve mesajlaşma kanallarıyla saniyeler içinde senkronize edin.", pricingHeader: "Şeffaf Fiyatlandırma", pricingSub: "İşletmenizin büyüklüğüne göre ölçeklenebilen esnek abonelik planları.", reviewsHeader: "Görüşler", reviewsSub: "Zenith AI altyapısını kullanan lider ekiplerin gerçek deneyimleri.", footerText: "Bilgi tabanınızı semantik indekslerle saniyeler içinde analiz edip 240ms altında doğrulanmış yanıtlar sunan yeni nesil yapay zekâ sohbet asistanı.", privacy: "Gizlilik Politikası", terms: "Kullanım Şartları", tryModalTitle: "Zenith AI Sandbox Deneyimi", tryModalDesc: "Kendi web siteniz ve e-posta adresinizle hemen bir deneme anahtarı oluşturun ve sitenize ekleyebileceğiniz script kodunu kopyalayın.", urlLabel: "Web Siteniz", emailLabel: "E-Posta Adresiniz", generateBtn: "Sandbox Kodunu Üret", tokenTitle: "Sandbox Kodunuz Hazır", tokenDesc: "Aşağıdaki script kodunu web sitenizin etiketinin kapanışından hemen önce yapıştırın.", copyBtn: "Kodu Kopyala", copied: "Kopyalandı!", closeBtn: "Kapat" }, en: { features: "Features", simulator: "AI Simulator", integrations: "Integrations", pricing: "Pricing", reviews: "Reviews", tryNow: "Try Now", badge: "ZENITH COGNITIVE ENGINE V2.0", heroTitle1: "AI Chatbot Trained on", heroTitle2: "Your Brand Knowledge", heroDesc: "Zenith AI parses your website, documents, and Notion databases in seconds. It guarantees 99.4% accurate customer responses with sub-240ms latency and zero hallucination.", startBtn: "Get Started Free", exploreBtn: "Explore Integrations", sandboxTitle: "Zenith AI Widget", statusOnline: "Online & Active", suggest1: "What is semantic indexing?", suggest2: "Which channels are supported?", suggest3: "Zero hallucination guarantee", typing: "AI is thinking...", inputPlaceholder: "Ask Zenith AI a question...", terminalTitle: "Zenith Semantic Indexing Console", terminalRunBtn: "Simulate Knowledge Indexing", featuresHeader: "AI-Powered Capabilities", featuresSub: "Bento-grid capabilities built with high performance and zero-hallucination engines.", integrationsHeader: "Seamless Ecosystem Integrations", integrationsSub: "Sync with your existing corporate workspaces and messaging channels in under a minute.", pricingHeader: "Transparent Pricing Plans", pricingSub: "Flexible scales designed to accommodate startups and enterprise support systems.", reviewsHeader: "Wall of Love", reviewsSub: "Honest feedback from customer support leaders and tech team leads globally.", footerText: "Next-generation conversational interface parsing document structures to deliver verified responses with sub-240ms latency.", privacy: "Privacy Policy", terms: "Terms of Service", tryModalTitle: "Zenith AI Sandbox Experience", tryModalDesc: "Enter your website URL and contact email to issue a unique sandbox token and generate your lightweight embed script.", urlLabel: "Your Website URL", emailLabel: "Your Contact Email", generateBtn: "Generate Embed Script", tokenTitle: "Sandbox Script Ready", tokenDesc: "Copy and paste this lightweight script tag right before the closing tag of your website code.", copyBtn: "Copy Script", copied: "Copied!", closeBtn: "Close" } }; const mockResponses: Record> = { tr: { suggest1: "Semantik İndeksleme; dokümanlarınızı sadece kelime bazlı değil, anlamsal ilişkileriyle haritalandırıp vektör veritabanına kaydeder. Böylece yapay zeka bağlamı mükemmel anlar.", suggest2: "Zenith AI; Web siteniz için özel JS widget'ı, Slack workspace, WhatsApp Business, Telegram botları ve Discord sunucuları üzerinde tamamen yerel entegrasyon desteği sağlar.", suggest3: "%99.4 doğruluk oranımız, yapay zekanın sadece sizin onayladığınız bilgi tabanını referans almasından kaynaklanır. Bilmediği konularda uydurmak yerine destek ekibinize yönlendirir." }, en: { suggest1: "Semantic Indexing maps your documents based on structural meaning rather than simple keywords, storing them in vector formats. This allows the AI to fully grasp context.", suggest2: "Zenith AI natively integrates across custom JavaScript Web Widgets, Slack workspaces, WhatsApp Business API, Telegram channels, and Discord servers.", suggest3: "Our 99.4% accuracy is achieved by strictly grounding the AI responses within your verified knowledge base. If a query is out-of-scope, it routes to a human agent instead of hallucinating." } }; export default function ChatbotTemplate2({ data }: ChatbotTemplate2Props) { const [lang, setLang] = useState<"tr" | "en">("tr"); const t = translations[lang]; // Chat Sandbox State const [chatMessages, setChatMessages] = useState([ { sender: "bot", text: lang === "tr" ? "Merhaba! Ben Zenith AI. Markanızın özel bilgi tabanıyla eğitildim. Özelliklerimi test etmek için aşağıdaki butonlara basabilir veya yazabilirsiniz." : "Hello! I am Zenith AI, trained on your custom knowledge base. Feel free to click the suggestion chips or write to test my capabilities." } ]); const [chatInput, setChatInput] = useState(""); const [isBotTyping, setIsBotTyping] = useState(false); const [streamedText, setStreamedText] = useState(""); const chatEndRef = useRef(null); // Sync initial message on language switch useEffect(() => { setChatMessages([ { sender: "bot", text: lang === "tr" ? "Merhaba! Ben Zenith AI. Markanızın özel bilgi tabanıyla eğitildim. Özelliklerimi test etmek için aşağıdaki butonlara basabilir veya yazabilirsiniz." : "Hello! I am Zenith AI, trained on your custom knowledge base. Feel free to click the suggestion chips or write to test my capabilities." } ]); }, [lang]); // Terminal Simulation State const [terminalLogs, setTerminalLogs] = useState([]); const [isTerminalIndexing, setIsTerminalIndexing] = useState(false); const terminalEndRef = useRef(null); // Try Now Modal State const [showModal, setShowModal] = useState(false); const [userUrl, setUserUrl] = useState(""); const [userEmail, setUserEmail] = useState(""); const [generatedScript, setGeneratedScript] = useState(""); const [isGenerating, setIsGenerating] = useState(false); const [isCopied, setIsCopied] = useState(false); // Custom Streaming Response Helper const triggerStreamingResponse = async (responseText: string) => { setIsBotTyping(true); // Simulate thinking delay await new Promise((res) => setTimeout(res, 800)); setIsBotTyping(false); setChatMessages((prev) => [...prev, { sender: "bot", text: "" }]); const words = responseText.split(" "); let currentText = ""; for (let i = 0; i < words.length; i++) { currentText += (i === 0 ? "" : " ") + words[i]; // Update the last message in chat array setChatMessages((prev) => { const updated = [...prev]; updated[updated.length - 1] = { sender: "bot", text: currentText }; return updated; }); await new Promise((res) => setTimeout(res, 45)); // stream pacing } }; const handleSendCustomMessage = (e: React.FormEvent) => { e.preventDefault(); if (!chatInput.trim() || isBotTyping) return; const userText = chatInput; setChatMessages((prev) => [...prev, { sender: "user", text: userText }]); setChatInput(""); // Simulate standard answers let reply = lang === "tr" ? "Sorduğunuz soruyu Zenith AI semantik motorumuzda işledim. Bilgi tabanınızda bu veriye ulaştım: Zenith AI, 240ms gibi rekor bir sürede doğrulanmış yanıtlar verir." : "I processed your query in our Zenith semantic cognitive engine. According to your synced documents: Zenith AI operates in a sub-240ms timeframe with verified responses."; if (userText.toLowerCase().includes("hız") || userText.toLowerCase().includes("speed") || userText.toLowerCase().includes("ms")) { reply = lang === "tr" ? "Zenith AI, özel geliştirilmiş hafif LLM ara katmanı sayesinde web widgetlarında ve API uçlarında 240 milisaniyenin altında anlık kelime akışı başlatır." : "Zenith AI features an optimized micro-model layer initiating word streams on web frontends in under 240 milliseconds."; } else if (userText.toLowerCase().includes("hata") || userText.toLowerCase().includes("error") || userText.toLowerCase().includes("halüs")) { reply = lang === "tr" ? "%99.4 oranında doğrulanmış yanıt modelimiz, veri tabanınız dışındaki konulara uydurma cevaplar üretilmesini engeller ve anında gerçek bir insana aktarım sunar." : "Our 99.4% accuracy threshold prevents arbitrary generation on out-of-bounds topics, offering direct failover to human support."; } triggerStreamingResponse(reply); }; const handleSuggestionClick = (key: string, label: string) => { if (isBotTyping) return; setChatMessages((prev) => [...prev, { sender: "user", text: label }]); const responseText = mockResponses[lang][key]; triggerStreamingResponse(responseText); }; // Terminal Indexing Simulator const runTerminalSimulation = async () => { if (isTerminalIndexing) return; setIsTerminalIndexing(true); setTerminalLogs([]); const logs = lang === "tr" ? [ "⚡ Zenith AI Cognitive Indexer v2.0 başlatıldı...", "🔗 Bağlantı taranıyor: https://docs.yourcompany.com", "📂 Bulunan alt dokümanlar: /api-reference, /installation, /customization", "🧠 Semantik parçalama algoritması yükleniyor (Chunk size: 512, overlap: 64)...", "📦 Parçalanan doküman sayısı: 184.", "🧬 Vektör gömmeleri hesaplanıyor (OpenAI text-embedding-3-small)...", "💾 Veriler Zenith Vector Cloud veritabanına kaydedildi.", "🟢 Bilgi tabanı başarıyla indekslendi. 240ms anlık sorgulara hazır!" ] : [ "⚡ Zenith AI Cognitive Indexer v2.0 active...", "🔗 Scanning core connection: https://docs.yourcompany.com", "📂 Found sub-documents: /api-reference, /installation, /customization", "🧠 Launching semantic chunking parser (Chunk size: 512, overlap: 64)...", "📦 Indexed block count: 184.", "🧬 Computing vector dimensional weights (OpenAI text-embedding-3-small)...", "💾 Synced indices with Zenith Vector Cloud database.", "🟢 Knowledge base indexed successfully! Sub-240ms queries ready." ]; for (let i = 0; i < logs.length; i++) { setTerminalLogs((prev) => [...prev, logs[i]]); await new Promise((res) => setTimeout(res, 600)); } setIsTerminalIndexing(false); }; // Modal Generator Script const handleGenerateScript = (e: React.FormEvent) => { e.preventDefault(); if (!userUrl.trim() || !userEmail.trim()) return; setIsGenerating(true); setTimeout(() => { const cleanUrl = userUrl.replace(/https?:\/\/(www\.)?/, "").split("/")[0]; const code = `\n\n`; setGeneratedScript(code); setIsGenerating(false); }, 1200); }; const handleCopyCode = () => { navigator.clipboard.writeText(generatedScript); setIsCopied(true); setTimeout(() => setIsCopied(false), 2000); }; // Auto-scroll for chat useEffect(() => { chatEndRef.current?.scrollIntoView({ behavior: "smooth" }); }, [chatMessages, isBotTyping]); // Auto-scroll for terminal useEffect(() => { terminalEndRef.current?.scrollIntoView({ behavior: "smooth" }); }, [terminalLogs]); return (
{/* Custom Global Styles for fonts & animations */} {/* Decorative Ambient Background */}
{/* ── HEADER / NAVBAR ── */}
{/* ── HERO & CONVERSATIONAL SANDBOX GRID ── */}
{/* Left: Text Elements */}
{t.badge}

{t.heroTitle1}
{t.heroTitle2}

{t.heroDesc}

{t.exploreBtn}
{/* Quick Stats Grid */}
{data.istatistikler.map((stat, i) => (
{stat.deger} {stat.etiket.substring(0, 15)}...
))}
{/* Right: Conversational UI Preview Sandbox */}
{/* Chat Header */}
🧬
{t.sandboxTitle} {t.statusOnline}
{/* Chat Messages Log */}
{chatMessages.map((msg, i) => (
{msg.text}
))} {/* Bot Typing Indicator */} {isBotTyping && (
{t.typing}
)}
{/* Suggested Questions Chips */}
{/* Chat Input Area */}
setChatInput(e.target.value)} disabled={isBotTyping} placeholder={t.inputPlaceholder} className="flex-1 bg-zinc-950 border border-zinc-800/80 rounded-xl px-4 py-3 text-xs text-white focus:outline-none focus:border-violet-500 transition-all placeholder-zinc-600 disabled:opacity-50" />
{/* ── STREAMING TEXT / INDEXING TERMINAL WIDGET ── */}
💻

{t.terminalTitle}

{lang === "tr" ? "Zenith AI, arka planda web sitelerinizi semantik kütüphanelere ayrıştırırken eşzamanlı bir tarama yürütür. Kod bloklarını simüle edin ve veri indekslemeyi canlı izleyin." : "Zenith AI runs synchronous crawlers that dissect pages into semantic vector models. Simulate knowledge indexing in real-time below."}

{/* Terminal Console Card */}
{/* Header controls */}
sh - zenith_indexer.sh
{/* Scrollable logs */}
{terminalLogs.length === 0 ? ( {lang === "tr" ? "İndeksleme simülatörünü başlatmak için sol taraftaki butona basın." : "Click the button to simulate the semantic vector indexer."} ) : ( terminalLogs.map((log, i) => (
{log}
)) )}
{/* ── BENTO FEATURE CARDS Grid ── */}

{t.featuresHeader}

{t.featuresSub}

{/* Bento Grid */}
{/* Card 1: 8cols top */}
{/* Ambient hover glow */}

{data.hizmetler[0].baslik}

{data.hizmetler[0].aciklama}

{/* Card 2: 4cols top */}

{data.hizmetler[1].baslik}

{data.hizmetler[1].aciklama}

{/* Card 3: 4cols bottom */}

{data.hizmetler[2].baslik}

{data.hizmetler[2].aciklama}

{/* Card 4: 8cols bottom */}

{data.hizmetler[3].baslik}

{data.hizmetler[3].aciklama}

{/* ── INTEGRATIONS SCROLLING LOGO MARQUEE ── */}

{t.integrationsHeader}

{t.integrationsSub}

{/* Scrolling logos container */}
{[1, 2].map((loop) => (
{/* Integration Logo: Slack */}
SLACK
{/* Integration Logo: WhatsApp */}
WHATSAPP
{/* Integration Logo: Notion */}
N NOTION
{/* Integration Logo: Discord */}
DISCORD
{/* Integration Logo: Zendesk */}
Z ZENDESK
))}
{/* ── PRICING TIER SECTION ── */}

{t.pricingHeader}

{t.pricingSub}

{/* Pricing Cards */}
{/* Plan 1: Free */}
Tier 01

Sandbox

{lang === "tr" ? "Yapay zekayı kendi web sitenizde test edin." : "Test conversational intelligence live on your host."}

$0 / {lang === "tr" ? "Sonsuza Dek" : "Forever"}
  • ✓ 1 Website Connection
  • ✓ 5 Semantic Chunk Indexing
  • ✓ JS Embed Widget
{/* Plan 2: Pro (Active Glow) */}
POPULAR
Tier 02

Growth

{lang === "tr" ? "Küçük ekipler ve büyüyen SaaS markaları için." : "Ideal support scale for early corporate integrations."}

$49 / {lang === "tr" ? "Aylık" : "Month"}
  • ✓ 3 Website Connections
  • ✓ 200+ Pages Semantic Indexing
  • ✓ Slack & WhatsApp channels
  • ✓ Custom Brand colors & logo
{/* Plan 3: Enterprise */}
Tier 03

Corporate

{lang === "tr" ? "Sınırsız sunucu kapasitesi ve KVKK entegrasyonu." : "Full GDPR validation and cluster node orchestration."}

Custom
  • ✓ Unlimited data sync loops
  • ✓ Dedicated Cluster Node
  • ✓ Personal Support Sommelier
  • ✓ Custom Model fine-tuning
{/* ── CLIENT TESTIMONIALS ── */}

{t.reviewsHeader}

{t.reviewsSub}

{/* Testimonial Cards */}
{data.yorumlar.map((review, i) => (
{review.emoji}
{review.yazar} {review.tarih}

"{review.yorum}"

))}
{/* ── BOTTOM CALL TO ACTION BANNER ── */}
{/* Purple decorative spotlight */}

{lang === "tr" ? "Müşteri Destek Dönüşümünü Katlayın" : "Double your customer conversion loop"}

{lang === "tr" ? "Semantik taranan indeksler sayesinde Zenith AI sıfır halüsinasyon riski taşır. Saniyeler içinde kurun ve ekibinizi otomatik yapay zekâ ile özgürleştirin." : "Thanks to parsed semantic indexing, Zenith AI delivers responses with zero hallucination. Install in under 60 seconds and automate support loops."}

{/* ── FOOTER ── */} {/* ── INTERACTIVE SCRIPTS MODAL (SANDBOX INTEGRATOR) ── */} {showModal && ( {/* Close Button */} {/* Title & Badge */}
🧬

{t.tryModalTitle}

{t.tryModalDesc}

{/* Generative Embed Code Form */} {generatedScript === "" ? (
setUserUrl(e.target.value)} placeholder="e.g., https://yourbrand.com" className="w-full px-4 py-3 rounded-xl border border-zinc-800 bg-zinc-950 text-xs text-white placeholder-zinc-700 focus:outline-none focus:border-violet-500 transition-all font-semibold" />
setUserEmail(e.target.value)} placeholder="e.g., tech@yourbrand.com" className="w-full px-4 py-3 rounded-xl border border-zinc-800 bg-zinc-950 text-xs text-white placeholder-zinc-700 focus:outline-none focus:border-violet-500 transition-all font-semibold" />
) : ( // Display Embed Script

{t.tokenTitle}

{t.tokenDesc}

{generatedScript}
)} )}
); }