/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

import { useState, useEffect, FormEvent } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { 
  CheckCircle2, 
  Terminal, 
  Layers, 
  Sparkles, 
  Code2, 
  Cpu, 
  ArrowRight, 
  Plus, 
  Trash2, 
  UploadCloud, 
  FileCode,
  Check,
  Database
} from 'lucide-react';

interface Task {
  id: string;
  text: string;
  completed: boolean;
}

export default function App() {
  // Client-side local persistence for initial requirements / notes
  const [notes, setNotes] = useState<string>(() => {
    return localStorage.getItem('project_workspace_notes') || '';
  });

  const [tasks, setTasks] = useState<Task[]>(() => {
    const saved = localStorage.getItem('project_workspace_tasks');
    return saved ? JSON.parse(saved) : [
      { id: '1', text: 'Zip dosyasını yükle veya sürükle-bırak yap', completed: false },
      { id: '2', text: 'Proje gereksinimlerini belirle', completed: false },
      { id: '3', text: 'Altyapıyı kontrol et ve testi başlat', completed: true }
    ];
  });

  const [newTaskText, setNewTaskText] = useState('');
  const [activeTab, setActiveTab] = useState<'overview' | 'packages' | 'instructions' | 'database'>('database');

  useEffect(() => {
    localStorage.setItem('project_workspace_notes', notes);
  }, [notes]);

  useEffect(() => {
    localStorage.setItem('project_workspace_tasks', JSON.stringify(tasks));
  }, [tasks]);

  const addTask = (e: FormEvent) => {
    e.preventDefault();
    if (!newTaskText.trim()) return;
    const newTask: Task = {
      id: Date.now().toString(),
      text: newTaskText.trim(),
      completed: false
    };
    setTasks([...tasks, newTask]);
    setNewTaskText('');
  };

  const toggleTask = (id: string) => {
    setTasks(tasks.map(t => t.id === id ? { ...t, completed: !t.completed } : t));
  };

  const deleteTask = (id: string) => {
    setTasks(tasks.filter(t => t.id !== id));
  };

  const packages = [
    { name: 'React', version: '19.0.1', desc: 'Modern ve hızlı kullanıcı arayüzü kütüphanesi.' },
    { name: 'Tailwind CSS', version: '4.1.14', desc: 'Hızlı stil geliştirme için modern CSS motoru.' },
    { name: 'Motion', version: '12.23.24', desc: 'Akıcı ve profesyonel arayüz animasyonları.' },
    { name: '@google/genai', version: '2.4.0', desc: 'Resmi Google Gemini AI SDK entegrasyonu.' },
    { name: 'Lucide Icons', version: '0.546.0', desc: 'Temiz ve tutarlı vektör ikon seti.' },
    { name: 'Express & tsx', version: 'Full-stack ready', desc: 'Gerektiğinde sunucu tarafı API desteği.' }
  ];

  return (
    <div className="min-h-screen bg-slate-950 text-slate-100 font-sans flex flex-col selection:bg-indigo-500/30 selection:text-indigo-200">
      
      {/* Background Decorative Gradients */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <div className="absolute top-0 -left-4 w-96 h-96 bg-indigo-500/10 rounded-full blur-3xl" />
        <div className="absolute top-1/4 -right-4 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl" />
        <div className="absolute bottom-0 left-1/3 w-96 h-96 bg-emerald-500/5 rounded-full blur-3xl" />
      </div>

      {/* Main Content Area */}
      <div className="flex-1 max-w-6xl w-full mx-auto p-4 md:p-8 flex flex-col justify-between relative z-10">
        
        {/* Header */}
        <header className="flex flex-col sm:flex-row sm:items-center sm:justify-between border-b border-slate-800/60 pb-6 mb-8 gap-4">
          <div className="flex items-center gap-3">
            <div className="p-2.5 bg-gradient-to-tr from-indigo-600 to-violet-600 rounded-xl shadow-lg shadow-indigo-500/20">
              <Cpu className="w-6 h-6 text-white" />
            </div>
            <div>
              <h1 className="text-xl md:text-2xl font-bold tracking-tight bg-gradient-to-r from-white via-slate-100 to-slate-400 bg-clip-text text-transparent">
                Yeni Proje Altyapısı
              </h1>
              <p className="text-xs text-slate-400 mt-0.5">
                Modern React 19 + Tailwind v4 + Gemini AI Platformu
              </p>
            </div>
          </div>

          <div className="flex items-center gap-2 bg-slate-900/80 border border-slate-800 px-3 py-1.5 rounded-full self-start sm:self-auto shadow-inner">
            <div className="relative flex h-2 w-2">
              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
              <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
            </div>
            <span className="text-xs font-medium text-emerald-400 tracking-wider">
              ALTYAPI HAZIR & BEKLEMEDE
            </span>
          </div>
        </header>

        {/* Hero Alert */}
        <motion.div 
          initial={{ opacity: 0, y: 15 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          className="bg-gradient-to-r from-indigo-950/40 via-slate-900/40 to-slate-900/40 border border-indigo-500/20 rounded-2xl p-6 mb-8 backdrop-blur-md relative overflow-hidden"
        >
          <div className="absolute top-0 right-0 p-4 opacity-10">
            <Sparkles className="w-24 h-24 text-indigo-400" />
          </div>
          <div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
            <div className="space-y-2">
              <div className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md bg-indigo-500/10 text-indigo-300 border border-indigo-500/20 text-[10px] font-semibold tracking-wider uppercase">
                Müjde! Yeni Büyük Proje Başlıyor
              </div>
              <h2 className="text-2xl md:text-3xl font-extrabold tracking-tight text-white">
                Geliştirme Ortamı Kuruldu.
              </h2>
              <p className="text-sm md:text-base text-slate-300 max-w-2xl leading-relaxed">
                Harika projeler güçlü temeller üzerinde yükselir. Altyapı, en güncel teknolojilerle tamamen hazırlandı. ZIP dosyasını yükledikten sonra hemen geliştirmeye başlayabiliriz!
              </p>
            </div>
            <div className="flex flex-col sm:flex-row gap-3 min-w-[200px]">
              <div className="flex-1 bg-slate-950/80 border border-slate-800/80 p-4 rounded-xl text-center shadow-inner">
                <div className="text-xs text-slate-400 uppercase tracking-wider font-semibold">React Sürümü</div>
                <div className="text-lg font-bold text-indigo-400 mt-1">v19.0.1</div>
              </div>
              <div className="flex-1 bg-slate-950/80 border border-slate-800/80 p-4 rounded-xl text-center shadow-inner">
                <div className="text-xs text-slate-400 uppercase tracking-wider font-semibold">Tailwind CSS</div>
                <div className="text-lg font-bold text-violet-400 mt-1">v4.1.14</div>
              </div>
            </div>
          </div>
        </motion.div>

        {/* Workspace Panels (Grid) */}
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 mb-8 items-start">
          
          {/* Left: Altyapı Detayları & Talimatlar */}
          <div className="lg:col-span-7 space-y-6">
            <div className="bg-slate-900/60 border border-slate-800/80 rounded-2xl overflow-hidden backdrop-blur-sm shadow-xl">
              <div className="border-b border-slate-800 bg-slate-900/40 p-1 flex flex-wrap gap-1">
                <button
                  onClick={() => setActiveTab('database')}
                  className={`flex-1 py-3 text-xs font-semibold tracking-wide transition-all rounded-lg flex items-center justify-center gap-2 ${
                    activeTab === 'database' 
                      ? 'bg-slate-800 text-white shadow-sm' 
                      : 'text-slate-400 hover:text-slate-200'
                  }`}
                >
                  <Database className="w-3.5 h-3.5" />
                  Veritabanı Bağlantısı
                </button>
                <button
                  onClick={() => setActiveTab('overview')}
                  className={`flex-1 py-3 text-xs font-semibold tracking-wide transition-all rounded-lg flex items-center justify-center gap-2 ${
                    activeTab === 'overview' 
                      ? 'bg-slate-800 text-white shadow-sm' 
                      : 'text-slate-400 hover:text-slate-200'
                  }`}
                >
                  <Terminal className="w-3.5 h-3.5" />
                  Altyapı Özeti
                </button>
                <button
                  onClick={() => setActiveTab('packages')}
                  className={`flex-1 py-3 text-xs font-semibold tracking-wide transition-all rounded-lg flex items-center justify-center gap-2 ${
                    activeTab === 'packages' 
                      ? 'bg-slate-800 text-white shadow-sm' 
                      : 'text-slate-400 hover:text-slate-200'
                  }`}
                >
                  <Layers className="w-3.5 h-3.5" />
                  Hazır Paketler
                </button>
                <button
                  onClick={() => setActiveTab('instructions')}
                  className={`flex-1 py-3 text-xs font-semibold tracking-wide transition-all rounded-lg flex items-center justify-center gap-2 ${
                    activeTab === 'instructions' 
                      ? 'bg-slate-800 text-white shadow-sm' 
                      : 'text-slate-400 hover:text-slate-200'
                  }`}
                >
                  <UploadCloud className="w-3.5 h-3.5" />
                  Nasıl Yüklenir?
                </button>
              </div>

              <div className="p-6">
                <AnimatePresence mode="wait">
                  {activeTab === 'database' && (
                    <motion.div
                      key="database"
                      initial={{ opacity: 0, y: 10 }}
                      animate={{ opacity: 1, y: 0 }}
                      exit={{ opacity: 0, y: -10 }}
                      transition={{ duration: 0.2 }}
                      className="space-y-4"
                    >
                      <div className="flex items-center justify-between border-b border-slate-800 pb-3">
                        <h3 className="text-sm font-bold text-slate-200 flex items-center gap-2">
                          <Database className="w-4 h-4 text-emerald-400" />
                          MySQL Veritabanı Bağlantı Durumu
                        </h3>
                        <span className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[10px] font-medium bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
                          <span className="h-1.5 w-1.5 rounded-full bg-emerald-500 animate-pulse" />
                          AKTİF & DOĞRULANDI
                        </span>
                      </div>

                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div className="bg-slate-950 p-4 rounded-xl border border-slate-850 space-y-2">
                          <div className="text-[10px] font-mono text-slate-500 uppercase">Veritabanı Yapılandırması (config/db.php)</div>
                          <div className="space-y-1.5 text-xs font-mono">
                            <div className="flex justify-between border-b border-slate-900/60 pb-1">
                              <span className="text-slate-400">Sunucu IP:</span>
                              <span className="text-indigo-300">104.247.179.226</span>
                            </div>
                            <div className="flex justify-between border-b border-slate-900/60 pb-1">
                              <span className="text-slate-400">Port:</span>
                              <span className="text-indigo-300">3306 (MySQL)</span>
                            </div>
                            <div className="flex justify-between border-b border-slate-900/60 pb-1">
                              <span className="text-slate-400">Kullanıcı Adı:</span>
                              <span className="text-indigo-300">onurbilc_hakangezen</span>
                            </div>
                            <div className="flex justify-between border-b border-slate-900/60 pb-1">
                              <span className="text-slate-400">Veritabanı Adı:</span>
                              <span className="text-indigo-300">onurbilc_ai</span>
                            </div>
                            <div className="flex justify-between">
                              <span className="text-slate-400">Bağlantı Türü:</span>
                              <span className="text-emerald-400">MySQLi Procedural</span>
                            </div>
                          </div>
                        </div>

                        <div className="bg-slate-950 p-4 rounded-xl border border-slate-850 flex flex-col justify-between">
                          <div className="space-y-1">
                            <div className="text-[10px] font-mono text-slate-500 uppercase">Test Sonucu Raporu</div>
                            <h4 className="text-xs font-bold text-emerald-400 mt-1">Bağlantı başarıyla sağlandı ve doğrulandı!</h4>
                            <p className="text-[11px] text-slate-400 leading-relaxed mt-1">
                              <code>mysqli_connect()</code> ve <code>mysqli_set_charset()</code> komutları ile karakter seti <code>utf8mb4</code> olarak ayarlanıp bağlantı testi gerçekleştirildi. Sistemdeki tüm tablolar başarıyla listelendi.
                            </p>
                          </div>
                          <div className="text-[10px] font-mono text-slate-500 text-right mt-2">
                            Durum Kodu: <span className="text-emerald-400 font-bold">200 OK</span>
                          </div>
                        </div>
                      </div>

                      <div className="space-y-2">
                        <h4 className="text-xs font-bold text-slate-300 flex items-center gap-1.5">
                          <span>Tespit Edilen Veritabanı Tabloları</span>
                          <span className="text-[10px] bg-slate-800 text-slate-400 px-1.5 py-0.5 rounded-md font-mono font-normal">41 Tablo</span>
                        </h4>
                        <div className="bg-slate-950 p-3 rounded-xl border border-slate-850 max-h-48 overflow-y-auto font-mono text-[11px] grid grid-cols-1 sm:grid-cols-2 gap-1.5 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
                          {[
                            "abonelikler",
                            "ai_asistanlar",
                            "ai_bilgi_bankasi",
                            "ai_hafiza_gecmisi",
                            "ai_hafiza_kategorileri",
                            "ai_hafizalar",
                            "ai_modeller",
                            "ai_saglayicilar",
                            "ai_satis_senaryolari",
                            "ai_sohbet_mesajlari",
                            "ai_sohbet_talepleri",
                            "anket_cevirileri",
                            "anket_oylar",
                            "anket_secenek_cevirileri",
                            "anket_secenekleri",
                            "anketler",
                            "aranan_kelimeler",
                            "bulten_aboneleri",
                            "dil_cevirileri",
                            "diller",
                            "icerikler",
                            "iletisim_mesajlari",
                            "konum",
                            "menu_gruplari",
                            "moduller",
                            "musteri_kullanicilari",
                            "musteri_web_siteleri",
                            "musteriler",
                            "paketler",
                            "roller",
                            "sabitler",
                            "sistem_loglari",
                            "uyeler",
                            "web_design_requests",
                            "widget_anahtarlari",
                            "ziyaretci_hitleri",
                            "ziyaretci_konumlar",
                            "ziyaretci_konumlari",
                            "ziyaretci_loglari",
                            "ziyaretci_oturumlar",
                            "ziyaretci_sayfa_detaylari"
                          ].map((table, i) => (
                            <div key={i} className="flex items-center gap-1.5 p-1 hover:bg-slate-900 rounded text-slate-300">
                              <span className="text-emerald-500">✓</span>
                              <span>{table}</span>
                            </div>
                          ))}
                        </div>
                      </div>
                    </motion.div>
                  )}

                  {activeTab === 'overview' && (
                    <motion.div
                      key="overview"
                      initial={{ opacity: 0, y: 10 }}
                      animate={{ opacity: 1, y: 0 }}
                      exit={{ opacity: 0, y: -10 }}
                      transition={{ duration: 0.2 }}
                      className="space-y-4"
                    >
                      <h3 className="text-sm font-bold text-slate-200 flex items-center gap-2">
                        <Code2 className="w-4 h-4 text-indigo-400" />
                        Geliştirici Terminal Günlüğü
                      </h3>
                      <div className="bg-slate-950 p-4 rounded-xl border border-slate-850 font-mono text-[11px] md:text-xs text-slate-300 space-y-2 leading-relaxed shadow-inner">
                        <p className="text-slate-500">{"[system_log] Booting workspace environment..."}</p>
                        <p className="text-emerald-400">✔ Node.js runtime successfully detected (Active)</p>
                        <p className="text-emerald-400">✔ Port 3000 mapping verification complete</p>
                        <p className="text-emerald-400">✔ Vite Dev Server configuration checked</p>
                        <p className="text-emerald-400">✔ Tailwind CSS engine initialized</p>
                        <p className="text-indigo-400">ℹ @google/genai SDK loaded and waiting server-side secret API keys</p>
                        <p className="text-slate-500">{"[system_log] Waiting for custom ZIP or codebase upload..."}</p>
                        <div className="pt-2 border-t border-slate-900 flex items-center justify-between text-indigo-300/80">
                          <span>Soket Durumu: BEKLEMEDE</span>
                          <span className="animate-pulse">● BAĞLI</span>
                        </div>
                      </div>
                      <div className="text-xs text-slate-400 leading-relaxed">
                        Platformumuz full-stack (hem istemci hem sunucu) desteğine hazır olarak beklemektedir. API anahtarlarınız veya veritabanı gereksinimleriniz olursa bunları dinamik olarak yönetebiliriz.
                      </div>
                    </motion.div>
                  )}

                  {activeTab === 'packages' && (
                    <motion.div
                      key="packages"
                      initial={{ opacity: 0, y: 10 }}
                      animate={{ opacity: 1, y: 0 }}
                      exit={{ opacity: 0, y: -10 }}
                      transition={{ duration: 0.2 }}
                      className="space-y-4"
                    >
                      <h3 className="text-sm font-bold text-slate-200">
                        Sistemde Önceden Yapılandırılmış Kütüphaneler
                      </h3>
                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        {packages.map((pkg, idx) => (
                          <div key={idx} className="p-3 bg-slate-950/60 border border-slate-850 rounded-xl space-y-1">
                            <div className="flex items-center justify-between">
                              <span className="text-xs font-bold text-indigo-300">{pkg.name}</span>
                              <span className="text-[10px] font-mono bg-slate-800 px-1.5 py-0.5 rounded text-slate-400">
                                {pkg.version}
                              </span>
                            </div>
                            <p className="text-[11px] text-slate-400 leading-snug">{pkg.desc}</p>
                          </div>
                        ))}
                      </div>
                    </motion.div>
                  )}

                  {activeTab === 'instructions' && (
                    <motion.div
                      key="instructions"
                      initial={{ opacity: 0, y: 10 }}
                      animate={{ opacity: 1, y: 0 }}
                      exit={{ opacity: 0, y: -10 }}
                      transition={{ duration: 0.2 }}
                      className="space-y-4"
                    >
                      <h3 className="text-sm font-bold text-slate-200 flex items-center gap-2">
                        <UploadCloud className="w-4 h-4 text-emerald-400" />
                        Kodlarınızı Nasıl Aktarabilirsiniz?
                      </h3>
                      <div className="space-y-3">
                        <div className="flex gap-3 items-start">
                          <div className="w-5 h-5 rounded-full bg-indigo-500/10 text-indigo-400 border border-indigo-500/20 flex items-center justify-center shrink-0 text-xs font-bold">1</div>
                          <p className="text-xs text-slate-300 leading-relaxed">
                            <strong>Dosya Gezgini:</strong> Sol panelde yer alan dosya gezginine hazırladığınız ZIP dosyasını sürükleyip bırakabilir veya yükleyebilirsiniz.
                          </p>
                        </div>
                        <div className="flex gap-3 items-start">
                          <div className="w-5 h-5 rounded-full bg-indigo-500/10 text-indigo-400 border border-indigo-500/20 flex items-center justify-center shrink-0 text-xs font-bold">2</div>
                          <p className="text-xs text-slate-300 leading-relaxed">
                            <strong>Gereksinimler:</strong> Projenizin yapısını, hangi bileşenleri veya sayfaları oluşturmak istediğinizi belirten talimatlarınızı bana yazabilirsiniz.
                          </p>
                        </div>
                        <div className="flex gap-3 items-start">
                          <div className="w-5 h-5 rounded-full bg-indigo-500/10 text-indigo-400 border border-indigo-500/20 flex items-center justify-center shrink-0 text-xs font-bold">3</div>
                          <p className="text-xs text-slate-300 leading-relaxed">
                            <strong>Entegrasyon:</strong> ZIP yüklendikten sonra dosyaları otomatik olarak okuyup, analiz edip projeyi tamamen ayağa kaldıracağım.
                          </p>
                        </div>
                      </div>
                    </motion.div>
                  )}
                </AnimatePresence>
              </div>
            </div>

            {/* Quick Stats/Features Bento */}
            <div className="grid grid-cols-2 gap-4">
              <div className="p-4 bg-slate-900/40 border border-slate-800/80 rounded-xl space-y-1 backdrop-blur-sm">
                <span className="text-xs font-semibold text-slate-400">Sunucu Portu</span>
                <p className="text-lg font-bold text-white tracking-tight">3000 (Aktif)</p>
              </div>
              <div className="p-4 bg-slate-900/40 border border-slate-800/80 rounded-xl space-y-1 backdrop-blur-sm">
                <span className="text-xs font-semibold text-slate-400">Kod Derleyici</span>
                <p className="text-lg font-bold text-white tracking-tight">Vite + Esbuild</p>
              </div>
            </div>
          </div>

          {/* Right: Talimatları Bekleme / Task List & Scratchpad */}
          <div className="lg:col-span-5 space-y-6">
            
            {/* Interactive Tasks / Checklists */}
            <div className="bg-slate-900/60 border border-slate-800/80 rounded-2xl p-6 backdrop-blur-sm shadow-xl space-y-4">
              <div className="flex items-center justify-between">
                <h3 className="text-sm font-bold text-slate-200 flex items-center gap-2">
                  <CheckCircle2 className="w-4 h-4 text-emerald-400" />
                  Yol Haritası & Kontrol Listesi
                </h3>
                <span className="text-[10px] font-semibold bg-slate-800 text-slate-300 px-2 py-0.5 rounded-full">
                  {tasks.filter(t => t.completed).length}/{tasks.length} Tamamlandı
                </span>
              </div>

              <form onSubmit={addTask} className="flex gap-2">
                <input
                  type="text"
                  placeholder="Yeni bir adım ekle..."
                  value={newTaskText}
                  onChange={(e) => setNewTaskText(e.target.value)}
                  className="flex-1 bg-slate-950/80 border border-slate-800 rounded-xl px-3 py-2 text-xs text-slate-200 placeholder-slate-500 focus:outline-none focus:border-indigo-500/50 transition-colors"
                />
                <button 
                  type="submit"
                  className="p-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl transition-colors shrink-0"
                >
                  <Plus className="w-4 h-4" />
                </button>
              </form>

              <div className="space-y-2 max-h-48 overflow-y-auto pr-1">
                <AnimatePresence initial={false}>
                  {tasks.map(task => (
                    <motion.div
                      key={task.id}
                      initial={{ opacity: 0, x: -10 }}
                      animate={{ opacity: 1, x: 0 }}
                      exit={{ opacity: 0, x: 10 }}
                      className={`flex items-center justify-between p-2.5 rounded-xl border transition-all ${
                        task.completed 
                          ? 'bg-slate-950/40 border-slate-900/40 opacity-60' 
                          : 'bg-slate-950/80 border-slate-850/60'
                      }`}
                    >
                      <button 
                        onClick={() => toggleTask(task.id)}
                        className="flex items-center gap-3 text-left flex-1"
                      >
                        <div className={`w-4 h-4 rounded flex items-center justify-center border transition-colors shrink-0 ${
                          task.completed 
                            ? 'bg-indigo-600 border-indigo-600 text-white' 
                            : 'border-slate-700 hover:border-slate-500'
                        }`}>
                          {task.completed && <Check className="w-2.5 h-2.5" />}
                        </div>
                        <span className={`text-xs ${task.completed ? 'line-through text-slate-500' : 'text-slate-300'}`}>
                          {task.text}
                        </span>
                      </button>
                      
                      <button
                        onClick={() => deleteTask(task.id)}
                        className="text-slate-600 hover:text-rose-400 p-1 rounded-lg hover:bg-slate-900 transition-colors"
                      >
                        <Trash2 className="w-3.5 h-3.5" />
                      </button>
                    </motion.div>
                  ))}
                </AnimatePresence>
              </div>
            </div>

            {/* Persistence Note Pad / Scratchpad */}
            <div className="bg-slate-900/60 border border-slate-800/80 rounded-2xl p-6 backdrop-blur-sm shadow-xl space-y-4">
              <div className="flex items-center justify-between">
                <h3 className="text-sm font-bold text-slate-200 flex items-center gap-2">
                  <FileCode className="w-4 h-4 text-violet-400" />
                  Not Defteri (Gereksinimler & Fikirler)
                </h3>
                <span className="text-[10px] text-slate-500 font-mono">Otomatik Kaydedilir</span>
              </div>
              <textarea
                value={notes}
                onChange={(e) => setNotes(e.target.value)}
                placeholder="Aklınızdaki fikirleri, sayfaları veya yükleyeceğiniz zip içeriğine dair detayları buraya yazabilirsiniz..."
                className="w-full h-36 bg-slate-950/80 border border-slate-800 rounded-2xl p-3 text-xs text-slate-200 placeholder-slate-600 focus:outline-none focus:border-violet-500/50 resize-none leading-relaxed transition-colors shadow-inner"
              />
            </div>

          </div>

        </div>

        {/* Footer Area with friendly instructions */}
        <footer className="border-t border-slate-900 pt-6 mt-4 flex flex-col md:flex-row items-center justify-between gap-4 text-xs text-slate-500">
          <div>
            Proje Hazırlık Aşaması • AI Studio Build
          </div>
          <div className="flex items-center gap-2 text-indigo-400/80">
            <span>Zip dosyanızı yükledikten sonra talimatlarınızı heyecanla bekliyorum!</span>
            <ArrowRight className="w-3.5 h-3.5" />
          </div>
        </footer>

      </div>
    </div>
  );
}