"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 <body> 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 </body> tag of your website code.",
    copyBtn: "Copy Script",
    copied: "Copied!",
    closeBtn: "Close"
  }
};

const mockResponses: Record<string, Record<string, string>> = {
  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<Message[]>([
    { 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<HTMLDivElement>(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<string[]>([]);
  const [isTerminalIndexing, setIsTerminalIndexing] = useState(false);
  const terminalEndRef = useRef<HTMLDivElement>(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 = `<!-- Zenith AI Conversational Widget Embed -->\n<script>\n  window.ZenithConfig = {\n    token: "zen_${Math.random().toString(36).substring(2, 9)}",\n    domain: "${cleanUrl}"\n  };\n</script>\n<script src="https://cdn.zenithai.com/widget.js" async></script>`;
      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 (
    <div className="min-h-screen bg-[#070709] text-zinc-100 overflow-x-hidden relative selection:bg-violet-600 selection:text-white font-sans antialiased">
      
      {/* Custom Global Styles for fonts & animations */}
      <style jsx global>{`
        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');
        body {
          font-family: 'Plus Jakarta Sans', sans-serif;
        }
        @keyframes marquee {
          0% { transform: translateX(0%); }
          100% { transform: translateX(-50%); }
        }
        .animate-marquee {
          display: flex;
          width: max-content;
          animation: marquee 25s linear infinite;
        }
        .animate-marquee:hover {
          animation-play-state: paused;
        }
      `}</style>

      {/* Decorative Ambient Background */}
      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-[1400px] h-[550px] bg-[radial-gradient(ellipse_60%_40%_at_50%_0%,rgba(139,92,246,0.14),transparent)] pointer-events-none z-0" />
      <div className="absolute top-[800px] -left-[200px] w-[500px] h-[500px] bg-[radial-gradient(circle_at_center,rgba(139,92,246,0.03),transparent_70%)] pointer-events-none z-0" />
      <div className="absolute bottom-[200px] -right-[200px] w-[600px] h-[600px] bg-[radial-gradient(circle_at_center,rgba(20,184,166,0.03),transparent_70%)] pointer-events-none z-0" />

      {/* ── HEADER / NAVBAR ── */}
      <header className="fixed top-4 left-4 right-4 z-40">
        <nav className="max-w-6xl mx-auto bg-zinc-900/50 backdrop-blur-xl border border-zinc-800/60 rounded-2xl px-6 py-3.5 flex items-center justify-between shadow-[0_12px_30px_rgba(0,0,0,0.5)]">
          <div className="flex items-center gap-3">
            <span className="w-8 h-8 rounded-lg bg-gradient-to-br from-violet-600 to-indigo-700 flex items-center justify-center text-white text-base font-bold shadow-md shadow-violet-500/20">
              🧬
            </span>
            <span className="font-extrabold text-sm sm:text-base tracking-wide bg-gradient-to-r from-zinc-50 to-zinc-300 bg-clip-text text-transparent uppercase">
              {data.firma.adi}
            </span>
          </div>

          {/* Navigation Links */}
          <div className="hidden md:flex items-center gap-8 text-xs font-semibold text-zinc-400">
            <a href="#features" className="hover:text-violet-400 transition-colors">{t.features}</a>
            <a href="#simulator" className="hover:text-violet-400 transition-colors">{t.simulator}</a>
            <a href="#integrations" className="hover:text-violet-400 transition-colors">{t.integrations}</a>
            <a href="#pricing" className="hover:text-violet-400 transition-colors">{t.pricing}</a>
          </div>

          <div className="flex items-center gap-4">
            {/* Lang Switcher */}
            <div className="flex bg-zinc-950 border border-zinc-800 p-1 rounded-lg text-[10px] font-black tracking-wider uppercase select-none">
              <button 
                onClick={() => setLang("tr")}
                className={`px-2 py-1 rounded transition-all cursor-pointer ${lang === "tr" ? "bg-violet-600 text-white" : "text-zinc-500 hover:text-zinc-300"}`}
              >
                TR
              </button>
              <button 
                onClick={() => setLang("en")}
                className={`px-2 py-1 rounded transition-all cursor-pointer ${lang === "en" ? "bg-violet-600 text-white" : "text-zinc-500 hover:text-zinc-300"}`}
              >
                EN
              </button>
            </div>

            {/* Header CTA */}
            <button 
              onClick={() => setShowModal(true)}
              className="bg-zinc-100 hover:bg-white text-zinc-950 font-bold text-[11px] tracking-wide px-4 py-2 rounded-xl transition-all cursor-pointer active:scale-98"
            >
              {t.tryNow}
            </button>
          </div>
        </nav>
      </header>

      {/* ── HERO & CONVERSATIONAL SANDBOX GRID ── */}
      <section className="relative z-10 max-w-6xl mx-auto pt-32 pb-20 px-6">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center min-h-[550px]">
          
          {/* Left: Text Elements */}
          <div className="lg:col-span-6 space-y-6 text-center lg:text-left">
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-violet-500/20 bg-violet-500/5 text-violet-400 text-[10px] font-black tracking-widest uppercase">
              <span className="w-1.5 h-1.5 rounded-full bg-violet-400 animate-pulse" />
              {t.badge}
            </div>

            <h1 className="text-3xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight leading-[1.08] text-white">
              {t.heroTitle1}
              <br />
              <span className="bg-gradient-to-r from-violet-400 via-indigo-300 to-teal-300 bg-clip-text text-transparent">
                {t.heroTitle2}
              </span>
            </h1>

            <p className="text-zinc-400 text-sm sm:text-base leading-relaxed font-medium max-w-xl mx-auto lg:mx-0">
              {t.heroDesc}
            </p>

            <div className="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4 pt-4">
              <button 
                onClick={() => setShowModal(true)}
                className="w-full sm:w-auto bg-gradient-to-r from-violet-600 to-indigo-600 hover:from-violet-500 hover:to-indigo-500 text-white font-extrabold text-[12px] tracking-wider uppercase px-8 py-4.5 rounded-2xl transition-all cursor-pointer active:scale-98 shadow-lg shadow-violet-600/15"
              >
                {t.startBtn}
              </button>
              <a 
                href="#integrations"
                className="w-full sm:w-auto text-center border border-zinc-800 bg-zinc-950/40 hover:bg-zinc-900 text-zinc-300 font-extrabold text-[12px] tracking-wider uppercase px-8 py-4.5 rounded-2xl transition-all cursor-pointer"
              >
                {t.exploreBtn}
              </a>
            </div>

            {/* Quick Stats Grid */}
            <div className="grid grid-cols-3 gap-6 pt-10 border-t border-zinc-900 max-w-md mx-auto lg:mx-0">
              {data.istatistikler.map((stat, i) => (
                <div key={i} className="text-center lg:text-left">
                  <span className="block text-xl sm:text-2xl font-extrabold text-white">{stat.deger}</span>
                  <span className="block text-[10px] text-zinc-500 font-bold uppercase tracking-wider mt-1">{stat.etiket.substring(0, 15)}...</span>
                </div>
              ))}
            </div>
          </div>

          {/* Right: Conversational UI Preview Sandbox */}
          <div id="simulator" className="lg:col-span-6 flex flex-col items-center">
            <div className="w-full max-w-[430px] h-[520px] bg-zinc-950/80 border border-zinc-800/80 rounded-3xl overflow-hidden shadow-[0_20px_50px_rgba(0,0,0,0.8)] relative flex flex-col z-10 backdrop-blur-xl">
              
              {/* Chat Header */}
              <div className="bg-zinc-900/60 border-b border-zinc-800/60 px-5 py-4 flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <div className="w-9 h-9 rounded-xl bg-violet-600/10 border border-violet-500/20 flex items-center justify-center text-lg shadow-sm">
                    🧬
                  </div>
                  <div>
                    <span className="block font-bold text-xs text-white uppercase tracking-wider">{t.sandboxTitle}</span>
                    <span className="block text-[9px] text-teal-400 font-semibold tracking-wide flex items-center gap-1">
                      <span className="w-1.5 h-1.5 rounded-full bg-teal-400 animate-pulse" />
                      {t.statusOnline}
                    </span>
                  </div>
                </div>
                <div className="flex items-center gap-1.5">
                  <span className="w-1.5 h-1.5 rounded-full bg-zinc-700" />
                  <span className="w-1.5 h-1.5 rounded-full bg-zinc-700" />
                </div>
              </div>

              {/* Chat Messages Log */}
              <div className="flex-1 overflow-y-auto p-5 space-y-4 text-xs scrollbar-none">
                {chatMessages.map((msg, i) => (
                  <div 
                    key={i} 
                    className={`flex ${msg.sender === "user" ? "justify-end" : "justify-start"}`}
                  >
                    <div 
                      className={`max-w-[80%] rounded-2xl px-4 py-3 leading-relaxed shadow-sm ${
                        msg.sender === "user" 
                          ? "bg-violet-600 text-white rounded-br-none" 
                          : "bg-zinc-900 border border-zinc-800/60 text-zinc-300 rounded-bl-none"
                      }`}
                    >
                      {msg.text}
                    </div>
                  </div>
                ))}

                {/* Bot Typing Indicator */}
                {isBotTyping && (
                  <div className="flex justify-start">
                    <div className="bg-zinc-900 border border-zinc-800/60 rounded-2xl rounded-bl-none px-4 py-3 flex items-center gap-1.5">
                      <span className="text-[10px] text-zinc-500 italic mr-1">{t.typing}</span>
                      <span className="w-1 h-1 rounded-full bg-violet-500 animate-bounce" style={{ animationDelay: "0ms" }} />
                      <span className="w-1 h-1 rounded-full bg-violet-500 animate-bounce" style={{ animationDelay: "150ms" }} />
                      <span className="w-1 h-1 rounded-full bg-violet-500 animate-bounce" style={{ animationDelay: "300ms" }} />
                    </div>
                  </div>
                )}
                
                <div ref={chatEndRef} />
              </div>

              {/* Suggested Questions Chips */}
              <div className="px-5 py-2.5 bg-zinc-950/40 border-t border-zinc-900/60 flex flex-wrap gap-2">
                <button 
                  onClick={() => handleSuggestionClick("suggest1", t.suggest1)}
                  disabled={isBotTyping}
                  className="text-[10px] font-bold text-zinc-400 bg-zinc-900 border border-zinc-800 hover:border-violet-500/40 hover:text-white px-3 py-1.5 rounded-full transition-all cursor-pointer shrink-0 disabled:opacity-50"
                >
                  {t.suggest1}
                </button>
                <button 
                  onClick={() => handleSuggestionClick("suggest2", t.suggest2)}
                  disabled={isBotTyping}
                  className="text-[10px] font-bold text-zinc-400 bg-zinc-900 border border-zinc-800 hover:border-violet-500/40 hover:text-white px-3 py-1.5 rounded-full transition-all cursor-pointer shrink-0 disabled:opacity-50"
                >
                  {t.suggest2}
                </button>
                <button 
                  onClick={() => handleSuggestionClick("suggest3", t.suggest3)}
                  disabled={isBotTyping}
                  className="text-[10px] font-bold text-zinc-400 bg-zinc-900 border border-zinc-800 hover:border-violet-500/40 hover:text-white px-3 py-1.5 rounded-full transition-all cursor-pointer shrink-0 disabled:opacity-50"
                >
                  {t.suggest3}
                </button>
              </div>

              {/* Chat Input Area */}
              <form onSubmit={handleSendCustomMessage} className="p-4 bg-zinc-900/40 border-t border-zinc-800/40 flex items-center gap-2">
                <input 
                  type="text" 
                  value={chatInput}
                  onChange={(e) => 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"
                />
                <button 
                  type="submit"
                  disabled={isBotTyping || !chatInput.trim()}
                  className="bg-violet-600 hover:bg-violet-500 disabled:bg-zinc-800 text-white w-9 h-9 rounded-xl flex items-center justify-center shrink-0 transition-all cursor-pointer"
                >
                  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2.5">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
                  </svg>
                </button>
              </form>
            </div>
          </div>
        </div>
      </section>

      {/* ── STREAMING TEXT / INDEXING TERMINAL WIDGET ── */}
      <section className="relative z-10 max-w-6xl mx-auto py-16 px-6">
        <div className="bg-zinc-950/60 border border-zinc-800/75 rounded-3xl p-6 sm:p-8 flex flex-col md:flex-row gap-8 items-center">
          
          <div className="flex-1 space-y-4 text-center md:text-left">
            <div className="w-12 h-12 rounded-2xl bg-zinc-900 border border-zinc-800 flex items-center justify-center text-xl">
              💻
            </div>
            <h3 className="text-xl sm:text-2xl font-black text-white uppercase tracking-wide">
              {t.terminalTitle}
            </h3>
            <p className="text-zinc-400 text-xs sm:text-sm leading-relaxed max-w-md">
              {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."}
            </p>
            <button 
              onClick={runTerminalSimulation}
              disabled={isTerminalIndexing}
              className="bg-zinc-900 hover:bg-zinc-800 disabled:opacity-50 text-zinc-300 font-extrabold text-[10px] tracking-wider uppercase px-6 py-3.5 rounded-xl border border-zinc-800 transition-all cursor-pointer inline-flex items-center gap-2"
            >
              {isTerminalIndexing && (
                <svg className="animate-spin h-3.5 w-3.5 text-zinc-400" fill="none" viewBox="0 0 24 24">
                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
                </svg>
              )}
              {t.terminalRunBtn}
            </button>
          </div>

          {/* Terminal Console Card */}
          <div className="w-full md:w-[500px] h-[260px] bg-black border border-zinc-900 rounded-2xl overflow-hidden p-5 flex flex-col font-mono text-[11px] text-zinc-400 shadow-2xl">
            {/* Header controls */}
            <div className="flex items-center justify-between border-b border-zinc-900 pb-3 mb-3">
              <div className="flex items-center gap-1.5">
                <span className="w-2.5 h-2.5 rounded-full bg-red-500/40" />
                <span className="w-2.5 h-2.5 rounded-full bg-yellow-500/40" />
                <span className="w-2.5 h-2.5 rounded-full bg-green-500/40" />
              </div>
              <span className="text-[9px] text-zinc-600 font-bold uppercase tracking-wider">sh - zenith_indexer.sh</span>
            </div>

            {/* Scrollable logs */}
            <div className="flex-1 overflow-y-auto space-y-2 text-left scrollbar-none pr-1">
              {terminalLogs.length === 0 ? (
                <span className="text-zinc-600 italic">{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."}</span>
              ) : (
                terminalLogs.map((log, i) => (
                  <div 
                    key={i} 
                    className={`leading-relaxed ${
                      log.startsWith("🟢") 
                        ? "text-teal-400 font-bold" 
                        : log.startsWith("⚡") 
                          ? "text-violet-400" 
                          : "text-zinc-400"
                    }`}
                  >
                    {log}
                  </div>
                ))
              )}
              <div ref={terminalEndRef} />
            </div>
          </div>

        </div>
      </section>

      {/* ── BENTO FEATURE CARDS Grid ── */}
      <section id="features" className="relative z-10 max-w-6xl mx-auto py-20 px-6 border-t border-zinc-900">
        <div className="text-center max-w-2xl mx-auto mb-16 space-y-4">
          <h2 className="text-2xl sm:text-4xl font-extrabold text-white tracking-wide uppercase">
            {t.featuresHeader}
          </h2>
          <p className="text-zinc-400 text-xs sm:text-sm max-w-md mx-auto leading-relaxed">
            {t.featuresSub}
          </p>
        </div>

        {/* Bento Grid */}
        <div className="grid grid-cols-1 md:grid-cols-12 gap-6">
          
          {/* Card 1: 8cols top */}
          <div className="md:col-span-8 bg-zinc-950/40 border border-zinc-800/60 rounded-3xl p-8 hover:border-violet-500/20 hover:bg-zinc-950/60 transition-all duration-300 relative group overflow-hidden">
            {/* Ambient hover glow */}
            <div className="absolute inset-0 bg-[radial-gradient(ellipse_200px_120px_at_10%_10%,rgba(139,92,246,0.06),transparent)] opacity-0 group-hover:opacity-100 transition-all" />
            
            <div className="w-12 h-12 rounded-2xl bg-zinc-900 border border-zinc-800 flex items-center justify-center text-lg mb-6 text-violet-400">
              <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5">
                <path strokeLinecap="round" strokeLinejoin="round" d="M12 18v-5.25m0 0a3 3 0 0 0-3-3H9.75a3 3 0 0 0-3-3H6m12 11.25V9.75m0 0a3 3 0 0 0-3-3H14.25a3 3 0 0 0-3-3H12" />
              </svg>
            </div>
            
            <h4 className="text-lg font-bold text-white uppercase tracking-wider mb-2">{data.hizmetler[0].baslik}</h4>
            <p className="text-zinc-400 text-xs sm:text-sm leading-relaxed max-w-xl">{data.hizmetler[0].aciklama}</p>
          </div>

          {/* Card 2: 4cols top */}
          <div className="md:col-span-4 bg-zinc-950/40 border border-zinc-800/60 rounded-3xl p-8 hover:border-violet-500/20 hover:bg-zinc-950/60 transition-all duration-300 relative group overflow-hidden">
            <div className="absolute inset-0 bg-[radial-gradient(ellipse_150px_100px_at_10%_10%,rgba(20,184,166,0.06),transparent)] opacity-0 group-hover:opacity-100 transition-all" />
            
            <div className="w-12 h-12 rounded-2xl bg-zinc-900 border border-zinc-800 flex items-center justify-center text-lg mb-6 text-teal-400">
              <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5">
                <path strokeLinecap="round" strokeLinejoin="round" d="M7.5 12h9m-9 3.75h9m-9 3.75h9M3.75 6.75h16.5M3.75 12h.008v.008H3.75V12Zm0 3.75h.008v.008H3.75v-.008Zm0 3.75h.008v.008H3.75v-.008Z" />
              </svg>
            </div>

            <h4 className="text-lg font-bold text-white uppercase tracking-wider mb-2">{data.hizmetler[1].baslik}</h4>
            <p className="text-zinc-400 text-xs sm:text-sm leading-relaxed">{data.hizmetler[1].aciklama}</p>
          </div>

          {/* Card 3: 4cols bottom */}
          <div className="md:col-span-4 bg-zinc-950/40 border border-zinc-800/60 rounded-3xl p-8 hover:border-violet-500/20 hover:bg-zinc-950/60 transition-all duration-300 relative group overflow-hidden">
            <div className="absolute inset-0 bg-[radial-gradient(ellipse_150px_100px_at_10%_10%,rgba(139,92,246,0.06),transparent)] opacity-0 group-hover:opacity-100 transition-all" />
            
            <div className="w-12 h-12 rounded-2xl bg-zinc-900 border border-zinc-800 flex items-center justify-center text-lg mb-6 text-indigo-400">
              <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5">
                <path strokeLinecap="round" strokeLinejoin="round" d="M9.53 16.122A3 3 0 0 0 11.75 17.5h.5a3 3 0 0 0 2.22-1.378M9.53 16.122A3 3 0 0 1 11.75 15h.5a3 3 0 0 1 2.22 1.122M9.53 16.122h5.19M12 2.25V5.25m0 13.5v3m9.75-9.75h-3m-13.5 0H2.25m16.243-6.243l-2.122 2.122M7.636 16.364l-2.122 2.122m13.728 0l-2.122-2.122M7.636 7.636L5.514 5.514" />
              </svg>
            </div>

            <h4 className="text-lg font-bold text-white uppercase tracking-wider mb-2">{data.hizmetler[2].baslik}</h4>
            <p className="text-zinc-400 text-xs sm:text-sm leading-relaxed">{data.hizmetler[2].aciklama}</p>
          </div>

          {/* Card 4: 8cols bottom */}
          <div className="md:col-span-8 bg-zinc-950/40 border border-zinc-800/60 rounded-3xl p-8 hover:border-violet-500/20 hover:bg-zinc-950/60 transition-all duration-300 relative group overflow-hidden">
            <div className="absolute inset-0 bg-[radial-gradient(ellipse_200px_120px_at_10%_10%,rgba(20,184,166,0.06),transparent)] opacity-0 group-hover:opacity-100 transition-all" />
            
            <div className="w-12 h-12 rounded-2xl bg-zinc-900 border border-zinc-800 flex items-center justify-center text-lg mb-6 text-violet-400">
              <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5">
                <path strokeLinecap="round" strokeLinejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
              </svg>
            </div>

            <h4 className="text-lg font-bold text-white uppercase tracking-wider mb-2">{data.hizmetler[3].baslik}</h4>
            <p className="text-zinc-400 text-xs sm:text-sm leading-relaxed max-w-xl">{data.hizmetler[3].aciklama}</p>
          </div>

        </div>
      </section>

      {/* ── INTEGRATIONS SCROLLING LOGO MARQUEE ── */}
      <section id="integrations" className="relative z-10 py-16 bg-zinc-950/40 border-y border-zinc-900 overflow-hidden">
        <div className="max-w-6xl mx-auto px-6 mb-12 text-center md:text-left flex flex-col md:flex-row items-center justify-between gap-6">
          <div>
            <h2 className="text-2xl sm:text-3xl font-extrabold text-white tracking-wide uppercase">{t.integrationsHeader}</h2>
            <p className="text-zinc-400 text-xs sm:text-sm leading-relaxed mt-2 max-w-md">{t.integrationsSub}</p>
          </div>
        </div>

        {/* Scrolling logos container */}
        <div className="w-full relative flex overflow-hidden">
          <div className="animate-marquee flex items-center gap-16 py-3">
            {[1, 2].map((loop) => (
              <div key={loop} className="flex items-center gap-16 select-none">
                
                {/* Integration Logo: Slack */}
                <div className="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-200 cursor-default">
                  <svg className="w-6 h-6 shrink-0" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523 2.528 2.528 0 0 1-2.522-2.523 2.528 2.528 0 0 1 2.522-2.52h2.52v2.52zm1.261 0a2.528 2.528 0 0 1 2.52-2.52h5.043a2.528 2.528 0 0 1 2.522 2.52v5.042a2.528 2.528 0 0 1-2.522 2.52H8.824a2.528 2.528 0 0 1-2.52-2.52v-5.042zM8.824 5.043a2.528 2.528 0 0 1-2.52-2.522A2.528 2.528 0 0 1 8.824 0a2.528 2.528 0 0 1 2.52 2.521v2.522h-2.52zm0 1.261a2.528 2.528 0 0 1 2.52 2.52v5.043a2.528 2.528 0 0 1-2.52 2.522H3.782a2.528 2.528 0 0 1-2.52-2.522V8.824a2.528 2.528 0 0 1 2.52-2.52h5.042zm10.134 3.782a2.528 2.528 0 0 1 2.52-2.521 2.528 2.528 0 0 1 2.522 2.521 2.528 2.528 0 0 1-2.522 2.52h-2.52v-2.52zm-1.262 0a2.528 2.528 0 0 1-2.52 2.52h-5.043a2.528 2.528 0 0 1-2.522-2.52V5.043a2.528 2.528 0 0 1 2.522-2.52h5.043a2.528 2.528 0 0 1 2.52 2.52v5.042zm-3.781 10.134a2.528 2.528 0 0 1 2.52 2.522 2.528 2.528 0 0 1-2.52 2.52 2.528 2.528 0 0 1-2.522-2.52v-2.522h2.522zm0-1.262a2.528 2.528 0 0 1-2.522-2.52v-5.043a2.528 2.528 0 0 1 2.522-2.52h5.042a2.528 2.528 0 0 1 2.52 2.52v5.043h-5.042z"/>
                  </svg>
                  <span className="text-sm font-bold tracking-wide">SLACK</span>
                </div>

                {/* Integration Logo: WhatsApp */}
                <div className="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-200 cursor-default">
                  <svg className="w-6 h-6 shrink-0" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946C.06 5.348 5.397.01 12.008.01c3.202.001 6.212 1.246 8.477 3.514 2.266 2.268 3.507 5.28 3.505 8.484-.004 6.657-5.34 11.997-11.953 11.997-2.005-.001-3.973-.502-5.73-1.45L0 24zm6.59-4.846c1.6.95 3.188 1.449 4.625 1.451 5.403.002 9.803-4.394 9.805-9.795.001-2.618-1.01-5.074-2.845-6.912-1.833-1.836-4.273-2.847-6.892-2.848-5.408 0-9.81 4.398-9.813 9.799-.001 1.702.463 3.361 1.34 4.8l-.996 3.636 3.776-.99zm11.166-5.414c-.307-.154-1.817-.897-2.097-.999-.28-.102-.484-.154-.688.154-.204.307-.79.997-.969 1.2-.178.204-.356.23-.663.077-1.185-.593-2.001-1.033-2.798-2.398-.21-.359.21-.334.6-.113.35.199.307.256.46.41.153.153.077.435-.038.64-.115.205-.688 1.664-.944 2.278-.249.597-.502.512-.688.502-.172-.009-.37-.01-.567-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.817-.743 2.072-1.46.255-.718.255-1.332.179-1.46-.077-.128-.28-.204-.587-.358z"/>
                  </svg>
                  <span className="text-sm font-bold tracking-wide">WHATSAPP</span>
                </div>

                {/* Integration Logo: Notion */}
                <div className="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-200 cursor-default">
                  <span className="text-xl shrink-0 font-black">N</span>
                  <span className="text-sm font-bold tracking-wide">NOTION</span>
                </div>

                {/* Integration Logo: Discord */}
                <div className="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-200 cursor-default">
                  <svg className="w-6 h-6 shrink-0" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.58 2.019 18.0619a.0724.0724 0 00.0287.0502 20.1049 20.1049 0 006.0023 3.03.0784.0784 0 00.0845-.0276c.462-.6308.8755-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057 13.1 13.1 0 01-1.8716-.8923.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286 19.9863 19.9863 0 006.003-3.03.0771.0771 0 00.0289-.0497c2.8122-4.9451 1.9837-9.455 1.0186-13.6896a.071.071 0 00-.0325-.0276zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9559-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0951 2.1568 2.419 0 1.3332-.9559 2.4189-2.1569 2.4189zm7.975 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.211 0 2.1756 1.0951 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189z"/>
                  </svg>
                  <span className="text-sm font-bold tracking-wide">DISCORD</span>
                </div>

                {/* Integration Logo: Zendesk */}
                <div className="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-200 cursor-default">
                  <span className="text-xl shrink-0 font-semibold font-serif">Z</span>
                  <span className="text-sm font-bold tracking-wide">ZENDESK</span>
                </div>

              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── PRICING TIER SECTION ── */}
      <section id="pricing" className="relative z-10 max-w-6xl mx-auto py-20 px-6">
        <div className="text-center max-w-2xl mx-auto mb-16 space-y-4">
          <h2 className="text-2xl sm:text-4xl font-extrabold text-white tracking-wide uppercase">{t.pricingHeader}</h2>
          <p className="text-zinc-400 text-xs sm:text-sm leading-relaxed max-w-md mx-auto">{t.pricingSub}</p>
        </div>

        {/* Pricing Cards */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 items-stretch max-w-5xl mx-auto">
          
          {/* Plan 1: Free */}
          <div className="bg-zinc-950/30 border border-zinc-900 rounded-3xl p-8 flex flex-col justify-between hover:border-zinc-800/80 transition-all">
            <div>
              <span className="text-zinc-500 font-mono text-[9px] font-black uppercase tracking-widest block mb-4">Tier 01</span>
              <h3 className="text-xl font-bold text-white uppercase tracking-wider mb-2">Sandbox</h3>
              <p className="text-zinc-500 text-xs mb-6">
                {lang === "tr" ? "Yapay zekayı kendi web sitenizde test edin." : "Test conversational intelligence live on your host."}
              </p>
              
              <div className="flex items-baseline gap-1.5 mb-6">
                <span className="text-3xl font-extrabold text-white">$0</span>
                <span className="text-zinc-600 text-xs font-semibold">/ {lang === "tr" ? "Sonsuza Dek" : "Forever"}</span>
              </div>

              <ul className="text-xs text-zinc-400 space-y-3.5 border-t border-zinc-900 pt-6">
                <li className="flex items-center gap-2.5">
                  <span className="text-teal-400">✓</span> 1 Website Connection
                </li>
                <li className="flex items-center gap-2.5">
                  <span className="text-teal-400">✓</span> 5 Semantic Chunk Indexing
                </li>
                <li className="flex items-center gap-2.5">
                  <span className="text-teal-400">✓</span> JS Embed Widget
                </li>
              </ul>
            </div>
            
            <button 
              onClick={() => setShowModal(true)}
              className="w-full bg-zinc-900 hover:bg-zinc-800 text-zinc-300 font-extrabold text-[10px] tracking-wider uppercase py-4 rounded-xl transition-all cursor-pointer mt-8"
            >
              {t.startBtn}
            </button>
          </div>

          {/* Plan 2: Pro (Active Glow) */}
          <div className="bg-zinc-950/70 border-2 border-violet-600/60 rounded-3xl p-8 flex flex-col justify-between hover:border-violet-600 transition-all relative shadow-[0_15px_40px_rgba(139,92,246,0.1)]">
            <span className="absolute top-4 right-4 bg-violet-600 text-white text-[8px] font-black px-2.5 py-1 rounded-full uppercase tracking-wider">
              POPULAR
            </span>
            
            <div>
              <span className="text-violet-400 font-mono text-[9px] font-black uppercase tracking-widest block mb-4">Tier 02</span>
              <h3 className="text-xl font-bold text-white uppercase tracking-wider mb-2">Growth</h3>
              <p className="text-zinc-400 text-xs mb-6">
                {lang === "tr" ? "Küçük ekipler ve büyüyen SaaS markaları için." : "Ideal support scale for early corporate integrations."}
              </p>
              
              <div className="flex items-baseline gap-1.5 mb-6">
                <span className="text-3xl font-extrabold text-white">$49</span>
                <span className="text-zinc-500 text-xs font-semibold">/ {lang === "tr" ? "Aylık" : "Month"}</span>
              </div>

              <ul className="text-xs text-zinc-300 space-y-3.5 border-t border-zinc-900 pt-6">
                <li className="flex items-center gap-2.5">
                  <span className="text-violet-400">✓</span> 3 Website Connections
                </li>
                <li className="flex items-center gap-2.5">
                  <span className="text-violet-400">✓</span> 200+ Pages Semantic Indexing
                </li>
                <li className="flex items-center gap-2.5">
                  <span className="text-violet-400">✓</span> Slack & WhatsApp channels
                </li>
                <li className="flex items-center gap-2.5">
                  <span className="text-violet-400">✓</span> Custom Brand colors & logo
                </li>
              </ul>
            </div>

            <button 
              onClick={() => setShowModal(true)}
              className="w-full bg-gradient-to-r from-violet-600 to-indigo-600 hover:from-violet-500 hover:to-indigo-500 text-white font-extrabold text-[10px] tracking-wider uppercase py-4 rounded-xl transition-all cursor-pointer mt-8"
            >
              {lang === "tr" ? "Hemen Başlat" : "Launch Now"}
            </button>
          </div>

          {/* Plan 3: Enterprise */}
          <div className="bg-zinc-950/30 border border-zinc-900 rounded-3xl p-8 flex flex-col justify-between hover:border-zinc-800/80 transition-all">
            <div>
              <span className="text-zinc-500 font-mono text-[9px] font-black uppercase tracking-widest block mb-4">Tier 03</span>
              <h3 className="text-xl font-bold text-white uppercase tracking-wider mb-2">Corporate</h3>
              <p className="text-zinc-500 text-xs mb-6">
                {lang === "tr" ? "Sınırsız sunucu kapasitesi ve KVKK entegrasyonu." : "Full GDPR validation and cluster node orchestration."}
              </p>
              
              <div className="flex items-baseline gap-1.5 mb-6">
                <span className="text-3xl font-extrabold text-white">Custom</span>
              </div>

              <ul className="text-xs text-zinc-400 space-y-3.5 border-t border-zinc-900 pt-6">
                <li className="flex items-center gap-2.5">
                  <span className="text-teal-400">✓</span> Unlimited data sync loops
                </li>
                <li className="flex items-center gap-2.5">
                  <span className="text-teal-400">✓</span> Dedicated Cluster Node
                </li>
                <li className="flex items-center gap-2.5">
                  <span className="text-teal-400">✓</span> Personal Support Sommelier
                </li>
                <li className="flex items-center gap-2.5">
                  <span className="text-teal-400">✓</span> Custom Model fine-tuning
                </li>
              </ul>
            </div>

            <button 
              onClick={() => setShowModal(true)}
              className="w-full bg-zinc-900 hover:bg-zinc-800 text-zinc-300 font-extrabold text-[10px] tracking-wider uppercase py-4 rounded-xl transition-all cursor-pointer mt-8"
            >
              {lang === "tr" ? "İletişime Geç" : "Talk to Sales"}
            </button>
          </div>

        </div>
      </section>

      {/* ── CLIENT TESTIMONIALS ── */}
      <section className="relative z-10 max-w-6xl mx-auto py-20 px-6 border-t border-zinc-900">
        <div className="text-center max-w-2xl mx-auto mb-16 space-y-4">
          <h2 className="text-2xl sm:text-4xl font-extrabold text-white tracking-wide uppercase">{t.reviewsHeader}</h2>
          <p className="text-zinc-400 text-xs sm:text-sm leading-relaxed max-w-md mx-auto">{t.reviewsSub}</p>
        </div>

        {/* Testimonial Cards */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
          {data.yorumlar.map((review, i) => (
            <div key={i} className="bg-zinc-950/40 border border-zinc-900 rounded-2xl p-7 text-left space-y-4 hover:border-zinc-800 transition-all">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-xl bg-zinc-900 border border-zinc-800 flex items-center justify-center text-lg">
                  {review.emoji}
                </div>
                <div>
                  <span className="block font-bold text-xs text-white uppercase tracking-wider">{review.yazar}</span>
                  <span className="block text-[9px] text-zinc-500 uppercase font-black tracking-widest mt-0.5">{review.tarih}</span>
                </div>
              </div>
              <p className="text-zinc-300 text-xs sm:text-sm leading-relaxed font-medium italic">
                "{review.yorum}"
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* ── BOTTOM CALL TO ACTION BANNER ── */}
      <section className="relative z-10 max-w-5xl mx-auto py-24 px-6 text-center">
        <div className="bg-gradient-to-br from-zinc-950 via-zinc-900 to-zinc-950 border border-violet-500/20 rounded-3xl p-10 sm:p-16 relative overflow-hidden shadow-2xl">
          {/* Purple decorative spotlight */}
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[350px] h-[350px] bg-violet-600/10 rounded-full blur-3xl pointer-events-none" />
          
          <h2 className="text-2xl sm:text-4xl lg:text-5xl font-black text-white leading-none uppercase tracking-wide mb-6">
            {lang === "tr" ? "Müşteri Destek Dönüşümünü Katlayın" : "Double your customer conversion loop"}
          </h2>
          <p className="text-zinc-400 text-xs sm:text-sm max-w-xl mx-auto leading-relaxed mb-10">
            {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."}
          </p>

          <button 
            onClick={() => setShowModal(true)}
            className="bg-zinc-100 hover:bg-white text-zinc-950 font-black text-[12px] tracking-wider uppercase px-8 py-4.5 rounded-2xl transition-all cursor-pointer shadow-lg active:scale-98"
          >
            {lang === "tr" ? "Destek Sistemini Güçlendir" : "Supercharge Support Now"}
          </button>
        </div>
      </section>

      {/* ── FOOTER ── */}
      <footer className="relative z-10 max-w-6xl mx-auto py-12 px-6 border-t border-zinc-900 flex flex-col md:flex-row items-center justify-between gap-8 text-xs text-zinc-500">
        <div className="space-y-3 text-center md:text-left">
          <div className="flex items-center justify-center md:justify-start gap-2">
            <span className="w-6 h-6 rounded-md bg-violet-600 flex items-center justify-center text-xs font-black text-white">Z</span>
            <span className="font-extrabold text-white tracking-wide uppercase">{data.firma.adi}</span>
          </div>
          <p className="max-w-xs leading-relaxed text-[11px]">
            {t.footerText}
          </p>
        </div>

        <div className="flex flex-col sm:flex-row items-center gap-6 font-semibold">
          <a href="#features" className="hover:text-zinc-300">{t.features}</a>
          <a href="#simulator" className="hover:text-zinc-300">{t.simulator}</a>
          <a href="#pricing" className="hover:text-zinc-300">{t.pricing}</a>
          <span>·</span>
          <span>{data.firma.sehir}</span>
        </div>
      </footer>

      {/* ── INTERACTIVE SCRIPTS MODAL (SANDBOX INTEGRATOR) ── */}
      <AnimatePresence>
        {showModal && (
          <motion.div 
            className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/85 backdrop-blur-md"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
          >
            <motion.div 
              className="bg-[#0b0b0f] border border-zinc-800 rounded-3xl p-6 sm:p-8 max-w-lg w-full relative shadow-2xl text-left"
              initial={{ scale: 0.95, y: 15 }}
              animate={{ scale: 1, y: 0 }}
              exit={{ scale: 0.95, y: 15 }}
            >
              {/* Close Button */}
              <button 
                onClick={() => {
                  setShowModal(false);
                  setGeneratedScript("");
                  setUserUrl("");
                  setUserEmail("");
                }}
                className="absolute top-6 right-6 w-8 h-8 rounded-full bg-zinc-950 border border-zinc-800/80 flex items-center justify-center text-zinc-500 hover:text-white transition-all cursor-pointer font-bold text-xs"
              >
                ✕
              </button>

              {/* Title & Badge */}
              <div className="w-12 h-12 rounded-xl bg-violet-600/10 border border-violet-500/20 flex items-center justify-center text-lg mb-6">
                🧬
              </div>

              <h3 className="text-xl font-bold text-white uppercase tracking-wider mb-2">
                {t.tryModalTitle}
              </h3>
              <p className="text-zinc-400 text-xs leading-relaxed mb-6">
                {t.tryModalDesc}
              </p>

              {/* Generative Embed Code Form */}
              {generatedScript === "" ? (
                <form onSubmit={handleGenerateScript} className="space-y-4">
                  <div>
                    <label className="block text-[9px] font-black text-zinc-500 mb-1.5 uppercase tracking-widest">{t.urlLabel}</label>
                    <input 
                      type="text" 
                      required
                      value={userUrl}
                      onChange={(e) => 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"
                    />
                  </div>
                  <div>
                    <label className="block text-[9px] font-black text-zinc-500 mb-1.5 uppercase tracking-widest">{t.emailLabel}</label>
                    <input 
                      type="email" 
                      required
                      value={userEmail}
                      onChange={(e) => 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"
                    />
                  </div>

                  <button 
                    type="submit"
                    disabled={isGenerating}
                    className="w-full bg-gradient-to-r from-violet-600 to-indigo-600 hover:from-violet-500 hover:to-indigo-500 text-white font-extrabold text-[10px] tracking-wider uppercase py-4.5 rounded-xl transition-all cursor-pointer mt-4 flex items-center justify-center gap-2"
                  >
                    {isGenerating && (
                      <svg className="animate-spin h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
                      </svg>
                    )}
                    {t.generateBtn}
                  </button>
                </form>
              ) : (
                // Display Embed Script
                <div className="space-y-4">
                  <h4 className="text-xs font-bold text-teal-400 uppercase tracking-wider flex items-center gap-1.5">
                    <span className="w-1.5 h-1.5 rounded-full bg-teal-400 animate-pulse" />
                    {t.tokenTitle}
                  </h4>
                  <p className="text-zinc-500 text-[11px] leading-relaxed">
                    {t.tokenDesc}
                  </p>

                  <div className="bg-black border border-zinc-900 rounded-xl p-4 font-mono text-[10px] text-zinc-400 relative overflow-hidden select-all leading-normal whitespace-pre-wrap text-left">
                    {generatedScript}
                  </div>

                  <div className="flex gap-3 mt-6">
                    <button 
                      onClick={handleCopyCode}
                      className="flex-1 bg-violet-600 hover:bg-violet-500 text-white font-extrabold text-[10px] tracking-wider uppercase py-4 rounded-xl transition-all cursor-pointer flex items-center justify-center gap-2"
                    >
                      {isCopied ? "✓" : "📋"} {isCopied ? t.copied : t.copyBtn}
                    </button>
                    <button 
                      onClick={() => {
                        setShowModal(false);
                        setGeneratedScript("");
                        setUserUrl("");
                        setUserEmail("");
                      }}
                      className="border border-zinc-800 bg-zinc-950/40 hover:bg-zinc-900 text-zinc-300 font-extrabold text-[10px] tracking-wider uppercase py-4 px-6 rounded-xl transition-all cursor-pointer"
                    >
                      {t.closeBtn}
                    </button>
                  </div>
                </div>
              )}

            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>

    </div>
  );
}
