"use client";

import { motion, AnimatePresence } from "framer-motion";
import { useRef, useState, useEffect } from "react";
import type { DemoData } from "@/data/demos";

const fadeUp = {
  hidden: { opacity: 0, y: 35 },
  show: { opacity: 1, y: 0, transition: { duration: 0.75, ease: [0.25, 0.46, 0.45, 0.94] as [number, number, number, number] } },
};

const stagger = {
  hidden: {},
  show: { transition: { staggerChildren: 0.1 } },
};

interface ChatMessage {
  sender: "bot" | "user";
  text: string;
}

const translations = {
  tr: {
    navSim: "AI Simülatörü",
    navInteg: "Entegrasyonlar",
    navFeatures: "Özellikler",
    navReviews: "Yorumlar",
    navPricing: "Planlar",
    signUp: "Kayıt Ol",
    badge: "VAATBOT COSMIC AI SAAS",
    heroTitlePart1: "SİTENİZE",
    heroTitlePart2: "AI CHATBOT",
    heroTitlePart3: "EKLEYİN",
    heroDesc: "Özel yapay zekayı 2 dakikadan kısa sürede sitenize entegre edin. Cybernetic botlarımız veri tabanlarınızdan, dökümanlarınızdan ve web bağlantılarınızdan doğrudan öğrenerek %100 doğru yanıtları garanti eder.",
    accuracyLabel: "HATA PAYI %0",
    accuracyText: "Zendesk, Notion ve web sitenizle eğitilerek sıfır halüsinasyon sağlar.",
    speedLabel: "3x DAHA HIZLI",
    speedText: "Slack, WhatsApp ve Web widget'larında 600ms altında yanıt süresi.",
    bounceLabel: "-20% ÇIKMA ORANI",
    bounceText: "Ziyaretçileri sayfada tutarak abone dönüşümlerini anında ikiye katlar.",
    getStartedFree: "Ücretsiz Başla",
    integrations: "Entegrasyonlar",
    platformsTitle: "Esnek Platformlar",
    platformsHeader: "ESNEK ENTEGRASYONLAR",
    platformsDesc: "Kanalları sorunsuz bir şekilde değiştirin. Yapay zeka sohbet robotunuzu tüm platformlara dakikalar içinde kurun.",
    tabWidget: "Web Chat Widget'ı",
    tabSlack: "Slack Çalışma Alanı",
    tabWhatsapp: "WhatsApp Business",
    scriptTitle: "HTML ENTEGRASYON KODU",
    scriptDesc: "Tek yapmanız gereken bu hafif script etiketini sitenizin gövdesine eklemektir. Tarayıcı önbelleğini destekler ve sıfır gecikme yükü getirir.",
    featuresTitle: "Premium Değerler",
    featuresHeader: "TEMEL ÖZELLİKLER",
    featuresDesc: "Binlerce SaaS girişimi ve kurumsal destek platformunun VaatBot altyapısını tercih etme nedenleri.",
    reviewsTitle: "Değerlendirmeler",
    reviewsHeader: "MUTLU MÜŞTERİLER",
    reviewsDesc: "Şirket kurucularının ve tasarımcıların otomatik destek sistemlerimiz hakkındaki yorumları.",
    pricingTitle: "Karşılaştırmalı Planlar",
    pricingHeader: "FİYATLANDIRMA PLANLARI",
    pricingDesc: "Ziyaretçiden aboneye dönüşüm akışını hızlandıracak şeffaf fiyatlandırma yapısı.",
    planFree: "Ücretsiz Paket",
    planFreeDesc: "Temel bir sohbet robotu eklemek isteyen girişimler için. 5 adede kadar web bağlantısını indeksler.",
    planGrowth: "Büyüme Paketi",
    planGrowthDesc: "Ölçeklenen işletmeler ve öncelikli destek için. Notion, Slack entegrasyonu ve özel markalama içerir.",
    planEnt: "Kurumsal Paket",
    planEntDesc: "KVKK uyumluluğu, şirket içi veri tabanları ve anlık senkronizasyon gerektiren kurumsal platformlar için.",
    bestValue: "EN POPÜLER",
    choosePlan: "PLANI SEÇ",
    month: "AYLIK",
    footerDesc: "Notion veri tabanlarını, API belgelerini ve destek makalelerini indeksleyerek 600 milisaniyenin altında doğrulanmış yanıt garantisi sunan derin kozmik AI sohbet asistanı.",
    privacyRegs: "Gizlilik Sözleşmesi",
    termsStay: "Kullanım Şartları",
    dismiss: "KAPAT",
    startIntegration: "ENTEGRASYONU BAŞLAT",
    sandboxToken: "Sandbox Anahtarı Oluşturuldu",
    webLabel: "Web Sitesi Adresi",
    emailLabel: "İletişim E-Postası",
    generate: "KODLARI ÜRET",
    welcomeMsg: "Merhaba! VaatBot AI'a hoş geldiniz. Bugün size nasıl yardımcı olabilirim?",
    welcomeHelp: "Bana 50+ dil desteğimizi, 600ms altındaki yanıt hızımızı veya %100 doğruluk oranımızı sorabilirsiniz!",
    botTyping: "Yazıyor...",
    inputPlaceholder: "Doğruluk, fiyatlar veya diller hakkında sorun...",
    readyToSupercharge: "DESTEK SİSTEMİNİZİ YAPAY ZEKA İLE GÜÇLENDİRMEYE HAZIR MISINIZ?",
    startIntegBtn: "ENTEGRASYONU ŞİMDİ BAŞLAT",
    customizerTitle: "Özel Markalama",
    customizerDesc: "Renkleri, isimleri, avatarları ve karşılama mesajlarını kurumsal kimliğinize göre tamamen uyarlayın.",
    languagesTitle: "50+ Dil Desteği",
    languagesDesc: "İngilizce, İspanyolca, Türkçe ve daha fazlasını kapsayan 50'den fazla dilde müşterilerinizle akıcı konuşun.",
    widgetsTitle: "Esnek Widget",
    widgetsDesc: "Temiz kopyala-yapıştır script etiketimizi veya özelleştirilebilir iframe kapsayıcılarımızı saniyeler içinde kurun.",
    industriesTitle: "Tüm Sektörler",
    industriesDesc: "E-ticaret, SaaS, Emlak, Sağlık Klinikleri ve Müşteri Destek kanalları için yüksek düzeyde optimize edilmiştir.",
  },
  en: {
    navSim: "AI Simulator",
    navInteg: "Integrations",
    navFeatures: "Core Features",
    navReviews: "Reviews",
    navPricing: "Plans",
    signUp: "Sign Up",
    badge: "VAATBOT COSMIC AI SAAS",
    heroTitlePart1: "ADD FREE",
    heroTitlePart2: "AI CHATBOT",
    heroTitlePart3: "TO YOUR SITE",
    heroDesc: "Deploy custom intelligence in under 2 minutes. Our verified cybernetic bots learn directly from your databases, documents, and web links to guarantee 100% accurate responses.",
    accuracyLabel: "0% ERROR RATE",
    accuracyText: "Trained on Zendesk, Notion, and your website URLs to achieve zero hallucination.",
    speedLabel: "3x FASTER CHAT",
    speedText: "Sub-600ms latency responses across Slack, WhatsApp, and Web widgets.",
    bounceLabel: "-20% BOUNCE RATE",
    bounceText: "Keep visitors deeply engaged and instantly double visitor-to-lead subscription rates.",
    getStartedFree: "Get Started Free",
    integrations: "Integrations",
    platformsTitle: "Flexible Platforms",
    platformsHeader: "FLEXIBLE INTEGRATIONS",
    platformsDesc: "Switch channels seamlessly. Deploy custom chat intelligence in minutes across all platforms.",
    tabWidget: "Web Chat Widget",
    tabSlack: "Slack Workspace",
    tabWhatsapp: "WhatsApp Business",
    scriptTitle: "HTML INTEGRATION SCRIPT",
    scriptDesc: "Simply copy and paste this lightweight async JS script tag into your body. Highly optimized with zero load latency.",
    featuresTitle: "Premium Values",
    featuresHeader: "CORE FEATURES",
    featuresDesc: "Why thousands of SaaS startups and corporate support platforms rely on our bot layers.",
    reviewsTitle: "Reviews",
    reviewsHeader: "HAPPY CLIENTS",
    reviewsDesc: "Hear what designers and company founders say about their automated support loops.",
    pricingTitle: "Comparative Plans",
    pricingHeader: "PRICING PLANS",
    pricingDesc: "Clear pricing structure designed to supercharge visitor-to-lead subscription streams.",
    planFree: "Free Tier",
    planFreeDesc: "For startups looking to add a basic custom widget. Index up to 5 web links.",
    planGrowth: "Growth Tier",
    planGrowthDesc: "For scaling businesses wanting priority support. Index Notion, Slack threads & custom branding.",
    planEnt: "Enterprise Tier",
    planEntDesc: "For corporate platforms requiring GDP alignment, on-prem databases, and instant sync.",
    bestValue: "BEST VALUES",
    choosePlan: "CHOOSE PLAN",
    month: "MONTH",
    footerDesc: "Deep cosmic cybernetic AI chatbot layer indexing Notion databases and Zendesk support lines with sub-second response guarantees.",
    privacyRegs: "Privacy Policy",
    termsStay: "Terms of Service",
    dismiss: "DISMISS",
    startIntegration: "START INTEGRATION",
    sandboxToken: "Free Sandbox Token Issued",
    webLabel: "Website URL",
    emailLabel: "Contact Email",
    generate: "GENERATE SCRIPTS",
    welcomeMsg: "Hello! Welcome to VaatBot AI. How can I help you today?",
    welcomeHelp: "Ask me about my 50+ languages support, our sub-second response times, or how we achieve 100% accuracy!",
    botTyping: "Typing...",
    inputPlaceholder: "Ask about accuracy, prices, or languages...",
    readyToSupercharge: "READY TO SUPERCHARGE YOUR SUPPORT WITH AI?",
    startIntegBtn: "START INTEGRATION NOW",
    customizerTitle: "Brand Customizer",
    customizerDesc: "Tailor colors, names, avatars, and greetings to fully respect your corporate branding system.",
    languagesTitle: "50+ Languages",
    languagesDesc: "Speaks your customer's native tongue fluently, spanning English, Spanish, Turkish, and more.",
    widgetsTitle: "Flexible Widget",
    widgetsDesc: "Deploy in seconds using our clean copy-paste JS script tag or customizable iframe containers.",
    industriesTitle: "Any Industry",
    industriesDesc: "Highly optimized for E-commerce, SaaS, Real Estate, Health Clinics, and Customer Support channels.",
  }
};

export default function ChatbotTemplate({ data }: { data: DemoData }) {
  const { firma, istatistikler = [], hizmetler = [], yorumlar = [] } = data;
  const [showBookingModal, setShowBookingModal] = useState(false);
  const [lang, setLang] = useState<"tr" | "en">("tr");
  const [preloader, setPreloader] = useState(true);

  const t = translations[lang];

  // Live Chat Simulator State
  const [messages, setMessages] = useState<ChatMessage[]>([]);
  const [inputVal, setInputVal] = useState("");
  const [isTyping, setIsTyping] = useState(false);
  const chatEndRef = useRef<HTMLDivElement>(null);

  // Platform Integration Selector State
  const [activePlatform, setActivePlatform] = useState<"widget" | "slack" | "whatsapp">("widget");

  // Initial welcome messages
  useEffect(() => {
    setMessages([
      { sender: "bot", text: t.welcomeMsg },
      { sender: "bot", text: t.welcomeHelp },
    ]);
  }, [lang, t.welcomeMsg, t.welcomeHelp]);

  // Lenis Smooth Scroll Integration
  useEffect(() => {
    let lenis: any;
    import("@studio-freight/lenis").then(({ default: Lenis }) => {
      lenis = new Lenis({ duration: 1.2, easing: (x: number) => Math.min(1, 1.001 - Math.pow(2, -10 * x)) });
      function raf(time: number) { lenis.raf(time); requestAnimationFrame(raf); }
      requestAnimationFrame(raf);
    });
    return () => lenis?.destroy();
  }, []);

  // Preloader Curtain Timer
  useEffect(() => {
    const timer = setTimeout(() => {
      setPreloader(false);
    }, 1500);
    return () => clearTimeout(timer);
  }, []);

  // Scroll chat to bottom on new messages
  useEffect(() => {
    chatEndRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [messages, isTyping]);

  // Handles Simulated Bot Responses
  const handleSendMessage = (e: React.FormEvent) => {
    e.preventDefault();
    if (!inputVal.trim() || isTyping) return;

    const userText = inputVal;
    setMessages((prev) => [...prev, { sender: "user", text: userText }]);
    setInputVal("");
    setIsTyping(true);

    setTimeout(() => {
      let botResponse = "";
      const lower = userText.toLowerCase();

      if (lower.includes("lang") || lower.includes("dil") || lower.includes("lisan")) {
        botResponse = lang === "tr" 
          ? "50'den fazla dili akıcı bir şekilde destekliyorum! Müşterinin Türkçe, İngilizce veya İspanyolca konuştuğunu otomatik olarak algılayıp gerçek zamanlı çeviri yaparım."
          : "I support 50+ languages fluently! I automatically detect if a customer speaks Turkish, English, Spanish, or German, and translate in real-time.";
      } else if (lower.includes("price") || lower.includes("fiyat") || lower.includes("ücret") || lower.includes("plan")) {
        botResponse = lang === "tr"
          ? "Hemen başlamanız için ücretsiz bir sürümümüz ($0) ve özel markalama, Notion entegrasyonu sunan bir Büyüme Paketimiz ($49/ay) mevcuttur!"
          : "We have a Free Tier ($0) to get you started instantly, and a Growth Tier ($49/mo) which adds custom branding and support for up to 10k monthly active chats!";
      } else if (lower.includes("accuracy") || lower.includes("doğru") || lower.includes("hata") || lower.includes("güven")) {
        botResponse = lang === "tr"
          ? "Sıfır hata garantisi veriyoruz! Notion dökümanlarınızı, destek makalelerinizi ve şirket içi bağlantılarınızı indeksleyerek yalnızca doğrulanmış gerçeklerle yanıt veririm."
          : "We guarantee 100% accuracy! By indexing your custom website URLs, PDF files, and Zendesk support hubs, we answer only using verified facts, ensuring zero hallucinations.";
      } else {
        botResponse = lang === "tr"
          ? "Harika bir soru! Veri tabanlarınıza ve API belgelerinize doğrudan bağlanıp doğrulanmış şirket verilerinizle 600 milisaniyenin altında yanıt veriyorum."
          : "That is a great question! VaatBot AI connects directly to your databases, Notion files, and API docs to respond with verified company facts in under 600 milliseconds.";
      }

      setMessages((prev) => [...prev, { sender: "bot", text: botResponse }]);
      setIsTyping(false);
    }, 1200);
  };

  // Localized statistics label mappings
  const getLocalizedStatLabel = (deger: string) => {
    if (deger.includes("Accuracy")) return t.accuracyLabel;
    if (deger.includes("Faster")) return t.speedLabel;
    return t.bounceLabel;
  };

  const getLocalizedStatText = (deger: string) => {
    if (deger.includes("Accuracy")) return t.accuracyText;
    if (deger.includes("Faster")) return t.speedText;
    return t.bounceText;
  };

  // Custom vector icons for chatbot values (No raw emojis)
  const getIconSvg = (name: string) => {
    switch (name) {
      case "languages":
        return (
          <svg className="w-7 h-7 stroke-[#00E5FF] fill-none" viewBox="0 0 24 24" strokeWidth="1.5">
            <path strokeLinecap="round" strokeLinejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9s2.015-9 4.5-9m0 18c-2.485 0-4.5-4.03-4.5-9s2.015-9 4.5-9" />
          </svg>
        );
      case "customizer":
        return (
          <svg className="w-7 h-7 stroke-[#00E5FF] fill-none" viewBox="0 0 24 24" strokeWidth="1.5">
            <path strokeLinecap="round" strokeLinejoin="round" d="M9.53 16.122a3 3 0 0 0-2.22 4.582M18.47 16.122a3 3 0 0 1 2.22 4.582M9.3 8.598a6.002 6.002 0 0 0 0 6.804m5.4 0a6.002 6.002 0 0 0 0-6.804M12 6.75a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm0 0v10.5m0 0a3 3 0 1 1-6 0m6 0a3 3 0 1 0 6 0" />
          </svg>
        );
      case "widgets":
        return (
          <svg className="w-7 h-7 stroke-[#00E5FF] fill-none" viewBox="0 0 24 24" strokeWidth="1.5">
            <path strokeLinecap="round" strokeLinejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
          </svg>
        );
      case "industries":
        return (
          <svg className="w-7 h-7 stroke-[#00E5FF] fill-none" viewBox="0 0 24 24" strokeWidth="1.5">
            <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 21h19.5m-18-18v18m10.5-18v18" />
          </svg>
        );
      default:
        return (
          <svg className="w-7 h-7 stroke-[#00E5FF] fill-none" viewBox="0 0 24 24" strokeWidth="1.5">
            <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
          </svg>
        );
    }
  };

  const getBentoServiceText = (ikon: string) => {
    switch (ikon) {
      case "languages": return { title: t.languagesTitle, desc: t.languagesDesc };
      case "customizer": return { title: t.customizerTitle, desc: t.customizerDesc };
      case "widgets": return { title: t.widgetsTitle, desc: t.widgetsDesc };
      default: return { title: t.industriesTitle, desc: t.industriesDesc };
    }
  };

  const css = `
    @import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;700&display=swap');

    :root {
      --color-neon-cyan: #00E5FF;
      --color-neon-pink: #FF007A;
      --color-neon-purple: #BD00FF;
      --color-space-black: #080710;
      --color-space-card: rgba(18, 20, 30, 0.45);
      --color-space-border: rgba(255, 255, 255, 0.08);
    }

    .font-sora-premium {
      font-family: 'Sora', sans-serif;
    }

    .font-mono-code {
      font-family: 'JetBrains Mono', monospace;
    }

    .bg-mesh-cosmic {
      background-image: 
        radial-gradient(circle at 10% 20%, rgba(0, 229, 255, 0.04) 0%, transparent 45%),
        radial-gradient(circle at 90% 80%, rgba(255, 0, 122, 0.03) 0%, transparent 50%),
        linear-gradient(rgba(255, 255, 255, 0.005) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.005) 1px, transparent 1px);
      background-size: 100% 100%, 100% 100%, 60px 60px, 60px 60px;
    }

    .neon-cyan-glow {
      box-shadow: 0 0 30px rgba(0, 229, 255, 0.15);
    }

    .text-gradient-cyan-pink {
      background: linear-gradient(90deg, #00E5FF, #FF007A);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .hero-title-clamp {
      font-size: clamp(34px, 5.5vw, 85px);
      letter-spacing: -0.02em;
      line-height: 0.95;
    }
  `;

  return (
    <>
      <style>{css}</style>

      {/* ── IMZA AN: CURTAIN REVEAL PRELOADER ── */}
      <AnimatePresence>
        {preloader && (
          <motion.div 
            className="fixed inset-0 z-50 bg-[#080710] flex flex-col items-center justify-center p-6"
            exit={{ 
              clipPath: "polygon(0 0, 100% 0, 100% 0, 0 0)", 
              transition: { duration: 0.95, ease: [0.16, 1, 0.3, 1] } 
            }}
          >
            <div className="max-w-md text-center space-y-6">
              <motion.span 
                className="text-[9px] font-mono-code tracking-[4px] uppercase text-[#00E5FF] block"
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5 }}
              >
                VAATBOT CYBERNETICS
              </motion.span>
              <div className="h-[1px] w-48 bg-white/10 mx-auto relative overflow-hidden">
                <motion.div 
                  className="absolute inset-y-0 left-0 bg-gradient-to-r from-[#00E5FF] to-[#FF007A]"
                  initial={{ width: "0%" }}
                  animate={{ width: "100%" }}
                  transition={{ duration: 1.2, ease: "easeInOut" }}
                />
              </div>
              <motion.h2 
                className="font-sora-premium text-white/50 text-xs tracking-wider uppercase"
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ delay: 0.4, duration: 0.5 }}
              >
                COSMIC AI PROTOXY
              </motion.h2>
            </div>
          </motion.div>
        )}
      </AnimatePresence>

      <div className="bg-[#080710] text-white min-h-screen font-sora-premium selection:bg-[#00E5FF] selection:text-black overflow-hidden relative pb-20">
        
        {/* Ambient mesh grid */}
        <div className="absolute inset-0 bg-mesh-cosmic pointer-events-none z-0" />

        {/* Ambient Orbs */}
        <div className="absolute top-[10%] right-[-10%] w-[600px] h-[600px] bg-[#BD00FF]/4 blur-[130px] rounded-full pointer-events-none z-0" />
        <div className="absolute bottom-[10%] left-[-15%] w-[600px] h-[600px] bg-[#00E5FF]/3 blur-[140px] rounded-full pointer-events-none z-0" />

        {/* ── FLOATING CONCEPT BANNER ── */}
        <div className="fixed bottom-4 left-4 z-40 bg-[#12141E]/90 backdrop-blur-md border border-white/10 px-4 py-2.5 rounded-xl shadow-2xl flex items-center gap-2.5 max-w-sm pointer-events-none select-none">
          <div className="w-1.5 h-1.5 rounded-full bg-[#00E5FF] animate-pulse" />
          <span className="text-[9px] font-mono-code uppercase tracking-[1.5px] text-white/90">
            {lang === "tr" ? "Bu web sitesi Ayris Tech tarafından hazırlanmış bir konsept çalışmasıdır." : "This website is a premium concept prototype designed by Ayris Tech."}
          </span>
        </div>

        {/* ── FLOATING GLASS HEADER ── */}
        <motion.header
          className="fixed top-4 left-4 right-4 z-50 px-4"
          initial={{ y: -80, opacity: 0 }}
          animate={{ y: 0, opacity: 1 }}
          transition={{ duration: 0.85, ease: [0.16, 1, 0.3, 1] }}
        >
          <div className="mx-auto max-w-7xl h-20 flex items-center justify-between px-8 bg-white/[0.03] backdrop-blur-2xl border border-white/10 rounded-2xl shadow-[0_15px_35px_rgba(0,0,0,0.6)]">
            {/* Logo */}
            <a href="#" className="flex items-center gap-2.5 group">
              <div className="w-10 h-10 rounded-xl bg-gradient-to-tr from-[#00E5FF] to-[#BD00FF] flex items-center justify-center shadow-[0_0_15px_rgba(0,229,255,0.3)] transition-transform group-hover:scale-105">
                <svg className="w-5 h-5 fill-black" viewBox="0 0 24 24">
                  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" />
                </svg>
              </div>
              <span className="text-lg font-black tracking-wider text-white font-mono-code uppercase">
                VAAT<span className="text-[#00E5FF]">BOT</span>
              </span>
            </a>

            {/* Navigation Links */}
            <nav className="hidden lg:flex items-center gap-8">
              {[
                { label: t.navSim, href: "#simulator-sandbox" },
                { label: t.navInteg, href: "#integrations" },
                { label: t.navFeatures, href: "#features" },
                { label: t.navReviews, href: "#testimonials" },
                { label: t.navPricing, href: "#pricing" }
              ].map(item => (
                <a
                  key={item.label}
                  href={item.href}
                  className="text-[10px] font-bold tracking-[1.5px] uppercase text-white/60 hover:text-[#00E5FF] transition-colors relative py-1 cursor-pointer group"
                >
                  {item.label}
                  <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-[#00E5FF] transition-all group-hover:w-full" />
                </a>
              ))}
            </nav>

            {/* Language Selector + Signup Button */}
            <div className="flex items-center gap-4">
              {/* Language Switcher */}
              <div className="flex items-center gap-1 bg-white/5 border border-white/10 rounded-xl p-1 shrink-0">
                <button
                  onClick={() => setLang("tr")}
                  className={`text-[9px] font-mono-code px-2 py-1.5 rounded-lg transition-all cursor-pointer ${
                    lang === "tr" ? "bg-white text-black shadow-sm" : "text-white/60 hover:text-white"
                  }`}
                >
                  TR
                </button>
                <button
                  onClick={() => setLang("en")}
                  className={`text-[9px] font-mono-code px-2 py-1.5 rounded-lg transition-all cursor-pointer ${
                    lang === "en" ? "bg-white text-black shadow-sm" : "text-white/60 hover:text-white"
                  }`}
                >
                  EN
                </button>
              </div>

              <motion.button
                onClick={() => setShowBookingModal(true)}
                className="text-[10px] font-black tracking-[2px] uppercase text-black bg-[#00E5FF] hover:bg-white px-6 py-3.5 rounded-xl transition-all cursor-pointer shadow-[0_5px_15px_rgba(0,229,255,0.25)] hidden sm:block"
                whileHover={{ scale: 1.02 }}
                whileTap={{ scale: 0.98 }}
              >
                {t.signUp}
              </motion.button>
            </div>
          </div>
        </motion.header>

        {/* ── HERO & INTERACTIVE SANDBOX SECTION ── */}
        <section id="simulator-sandbox" className="relative min-h-screen pt-32 pb-20 flex items-center z-10 px-6">
          <div className="max-w-7xl mx-auto w-full">
            <div className="grid lg:grid-cols-12 gap-16 items-center">
              
              {/* Left Column: Heading and high-impact metric counters */}
              <motion.div 
                className="lg:col-span-6 z-20"
                variants={stagger}
                initial="hidden"
                animate="show"
              >
                <motion.div 
                  variants={fadeUp}
                  className="inline-flex items-center gap-2 text-[9px] font-mono-code tracking-widest text-[#00E5FF] mb-6 bg-[#00E5FF]/10 border border-[#00E5FF]/20 px-4 py-2 rounded-full"
                >
                  <span className="w-1.5 h-1.5 rounded-full bg-[#00E5FF] animate-pulse" />
                  {t.badge}
                </motion.div>

                <motion.h1 
                  variants={fadeUp}
                  className="font-sora-premium font-black text-white mb-6 uppercase hero-title-clamp"
                >
                  {t.heroTitlePart1}
                  <br />
                  <span className="text-gradient-cyan-pink">{t.heroTitlePart2}</span>
                  <br />
                  {t.heroTitlePart3}
                </motion.h1>

                <motion.p 
                  variants={fadeUp}
                  className="text-white/60 text-xs lg:text-sm leading-relaxed max-w-xl mb-10 font-medium"
                >
                  {t.heroDesc}
                </motion.p>

                {/* Accuracy & response blocks */}
                <motion.div 
                  variants={fadeUp}
                  className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-10"
                >
                  {istatistikler.map((stat, sIdx) => (
                    <div key={sIdx} className="bg-white/[0.02] border border-white/5 p-5 rounded-2xl flex flex-col justify-between">
                      <div className="text-[#00E5FF] font-mono-code font-black text-sm mb-2">{getLocalizedStatLabel(stat.etiket)}</div>
                      <div className="text-white/50 text-[10px] leading-relaxed font-semibold">{getLocalizedStatText(stat.etiket)}</div>
                    </div>
                  ))}
                </motion.div>

                {/* Call-to-actions */}
                <motion.div variants={fadeUp} className="flex gap-4">
                  <motion.button 
                    onClick={() => setShowBookingModal(true)}
                    className="px-8 py-4.5 rounded-xl bg-[#00E5FF] hover:bg-white text-black font-black text-[10px] tracking-[2px] uppercase transition-all shadow-[0_5px_15px_rgba(0,229,255,0.3)] cursor-pointer"
                    whileHover={{ scale: 1.02 }}
                  >
                    {t.getStartedFree}
                  </motion.button>
                  <a 
                    href="#integrations" 
                    className="px-8 py-4.5 rounded-xl border border-white/10 bg-white/5 hover:bg-white/10 text-white font-black text-[10px] tracking-[2px] uppercase transition-all cursor-pointer text-center flex items-center justify-center shrink-0"
                  >
                    {t.integrations}
                  </a>
                </motion.div>
              </motion.div>

              {/* Right Column: Live Chat Sandbox & Flying Robot Mascot */}
              <div className="lg:col-span-6 relative flex flex-col justify-center items-center">
                
                {/* Floating Robot mascot overlap */}
                <motion.div 
                  className="absolute -top-16 -left-12 z-20 w-28 h-28 hidden md:block"
                  animate={{ y: [0, -10, 0] }}
                  transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
                >
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img 
                    src="/chatbot_mascot.png" 
                    alt="VaatBot AI 3D mascot" 
                    className="w-full h-full object-contain filter drop-shadow-[0_10px_20px_rgba(0,229,255,0.2)]"
                  />
                </motion.div>

                {/* Chatbox Sandbox Container */}
                <motion.div 
                  className="w-full max-w-md bg-[#12141E]/40 backdrop-blur-2xl border border-white/10 rounded-3xl overflow-hidden shadow-[0_20px_50px_rgba(0,0,0,0.5)] neon-cyan-glow relative"
                  initial={{ opacity: 0, scale: 0.95 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.8 }}
                >
                  {/* Top Bar */}
                  <div className="px-6 py-4 bg-white/[0.04] border-b border-white/5 flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
                      <div>
                        <div className="font-mono-code text-[11px] font-black tracking-wide text-white uppercase">VAATBOT SANDBOX</div>
                        <div className="text-[8px] text-white/40 uppercase tracking-widest font-bold">100% ACCURACY ACTIVE</div>
                      </div>
                    </div>
                    {/* Visual platform icon */}
                    <div className="w-8 h-8 rounded-lg bg-[#00E5FF]/10 flex items-center justify-center shrink-0">
                      <span className="text-xs">🤖</span>
                    </div>
                  </div>

                  {/* Message Stream */}
                  <div className="h-72 p-6 overflow-y-auto space-y-4 text-xs font-semibold leading-relaxed">
                    {messages.map((msg, mIdx) => (
                      <div key={mIdx} className={`flex ${msg.sender === "user" ? "justify-end" : "justify-start"}`}>
                        <div className={`max-w-[80%] px-4 py-3 rounded-2xl ${
                          msg.sender === "user" 
                            ? "bg-[#00E5FF] text-black font-bold rounded-tr-none shadow-sm"
                            : "bg-white/[0.04] border border-white/5 text-white/90 rounded-tl-none"
                        }`}>
                          {msg.text}
                        </div>
                      </div>
                    ))}

                    {/* Typing Indicator */}
                    {isTyping && (
                      <div className="flex justify-start">
                        <div className="bg-white/[0.04] border border-white/5 px-4 py-3 rounded-2xl rounded-tl-none flex items-center gap-1.5">
                          <span className="w-1.5 h-1.5 rounded-full bg-[#00E5FF] animate-bounce" />
                          <span className="w-1.5 h-1.5 rounded-full bg-[#00E5FF] animate-bounce [animation-delay:0.2s]" />
                          <span className="w-1.5 h-1.5 rounded-full bg-[#00E5FF] animate-bounce [animation-delay:0.4s]" />
                        </div>
                      </div>
                    )}
                    <div ref={chatEndRef} />
                  </div>

                  {/* Input Form */}
                  <form onSubmit={handleSendMessage} className="p-4 bg-white/[0.02] border-t border-white/5 flex gap-2">
                    <input 
                      type="text" 
                      value={inputVal}
                      onChange={(e) => setInputVal(e.target.value)}
                      placeholder={t.inputPlaceholder}
                      className="grow px-4 py-3.5 rounded-xl border border-white/5 bg-[#080710] text-xs text-white placeholder-white/20 focus:outline-none focus:border-[#00E5FF] focus:ring-1 focus:ring-[#00E5FF] font-medium"
                    />
                    <button 
                      type="submit"
                      className="w-11 h-11 rounded-xl bg-[#00E5FF] hover:bg-white flex items-center justify-center shrink-0 transition-colors cursor-pointer"
                    >
                      <svg className="w-4 h-4 fill-black" viewBox="0 0 24 24">
                        <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
                      </svg>
                    </button>
                  </form>
                </motion.div>

              </div>

            </div>
          </div>
        </section>

        {/* ── SECTION 2: INTERACTIVE INTEGRATION TOGGLE ── */}
        <section id="integrations" className="py-32 relative z-10 px-6 bg-[#080710] border-t border-white/5">
          <div className="max-w-7xl mx-auto">
            
            <div className="text-center max-w-xl mx-auto mb-20">
              <span className="text-[#00E5FF] font-bold text-xs uppercase tracking-widest block mb-2 font-mono-code">{t.platformsTitle}</span>
              <h2 className="font-sora-premium text-3xl lg:text-4xl font-black uppercase text-white tracking-tight">
                {t.platformsHeader}
              </h2>
              <p className="text-white/40 text-xs mt-2 font-medium">
                {t.platformsDesc}
              </p>
            </div>

            {/* Platform Selector Tabs */}
            <div className="flex items-center justify-center gap-4 mb-16 flex-wrap">
              {[
                { id: "widget", label: t.tabWidget, icon: "🌐" },
                { id: "slack", label: t.tabSlack, icon: "💬" },
                { id: "whatsapp", label: t.tabWhatsapp, icon: "📱" },
              ].map((p) => (
                <button
                  key={p.id}
                  onClick={() => setActivePlatform(p.id as any)}
                  className={`px-6 py-3.5 rounded-xl border text-[10px] font-black uppercase tracking-widest transition-all cursor-pointer flex items-center gap-2.5 ${
                    activePlatform === p.id 
                      ? "bg-[#00E5FF] text-black border-[#00E5FF] shadow-[0_4px_12px_rgba(0,229,255,0.2)]"
                      : "bg-white/[0.02] text-white/60 border-white/5 hover:border-white/10"
                  }`}
                >
                  <span>{p.icon}</span>
                  {p.label}
                </button>
              ))}
            </div>

            {/* Preview Area container */}
            <div className="max-w-3xl mx-auto bg-white/[0.02] border border-white/5 rounded-3xl p-6 md:p-8 shadow-2xl min-h-[380px] flex items-center justify-center">
              <AnimatePresence mode="wait">
                {activePlatform === "widget" && (
                  <motion.div 
                    key="widget" 
                    initial={{ opacity: 0, y: 15 }} 
                    animate={{ opacity: 1, y: 0 }} 
                    exit={{ opacity: 0, y: -15 }}
                    transition={{ duration: 0.3 }}
                    className="w-full text-center space-y-6"
                  >
                    <div className="max-w-md mx-auto bg-white/[0.03] border border-white/10 rounded-2xl p-6 text-left shadow-lg">
                      <div className="text-[9px] text-[#00E5FF] font-mono-code font-black uppercase tracking-widest mb-3">{t.scriptTitle}</div>
                      <code className="block text-white/50 text-[10px] font-mono-code leading-relaxed bg-[#080710] p-4 rounded-xl overflow-x-auto select-all">
                        {`<!-- Copy and paste this into the bottom of your <body> -->
<script 
  src="https://cdn.vaatbot.ai/v1/widget.js" 
  data-token="vb_demo_09a3kjl128" 
  data-theme="cosmic"
  defer>
</script>`}
                      </code>
                    </div>
                    <p className="text-white/40 text-xs font-semibold max-w-sm mx-auto">
                      {t.scriptDesc}
                    </p>
                  </motion.div>
                )}

                {activePlatform === "slack" && (
                  <motion.div 
                    key="slack" 
                    initial={{ opacity: 0, y: 15 }} 
                    animate={{ opacity: 1, y: 0 }} 
                    exit={{ opacity: 0, y: -15 }}
                    transition={{ duration: 0.3 }}
                    className="w-full max-w-md bg-[#1B1A24] rounded-2xl border border-white/5 overflow-hidden text-left"
                  >
                    {/* Slack Header */}
                    <div className="bg-[#12111A] px-4 py-3 border-b border-white/5 flex items-center justify-between">
                      <div className="font-mono-code text-[10px] font-black uppercase tracking-widest text-[#E01E5A]"># slack-workspace</div>
                      <span className="text-[8px] bg-white/10 text-white/60 px-2 py-0.5 rounded-full font-mono-code">Channel Integration</span>
                    </div>
                    {/* Thread */}
                    <div className="p-4 space-y-4 text-xs font-semibold">
                      <div className="flex gap-3">
                        <div className="w-8 h-8 rounded bg-gradient-to-tr from-[#E01E5A] to-[#36C5F0] flex items-center justify-center text-[10px] shrink-0 font-bold">U</div>
                        <div>
                          <h4 className="font-bold text-white/80">User <span className="text-[9px] text-white/30 ml-2 font-normal">11:34 AM</span></h4>
                          <p className="text-white/60 mt-1">@VaatBot {lang === "tr" ? "doğruluk garantimiz nedir?" : "what is our accuracy guarantee?"}</p>
                        </div>
                      </div>
                      <div className="flex gap-3">
                        <div className="w-8 h-8 rounded bg-gradient-to-tr from-[#00E5FF] to-[#BD00FF] flex items-center justify-center text-[10px] shrink-0 font-bold">🤖</div>
                        <div>
                          <h4 className="font-bold text-[#00E5FF]">VaatBot <span className="text-[8px] bg-[#00E5FF]/10 text-[#00E5FF] px-1.5 py-0.5 rounded font-mono-code ml-2">APP</span></h4>
                          <p className="text-white/90 mt-1">
                            {lang === "tr" 
                              ? "Yüklenen Notion belgeleriniz, destek dökümanlarınız ve web bağlantılarınız üzerinden doğrudan eğitiliyoruz. Bu sayede kanallarda %100 doğru yanıtları garanti ediyoruz!" 
                              : "We are trained directly on your uploaded Notion docs, Zendesk files, and web links to guarantee 100% accurate responses in Slack channels!"}
                          </p>
                        </div>
                      </div>
                    </div>
                  </motion.div>
                )}

                {activePlatform === "whatsapp" && (
                  <motion.div 
                    key="whatsapp" 
                    initial={{ opacity: 0, y: 15 }} 
                    animate={{ opacity: 1, y: 0 }} 
                    exit={{ opacity: 0, y: -15 }}
                    transition={{ duration: 0.3 }}
                    className="w-full max-w-xs bg-[#0F1E1E] rounded-[36px] border-4 border-white/10 overflow-hidden text-left shadow-2xl relative"
                  >
                    {/* Phone Header */}
                    <div className="bg-[#128C7E] px-6 py-4 flex items-center gap-3">
                      <div className="w-7 h-7 rounded-full bg-white/20 flex items-center justify-center font-bold text-xs select-none">🤖</div>
                      <div>
                        <h4 className="text-xs font-bold text-white leading-tight">VaatBot Business</h4>
                        <span className="text-[8px] text-white/60 tracking-wider">online</span>
                      </div>
                    </div>
                    {/* Chat */}
                    <div className="p-4 h-64 bg-[#0B1414] overflow-y-auto space-y-4 text-[10px] font-semibold">
                      <div className="flex justify-start">
                        <div className="bg-white/5 text-white/90 px-3 py-2 rounded-xl rounded-tl-none max-w-[85%]">
                          {lang === "tr" ? "Merhaba! Destek sorunuzu iletin." : "Hello! Ask me any support question."}
                        </div>
                      </div>
                      <div className="flex justify-end">
                        <div className="bg-[#056162] text-white px-3 py-2 rounded-xl rounded-tr-none max-w-[85%]">
                          {lang === "tr" ? "Destek biletini İspanyolca'ya çevir." : "Translate the customer support ticket to Spanish."}
                        </div>
                      </div>
                      <div className="flex justify-start">
                        <div className="bg-white/5 text-white/90 px-3 py-2 rounded-xl rounded-tl-none max-w-[85%]">
                          {lang === "tr" ? "¡Por supuesto! Destek bileti İspanyolca'ya çevrilerek iletildi." : "¡Por supuesto! The support ticket has been translated and dispatched."}
                        </div>
                      </div>
                    </div>
                  </motion.div>
                )}
              </AnimatePresence>
            </div>

          </div>
        </section>

        {/* ── BENTO FEATURES GRID ── */}
        <section id="features" className="py-28 relative z-10 px-6 bg-[#080710]/80 border-t border-white/5">
          <div className="max-w-7xl mx-auto">
            
            <div className="text-center max-w-xl mx-auto mb-20">
              <span className="text-[#00E5FF] font-bold text-xs uppercase tracking-widest block mb-2 font-mono-code">{t.featuresTitle}</span>
              <h2 className="font-sora-premium text-3xl lg:text-4xl font-black uppercase text-white tracking-tight">
                {t.featuresHeader}
              </h2>
              <p className="text-white/40 text-xs mt-2 font-medium">
                {t.featuresDesc}
              </p>
            </div>

            {/* Bento Grid */}
            <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
              {hizmetler.map((hizmet, hIdx) => {
                const item = getBentoServiceText(hizmet.ikon);
                return (
                  <motion.div 
                    key={hIdx}
                    className="bg-white/[0.02] rounded-2xl p-8 border border-white/5 hover:border-[#00E5FF]/30 transition-all duration-300 flex flex-col items-center text-center group cursor-default shadow-sm"
                    initial={{ opacity: 0, y: 20 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    viewport={{ once: true }}
                    transition={{ duration: 0.5, delay: hIdx * 0.1 }}
                    whileHover={{ y: -4 }}
                  >
                    <div className="w-16 h-16 rounded-2xl bg-white/[0.02] border border-white/5 flex items-center justify-center mb-6 transition-transform group-hover:scale-105 group-hover:border-[#00E5FF]/20 shadow-sm">
                      {getIconSvg(hizmet.ikon)}
                    </div>

                    <h3 className="font-sora-premium font-bold text-base text-white mb-3 tracking-wider uppercase leading-snug">
                      {item.title}
                    </h3>
                    <p className="text-white/50 text-[11px] leading-relaxed font-semibold">
                      {item.desc}
                    </p>
                  </motion.div>
                );
              })}
            </div>

          </div>
        </section>

        {/* ── TESTIMONIALS ── */}
        <section id="testimonials" className="py-28 relative z-10 px-6 bg-[#080710] border-t border-white/5">
          <div className="max-w-7xl mx-auto">
            
            <div className="text-center max-w-xl mx-auto mb-20">
              <span className="text-[#00E5FF] font-bold text-xs uppercase tracking-widest block mb-2 font-mono-code">{t.reviewsTitle}</span>
              <h2 className="font-sora-premium text-3xl lg:text-4xl font-black uppercase text-white tracking-tight">
                {t.reviewsHeader}
              </h2>
              <p className="text-white/40 text-xs mt-2 font-medium">
                {t.reviewsDesc}
              </p>
            </div>

            {/* Testimonials 2-Column Grid */}
            <div className="grid md:grid-cols-2 gap-8">
              {yorumlar.map((y, yIdx) => (
                <motion.div 
                  key={yIdx}
                  className="bg-white/[0.02] border border-white/5 rounded-3xl p-8 flex flex-col justify-between transition-all duration-300 hover:border-[#00E5FF]/30 group"
                  initial={{ opacity: 0, y: 30 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.5, delay: yIdx * 0.1 }}
                  whileHover={{ y: -4 }}
                >
                  {/* Rating Stars SVG */}
                  <div className="flex gap-1.5 mb-6">
                    {[...Array(5)].map((_, starIdx) => (
                      <svg key={starIdx} className="w-4 h-4 fill-[#00E5FF]" viewBox="0 0 24 24">
                        <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
                      </svg>
                    ))}
                  </div>

                  <p className="text-white/70 text-xs leading-relaxed italic mb-8 font-semibold">
                    &ldquo;{y.yorum}&rdquo;
                  </p>

                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-full border border-white/10 flex items-center justify-center text-lg bg-[#080710] select-none font-bold">
                      {y.yazar.charAt(0)}
                    </div>
                    <div>
                      <h4 className="font-sora-premium text-white text-xs font-bold uppercase tracking-wider">
                        {y.yazar}
                      </h4>
                      <span className="text-[9px] text-white/40 uppercase tracking-widest font-black font-mono-code">
                        {y.tarih}
                      </span>
                    </div>
                  </div>

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

          </div>
        </section>

        {/* ── SECTION 5: PRICING PLANS (Comparative pricing cards) ── */}
        <section id="pricing" className="py-32 relative z-10 px-6 bg-[#080710]/90 border-t border-white/5">
          <div className="max-w-7xl mx-auto">
            
            <div className="text-center max-w-xl mx-auto mb-20">
              <span className="text-[#00E5FF] font-bold text-xs uppercase tracking-widest block mb-2 font-mono-code">{t.pricingTitle}</span>
              <h2 className="font-sora-premium text-3xl lg:text-4xl font-black uppercase text-white tracking-tight">
                {t.pricingHeader}
              </h2>
              <p className="text-white/40 text-xs mt-2 font-medium">
                {t.pricingDesc}
              </p>
            </div>

            {/* Three Pricing Cards */}
            <div className="grid lg:grid-cols-3 gap-8 max-w-5xl mx-auto">
              {[
                { title: t.planFree, price: "$0", desc: t.planFreeDesc, popular: false },
                { title: t.planGrowth, price: "$49", desc: t.planGrowthDesc, popular: true },
                { title: t.planEnt, price: "Custom", desc: t.planEntDesc, popular: false }
              ].map((plan, pIdx) => (
                <motion.div 
                  key={pIdx}
                  className={`relative rounded-3xl p-8 flex flex-col justify-between transition-all duration-300 group ${
                    plan.popular 
                      ? "bg-white/[0.04] border-2 border-[#00E5FF] shadow-[0_15px_40px_rgba(0,229,255,0.08)]"
                      : "bg-white/[0.02] border border-white/5 hover:border-white/10"
                  }`}
                  initial={{ opacity: 0, y: 30 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.5, delay: pIdx * 0.1 }}
                  whileHover={{ y: -6 }}
                >
                  {plan.popular && (
                    <div className="absolute -top-3.5 left-1/2 -translate-x-1/2 px-4 py-1.5 bg-[#00E5FF] text-black text-[9px] font-black uppercase tracking-widest rounded-full z-10 shadow-md">
                      {t.bestValue}
                    </div>
                  )}

                  <div>
                    <h3 className="font-sora-premium font-black text-xl uppercase tracking-wider text-white mb-2 leading-tight">
                      {plan.title}
                    </h3>
                    <p className="text-white/50 text-xs leading-relaxed mb-8 font-semibold">
                      {plan.desc}
                    </p>
                  </div>

                  <div>
                    {/* Price display */}
                    <div className="flex items-baseline gap-1.5 mb-8">
                      <span className="text-4xl font-black text-[#00E5FF] font-mono-code">{plan.price}</span>
                      <span className="text-white/40 text-[9px] uppercase tracking-widest font-black font-mono-code">/ {t.month}</span>
                    </div>

                    <motion.button 
                      onClick={() => setShowBookingModal(true)}
                      className={`w-full py-4 rounded-xl font-black text-xs uppercase tracking-widest transition-all cursor-pointer ${
                        plan.popular 
                          ? "bg-[#00E5FF] hover:bg-white text-black shadow-md"
                          : "bg-[#080710] hover:bg-white/5 text-white/70 border border-white/5 hover:border-white/10"
                      }`}
                      whileHover={{ scale: 1.02 }}
                      whileTap={{ scale: 0.98 }}
                    >
                      {t.choosePlan}
                    </motion.button>
                  </div>

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

          </div>
        </section>

        {/* ── BOTTOM BANNER ── */}
        <section className="relative z-10 bg-gradient-to-r from-[#00E5FF] to-[#BD00FF] text-black py-12 px-6 text-center shadow-lg">
          <div className="max-w-7xl mx-auto relative z-10 flex flex-col md:flex-row justify-between items-center gap-6">
            <h3 className="font-sora-premium font-black text-xl md:text-2xl uppercase tracking-wider text-black text-center md:text-left leading-tight">
              {t.readyToSupercharge}
            </h3>
            <motion.button 
              onClick={() => setShowBookingModal(true)}
              className="inline-flex items-center gap-3 px-8 py-4 bg-black hover:bg-white text-white hover:text-black rounded-xl font-mono-code font-black tracking-widest uppercase transition-all shadow-[0_5px_15px_rgba(0,0,0,0.3)] text-xs cursor-pointer"
              whileHover={{ scale: 1.02 }}
            >
              {t.startIntegBtn}
            </motion.button>
          </div>
        </section>

        {/* ── FOOTER ── */}
        <footer className="bg-[#080710] border-t border-white/5 pt-24 pb-8 px-6 relative z-10">
          <div className="max-w-7xl mx-auto">
            
            <div className="grid md:grid-cols-4 gap-12 pb-16 border-b border-white/5">
              
              {/* About Column */}
              <div className="md:col-span-2">
                <span className="font-mono-code text-2xl font-black text-white tracking-wider uppercase mb-4 block">
                  VAAT<span className="text-[#00E5FF]">BOT</span>
                </span>
                <p className="text-white/50 text-xs leading-relaxed max-w-sm mb-8 font-semibold">
                  {firma.slogan} — {t.footerDesc}
                </p>
                <div className="text-white/60 text-xs font-semibold space-y-3">
                  <p className="flex items-center gap-2">
                    <svg className="w-4 h-4 text-[#00E5FF] shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                      <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" />
                      <circle cx="12" cy="10" r="3" />
                    </svg>
                    <span className="text-white/80">{firma.adres}</span>
                  </p>
                  <p className="flex items-center gap-2">
                    <svg className="w-4 h-4 text-[#00E5FF] shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                      <rect width="20" height="16" x="2" y="4" rx="2" />
                      <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
                    </svg>
                    <span className="text-white/80">{firma.email}</span>
                  </p>
                </div>
              </div>

              {/* Integrations Column */}
              <div>
                <h4 className="font-mono-code text-[#00E5FF] text-xs font-black uppercase tracking-wider mb-6">
                  INTEGRATIONS
                </h4>
                <div className="space-y-4">
                  <a href="#" className="block text-white/50 hover:text-[#00E5FF] text-xs transition-colors font-semibold">
                    {t.tabWidget}
                  </a>
                  <a href="#" className="block text-white/50 hover:text-[#00E5FF] text-xs transition-colors font-semibold">
                    {t.tabSlack}
                  </a>
                  <a href="#" className="block text-white/50 hover:text-[#00E5FF] text-xs transition-colors font-semibold">
                    {t.tabWhatsapp}
                  </a>
                </div>
              </div>

              {/* Navigation Column */}
              <div>
                <h4 className="font-mono-code text-[#00E5FF] text-xs font-black uppercase tracking-wider mb-6">
                  USEFUL LINKS
                </h4>
                <div className="space-y-4">
                  {[t.navSim, t.navPricing, t.navFeatures, t.navReviews].map(item => (
                    <a 
                      key={item} 
                      href="#" 
                      className="block text-white/50 hover:text-[#00E5FF] text-xs transition-colors font-semibold"
                    >
                      {item}
                    </a>
                  ))}
                </div>
              </div>

            </div>

            <div className="flex flex-col md:flex-row justify-between items-center pt-8 gap-4 text-white/30 text-xs font-semibold">
              <p>© 2026 {firma.adi}. All rights reserved.</p>
              <div className="flex gap-4">
                <a href="#" className="hover:text-white transition-colors">{t.privacyRegs}</a>
                <span>·</span>
                <a href="#" className="hover:text-white transition-colors">{t.termsStay}</a>
              </div>
            </div>

          </div>
        </footer>

        {/* ── FAST SIGN UP MODAL ── */}
        <AnimatePresence>
          {showBookingModal && (
            <motion.div 
              className="fixed inset-0 z-50 flex items-center justify-center p-6 bg-black/85 backdrop-blur-sm"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
            >
              <motion.div 
                className="bg-[#12141E] rounded-3xl p-8 max-w-md w-full relative shadow-2xl border border-white/10"
                initial={{ scale: 0.95, y: 20 }}
                animate={{ scale: 1, y: 0 }}
                exit={{ scale: 0.95, y: 20 }}
              >
                {/* Close Button */}
                <button 
                  className="absolute top-6 right-6 w-8 h-8 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white/40 hover:text-[#00E5FF] hover:border-[#00E5FF]/20 transition-all cursor-pointer font-bold"
                  onClick={() => setShowBookingModal(false)}
                >
                  ✕
                </button>
                
                {/* Success check indicator */}
                <div className="w-16 h-16 rounded-2xl bg-[#00E5FF]/10 border border-[#00E5FF]/20 flex items-center justify-center mb-6">
                  <svg className="w-8 h-8 stroke-[#00E5FF] fill-none" viewBox="0 0 24 24" strokeWidth="1.5">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                  </svg>
                </div>

                <h3 className="font-mono-code font-black text-white text-2xl mb-1 uppercase tracking-wider leading-none">
                  {t.startIntegration}
                </h3>
                <p className="text-[#00E5FF] font-mono-code text-[10px] mb-6 uppercase tracking-widest font-black">
                  {t.sandboxToken}
                </p>
                
                <div className="space-y-4 mb-6">
                  <div>
                    <label className="block text-[9px] font-mono-code font-black text-white/50 mb-1.5 uppercase tracking-wider">{t.webLabel}</label>
                    <input type="text" className="w-full px-4 py-3 rounded-xl border border-white/5 bg-[#080710] text-xs text-white focus:outline-none focus:border-[#00E5FF] font-semibold" placeholder="https://yourwebsite.com" />
                  </div>
                  <div>
                    <label className="block text-[9px] font-mono-code font-black text-white/50 mb-1.5 uppercase tracking-wider">{t.emailLabel}</label>
                    <input type="email" className="w-full px-4 py-3 rounded-xl border border-white/5 bg-[#080710] text-xs text-white focus:outline-none focus:border-[#00E5FF] font-semibold" placeholder="you@company.com" />
                  </div>
                </div>

                <motion.button 
                  className="w-full py-4 rounded-xl bg-[#00E5FF] hover:bg-white text-black font-black text-xs uppercase tracking-widest cursor-pointer shadow-[0_5px_15px_rgba(0,229,255,0.3)]"
                  whileHover={{ scale: 1.02 }}
                  whileTap={{ scale: 0.98 }}
                  onClick={() => setShowBookingModal(false)}
                >
                  {t.generate}
                </motion.button>
              </motion.div>
            </motion.div>
          )}
        </AnimatePresence>

      </div>
    </>
  );
}