hosting-platform/frontend/src/components/CFTokenGuide.jsx

function CFTokenGuide({ onClose }) {
  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-lg max-w-3xl w-full max-h-[90vh] overflow-y-auto">
        <div className="p-6">
          <div className="flex justify-between items-center mb-6">
            <h2 className="text-2xl font-bold">Cloudflare API Token Oluşturma Rehberi</h2>
            <button
              onClick={onClose}
              className="text-gray-500 hover:text-gray-700 text-2xl"
            >
              ×
            </button>
          </div>

          <div className="space-y-6">
            {/* Step 1 */}
            <div className="border-l-4 border-blue-500 pl-4">
              <h3 className="font-bold text-lg mb-2">1. Cloudflare Dashboard'a Giriş Yapın</h3>
              <p className="text-gray-700 mb-2">
                <a 
                  href="https://dash.cloudflare.com" 
                  target="_blank" 
                  rel="noopener noreferrer"
                  className="text-blue-600 hover:underline"
                >
                  https://dash.cloudflare.com
                </a> adresine gidin ve giriş yapın.
              </p>
            </div>

            {/* Step 2 */}
            <div className="border-l-4 border-blue-500 pl-4">
              <h3 className="font-bold text-lg mb-2">2. API Tokens Sayfasına Gidin</h3>
              <ul className="list-disc list-inside text-gray-700 space-y-1">
                <li>Sağ üst köşedeki profil ikonuna tıklayın</li>
                <li>"My Profile" seçeneğini seçin</li>
                <li>Sol menüden "API Tokens" sekmesine tıklayın</li>
              </ul>
            </div>

            {/* Step 3 */}
            <div className="border-l-4 border-blue-500 pl-4">
              <h3 className="font-bold text-lg mb-2">3. Yeni Token Oluşturun</h3>
              <ul className="list-disc list-inside text-gray-700 space-y-1">
                <li>"Create Token" butonuna tıklayın</li>
                <li>"Edit zone DNS" template'ini seçin</li>
                <li>Veya "Create Custom Token" ile özel token oluşturun</li>
              </ul>
            </div>

            {/* Step 4 */}
            <div className="border-l-4 border-blue-500 pl-4">
              <h3 className="font-bold text-lg mb-2">4. Token İzinlerini Ayarlayın</h3>
              <div className="bg-gray-50 p-4 rounded-lg">
                <p className="font-medium mb-2">Gerekli İzinler:</p>
                <ul className="space-y-2 text-sm">
                  <li className="flex items-start">
                    <span className="text-green-600 mr-2">✓</span>
                    <span><strong>Zone - DNS - Edit:</strong> DNS kayıtlarını düzenlemek için</span>
                  </li>
                  <li className="flex items-start">
                    <span className="text-green-600 mr-2">✓</span>
                    <span><strong>Zone - Zone - Read:</strong> Zone bilgilerini okumak için</span>
                  </li>
                  <li className="flex items-start">
                    <span className="text-green-600 mr-2">✓</span>
                    <span><strong>Zone - Zone Settings - Edit:</strong> SSL ayarları için</span>
                  </li>
                </ul>
              </div>
            </div>

            {/* Step 5 */}
            <div className="border-l-4 border-blue-500 pl-4">
              <h3 className="font-bold text-lg mb-2">5. Zone Seçimi</h3>
              <p className="text-gray-700 mb-2">
                "Zone Resources" bölümünde:
              </p>
              <ul className="list-disc list-inside text-gray-700 space-y-1">
                <li><strong>Specific zone:</strong> Sadece belirli bir domain için</li>
                <li><strong>All zones:</strong> Tüm domain'leriniz için (önerilen)</li>
              </ul>
            </div>

            {/* Step 6 */}
            <div className="border-l-4 border-blue-500 pl-4">
              <h3 className="font-bold text-lg mb-2">6. Token'ı Oluşturun ve Kopyalayın</h3>
              <ul className="list-disc list-inside text-gray-700 space-y-1">
                <li>"Continue to summary" butonuna tıklayın</li>
                <li>"Create Token" butonuna tıklayın</li>
                <li>Oluşturulan token'ı kopyalayın</li>
              </ul>
              <div className="mt-3 p-3 bg-yellow-50 border border-yellow-200 rounded">
                <p className="text-sm text-yellow-800">
                  <strong>⚠️ Önemli:</strong> Token sadece bir kez gösterilir! 
                  Mutlaka güvenli bir yere kaydedin.
                </p>
              </div>
            </div>

            {/* Example Token */}
            <div className="border-l-4 border-green-500 pl-4">
              <h3 className="font-bold text-lg mb-2">Token Örneği</h3>
              <div className="bg-gray-900 text-green-400 p-3 rounded font-mono text-sm overflow-x-auto">
                y_12345abcdefghijklmnopqrstuvwxyz1234567890ABCD
              </div>
              <p className="text-sm text-gray-600 mt-2">
                Token bu formatta olacaktır (genellikle 40 karakter)
              </p>
            </div>

            {/* Security Tips */}
            <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
              <h3 className="font-bold mb-2 flex items-center">
                <svg className="w-5 h-5 mr-2 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                </svg>
                Güvenlik İpuçları
              </h3>
              <ul className="text-sm text-blue-800 space-y-1">
                <li>• Token'ı kimseyle paylaşmayın</li>
                <li>• Token'ı güvenli bir şifre yöneticisinde saklayın</li>
                <li>• Kullanılmayan token'ları silin</li>
                <li>• Token'ı düzenli olarak yenileyin</li>
              </ul>
            </div>
          </div>

          <div className="mt-6 flex justify-end">
            <button
              onClick={onClose}
              className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700"
            >
              Anladım
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}

export default CFTokenGuide