import React, { useState } from 'react';
import { BookOpen, Sword, Map, Feather, ChevronRight, Menu, X, Shield, Castle, Skull, ScrollText } from 'lucide-react';

export default function App() {
  const [activeTab, setActiveTab] = useState('home');
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [activeChapter, setActiveChapter] = useState(null);

  // Evren Verileri (Mock Data)
  const universeData = {
    characters: [
      { name: "Abriskil", desc: "Kaderi titanlar tarafından çizilmiş, asi ve yenilmez savaşçı.", icon: <Sword className="w-6 h-6 text-amber-500" /> },
      { name: "Eldor", desc: "Gölgeli Vadi'nin bilge büyücüsü, kadim sırların koruyucusu.", icon: <ScrollText className="w-6 h-6 text-amber-500" /> },
    ],
    locations: [
      { name: "Demir Kale", desc: "Geçilemez surları ve ejderha ateşiyle dövülmüş kapılarıyla efsanevi sığınak.", icon: <Castle className="w-6 h-6 text-amber-500" /> },
      { name: "Fısıldayan Orman", desc: "İçine girenin bir daha çıkamadığı, ağaçların geçmişi anlattığı lanetli bölge.", icon: <Map className="w-6 h-6 text-amber-500" /> },
    ],
    lore: [
      { name: "Kızıl Yay", desc: "Sadece gerçek bir varisin gerebileceği, titan kemiğinden yapılmış yay.", icon: <Shield className="w-6 h-6 text-amber-500" /> },
      { name: "Uyuyan Titanlar", desc: "Yerin binlerce kat altında uyanmayı bekleyen kadim devler.", icon: <Skull className="w-6 h-6 text-amber-500" /> },
    ]
  };

  // Kitap Bölümleri
  const chapters = [
    {
      id: 1,
      title: "Bölüm 1: Küllerden Doğan",
      content: "Güneş, Demir Kale'nin surlarının ardında kaybolurken, gökyüzü kan kırmızısı bir renge büründü. Abriskil, elindeki Kızıl Yay'ın soğuk dokunuşunu hissederek derin bir nefes aldı. Rüzgar, Fısıldayan Orman'dan kadim bir ninninin feryadını taşıyordu. Yıllardır beklenen an gelmişti. Titanların uykusu artık o kadar da derin değildi. Toprak hafifçe titrediğinde, kılıcının kabzasını sıktı. Bugün sadece bir savaş değil, bir devrin sonu başlayacaktı..."
    },
    {
      id: 2,
      title: "Bölüm 2: Vadinin Sırrı",
      content: "Ormanın içine doğru attığı her adımda karanlık daha da yoğunlaşıyordu. Eldor'un ona verdiği tılsım göğsünde hafifçe parlıyor, fısıltıları bir nebze olsun uzak tutuyordu. Aniden önünde devasa, yosun tutmuş bir taş belirdi. Üzerindeki rünler, binlerce yıl öncesine aitti. Abriskil elini taşa dokundurduğunda, zihninde yankılanan o derin sesi duydu: 'Geçmişi arayan, geleceğini feda etmeye hazır olmalıdır.'"
    }
  ];

  // Diğer Eserler
  const otherWorks = [
    { type: "Şiir", title: "Sessiz Çığlıklar", desc: "Gecenin karanlığına ve yalnızlığa yazılmış epik şiirler derlemesi." },
    { type: "Şiir", title: "Kan ve Gül", desc: "Savaşın ortasında yeşeren umutların mısralara dökülmüş hali." },
    { type: "Hikaye", title: "Gece Nöbeti", desc: "Sınır kasabasında nöbet tutan bir askerin gördüğü doğaüstü olaylar." },
    { type: "Hikaye", title: "Kayıp Yollar", desc: "Kendi geçmişini arayan bir gezginin kısa ve çarpıcı öyküsü." }
  ];

  const handleNavClick = (tab) => {
    setActiveTab(tab);
    setActiveChapter(null); // Bölüm okumadan çık
    setIsMobileMenuOpen(false);
  };

  return (
    <div className="min-h-screen bg-slate-950 text-gray-300 font-sans selection:bg-amber-900 selection:text-amber-100">
      
      {/* Navbar */}
      <nav className="fixed w-full z-50 bg-slate-950/80 backdrop-blur-md border-b border-white/10">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-20">
            <div className="flex-shrink-0 cursor-pointer" onClick={() => handleNavClick('home')}>
              <h1 className="font-serif text-3xl font-bold tracking-widest text-transparent bg-clip-text bg-gradient-to-r from-amber-400 to-red-600">
                ABRİSKİL
              </h1>
            </div>
            
            {/* Masaüstü Menü */}
            <div className="hidden md:block">
              <div className="ml-10 flex items-baseline space-x-8">
                <button onClick={() => handleNavClick('home')} className={`px-3 py-2 rounded-md text-sm font-medium uppercase tracking-wider transition-colors ${activeTab === 'home' ? 'text-amber-500' : 'text-gray-400 hover:text-white'}`}>Ana Sayfa</button>
                <button onClick={() => handleNavClick('universe')} className={`px-3 py-2 rounded-md text-sm font-medium uppercase tracking-wider transition-colors ${activeTab === 'universe' ? 'text-amber-500' : 'text-gray-400 hover:text-white'}`}>Evren</button>
                <button onClick={() => handleNavClick('read')} className={`px-3 py-2 rounded-md text-sm font-medium uppercase tracking-wider transition-colors ${activeTab === 'read' ? 'text-amber-500' : 'text-gray-400 hover:text-white'}`}>Romanı Oku</button>
                <button onClick={() => handleNavClick('works')} className={`px-3 py-2 rounded-md text-sm font-medium uppercase tracking-wider transition-colors ${activeTab === 'works' ? 'text-amber-500' : 'text-gray-400 hover:text-white'}`}>Diğer Eserler</button>
              </div>
            </div>

            {/* Mobil Menü Butonu */}
            <div className="md:hidden">
              <button onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)} className="text-gray-400 hover:text-white p-2">
                {isMobileMenuOpen ? <X size={28} /> : <Menu size={28} />}
              </button>
            </div>
          </div>
        </div>

        {/* Mobil Menü İçeriği */}
        {isMobileMenuOpen && (
          <div className="md:hidden bg-slate-900 border-b border-white/10">
            <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
              <button onClick={() => handleNavClick('home')} className="block w-full text-left px-3 py-4 text-base font-medium text-gray-300 hover:text-white hover:bg-slate-800 uppercase tracking-wider">Ana Sayfa</button>
              <button onClick={() => handleNavClick('universe')} className="block w-full text-left px-3 py-4 text-base font-medium text-gray-300 hover:text-white hover:bg-slate-800 uppercase tracking-wider">Evren</button>
              <button onClick={() => handleNavClick('read')} className="block w-full text-left px-3 py-4 text-base font-medium text-gray-300 hover:text-white hover:bg-slate-800 uppercase tracking-wider">Romanı Oku</button>
              <button onClick={() => handleNavClick('works')} className="block w-full text-left px-3 py-4 text-base font-medium text-gray-300 hover:text-white hover:bg-slate-800 uppercase tracking-wider">Diğer Eserler</button>
            </div>
          </div>
        )}
      </nav>

      {/* Ana İçerik Alanı */}
      <main className="pt-20 min-h-screen">
        
        {/* ANA SAYFA GÖRÜNÜMÜ */}
        {activeTab === 'home' && (
          <div className="relative flex flex-col items-center justify-center min-h-[90vh] px-4 text-center overflow-hidden">
            {/* Arkaplan Efekti */}
            <div className="absolute inset-0 z-0 opacity-20">
              <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-amber-900/40 via-slate-950 to-slate-950"></div>
            </div>
            
            <div className="relative z-10 max-w-4xl mx-auto mt-12">
              <Feather className="w-12 h-12 text-amber-500 mx-auto mb-6 opacity-80" />
              <h1 className="text-5xl md:text-8xl font-serif font-bold text-white mb-6 tracking-tighter">
                ABRİSKİL
              </h1>
              <p className="text-xl md:text-3xl font-light text-gray-400 mb-10 italic">
                "Uyanan bir Titan'ı durdurabilecek tek şey, ondan daha büyük bir efsanedir."
              </p>
              <div className="flex flex-col sm:flex-row gap-6 justify-center">
                <button 
                  onClick={() => handleNavClick('read')}
                  className="px-8 py-4 bg-amber-700 hover:bg-amber-600 text-white rounded font-medium tracking-widest uppercase transition-all shadow-[0_0_20px_rgba(180,83,9,0.4)]"
                >
                  İlk Bölümü Oku
                </button>
                <button 
                  onClick={() => handleNavClick('universe')}
                  className="px-8 py-4 bg-transparent border border-gray-600 hover:border-amber-500 hover:text-amber-500 text-gray-300 rounded font-medium tracking-widest uppercase transition-all"
                >
                  Evreni Keşfet
                </button>
              </div>
            </div>
          </div>
        )}

        {/* EVREN GÖRÜNÜMÜ (Karakterler, Mekanlar vs.) */}
        {activeTab === 'universe' && (
          <div className="max-w-7xl mx-auto px-4 py-16">
            <div className="text-center mb-16">
              <h2 className="text-4xl md:text-5xl font-serif font-bold text-white mb-4">Evrenin Sırları</h2>
              <div className="w-24 h-1 bg-gradient-to-r from-amber-600 to-transparent mx-auto"></div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-12">
              {/* Karakterler */}
              <div className="space-y-6">
                <h3 className="text-2xl font-serif text-amber-500 flex items-center border-b border-white/10 pb-3">
                  <Sword className="mr-3" /> Karakterler
                </h3>
                {universeData.characters.map((item, idx) => (
                  <div key={idx} className="bg-slate-900/50 p-6 rounded-lg border border-white/5 hover:border-amber-900/50 transition-all group">
                    <h4 className="text-xl font-bold text-white mb-2 group-hover:text-amber-400 transition-colors">{item.name}</h4>
                    <p className="text-gray-400 text-sm leading-relaxed">{item.desc}</p>
                  </div>
                ))}
              </div>

              {/* Mekanlar */}
              <div className="space-y-6">
                <h3 className="text-2xl font-serif text-amber-500 flex items-center border-b border-white/10 pb-3">
                  <Map className="mr-3" /> Bölgeler & Kaleler
                </h3>
                {universeData.locations.map((item, idx) => (
                  <div key={idx} className="bg-slate-900/50 p-6 rounded-lg border border-white/5 hover:border-amber-900/50 transition-all group">
                    <h4 className="text-xl font-bold text-white mb-2 group-hover:text-amber-400 transition-colors">{item.name}</h4>
                    <p className="text-gray-400 text-sm leading-relaxed">{item.desc}</p>
                  </div>
                ))}
              </div>

              {/* Lore & Silahlar */}
              <div className="space-y-6">
                <h3 className="text-2xl font-serif text-amber-500 flex items-center border-b border-white/10 pb-3">
                  <Skull className="mr-3" /> Efsaneler & Silahlar
                </h3>
                {universeData.lore.map((item, idx) => (
                  <div key={idx} className="bg-slate-900/50 p-6 rounded-lg border border-white/5 hover:border-amber-900/50 transition-all group">
                    <h4 className="text-xl font-bold text-white mb-2 group-hover:text-amber-400 transition-colors">{item.name}</h4>
                    <p className="text-gray-400 text-sm leading-relaxed">{item.desc}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}

        {/* ROMANI OKU GÖRÜNÜMÜ */}
        {activeTab === 'read' && (
          <div className="max-w-4xl mx-auto px-4 py-12">
            {!activeChapter ? (
              // Bölüm Seçim Ekranı
              <div className="space-y-8 mt-8">
                <div className="text-center mb-12">
                  <BookOpen className="w-12 h-12 text-amber-600 mx-auto mb-4" />
                  <h2 className="text-3xl font-serif text-white">Yayınlanan Bölümler</h2>
                  <p className="text-gray-500 mt-2">Karanlık evrene ilk adımlarını at.</p>
                </div>
                
                {chapters.map((chapter) => (
                  <div 
                    key={chapter.id} 
                    onClick={() => setActiveChapter(chapter)}
                    className="flex items-center justify-between p-6 bg-slate-900 rounded-xl border border-white/5 cursor-pointer hover:bg-slate-800 hover:border-amber-700/50 transition-all group"
                  >
                    <div>
                      <h3 className="text-2xl font-serif text-gray-200 group-hover:text-white">{chapter.title}</h3>
                      <p className="text-gray-500 mt-2 text-sm uppercase tracking-widest">Okumak için tıkla</p>
                    </div>
                    <ChevronRight className="text-amber-700 group-hover:text-amber-500 transform group-hover:translate-x-2 transition-all" />
                  </div>
                ))}
              </div>
            ) : (
              // Aktif Kitap Okuma Ekranı (Odak Modu)
              <div className="animate-in fade-in duration-700 mt-4">
                <button 
                  onClick={() => setActiveChapter(null)}
                  className="mb-8 text-amber-500 hover:text-amber-400 text-sm uppercase tracking-widest flex items-center"
                >
                  <ChevronRight className="rotate-180 mr-1 w-4 h-4" /> Bölümlere Dön
                </button>
                
                <article className="bg-[#1a1c23] p-8 md:p-16 rounded-xl shadow-2xl border border-white/5">
                  <h2 className="text-4xl md:text-5xl font-serif text-amber-500 mb-12 text-center border-b border-white/10 pb-8">
                    {activeChapter.title}
                  </h2>
                  <div className="prose prose-invert prose-lg max-w-none font-serif text-gray-300 leading-loose">
                    <p className="first-letter:text-7xl first-letter:font-bold first-letter:text-amber-600 first-letter:mr-3 first-letter:float-left">
                      {activeChapter.content}
                    </p>
                  </div>
                </article>
                
                <div className="mt-12 text-center text-gray-500 text-sm italic">
                  - Bu bölümün sonu -
                </div>
              </div>
            )}
          </div>
        )}

        {/* DİĞER ESERLER GÖRÜNÜMÜ (Şiir ve Hikayeler) */}
        {activeTab === 'works' && (
          <div className="max-w-6xl mx-auto px-4 py-16">
             <div className="text-center mb-16">
              <h2 className="text-4xl md:text-5xl font-serif font-bold text-white mb-4">Kütüphane</h2>
              <p className="text-gray-400 text-lg">Şiirler, kısa öyküler ve diğer karalamalar...</p>
              <div className="w-24 h-1 bg-gradient-to-r from-amber-600 to-transparent mx-auto mt-6"></div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              {otherWorks.map((work, idx) => (
                <div key={idx} className="flex bg-slate-900 rounded-lg overflow-hidden border border-white/5 hover:border-amber-900/50 transition-all">
                  <div className="w-2 bg-amber-700"></div>
                  <div className="p-8 w-full flex flex-col justify-between">
                    <div>
                      <span className="inline-block px-3 py-1 bg-slate-950 text-amber-500 text-xs font-bold uppercase tracking-widest rounded mb-4">
                        {work.type}
                      </span>
                      <h3 className="text-2xl font-serif text-white mb-3">{work.title}</h3>
                      <p className="text-gray-400 leading-relaxed">{work.desc}</p>
                    </div>
                    <button className="mt-6 text-sm text-amber-600 hover:text-amber-400 font-bold uppercase tracking-wider flex items-center w-max">
                      Eseri İncele <ChevronRight className="w-4 h-4 ml-1" />
                    </button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

      </main>

      {/* Footer */}
      <footer className="bg-slate-950 border-t border-white/5 py-12 mt-12">
        <div className="max-w-7xl mx-auto px-4 text-center">
          <h2 className="font-serif text-2xl font-bold tracking-widest text-white mb-6">ABRİSKİL</h2>
          <p className="text-gray-500 text-sm mb-8">Tüm hakları saklıdır &copy; 2026. Evrenin izinsiz kopyalanması, titanların gazabını üzerinize çeker.</p>
          
          <div className="max-w-md mx-auto bg-slate-900 p-1 rounded-full flex border border-white/10">
            <input 
              type="email" 
              placeholder="Yeni bölümlerden haberdar ol..." 
              className="bg-transparent border-none text-gray-300 px-6 py-3 w-full focus:outline-none focus:ring-0"
            />
            <button className="bg-amber-700 hover:bg-amber-600 text-white px-6 py-3 rounded-full font-medium transition-colors whitespace-nowrap">
              Kayıt Ol
            </button>
          </div>
        </div>
      </footer>

    </div>
  );
}