import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { motion, AnimatePresence } from 'framer-motion';
import {
  UserPlus, Key, Image, Send, Gift,
  ChevronDown, ChevronUp, HelpCircle, BookOpen, Lightbulb,
  AlertTriangle, CheckCircle2, ArrowRight, Search, Zap,
  Shield, Settings, Users, Radio, Eye, Wand2,
} from 'lucide-react';

// ─── Types ───

type TabId = 'guide' | 'faq' | 'tips';

interface GuideStep {
  id: string;
  number: number;
  title: string;
  description: string;
  icon: React.ElementType;
  gradient: string;
  path: string;
  buttonLabel: string;
  steps: string[];
  warnings?: string[];
  tips?: string[];
}

interface FAQItem {
  question: string;
  answer: string;
  category: string;
}

// ─── Data ───

const GUIDE_STEPS: GuideStep[] = [
  {
    id: 'create-character',
    number: 1,
    title: 'Karakter Oluştur',
    description: 'İlk AI karakterinizi oluşturun. Bu adım olmadan hiçbir şey çalışmaz.',
    icon: UserPlus,
    gradient: 'from-indigo-500 to-violet-500',
    path: '/characters/new',
    buttonLabel: 'Karakter Oluştur',
    steps: [
      'Sol menüden "Karakterler" sekmesine tıklayın.',
      '"Yeni Karakter" butonuna basın.',
      'DNA formunu doldurun: İsim, yaş, milliyet, şehir, meslek, MBTI tipi, kişilik etiketleri.',
      'Fiziksel özellikler: Boy, kilo, vücut tipi, göğüs/bel/kalça ölçüleri.',
      'Cilt renkleri: Baz renk, gölge renk, parlak bölge rengi (HEX kodları).',
      'Yüz anatomisi: Göz şekli/rengi, kaş yapısı, burun tipi, dudak dolgunluğu, çene hattı.',
      'Saç DNA: Stil, uzunluk, doku, kök/orta/parlak renkleri.',
      'Teknik ayarlar: Kamera modeli, lens tipi, film stoku.',
      '"Oluştur" butonuna basın ve bekleyin. Referans görseller otomatik üretilecek.',
    ],
    warnings: [
      'DNA bilgileri ne kadar detaylı olursa görseller o kadar tutarlı olur.',
      'HEX renk kodlarını doğru girdiğinizden emin olun (#F5D0A9 gibi).',
    ],
    tips: [
      'Online renk seçici araçlar kullanarak HEX kodlarını kolayca bulabilirsiniz.',
      'MBTI tipini karakterin kişiliğine uygun seçin — konuşma tarzını etkiler.',
    ],
  },
  {
    id: 'api-keys',
    number: 2,
    title: 'API Anahtarlarını Ayarla',
    description: 'Görsel üretim ve AI sohbet için gerekli API anahtarlarını girin.',
    icon: Key,
    gradient: 'from-violet-500 to-purple-500',
    path: '/settings/api',
    buttonLabel: 'API Ayarları',
    steps: [
      'Sol menüden Ayarlar → "API Anahtarları" sekmesine gidin.',
      'Karakter seçin (birden fazla karakter varsa).',
      'Telegram API ID ve API Hash girin (my.telegram.org\'dan alınır).',
      'OpenRouter API anahtarını girin (AI sohbet için gerekli).',
      'KIE API anahtarını girin (görsel üretim için gerekli).',
      '"Kaydet" butonuna basın.',
    ],
    warnings: [
      'API anahtarlarını kimseyle paylaşmayın.',
      'Telegram API bilgileri my.telegram.org adresinden alınır — BotFather\'dan değil.',
      'Bu sistem Bot API değil, Userbot (GramJS) kullanır. Kendi Telegram hesabınızla giriş yaparsınız.',
    ],
    tips: [
      'OpenRouter\'da birçok model kullanabilirsiniz. Varsayılan model genellikle yeterlidir.',
      'KIE API\'de nano-banana-2 modeli hızlı ve kaliteli sonuçlar verir.',
    ],
  },
  {
    id: 'telegram-login',
    number: 3,
    title: 'Telegram\'a Giriş Yap',
    description: 'Karakterinizin Telegram hesabına bağlanın (Userbot oturumu).',
    icon: Shield,
    gradient: 'from-purple-500 to-fuchsia-500',
    path: '/characters',
    buttonLabel: 'Karakterlere Git',
    steps: [
      'Karakterler sayfasından karakterinize tıklayın.',
      '"Telegram" sekmesine gidin.',
      'Telefon numaranızı girin ve "Giriş Başlat" butonuna basın.',
      'Telegram\'dan gelen doğrulama kodunu girin.',
      'İki faktörlü doğrulama varsa şifrenizi de girin.',
      'Bağlantı başarılı olduğunda yeşil "Bağlı" durumu görünecek.',
    ],
    warnings: [
      'Bu işlem kendi Telegram hesabınızla yapılır — bot hesabı değil.',
      'Aynı anda sadece bir oturum aktif olabilir.',
      'Telegram\'ın flood koruması nedeniyle çok sık giriş/çıkış yapmayın.',
    ],
  },
  {
    id: 'create-groups',
    number: 4,
    title: 'Grup/Kanal Oluştur',
    description: 'Telegram\'da grup ve kanal oluşturun, içerik paylaşmak için.',
    icon: Radio,
    gradient: 'from-fuchsia-500 to-pink-500',
    path: '/characters',
    buttonLabel: 'Telegram Yönetimi',
    steps: [
      'Karakter detay sayfasından "Telegram" sekmesine gidin.',
      '"Grup Oluştur" veya "Kanal Oluştur" butonuna basın.',
      'İsim ve açıklama girin.',
      'Kanal oluşturduğunuzda otomatik davet linki üretilir.',
      'Oluşturulan gruplar/kanallar "Varlıklar" listesinde görünür.',
    ],
    warnings: [
      'Stars ile ücretli içerik (paywall) SADECE kanallarda çalışır, gruplarda çalışmaz.',
      'Bu Telegram\'ın kendi kısıtlamasıdır, sistem hatası değildir.',
    ],
    tips: [
      'Normal kanal: Herkese açık içerikler için.',
      'VIP kanal: Stars ile kilitli premium içerikler için.',
      'Grup: Sohbet ve etkileşim için.',
    ],
  },
  {
    id: 'generate-images',
    number: 5,
    title: 'Görsel Üret',
    description: 'AI ile karakteriniz için fotoğraflar üretin.',
    icon: Image,
    gradient: 'from-pink-500 to-rose-500',
    path: '/templates',
    buttonLabel: 'Şablonlara Git',
    steps: [
      '"Görseller" sekmesinden şablon kütüphanesine gidin.',
      'Bir kategori seçin (beach, cafe, gym, selfie vb.).',
      'Beğendiğiniz şablona tıklayın.',
      '"Kişiselleştir" butonuyla karakterinize özel prompt oluşturun.',
      'Prompt\'u kopyalayıp karakter detay sayfasından görsel üretimini başlatın.',
      'Üretilen görseller otomatik kaydedilir.',
    ],
    tips: [
      'En az 5-10 farklı şablon deneyin — çeşitlilik önemli.',
      'Aspect ratio olarak 9:16 (dikey) Instagram/Telegram için idealdir.',
      'Referans görseller otomatik kullanılır — karakterin tutarlılığını sağlar.',
    ],
  },
  {
    id: 'publish-content',
    number: 6,
    title: 'İçerik Paylaş',
    description: 'Ürettiğiniz görselleri Telegram\'da paylaşın.',
    icon: Send,
    gradient: 'from-rose-500 to-orange-500',
    path: '/characters',
    buttonLabel: 'Telegram Yönetimi',
    steps: [
      'Karakter detay → Telegram sekmesine gidin.',
      '"Varlıklar" listesinden paylaşmak istediğiniz kanal/grubu seçin.',
      '"İçerik Paylaş" butonuna basın.',
      'Mesaj yazın, görsel seçin.',
      'Stars fiyatı belirleyin (sadece kanallarda, ücretli içerik için).',
      '"Gönder" butonuna basın.',
    ],
    warnings: [
      'Stars (ücretli içerik) sadece kanallarda çalışır.',
      'Gruplara Stars fiyatı ile göndermek hata verir — bu normal.',
    ],
  },
  {
    id: 'gifts',
    number: 7,
    title: 'Hediye Gönder',
    description: 'Telegram Star Gift özelliğiyle kullanıcılara hediye gönderin.',
    icon: Gift,
    gradient: 'from-orange-500 to-amber-500',
    path: '/characters',
    buttonLabel: 'Telegram Yönetimi',
    steps: [
      'Karakter detay → Telegram sekmesinde "Hediyeler" bölümüne gidin.',
      'Mevcut hediye kataloğu otomatik yüklenir.',
      'Göndermek istediğiniz hediyeye tıklayın (mavi kenarlık ile seçilir).',
      'Alıcı bilgisini girin — @kullanıcıadı formatı önerilir.',
      'İsteğe bağlı mesaj yazın.',
      '"Hediye Gönder" butonuna basın.',
    ],
    tips: [
      '@kullanıcıadı formatı, sayısal ID\'den daha güvenilirdir.',
      'Hediye göndermek Stars bakiyesi gerektirir.',
    ],
  },
];

const FAQ_ITEMS: FAQItem[] = [
  // Genel
  { category: 'Genel', question: 'Bu sistem ne işe yarıyor?', answer: 'AI destekli sanal influencer karakterler oluşturmanızı, bu karakterler için yüksek kaliteli görseller üretmenizi ve Telegram üzerinden içerik yayınlayarak gelir elde etmenizi sağlar.' },
  { category: 'Genel', question: 'Bot API mi kullanıyor yoksa Userbot mu?', answer: 'Sistem Userbot (GramJS) kullanır. Yani kendi Telegram hesabınızla giriş yaparsınız, bot hesabı değil. Bu sayede grup/kanal oluşturma, mesaj gönderme gibi işlemleri gerçek bir kullanıcı gibi yapabilirsiniz.' },
  { category: 'Genel', question: 'Verilerim nerede saklanıyor?', answer: 'Tüm veriler yerel olarak data/ klasöründe JSON dosyaları olarak saklanır. Veritabanı kullanılmaz. API anahtarları şifreli olarak saklanır.' },
  { category: 'Genel', question: 'Birden fazla karakter oluşturabilir miyim?', answer: 'Evet. Her karakter için ayrı DNA, konuşma profili, görseller ve Telegram oturumu oluşturabilirsiniz.' },

  // Telegram
  { category: 'Telegram', question: 'Telegram API ID ve Hash nereden alınır?', answer: 'my.telegram.org adresine gidin → API Development Tools → Yeni uygulama oluşturun. Size verilen API ID (sayı) ve API Hash (metin) değerlerini sisteme girin.' },
  { category: 'Telegram', question: '"Could not find the input entity for PeerUser" hatası alıyorum', answer: 'Bu hata GramJS\'in kullanıcı/kanal bilgisini çözemediğinde oluşur. Sistem otomatik olarak 3 farklı ID formatını dener (pozitif, negatif, -100 prefix). Eğer hala hata alıyorsanız, ilgili kanal/gruba userbot hesabınızla katılmış olduğunuzdan emin olun.' },
  { category: 'Telegram', question: '"EXTENDED_MEDIA_PEER_INVALID" hatası ne demek?', answer: 'Bu hata Stars ile ücretli içeriği (paid media) bir GRUBA göndermeye çalıştığınızda oluşur. Telegram\'ın kısıtlaması: Stars paywall SADECE kanallarda çalışır. Çözüm: İçeriği gruba değil, kanala gönderin.' },
  { category: 'Telegram', question: 'Stars fiyatı neden gruplarda çalışmıyor?', answer: 'Telegram\'ın teknik kısıtlaması. sendPaidMedia API\'si sadece kanal (channel) türündeki varlıklarda çalışır. Grup seçtiğinizde Stars fiyat alanı otomatik devre dışı kalır.' },
  { category: 'Telegram', question: 'Hediye gönderirken hata alıyorum', answer: 'Alıcı bilgisini @kullanıcıadı formatında girin — sayısal ID yerine kullanıcı adı daha güvenilirdir. Ayrıca yeterli Stars bakiyeniz olduğundan emin olun.' },
  { category: 'Telegram', question: 'Telegram Premium gerekli mi?', answer: 'Hayır, Premium zorunlu değil. Ancak bazı özellikler (büyük dosya gönderme vb.) Premium ile daha iyi çalışabilir.' },

  // Görseller
  { category: 'Görseller', question: 'Hangi görsel üretim modelleri destekleniyor?', answer: 'KIE API üzerinden: nano-banana-2, flux-2, seedream-4-5, z-image, 4o-image, flux-kontext-pro, flux-kontext-max modelleri desteklenir.' },
  { category: 'Görseller', question: 'Referans görseller ne işe yarıyor?', answer: 'Karakter oluşturulduğunda otomatik üretilen referans görseller, sonraki görsel üretimlerinde karakterin tutarlı görünmesini sağlar. Yeni görsel üretirken bu referanslar otomatik kullanılır.' },
  { category: 'Görseller', question: 'Görsel kalitesi düşük çıkıyor', answer: 'DNA bilgilerini daha detaylı doldurun. Özellikle cilt renkleri, yüz anatomisi ve saç DNA bölümleri önemli. Ayrıca prompt\'u daha spesifik yazın.' },
  { category: 'Görseller', question: 'Aspect ratio ne olmalı?', answer: '9:16 (dikey) Telegram ve Instagram için ideal. 1:1 (kare) profil fotoğrafları için. 16:9 (yatay) kapak görselleri için uygundur.' },

  // Konuşma
  { category: 'Konuşma', question: 'AI sohbet nasıl çalışıyor?', answer: 'Kullanıcı mesaj gönderdiğinde, mesajlar 3 saniyelik bir tampon süresinde birleştirilir. Sonra karakter DNA\'sı, konuşma profili ve geçmiş mesajlar kullanılarak OpenRouter üzerinden AI yanıt üretilir.' },
  { category: 'Konuşma', question: 'Konuşma tarzını nasıl değiştiririm?', answer: 'Ayarlar → Konuşma Tarzı sekmesinden karakterin konuşma profilini düzenleyebilirsiniz. Stil (neşeli, gizemli, soğuk vb.), emoji sıklığı, mesaj uzunluğu gibi parametreleri ayarlayabilirsiniz.' },
  { category: 'Konuşma', question: 'Mesaj tamponu (buffer) ne demek?', answer: 'Kullanıcı art arda birden fazla mesaj gönderdiğinde, sistem 3 saniye bekler ve tüm mesajları birleştirip tek bir yanıt üretir. Bu daha doğal bir sohbet deneyimi sağlar.' },

  // Teknik
  { category: 'Teknik', question: 'Backend hangi portta çalışıyor?', answer: 'Backend Fastify sunucusu port 3001\'de, frontend Vite/React port 5173\'te çalışır.' },
  { category: 'Teknik', question: 'Yedekleme nasıl yapılır?', answer: 'Ayarlar → Sistem sekmesinden "Yedek Oluştur" butonuyla tüm verilerin ZIP yedeğini alabilirsiniz. Geri yükleme de aynı sayfadan yapılır.' },
  { category: 'Teknik', question: 'Hata loglarını nerede görebilirim?', answer: 'Ayarlar → Sistem sekmesinde son hataları görebilirsiniz. Detaylı loglar terminal/konsol çıktısında görünür.' },
];

const FAQ_CATEGORIES = ['Genel', 'Telegram', 'Görseller', 'Konuşma', 'Teknik'];

const TIPS = [
  { icon: Zap, title: 'Hızlı Başlangıç', text: 'Sadece 1 karakter + API anahtarları + Telegram girişi yaparak sistemi kullanmaya başlayabilirsiniz. Diğer adımlar sonra yapılabilir.' },
  { icon: Eye, title: 'Tutarlı Görseller', text: 'DNA formunu ne kadar detaylı doldurursanız, üretilen görseller o kadar tutarlı ve gerçekçi olur. Özellikle cilt renkleri ve yüz anatomisi kritik.' },
  { icon: Users, title: 'Kanal vs Grup', text: 'Stars ile ücretli içerik SADECE kanallarda çalışır. Gruplar sohbet ve etkileşim içindir. İkisini birlikte kullanın.' },
  { icon: Wand2, title: 'Şablon Kişiselleştirme', text: 'Şablon kütüphanesindeki promptları "Kişiselleştir" butonuyla karakterinize özel hale getirin. Bu, karakterin DNA bilgilerini prompt\'a otomatik ekler.' },
  { icon: Shield, title: 'Güvenlik', text: 'API anahtarları şifreli saklanır. Telegram oturumu güvenli bir şekilde yönetilir. Yine de anahtarlarınızı kimseyle paylaşmayın.' },
  { icon: Settings, title: 'Konuşma Ayarları', text: 'Her karakter için farklı konuşma tarzı belirleyebilirsiniz: neşeli, gizemli, soğuk, oyuncu vb. Emoji sıklığı ve mesaj uzunluğu da ayarlanabilir.' },
];

// ─── Components ───

const GettingStarted: React.FC = () => {
  const navigate = useNavigate();
  const [activeTab, setActiveTab] = useState<TabId>('guide');
  const [expandedSteps, setExpandedSteps] = useState<Set<string>>(new Set());
  const [expandedFaq, setExpandedFaq] = useState<Set<number>>(new Set());
  const [faqCategory, setFaqCategory] = useState<string>('Genel');
  const [faqSearch, setFaqSearch] = useState('');

  const toggleStep = (id: string) => {
    setExpandedSteps(prev => {
      const next = new Set(prev);
      next.has(id) ? next.delete(id) : next.add(id);
      return next;
    });
  };

  const toggleFaq = (idx: number) => {
    setExpandedFaq(prev => {
      const next = new Set(prev);
      next.has(idx) ? next.delete(idx) : next.add(idx);
      return next;
    });
  };

  const filteredFaq = FAQ_ITEMS.filter(item => {
    const matchesCategory = faqCategory === 'Tümü' || item.category === faqCategory;
    const matchesSearch = !faqSearch || item.question.toLowerCase().includes(faqSearch.toLowerCase()) || item.answer.toLowerCase().includes(faqSearch.toLowerCase());
    return matchesCategory && matchesSearch;
  });

  const tabs: { id: TabId; label: string; icon: React.ElementType }[] = [
    { id: 'guide', label: 'Adım Adım Rehber', icon: BookOpen },
    { id: 'faq', label: 'Sıkça Sorulan Sorular', icon: HelpCircle },
    { id: 'tips', label: 'İpuçları & Püf Noktaları', icon: Lightbulb },
  ];

  return (
    <div className="max-w-[1000px] mx-auto">
      {/* Header */}
      <motion.div initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} className="mb-8">
        <h1 className="text-2xl font-bold text-white tracking-tight flex items-center gap-2.5">
          <BookOpen className="w-6 h-6 text-cyan-400" />
          Kullanım Rehberi
        </h1>
        <p className="text-sm text-slate-500 mt-1">Her şeyi sıfırdan, adım adım öğrenin.</p>
      </motion.div>

      {/* Tabs */}
      <div className="flex gap-2 mb-8 border-b border-white/[0.06] pb-3">
        {tabs.map(tab => {
          const Icon = tab.icon;
          const isActive = activeTab === tab.id;
          return (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={`flex items-center gap-2 px-4 py-2.5 rounded-xl text-[13px] font-medium transition-all cursor-pointer ${
                isActive
                  ? 'bg-gradient-to-r from-cyan-500/15 to-blue-500/10 text-cyan-300 border border-cyan-500/20'
                  : 'text-slate-500 hover:text-slate-300 hover:bg-white/[0.03]'
              }`}
            >
              <Icon className="w-4 h-4" />
              {tab.label}
            </button>
          );
        })}
      </div>

      <AnimatePresence mode="wait">
        {/* ─── GUIDE TAB ─── */}
        {activeTab === 'guide' && (
          <motion.div key="guide" initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }}>
            {/* Progress bar */}
            <div className="mb-8 hidden md:flex items-center gap-1">
              {GUIDE_STEPS.map((step, i) => (
                <React.Fragment key={step.id}>
                  <div className={`flex items-center justify-center w-8 h-8 rounded-full bg-gradient-to-br ${step.gradient} text-xs font-bold text-white shadow-lg shrink-0`}>
                    {step.number}
                  </div>
                  {i < GUIDE_STEPS.length - 1 && <div className="flex-1 h-px bg-gradient-to-r from-white/10 to-white/5" />}
                </React.Fragment>
              ))}
            </div>

            <div className="space-y-4">
              {GUIDE_STEPS.map(step => {
                const Icon = step.icon;
                const isExpanded = expandedSteps.has(step.id);
                return (
                  <motion.div
                    key={step.id}
                    initial={{ opacity: 0, y: 12 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: step.number * 0.05 }}
                    className="rounded-2xl border border-white/[0.06] bg-white/[0.02] overflow-hidden"
                  >
                    <div className={`absolute inset-x-0 top-0 h-px bg-gradient-to-r ${step.gradient} opacity-30`} />
                    <div className="flex items-center gap-5 p-5">
                      <div className={`flex items-center justify-center w-12 h-12 rounded-xl bg-gradient-to-br ${step.gradient} shadow-lg shrink-0`}>
                        <Icon className="w-5 h-5 text-white" />
                      </div>
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-2 mb-1">
                          <span className="text-[11px] font-bold text-slate-600">ADIM {step.number}</span>
                        </div>
                        <h3 className="text-[15px] font-semibold text-white">{step.title}</h3>
                        <p className="text-[12px] text-slate-400 mt-0.5">{step.description}</p>
                      </div>
                      <div className="flex items-center gap-2 shrink-0">
                        <button onClick={() => toggleStep(step.id)}
                          className="flex items-center gap-1.5 px-3 py-2 rounded-lg border border-white/[0.06] text-[12px] text-slate-400 hover:text-white hover:bg-white/[0.04] transition-all cursor-pointer">
                          {isExpanded ? 'Gizle' : 'Detay'}
                          {isExpanded ? <ChevronUp className="w-3.5 h-3.5" /> : <ChevronDown className="w-3.5 h-3.5" />}
                        </button>
                        <button onClick={() => navigate(step.path)}
                          className={`flex items-center gap-1.5 px-4 py-2 rounded-xl bg-gradient-to-r ${step.gradient} text-[12px] font-semibold text-white shadow-lg cursor-pointer`}>
                          {step.buttonLabel}
                          <ArrowRight className="w-3.5 h-3.5" />
                        </button>
                      </div>
                    </div>

                    <AnimatePresence>
                      {isExpanded && (
                        <motion.div initial={{ height: 0, opacity: 0 }} animate={{ height: 'auto', opacity: 1 }} exit={{ height: 0, opacity: 0 }} className="overflow-hidden border-t border-white/[0.06]">
                          <div className="p-5 space-y-4">
                            {/* Steps */}
                            <div>
                              <h4 className="text-[12px] font-semibold text-blue-300 uppercase tracking-wider mb-3 flex items-center gap-1.5">
                                <CheckCircle2 className="w-3.5 h-3.5" /> Yapılacaklar
                              </h4>
                              <ol className="space-y-2">
                                {step.steps.map((s, i) => (
                                  <li key={i} className="flex gap-3 text-[13px] text-slate-300 leading-relaxed">
                                    <span className={`mt-0.5 flex items-center justify-center w-5 h-5 rounded-full bg-gradient-to-br ${step.gradient} text-[10px] font-bold text-white shrink-0`}>{i + 1}</span>
                                    <span>{s}</span>
                                  </li>
                                ))}
                              </ol>
                            </div>

                            {/* Warnings */}
                            {step.warnings && step.warnings.length > 0 && (
                              <div className="rounded-xl border border-amber-500/15 bg-amber-500/[0.04] p-4">
                                <h4 className="text-[12px] font-semibold text-amber-300 uppercase tracking-wider mb-2 flex items-center gap-1.5">
                                  <AlertTriangle className="w-3.5 h-3.5" /> Dikkat
                                </h4>
                                <ul className="space-y-1.5">
                                  {step.warnings.map((w, i) => (
                                    <li key={i} className="flex gap-2 text-[12px] text-amber-200/80">
                                      <span className="text-amber-400 mt-0.5">⚠</span>
                                      <span>{w}</span>
                                    </li>
                                  ))}
                                </ul>
                              </div>
                            )}

                            {/* Tips */}
                            {step.tips && step.tips.length > 0 && (
                              <div className="rounded-xl border border-emerald-500/15 bg-emerald-500/[0.04] p-4">
                                <h4 className="text-[12px] font-semibold text-emerald-300 uppercase tracking-wider mb-2 flex items-center gap-1.5">
                                  <Lightbulb className="w-3.5 h-3.5" /> İpucu
                                </h4>
                                <ul className="space-y-1.5">
                                  {step.tips.map((t, i) => (
                                    <li key={i} className="flex gap-2 text-[12px] text-emerald-200/80">
                                      <span className="text-emerald-400 mt-0.5">💡</span>
                                      <span>{t}</span>
                                    </li>
                                  ))}
                                </ul>
                              </div>
                            )}
                          </div>
                        </motion.div>
                      )}
                    </AnimatePresence>
                  </motion.div>
                );
              })}
            </div>
          </motion.div>
        )}

        {/* ─── FAQ TAB ─── */}
        {activeTab === 'faq' && (
          <motion.div key="faq" initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }}>
            {/* Search + Category filter */}
            <div className="flex flex-col sm:flex-row gap-3 mb-6">
              <div className="relative flex-1">
                <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" />
                <input
                  value={faqSearch}
                  onChange={e => setFaqSearch(e.target.value)}
                  placeholder="Soru ara..."
                  className="w-full pl-10 pr-4 py-2.5 rounded-xl bg-white/[0.03] border border-white/[0.08] text-sm text-slate-300 placeholder-slate-600 focus:outline-none focus:border-cyan-500/50 focus:ring-2 focus:ring-cyan-500/10 transition-all"
                />
              </div>
              <div className="flex gap-1.5 flex-wrap">
                {['Tümü', ...FAQ_CATEGORIES].map(cat => (
                  <button
                    key={cat}
                    onClick={() => setFaqCategory(cat)}
                    className={`px-3 py-2 rounded-lg text-[12px] font-medium transition-all cursor-pointer ${
                      faqCategory === cat
                        ? 'bg-cyan-500/15 text-cyan-300 border border-cyan-500/20'
                        : 'text-slate-500 hover:text-slate-300 bg-white/[0.02] border border-white/[0.06] hover:bg-white/[0.04]'
                    }`}
                  >
                    {cat}
                  </button>
                ))}
              </div>
            </div>

            {/* FAQ List */}
            <div className="space-y-2">
              {filteredFaq.length === 0 ? (
                <div className="rounded-2xl border border-white/[0.06] bg-white/[0.02] py-12 text-center">
                  <HelpCircle className="w-8 h-8 text-slate-700 mx-auto mb-3" />
                  <p className="text-[13px] text-slate-500">Aramanızla eşleşen soru bulunamadı.</p>
                </div>
              ) : (
                filteredFaq.map((item, idx) => {
                  const globalIdx = FAQ_ITEMS.indexOf(item);
                  const isOpen = expandedFaq.has(globalIdx);
                  return (
                    <motion.div
                      key={globalIdx}
                      initial={{ opacity: 0, y: 8 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{ delay: idx * 0.03 }}
                      className="rounded-xl border border-white/[0.06] bg-white/[0.02] overflow-hidden"
                    >
                      <button
                        onClick={() => toggleFaq(globalIdx)}
                        className="flex items-center gap-3 w-full p-4 text-left cursor-pointer hover:bg-white/[0.02] transition-colors"
                      >
                        <span className="text-[10px] font-semibold text-cyan-400 bg-cyan-500/10 px-2 py-0.5 rounded shrink-0">
                          {item.category}
                        </span>
                        <span className="text-[13px] font-medium text-slate-200 flex-1">{item.question}</span>
                        <motion.div animate={{ rotate: isOpen ? 180 : 0 }} transition={{ duration: 0.2 }}>
                          <ChevronDown className="w-4 h-4 text-slate-600 shrink-0" />
                        </motion.div>
                      </button>
                      <AnimatePresence>
                        {isOpen && (
                          <motion.div initial={{ height: 0, opacity: 0 }} animate={{ height: 'auto', opacity: 1 }} exit={{ height: 0, opacity: 0 }} className="overflow-hidden">
                            <div className="px-4 pb-4 pt-0">
                              <p className="text-[13px] text-slate-400 leading-relaxed pl-[72px]">{item.answer}</p>
                            </div>
                          </motion.div>
                        )}
                      </AnimatePresence>
                    </motion.div>
                  );
                })
              )}
            </div>
          </motion.div>
        )}

        {/* ─── TIPS TAB ─── */}
        {activeTab === 'tips' && (
          <motion.div key="tips" initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }}>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              {TIPS.map((tip, i) => {
                const Icon = tip.icon;
                return (
                  <motion.div
                    key={i}
                    initial={{ opacity: 0, y: 12 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: i * 0.06 }}
                    className="rounded-2xl border border-white/[0.06] bg-white/[0.02] p-5 hover:border-cyan-500/20 hover:bg-white/[0.03] transition-all"
                  >
                    <div className="flex items-center gap-3 mb-3">
                      <div className="flex items-center justify-center w-9 h-9 rounded-lg bg-cyan-500/10">
                        <Icon className="w-4.5 h-4.5 text-cyan-400" />
                      </div>
                      <h3 className="text-[14px] font-semibold text-white">{tip.title}</h3>
                    </div>
                    <p className="text-[12px] text-slate-400 leading-relaxed">{tip.text}</p>
                  </motion.div>
                );
              })}
            </div>

            {/* Quick reference card */}
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ delay: 0.4 }}
              className="mt-6 rounded-2xl border border-cyan-500/15 bg-cyan-500/[0.03] p-6"
            >
              <h3 className="text-[14px] font-semibold text-cyan-300 mb-4 flex items-center gap-2">
                <Zap className="w-4 h-4" /> Hızlı Referans
              </h3>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-2 text-[12px]">
                <div className="flex justify-between py-1.5 border-b border-white/[0.04]">
                  <span className="text-slate-500">Backend Port</span>
                  <span className="text-slate-300 font-mono">3001</span>
                </div>
                <div className="flex justify-between py-1.5 border-b border-white/[0.04]">
                  <span className="text-slate-500">Frontend Port</span>
                  <span className="text-slate-300 font-mono">5173</span>
                </div>
                <div className="flex justify-between py-1.5 border-b border-white/[0.04]">
                  <span className="text-slate-500">Veri Dizini</span>
                  <span className="text-slate-300 font-mono">data/</span>
                </div>
                <div className="flex justify-between py-1.5 border-b border-white/[0.04]">
                  <span className="text-slate-500">Telegram API</span>
                  <span className="text-slate-300">GramJS (Userbot)</span>
                </div>
                <div className="flex justify-between py-1.5 border-b border-white/[0.04]">
                  <span className="text-slate-500">AI Sohbet</span>
                  <span className="text-slate-300">OpenRouter</span>
                </div>
                <div className="flex justify-between py-1.5 border-b border-white/[0.04]">
                  <span className="text-slate-500">Görsel Üretim</span>
                  <span className="text-slate-300">KIE API</span>
                </div>
                <div className="flex justify-between py-1.5 border-b border-white/[0.04]">
                  <span className="text-slate-500">Stars Paywall</span>
                  <span className="text-slate-300">Sadece Kanallar</span>
                </div>
                <div className="flex justify-between py-1.5 border-b border-white/[0.04]">
                  <span className="text-slate-500">Mesaj Tamponu</span>
                  <span className="text-slate-300">3 saniye</span>
                </div>
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
};

export default GettingStarted;
