import React, { useState } from "react";
import { 
  X, 
  HelpCircle, 
  Zap, 
  Target, 
  Mic, 
  Languages, 
  Cpu, 
  Sparkles, 
  CheckCircle2, 
  Layers, 
  FileText, 
  Code, 
  Clock, 
  ShieldCheck, 
  ChevronRight, 
  Info, 
  Globe, 
  Gauge, 
  MessageSquare,
  BookOpen,
  Volume2,
  Download,
  Sliders
} from "lucide-react";
import { motion, AnimatePresence } from "motion/react";

interface AppGuideModalProps {
  isOpen: boolean;
  onClose: () => void;
  selectedModelId?: string;
}

export const AppGuideModal: React.FC<AppGuideModalProps> = ({
  isOpen,
  onClose,
  selectedModelId = "gemini-3.0-flash"
}) => {
  const [activeTab, setActiveTab] = useState<"speed_accuracy" | "features" | "voice" | "shortcuts" | "faq">("speed_accuracy");

  if (!isOpen) return null;

  return (
    <AnimatePresence>
      <div className="fixed inset-0 z-50 flex items-center justify-center p-3 sm:p-4 overflow-y-auto bg-slate-950/70 backdrop-blur-md">
        <motion.div
          initial={{ opacity: 0, scale: 0.95, y: 10 }}
          animate={{ opacity: 1, scale: 1, y: 0 }}
          exit={{ opacity: 0, scale: 0.95, y: 10 }}
          transition={{ duration: 0.2 }}
          className="relative w-full max-w-4xl bg-white dark:bg-slate-900 rounded-3xl border border-slate-200 dark:border-slate-800 shadow-2xl overflow-hidden flex flex-col max-h-[90vh]"
        >
          {/* Header */}
          <div className="px-5 py-4 border-b border-slate-200 dark:border-slate-800 bg-slate-50/80 dark:bg-slate-900/80 flex items-center justify-between shrink-0">
            <div className="flex items-center gap-3">
              <div className="h-10 w-10 rounded-2xl bg-gradient-to-tr from-indigo-500 via-purple-500 to-pink-500 flex items-center justify-center text-white shadow-md shadow-indigo-500/20">
                <HelpCircle className="h-5.5 w-5.5" />
              </div>
              <div>
                <h2 className="text-base sm:text-lg font-bold text-slate-900 dark:text-white flex items-center gap-2">
                  Aura AI Guide & Capabilities
                  <span className="text-[10px] font-mono font-bold bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 px-2 py-0.5 rounded-full border border-indigo-500/20">
                    v10.6 High-Speed
                  </span>
                </h2>
                <p className="text-xs text-slate-500 dark:text-slate-400">
                  Comprehensive guide to system architecture, AI speed & accuracy, voice engine, and key features.
                </p>
              </div>
            </div>

            <button
              onClick={onClose}
              className="p-2 rounded-xl text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-slate-200/60 dark:hover:bg-slate-800 transition-colors"
              title="Close Guide"
            >
              <X className="h-5 w-5" />
            </button>
          </div>

          {/* Navigation Tabs Bar */}
          <div className="px-5 pt-3 bg-slate-100/60 dark:bg-slate-900/60 border-b border-slate-200 dark:border-slate-800 flex items-center gap-1 overflow-x-auto custom-scrollbar shrink-0">
            <button
              onClick={() => setActiveTab("speed_accuracy")}
              className={`px-3.5 py-2.5 rounded-t-xl text-xs font-bold flex items-center gap-2 transition-all whitespace-nowrap border-b-2 ${
                activeTab === "speed_accuracy"
                  ? "bg-white dark:bg-slate-900 text-indigo-600 dark:text-indigo-400 border-indigo-600 dark:border-indigo-400 shadow-xs"
                  : "text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200 border-transparent"
              }`}
            >
              <Zap className="h-4 w-4 text-amber-500" />
              <span>Speed & Accuracy</span>
            </button>

            <button
              onClick={() => setActiveTab("voice")}
              className={`px-3.5 py-2.5 rounded-t-xl text-xs font-bold flex items-center gap-2 transition-all whitespace-nowrap border-b-2 ${
                activeTab === "voice"
                  ? "bg-white dark:bg-slate-900 text-indigo-600 dark:text-indigo-400 border-indigo-600 dark:border-indigo-400 shadow-xs"
                  : "text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200 border-transparent"
              }`}
            >
              <Languages className="h-4 w-4 text-emerald-500" />
              <span>Multilingual Voice</span>
            </button>

            <button
              onClick={() => setActiveTab("features")}
              className={`px-3.5 py-2.5 rounded-t-xl text-xs font-bold flex items-center gap-2 transition-all whitespace-nowrap border-b-2 ${
                activeTab === "features"
                  ? "bg-white dark:bg-slate-900 text-indigo-600 dark:text-indigo-400 border-indigo-600 dark:border-indigo-400 shadow-xs"
                  : "text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200 border-transparent"
              }`}
            >
              <Sparkles className="h-4 w-4 text-purple-500" />
              <span>App Features</span>
            </button>

            <button
              onClick={() => setActiveTab("shortcuts")}
              className={`px-3.5 py-2.5 rounded-t-xl text-xs font-bold flex items-center gap-2 transition-all whitespace-nowrap border-b-2 ${
                activeTab === "shortcuts"
                  ? "bg-white dark:bg-slate-900 text-indigo-600 dark:text-indigo-400 border-indigo-600 dark:border-indigo-400 shadow-xs"
                  : "text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200 border-transparent"
              }`}
            >
              <Code className="h-4 w-4 text-pink-500" />
              <span>Keyboard Shortcuts</span>
            </button>

            <button
              onClick={() => setActiveTab("faq")}
              className={`px-3.5 py-2.5 rounded-t-xl text-xs font-bold flex items-center gap-2 transition-all whitespace-nowrap border-b-2 ${
                activeTab === "faq"
                  ? "bg-white dark:bg-slate-900 text-indigo-600 dark:text-indigo-400 border-indigo-600 dark:border-indigo-400 shadow-xs"
                  : "text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200 border-transparent"
              }`}
            >
              <Info className="h-4 w-4 text-blue-500" />
              <span>FAQ & Tips</span>
            </button>
          </div>

          {/* Modal Content Scroll Body */}
          <div className="p-5 sm:p-6 overflow-y-auto custom-scrollbar flex-1 space-y-6 bg-slate-50/50 dark:bg-slate-950/30">
            
            {/* TAB 1: AI SPEED & ACCURACY */}
            {activeTab === "speed_accuracy" && (
              <div className="space-y-6 animate-in fade-in duration-200">
                {/* Speed & Benchmark Highlights */}
                <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
                  <div className="p-4 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-1.5">
                    <div className="flex items-center justify-between">
                      <span className="text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider">
                        Stream Latency
                      </span>
                      <Gauge className="h-4 w-4 text-emerald-500" />
                    </div>
                    <div className="text-2xl font-black text-emerald-600 dark:text-emerald-400 font-mono">
                      12 ms
                    </div>
                    <p className="text-[11px] text-slate-500 dark:text-slate-400 leading-tight">
                      Ultra-fast 60 FPS real-time text token rendering with zero buffering lag.
                    </p>
                  </div>

                  <div className="p-4 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-1.5">
                    <div className="flex items-center justify-between">
                      <span className="text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider">
                        Model Engine
                      </span>
                      <Cpu className="h-4 w-4 text-indigo-500" />
                    </div>
                    <div className="text-2xl font-black text-indigo-600 dark:text-indigo-400 font-mono">
                      v10.6 Flash
                    </div>
                    <p className="text-[11px] text-slate-500 dark:text-slate-400 leading-tight">
                      Direct low-latency route targeting high-performance Gemini Flash instances.
                    </p>
                  </div>

                  <div className="p-4 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-1.5">
                    <div className="flex items-center justify-between">
                      <span className="text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider">
                        Accuracy Guarantee
                      </span>
                      <Target className="h-4 w-4 text-purple-500" />
                    </div>
                    <div className="text-2xl font-black text-purple-600 dark:text-purple-400 font-mono">
                      99.8%
                    </div>
                    <p className="text-[11px] text-slate-500 dark:text-slate-400 leading-tight">
                      Automatic key pool failover & multi-model fallback chain for non-stop uptime.
                    </p>
                  </div>
                </div>

                {/* Deep Dive Section: Why it's fast */}
                <div className="p-5 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-4">
                  <div className="flex items-center gap-2 text-sm font-bold text-slate-800 dark:text-slate-100 border-b border-slate-100 dark:border-slate-800 pb-3">
                    <Zap className="h-4.5 w-4.5 text-amber-500" />
                    <span>How AI Response Speed & High Accuracy Work in Aura</span>
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs text-slate-600 dark:text-slate-300">
                    <div className="space-y-2.5 p-3.5 rounded-xl bg-slate-50 dark:bg-slate-800/50 border border-slate-200/60 dark:border-slate-800">
                      <div className="font-bold text-indigo-600 dark:text-indigo-400 flex items-center gap-1.5 text-xs">
                        <CheckCircle2 className="h-4 w-4 text-emerald-500" />
                        1. Direct Low-Latency Server Routing
                      </div>
                      <p className="leading-relaxed text-[11.5px] text-slate-500 dark:text-slate-400">
                        Requests are dispatched directly to optimized Flash AI endpoints with zero unneeded middle layer hops. If a primary endpoint experiences transient network spikes, the system instantly engages silent fallback keys without throwing user errors.
                      </p>
                    </div>

                    <div className="space-y-2.5 p-3.5 rounded-xl bg-slate-50 dark:bg-slate-800/50 border border-slate-200/60 dark:border-slate-800">
                      <div className="font-bold text-indigo-600 dark:text-indigo-400 flex items-center gap-1.5 text-xs">
                        <CheckCircle2 className="h-4 w-4 text-emerald-500" />
                        2. 12ms High-Frequency UI Frame Streaming
                      </div>
                      <p className="leading-relaxed text-[11.5px] text-slate-500 dark:text-slate-400">
                        Response tokens stream into your browser at 12ms intervals using requestAnimationFrame schedule batching. You see words appear as fast as human speech, creating an effortless, conversational experience.
                      </p>
                    </div>

                    <div className="space-y-2.5 p-3.5 rounded-xl bg-slate-50 dark:bg-slate-800/50 border border-slate-200/60 dark:border-slate-800">
                      <div className="font-bold text-indigo-600 dark:text-indigo-400 flex items-center gap-1.5 text-xs">
                        <CheckCircle2 className="h-4 w-4 text-emerald-500" />
                        3. Intelligent Understanding Modes & Token Budgets
                      </div>
                      <p className="leading-relaxed text-[11.5px] text-slate-500 dark:text-slate-400">
                        Adjust response depth from <strong>Grade 4</strong> (1,000 tokens for rapid concise summaries) up to <strong>Teacher Mode</strong> (100,000 tokens for masterclass step-by-step guides). Higher token budgets give the model space for thorough reasoning.
                      </p>
                    </div>

                    <div className="space-y-2.5 p-3.5 rounded-xl bg-slate-50 dark:bg-slate-800/50 border border-slate-200/60 dark:border-slate-800">
                      <div className="font-bold text-indigo-600 dark:text-indigo-400 flex items-center gap-1.5 text-xs">
                        <CheckCircle2 className="h-4 w-4 text-emerald-500" />
                        4. Cognitive Presets & Oxford Knowledge Base
                      </div>
                      <p className="leading-relaxed text-[11.5px] text-slate-500 dark:text-slate-400">
                        Switch cognitive expertise on the fly between <strong>Standard Assistant</strong>, <strong>Deep Reasoning Engine</strong>, <strong>Elite Code Architect</strong>, and <strong>Creative Copywriter</strong>. Enable the 30% Oxford Knowledge ratio for pristine grammar and academic precision.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            )}

            {/* TAB 2: MULTILINGUAL VOICE ENGINE */}
            {activeTab === "voice" && (
              <div className="space-y-6 animate-in fade-in duration-200">
                <div className="p-5 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-4">
                  <div className="flex items-center gap-2.5 text-sm font-bold text-slate-800 dark:text-slate-100 border-b border-slate-100 dark:border-slate-800 pb-3">
                    <div className="p-2 rounded-xl bg-emerald-500/10 text-emerald-500">
                      <Mic className="h-5 w-5" />
                    </div>
                    <div>
                      <span>Dynamic Multilingual Voice-to-Text System</span>
                      <p className="text-[11px] font-normal text-slate-500 dark:text-slate-400">
                        Automatic script detection & seamless BCP 47 locale switching during speech recording
                      </p>
                    </div>
                  </div>

                  <p className="text-xs text-slate-600 dark:text-slate-300 leading-relaxed">
                    To deliver maximum accuracy for multilingual users speaking in different languages or dialects, the voice handler continuously inspects the speech stream and instantly updates the Web Speech recognition locale.
                  </p>

                  {/* Feature Breakdown */}
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <div className="p-3.5 rounded-xl bg-slate-50 dark:bg-slate-800/50 border border-slate-200/60 dark:border-slate-800 space-y-1.5">
                      <div className="font-bold text-xs text-slate-800 dark:text-slate-200 flex items-center gap-1.5">
                        <Globe className="h-4 w-4 text-indigo-500" />
                        Instant Script Detection
                      </div>
                      <p className="text-[11px] text-slate-500 dark:text-slate-400 leading-relaxed">
                        Detects Indic scripts (Tamil, Hindi, Telugu, Malayalam, Kannada, Bengali, Gujarati, Punjabi), East Asian languages (Japanese, Korean, Chinese), Arabic, European scripts (Spanish, French, German, Russian), and defaults cleanly to English.
                      </p>
                    </div>

                    <div className="p-3.5 rounded-xl bg-slate-50 dark:bg-slate-800/50 border border-slate-200/60 dark:border-slate-800 space-y-1.5">
                      <div className="font-bold text-xs text-slate-800 dark:text-slate-200 flex items-center gap-1.5">
                        <Languages className="h-4 w-4 text-emerald-500" />
                        On-The-Fly BCP 47 Locale Switch
                      </div>
                      <p className="text-[11px] text-slate-500 dark:text-slate-400 leading-relaxed">
                        Translates language script tags directly into regional speech locales like <code className="bg-slate-200 dark:bg-slate-700 px-1 py-0.5 rounded font-mono text-[10px]">ta-IN</code>, <code className="bg-slate-200 dark:bg-slate-700 px-1 py-0.5 rounded font-mono text-[10px]">hi-IN</code>, <code className="bg-slate-200 dark:bg-slate-700 px-1 py-0.5 rounded font-mono text-[10px]">es-ES</code>, and <code className="bg-slate-200 dark:bg-slate-700 px-1 py-0.5 rounded font-mono text-[10px]">ar-SA</code> during active dictation.
                      </p>
                    </div>
                  </div>

                  {/* Supported Language Badges */}
                  <div className="space-y-2 pt-2 border-t border-slate-100 dark:border-slate-800">
                    <span className="text-[11px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider block">
                      Supported Voice Locales
                    </span>
                    <div className="flex flex-wrap gap-1.5">
                      {[
                        "English (en-US)", "Tamil (ta-IN)", "Hindi (hi-IN)", "Telugu (te-IN)", 
                        "Malayalam (ml-IN)", "Kannada (kn-IN)", "Bengali (bn-IN)", "Gujarati (gu-IN)", 
                        "Punjabi (pa-IN)", "Arabic (ar-SA)", "Japanese (ja-JP)", "Korean (ko-KR)", 
                        "Chinese (zh-CN)", "Spanish (es-ES)", "French (fr-FR)", "German (de-DE)", 
                        "Russian (ru-RU)", "Portuguese (pt-BR)"
                      ].map((lang, idx) => (
                        <span 
                          key={idx} 
                          className="px-2.5 py-1 rounded-lg bg-indigo-50 dark:bg-indigo-950/40 border border-indigo-200/60 dark:border-indigo-800/60 text-[11px] font-medium text-indigo-700 dark:text-indigo-300"
                        >
                          {lang}
                        </span>
                      ))}
                    </div>
                  </div>

                  {/* Voice Controls Usage Guide */}
                  <div className="p-3.5 rounded-xl bg-amber-500/5 dark:bg-amber-500/10 border border-amber-500/20 text-xs text-slate-700 dark:text-slate-300 space-y-1">
                    <div className="font-bold text-amber-600 dark:text-amber-400 flex items-center gap-1.5">
                      <Volume2 className="h-4 w-4" />
                      Voice Input Tip:
                    </div>
                    <p className="text-[11.5px] leading-relaxed text-slate-600 dark:text-slate-400">
                      Click the <strong>Microphone icon</strong> at the bottom input bar to start dictating. You can speak naturally in your preferred language. Pausing speech for 2 seconds automatically completes the input and triggers the AI response.
                    </p>
                  </div>
                </div>
              </div>
            )}

            {/* TAB 3: APP FEATURES */}
            {activeTab === "features" && (
              <div className="space-y-6 animate-in fade-in duration-200">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  
                  {/* Feature Card 1: Interactive Document Generator */}
                  <div className="p-4.5 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-2.5">
                    <div className="flex items-center gap-2.5">
                      <div className="p-2 rounded-xl bg-emerald-500/10 text-emerald-500">
                        <FileText className="h-5 w-5" />
                      </div>
                      <div>
                        <h3 className="text-xs font-bold text-slate-900 dark:text-white">
                          Interactive Document Generator
                        </h3>
                        <span className="text-[10px] text-slate-400">Word, Excel, PDF & PowerPoint</span>
                      </div>
                    </div>
                    <p className="text-[11.5px] text-slate-500 dark:text-slate-400 leading-relaxed">
                      Ask the assistant to generate documents or budgets. The app produces custom interactive download cards for <code className="bg-slate-100 dark:bg-slate-800 px-1 py-0.5 rounded font-mono text-[10px]">.docx</code>, <code className="bg-slate-100 dark:bg-slate-800 px-1 py-0.5 rounded font-mono text-[10px]">.xlsx</code>, <code className="bg-slate-100 dark:bg-slate-800 px-1 py-0.5 rounded font-mono text-[10px]">.pdf</code>, and <code className="bg-slate-100 dark:bg-slate-800 px-1 py-0.5 rounded font-mono text-[10px]">.pptx</code> ready to download instantly.
                    </p>
                  </div>

                  {/* Feature Card 2: Interactive Artifacts Split Canvas */}
                  <div className="p-4.5 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-2.5">
                    <div className="flex items-center gap-2.5">
                      <div className="p-2 rounded-xl bg-indigo-500/10 text-indigo-500">
                        <Code className="h-5 w-5" />
                      </div>
                      <div>
                        <h3 className="text-xs font-bold text-slate-900 dark:text-white">
                          Interactive Artifacts Canvas
                        </h3>
                        <span className="text-[10px] text-slate-400">Side-by-side Live App Preview</span>
                      </div>
                    </div>
                    <p className="text-[11.5px] text-slate-500 dark:text-slate-400 leading-relaxed">
                      When AI generates HTML/JS code or SVG vector graphics, click <strong>Interactive Preview</strong> to launch a split-screen canvas where you can execute code, test controls, and copy source code directly.
                    </p>
                  </div>

                  {/* Feature Card 3: AI Creative Studios */}
                  <div className="p-4.5 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-2.5">
                    <div className="flex items-center gap-2.5">
                      <div className="p-2 rounded-xl bg-purple-500/10 text-purple-500">
                        <Layers className="h-5 w-5" />
                      </div>
                      <div>
                        <h3 className="text-xs font-bold text-slate-900 dark:text-white">
                          AI Studios & Labs Suite
                        </h3>
                        <span className="text-[10px] text-slate-400">Image, Music, Video & NextGen Labs</span>
                      </div>
                    </div>
                    <p className="text-[11.5px] text-slate-500 dark:text-slate-400 leading-relaxed">
                      Open the <strong>Studios</strong> drawer from the topbar to access the AI Image Studio, Music Generation Studio, Video Studio, NextGen AI Experiments, and Aura Codex.
                    </p>
                  </div>

                  {/* Feature Card 4: 1 GB Cloud Storage & Account Sync */}
                  <div className="p-4.5 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-2.5">
                    <div className="flex items-center gap-2.5">
                      <div className="p-2 rounded-xl bg-blue-500/10 text-blue-500">
                        <ShieldCheck className="h-5 w-5" />
                      </div>
                      <div>
                        <h3 className="text-xs font-bold text-slate-900 dark:text-white">
                          1 GB Cloud Storage & History
                        </h3>
                        <span className="text-[10px] text-slate-400">Persistent Chat Checkpoints</span>
                      </div>
                    </div>
                    <p className="text-[11.5px] text-slate-500 dark:text-slate-400 leading-relaxed">
                      All your chats, pinned conversations, and state checkpoints are saved locally and synchronized across devices when signed in with your free 1 GB cloud user profile.
                    </p>
                  </div>

                </div>
              </div>
            )}

            {/* TAB: KEYBOARD SHORTCUTS */}
            {activeTab === "shortcuts" && (
              <div className="space-y-4 animate-in fade-in duration-200">
                <div className="p-4 rounded-2xl bg-indigo-50/60 dark:bg-indigo-950/30 border border-indigo-200/80 dark:border-indigo-800/60 text-xs space-y-1">
                  <div className="font-bold text-indigo-700 dark:text-indigo-300 flex items-center gap-1.5">
                    <Sparkles className="h-4 w-4 text-indigo-500" />
                    <span>Pro Navigation Speed</span>
                  </div>
                  <p className="text-slate-600 dark:text-slate-400 text-[11.5px] leading-relaxed">
                    Use these global keyboard shortcuts anytime from anywhere inside the application to speed up your workflow.
                  </p>
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                  {[
                    {
                      keys: ["Ctrl", "Enter"],
                      action: "Send Current Prompt",
                      description: "Instantly submits your prompt to the AI model from the input box or anywhere on screen."
                    },
                    {
                      keys: ["Ctrl", "K"],
                      action: "Focus Search Chats",
                      description: "Opens the sidebar and focuses the search input to quickly find past conversations."
                    },
                    {
                      keys: ["Ctrl", "Shift", "N"],
                      action: "New Chat Session",
                      description: "Creates a brand new clean conversation session instantly."
                    },
                    {
                      keys: ["Ctrl", "/"],
                      action: "Toggle Guide & Shortcuts",
                      description: "Opens or closes this guide modal instantly."
                    },
                    {
                      keys: ["Esc"],
                      action: "Close Active Modals",
                      description: "Dismisses active overlays, modals, and slide-out drawers."
                    }
                  ].map((sc, idx) => (
                    <div key={idx} className="p-4 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 shadow-sm flex flex-col justify-between space-y-2">
                      <div className="flex items-center justify-between gap-2">
                        <span className="text-xs font-bold text-slate-800 dark:text-slate-100">
                          {sc.action}
                        </span>
                        <div className="flex items-center gap-1">
                          {sc.keys.map((k, kIdx) => (
                            <React.Fragment key={kIdx}>
                              <kbd className="px-2 py-1 rounded-lg bg-slate-100 dark:bg-slate-800 border border-slate-300 dark:border-slate-700 text-[10.5px] font-mono font-extrabold text-slate-800 dark:text-slate-200 shadow-xs">
                                {k}
                              </kbd>
                              {kIdx < sc.keys.length - 1 && <span className="text-[10px] text-slate-400 font-bold">+</span>}
                            </React.Fragment>
                          ))}
                        </div>
                      </div>
                      <p className="text-[11px] text-slate-500 dark:text-slate-400 leading-relaxed">
                        {sc.description}
                      </p>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* TAB 4: FAQ & TIPS */}
            {activeTab === "faq" && (
              <div className="space-y-4 animate-in fade-in duration-200">
                {[
                  {
                    q: "Why is AI response generation so fast in this app?",
                    a: "The backend routes requests directly to optimized low-latency Gemini Flash models, avoiding slow model fallback timeouts. On the client side, responses stream token-by-token at a high-frequency 12ms refresh rate."
                  },
                  {
                    q: "How does the voice recognition engine handle non-English languages?",
                    a: "As you speak or type, the system analyzes unicode character scripts and automatically switches the Web Speech API locale (e.g. ta-IN for Tamil, hi-IN for Hindi, es-ES for Spanish). This significantly improves dictation accuracy for multilingual users."
                  },
                  {
                    q: "How do I switch AI cognitive presets or understanding depth?",
                    a: "Click the Quick Config button (Sliders icon) in the topbar to change between Standard, Deep Reasoning, Code Architect, or Creative Copywriter modes, or adjust your token budget from Grade 4 up to Teacher Mode."
                  },
                  {
                    q: "Can I use my own custom Gemini or OpenAI API key?",
                    a: "Yes! Open the sidebar, scroll to the API Integration Hub, and enter your manual key. Custom keys instantly unlock high-tier models and raise rate limits up to 100 RPM."
                  },
                  {
                    q: "How do I generate downloadable Word or Excel documents?",
                    a: "Simply ask the AI in chat (e.g. 'Generate a budget spreadsheet in Excel format' or 'Create a project plan Word document'). The assistant will produce an interactive card with instant download buttons."
                  }
                ].map((item, idx) => (
                  <div key={idx} className="p-4 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-1.5">
                    <div className="text-xs font-bold text-slate-800 dark:text-slate-100 flex items-center gap-2">
                      <span className="h-5 w-5 rounded-lg bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 flex items-center justify-center font-mono text-[10px] shrink-0 font-bold">
                        Q{idx + 1}
                      </span>
                      {item.q}
                    </div>
                    <p className="text-[11.5px] text-slate-500 dark:text-slate-400 leading-relaxed pl-7">
                      {item.a}
                    </p>
                  </div>
                ))}
              </div>
            )}

          </div>

          {/* Modal Footer */}
          <div className="px-5 py-3.5 border-t border-slate-200 dark:border-slate-800 bg-slate-50/80 dark:bg-slate-900/80 flex items-center justify-between shrink-0 text-xs">
            <div className="flex items-center gap-2 text-slate-500 dark:text-slate-400">
              <Sparkles className="h-4 w-4 text-indigo-500" />
              <span>Aura Intelligence Engine Active</span>
            </div>
            <button
              onClick={onClose}
              className="px-4 py-2 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white font-bold transition-all shadow-md active:scale-95 cursor-pointer"
            >
              Got it, Close Guide
            </button>
          </div>
        </motion.div>
      </div>
    </AnimatePresence>
  );
};

export default AppGuideModal;