/* global React, Icon */
// ============================================================
// frekanslol — Blog (index + 3 full articles)
// ============================================================

const POSTS = [
  {
    slug: "skin-nasil-degistirilir-2026",
    title: "League of Legends'ta Skin Nasıl Değiştirilir? (2026 Rehberi)",
    excerpt: "Topluluk skinlerini güvenle, dosya değiştirmeden nasıl yüklersin? frekanslol ile adım adım kurulum.",
    category: "Rehber",
    readTime: "8 dk",
    date: "20 Mayıs 2026",
  },
  {
    slug: "en-iyi-10-topluluk-skin-mayis-2026",
    title: "En İyi 10 Topluluk League of Legends Skini (Mayıs 2026)",
    excerpt: "Topluluk sanatçılarının ürettiği, frekanslol kütüphanesindeki en iyi 10 .fantome skinine genel bakış.",
    category: "Liste",
    readTime: "6 dk",
    date: "14 Mayıs 2026",
  },
  {
    slug: "ai-mac-kocu-rank-atlama",
    title: "League Maç Koçu Nedir? AI ile Rank Atlama Rehberi",
    excerpt: "frekanslol'un maç koçu modülü nasıl çalışır, hangi metriklere bakmalısın ve rank yolculuğunda nasıl faydalanırsın?",
    category: "Strateji",
    readTime: "7 dk",
    date: "8 Mayıs 2026",
  },
];

// ----------------------------------------------------------------
// Blog index
// ----------------------------------------------------------------
function BlogIndex({ onNav, openPost }) {
  return (
    <main>
      <section className="dl-hero">
        <div className="container">
          <span className="eyebrow"><span className="dot" />Blog</span>
          <h1 style={{ marginTop: 18 }}>Rehberler, listeler ve strateji.</h1>
          <p style={{ fontSize: "1.1rem", marginTop: 18, maxWidth: 620, margin: "18px auto 0" }}>
            frekanslol ekibinden League of Legends üzerine yazılar — skin yönetiminden meta analizine, AI koçluk ipuçlarından topluluk hikâyelerine.
          </p>
        </div>
      </section>

      <section className="section section-tight">
        <div className="container">
          <div className="blog-grid">
            {POSTS.map((p) => (
              <article key={p.slug} className="card blog-card" onClick={() => openPost(p.slug)}>
                <div className="blog-cover" aria-hidden="true">
                  <div className="blog-cover-glow" />
                  <span className="mono" style={{ position: "relative", fontSize: "0.7rem", color: "var(--text-muted)" }}>
                    {p.slug.toUpperCase()}
                  </span>
                </div>
                <div style={{ padding: "22px 26px 26px", display: "flex", flexDirection: "column", gap: 12 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                    <span className="chip chip-accent">{p.category}</span>
                    <span style={{ fontSize: "0.78rem", color: "var(--text-muted)", fontFamily: "var(--font-mono)" }}>
                      {p.date} · {p.readTime}
                    </span>
                  </div>
                  <h3 style={{ fontSize: "1.18rem", lineHeight: 1.3 }}>{p.title}</h3>
                  <p style={{ fontSize: "0.93rem" }}>{p.excerpt}</p>
                  <span style={{ marginTop: "auto", color: "var(--accent-hi)", fontSize: "0.88rem", fontWeight: 600, display: "inline-flex", alignItems: "center", gap: 6 }}>
                    Yazıyı oku <Icon.Arrow />
                  </span>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

// ----------------------------------------------------------------
// Individual posts
// ----------------------------------------------------------------
function PostSkinDegistirme({ onNav, tweaks }) {
  return (
    <PostShell
      title="League of Legends'ta Skin Nasıl Değiştirilir? (2026 Rehberi)"
      category="Rehber"
      readTime="8 dk"
      date="20 Mayıs 2026"
      onNav={onNav}
    >
      <p className="lead">
        League of Legends'ta resmi satın alma dışında skin kullanmak isteyen oyuncular için en güvenli ve modern yöntem; topluluk tarafından üretilen <strong>.fantome</strong> dosyalarını yerel olarak yüklemektir. Bu rehberde frekanslol kullanarak skin yönetiminin nasıl yapılacağını, hangi adımları izlemen gerektiğini ve banlanma riski hakkında bilmen gerekenleri tek tek ele alıyoruz.
      </p>

      <h2>.fantome formatı nedir?</h2>
      <p>
        .fantome dosyaları, League of Legends'ın WAD/BIN içerik formatlarını kullanmadan, oyun dosyalarına dokunmadan skin yüklemeye olanak tanıyan bir paketleme standardıdır. Topluluk geliştiricileri tarafından oluşturulmuş bu format, oyun istemcisi çalışırken sadece bellekte aktive edilir ve oyun kapandığında tüm değişiklikler geri alınır. Bu yaklaşım, kalıcı dosya değişikliğinden kaynaklanabilecek ban risklerini en aza indirir.
      </p>

      <h2>Adım 1: frekanslol'u indir</h2>
      <p>
        GitHub Releases sayfasından en son <span className="mono" style={{ color: "var(--text)" }}>frekanslol-setup-1.7.1.exe</span> dosyasını indir. Dosya yaklaşık 80 MB boyutundadır ve Windows 10/11 (64-bit) ile uyumludur. İndirmeyi resmi linkten yapman güvenlik açısından kritiktir — internet üzerindeki üçüncü taraf depolardan indirme yapma.
      </p>

      <h2>Adım 2: Kurulumu tamamla</h2>
      <p>
        İndirilen .exe dosyasını çalıştır. Windows SmartScreen uyarı çıkarırsa "Daha fazla bilgi" → "Yine de çalıştır" seçeneklerini kullan. Kurulum sihirbazı seni adım adım yönlendirecek; varsayılan kurulum klasörünü kabul etmen yeterlidir. .NET 8.0 çalışma zamanı sistemde yoksa otomatik olarak indirilir.
      </p>

      <h2>Adım 3: League of Legends kurulum klasörünü tanıt</h2>
      <p>
        İlk açılışta frekanslol, League of Legends kurulum klasörünü bulamazsa sana sorar. Genelde bu klasör <span className="mono" style={{ color: "var(--text)" }}>C:/Riot Games/League of Legends</span> dizinindedir. "Browse" düğmesiyle bu klasörü seçmen yeterli. Bundan sonra uygulama, oyun istemcisini otomatik algılar ve LCU API üzerinden bağlanır.
      </p>

      <h2>Adım 4: Skin kütüphanesini indir</h2>
      <p>
        Sol menüden <strong>Özel Kostümler</strong> sekmesine gir. Üstte yer alan <strong>Download Custom Skins Library</strong> düğmesine tıkla. Bu işlem, topluluk tarafından üretilmiş binlerce .fantome dosyasını yerel diskine indirir. İlk indirme internet hızına bağlı olarak 5-15 dakika sürebilir; sonraki güncellemeler çok daha hızlıdır çünkü sadece değişiklikler senkronlanır.
      </p>

      <h2>Adım 5: Skinleri seç ve uygula</h2>
      <p>
        Şampiyon kartına tıkla, sağda açılan listeden istediğin skinleri seç. Birden fazla şampiyon için aynı anda farklı skinleri ayarlayabilirsin. Tüm seçimlerin tamamlandıktan sonra üstteki <strong>Start Patcher</strong> düğmesine tıkla. Yeşil "Ready to start" durumuna geçtiğinde, League of Legends'ı aç ve maça gir — seçtiğin skinler maç içinde otomatik olarak görünür hale gelir.
      </p>

      <h2>Banlanma riski hakkında</h2>
      <p>
        frekanslol'un kullandığı yöntem, oyun dosyalarını fiziksel olarak değiştirmediği için Riot'un standart anti-cheat sistemi tarafından algılanmaz. Ancak Riot'un Hizmet Şartları, üçüncü taraf araç kullanımını teknik olarak yasaklar; bu nedenle teorik bir risk her zaman vardır. Topluluk içinde 4 yılı aşkın süredir aktif olarak kullanılan benzer araçlardan ban raporu pratik olarak çok düşüktür. Yine de risk değerlendirmesini kullanıcı kendisi yapmalıdır.
      </p>

      <h2>Skinleri kaldırma ve geri alma</h2>
      <p>
        Eklediğin bir skini kaldırmak istediğinde, ilgili şampiyonun kartına tıkla ve seçimi geri al. Tüm skinleri tek seferde kapatmak için üst menüdeki <strong>Restart</strong> düğmesi yeterlidir. Oyun istemcisi bu sırada kapatılıp yeniden başlatılır ve varsayılan görüntüler geri yüklenir. Hiçbir kalıcı dosya değişikliği yapılmadığı için "temizleme" işlemine gerek yoktur.
      </p>

      <h2>Sık karşılaşılan sorunlar</h2>
      <ul>
        <li><strong>"League algılanmıyor"</strong> — Oyun istemcisini frekanslol açıldıktan sonra başlatmayı dene. Bazen sıralama önemli oluyor.</li>
        <li><strong>"Skin maç içinde görünmüyor"</strong> — Patcher'ı başlatmayı unuttuğundan emin ol. Yeşil "Ready" durumu olmalı.</li>
        <li><strong>"Antivirüs engelliyor"</strong> — frekanslol klasörünü antivirüs istisnalarına ekle. Topluluk araçları genellikle false-positive tetikler.</li>
      </ul>

      <h2>Sonuç</h2>
      <p>
        frekanslol ile skin değiştirmek; ne dosya çıkartma ne de manuel patch uygulama gibi geleneksel yöntemlerden çok daha basit ve güvenlidir. Tek tıklık aktivasyon, otomatik güncelleme ve geri alma kolaylığı sayesinde her oyuncu için erişilebilir. Skin koleksiyonunu denemekten çekinme — sonuçta hiçbir kalıcı değişiklik yapılmıyor.
      </p>
    </PostShell>
  );
}

function PostEnIyiSkinler({ onNav, tweaks }) {
  return (
    <PostShell
      title="En İyi 10 Topluluk League of Legends Skini (Mayıs 2026)"
      category="Liste"
      readTime="6 dk"
      date="14 Mayıs 2026"
      onNav={onNav}
    >
      <p className="lead">
        frekanslol skin kütüphanesinde 4.000'i aşkın topluluk skini bulunuyor; ama hangileri öne çıkıyor? Mayıs 2026 itibarıyla en çok indirilen, en yüksek puan alan ve görsel kalitesiyle resmi skinlere meydan okuyan en iyi 10 .fantome skinine bir göz atalım.
      </p>

      <h2>1. Akira Ahri</h2>
      <p>
        Cyberpunk estetiğini Ahri'nin K/DA serisiyle harmanlayan bu skin, Tokyo neon ışıkları ve geometrik particle efektleriyle dikkat çekiyor. Q yeteneği elektrik dalgası, R'si holografik klonlar olarak yeniden tasarlanmış. Topluluk sanatçısı <em>nyxlumen</em>'in en çok indirilen eseri.
      </p>

      <h2>2. Glass Vex</h2>
      <p>
        Vex'in karanlık şiir temasını cam-katı estetiğiyle yeniden yorumlayan bu skin; pasiflerinde kristal kırığı efektleri, ultisinde ise ayna parçalanması animasyonu kullanıyor. Düşük poligon sayısı sayesinde performansa zarar vermez, FPS düşüşü yaşatmaz.
      </p>

      <h2>3. Samurai Yasuo</h2>
      <p>
        Yasuo için sayısız samurai versiyonu var; bu sürüm geleneksel sumi-e fırça darbeleriyle çizilmiş silah modeli ve ronin temalı animasyonlarıyla öne çıkıyor. Hareket halinde çiçek yaprakları izi bırakır; ulti sırasında kanji efektleri belirir.
      </p>

      <h2>4. Cyber Senna</h2>
      <p>
        Project skin serisinin yarattığı boşluğu doldurmak isteyen topluluk sanatçısı, Senna'ya tam teşekküllü bir cyberpunk dönüşüm vermiş. Silahı bir plasma rifle haline gelmiş, ulti glow'u mor-mavi spektrumda lazer şeridi.
      </p>

      <h2>5. Ethereal Lillia</h2>
      <p>
        Pastel renk paleti, parıltılı particle'lar ve rüya temalı animasyonlarla Lillia'nın orijinal masal kimliğini bir adım öteye taşıyor. Özellikle ulti sırasındaki yıldız tozu efekti çok beğeniliyor.
      </p>

      <h2>6. Knight Master Yi</h2>
      <p>
        Master Yi'yi ortaçağ şövalyesi olarak yeniden hayal eden bu skin; tam plate zırh modeli ve aslan kalkanıyla geliyor. Alpha Strike sırasında zırh parlaması, ulti sırasında ise zafer naralarıyla seslendirme replacement.
      </p>

      <h2>7. Ocean Nami</h2>
      <p>
        Nami'nin var olan deniz teması, gerçek deniz canlısı animasyonlarıyla genişletilmiş. Q tsunamisi balıkları, W kabarcığı mercan parçacıkları içeriyor. Görsel olarak çok yoğun bir skin; renk efektlerini sevenler için ideal.
      </p>

      <h2>8. Dragon Tamer Kog'Maw</h2>
      <p>
        Kog'Maw'ı küçük bir ejder olarak yeniden hayal eden eğlenceli bir konsept. Ulti sırasında ateş soluğu, attack sırasında alev partikülleri var. Düşük poligonlu ama karakteristik animasyonlarıyla beğeni topluyor.
      </p>

      <h2>9. Witch Lulu</h2>
      <p>
        Cadı temalı Lulu yeniden, ama bu sefer gerçek bir Halloween palette ile. Pix bir baykuş haline gelmiş, ulti sırasında jack-o-lantern büyüsü yağıyor. Şirin ama atmosferik.
      </p>

      <h2>10. Mecha Renekton</h2>
      <p>
        Renekton'u dev bir mecha olarak yeniden tasarlayan ambitious bir skin. Tüm yetenek animasyonları yeniden çizilmiş, ulti sırasında jet propülsiyon efekti var. Performans gereksinimi diğerlerine göre biraz daha yüksek.
      </p>

      <h2>Nasıl indirebilirim?</h2>
      <p>
        Bu skinlerin tamamı frekanslol Custom Skins Library'de yer alıyor. Uygulamayı aç, ilgili şampiyona git ve listeden seçim yap — kütüphane indirildiyse anında uygulanmaya hazır. Kütüphane güncellemeleri haftalık olarak yapılır; yeni eklenen skinler "Yeni" rozetiyle işaretlenir.
      </p>
    </PostShell>
  );
}

function PostAIMacKocu({ onNav, tweaks }) {
  return (
    <PostShell
      title="League Maç Koçu Nedir? AI ile Rank Atlama Rehberi"
      category="Strateji"
      readTime="7 dk"
      date="8 Mayıs 2026"
      onNav={onNav}
    >
      <p className="lead">
        Yıllardır yüksek rank'lere ulaşan oyuncular; refleks ve mekanik kadar <em>karar verme</em> kalitesinin de fark yarattığını söyler. AI destekli maç koçluğu, bu karar verme sürecini somut verilere dayandırarak rank yolculuğunda gerçek bir farklılık yaratabilir.
      </p>

      <h2>Maç koçu nedir, ne işe yarar?</h2>
      <p>
        Maç koçu; champ select öncesinden başlayıp maç sonuna kadar uzanan süreçte, oyuncuya istatistiksel rehberlik sunan bir yardımcıdır. frekanslol bu rehberliği <strong>Riot'un resmi LCU API'si</strong> üzerinden okur — yani kullandığı veri tamamen Riot'un erişime açtığı veridir. Hiçbir bellek manipülasyonu, dosya değişikliği veya istemci modifikasyonu yapılmaz.
      </p>

      <h2>Hangi metrikler önemli?</h2>
      <p>
        Champ select sırasında bakman gereken üç temel metrik vardır:
      </p>
      <ul>
        <li>
          <strong>Scout skoru:</strong> Lobiye giren rakip oyuncuların son 20 maçındaki ortalama performansı. Bu skor, karşındaki oyuncunun ne kadar deneyimli olduğunu hızlıca anlatır.
        </li>
        <li>
          <strong>Eşleşme winrate'i:</strong> Senin şampiyonunla rakibin şampiyonu arasındaki tarihsel kazanma oranı. %52 üzerindeki eşleşmeler avantajlı, %48 altındakiler dezavantajlıdır.
        </li>
        <li>
          <strong>Şampiyon havuzu derinliği:</strong> Rakibin sık oynadığı şampiyonlar. Eğer rakip tek-trick ise meta dışında bir pick atması ihtimali düşüktür.
        </li>
      </ul>

      <h2>Rün seçiminin önemi</h2>
      <p>
        frekanslol AI rün önerisi; yalnızca şampiyonuna değil, aynı zamanda <em>rakibinin şampiyonuna ve maç koşullarına</em> göre değişir. Örneğin Ahri vs Yasuo eşleşmesinde "Hayalet Poro" yerine "Aetheral Sıçrama" daha yüksek win-rate getirebilir. Premium kullanıcılar için bu öneri otomatik olarak uygulanır; her maçta el ile rün değiştirme zahmetinden kurtulursun.
      </p>

      <h2>Counter-pick stratejisi</h2>
      <p>
        Düşman takım önce ban/pick yaptıysa, frekanslol sana en yüksek win-rate'li counter-pick önerilerini sunar. Bu öneriler hem şampiyon havuzun hem de mevcut metaya göre filtrelenir — yani oynayamadığın bir şampiyon önerilmez. Bu, özellikle blind pick olmayan queue'larda büyük avantaj sağlar.
      </p>

      <h2>Maç içi takip</h2>
      <p>
        Maç başladıktan sonra frekanslol arka planda çalışmaya devam eder. Rakip oyuncuların item ilerlemesi, yetenek dağılımı ve gelişim hızını izleyerek "tehdit raporları" oluşturur. Örneğin rakip jungler hızla full build'e ulaşıyorsa, sana "geri çekil ve obje al" uyarısı verebilir.
      </p>

      <h2>Verilerle rank atlama</h2>
      <p>
        AI koçluğun tek başına seni Challenger yapmaz; ancak orta seviyede (Gümüş–Platin) takılan oyuncular için %5-8 winrate artışı, dolayısıyla ayda 1-2 division ilerleme oldukça yaygın bir sonuçtur. Önemli olan; önerileri körü körüne uygulamak değil, neden bu önerinin yapıldığını anlayarak benzer durumlarda kendi başına da uygulayabilmektir.
      </p>

      <h2>Premium gerekiyor mu?</h2>
      <p>
        Hayır. Ücretsiz sürümde günde 10 AI analizi yapabilirsin — bu, çoğu kazüel oyuncu için yeterlidir. Sıkı queue oynayan ya da ranked grind yapan oyuncular için Premium'un sınırsız analizi ve otomasyonu daha mantıklıdır. Aylık ücret, ortalama bir kullanıcı için 2-3 kahve fiyatına denk gelir.
      </p>

      <h2>Son söz</h2>
      <p>
        AI maç koçluğu, "rank atlamanın kestirme yolu" değil; daha bilinçli, daha hızlı düşünebilmenin bir yardımcısıdır. frekanslol'u indir, birkaç maçta önerileri dene, sonuçları kendin gör. Veriye dayalı oyun her zaman duyguya dayalı oyundan üstündür.
      </p>
    </PostShell>
  );
}

// ----------------------------------------------------------------
// Shared post shell
// ----------------------------------------------------------------
function PostShell({ title, category, readTime, date, children, onNav }) {
  return (
    <main className="post">
      <article>
        <div className="post-head">
          <div className="container" style={{ maxWidth: 760 }}>
            <a className="back-link" onClick={() => onNav("blog")}>
              ← Tüm yazılar
            </a>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 28 }}>
              <span className="chip chip-accent">{category}</span>
              <span className="mono" style={{ fontSize: "0.78rem", color: "var(--text-muted)" }}>
                {date} · {readTime} okuma
              </span>
            </div>
            <h1 style={{ marginTop: 18 }}>{title}</h1>
          </div>
        </div>

        <div className="container" style={{ maxWidth: 760 }}>
          <div className="prose post-body">{children}</div>
        </div>
      </article>
    </main>
  );
}

// Router for blog (sub-routes within the SPA)
function BlogPage({ onNav, tweaks, postSlug }) {
  const openPost = (slug) => {
    window.location.hash = "/blog/" + slug;
  };
  if (postSlug === "skin-nasil-degistirilir-2026") return <PostSkinDegistirme onNav={onNav} tweaks={tweaks} />;
  if (postSlug === "en-iyi-10-topluluk-skin-mayis-2026") return <PostEnIyiSkinler onNav={onNav} tweaks={tweaks} />;
  if (postSlug === "ai-mac-kocu-rank-atlama") return <PostAIMacKocu onNav={onNav} tweaks={tweaks} />;
  return <BlogIndex onNav={onNav} openPost={openPost} />;
}

window.BlogPage = BlogPage;
window.BLOG_POSTS = POSTS;