/* global React, Icon */
// ============================================================
// frekanslol — Download page (content-rich)
// ============================================================

function DownloadPage({ onNav, tweaks }) {
  const steps = [
    {
      t: "İndir",
      d: "Sayfa üstündeki düğmeye tıklayarak Windows yükleyicisini (.exe) indir. Yaklaşık 80 MB. Dosya frekanslol'un resmi GitHub Releases sayfasından sunulur — başka bir kaynaktan indirme yapma.",
    },
    {
      t: "Kur",
      d: "İndirilen dosyayı çalıştır. Windows SmartScreen uyarısı görebilirsin; \"Daha fazla bilgi\" → \"Yine de çalıştır\" seçeneklerini kullan. Kurulum sihirbazı seni adım adım yönlendirir; .NET 8.0 sistemde yoksa otomatik kurulur.",
    },
    {
      t: "League klasörünü tanıt",
      d: "İlk açılışta frekanslol senin League of Legends kurulum klasörünü ister. Genelde C:/Riot Games/League of Legends dizinindedir. \"Browse\" düğmesiyle klasörü seç ve \"Kaydet\"e bas.",
    },
    {
      t: "Kütüphaneyi indir (opsiyonel)",
      d: "Skin değiştirme özelliğini kullanmak istiyorsan \"Özel Kostümler\" sekmesinden \"Download Custom Skins Library\" düğmesine tıkla. İlk indirme 5-15 dakika sürebilir; sonraki güncellemeler çok daha hızlıdır.",
    },
    {
      t: "Tercihleri ayarla & oyna",
      d: "Otomatik ban/pick, rün önerisi, dil tercihi — tüm ayarlar Ayarlar menüsünde. Tercihlerini ayarladıktan sonra League'i aç, frekanslol arkada çalışmaya başlar. Hazırsın.",
    },
  ];

  const troubleshoot = [
    {
      problem: "frekanslol League of Legends'ı algılamıyor",
      cause: "League Client, frekanslol açılmadan önce çalışıyorsa LCU bağlantısı kurulamayabilir.",
      fix: "Önce frekanslol'u aç, ardından League Client'ı başlat. Yine de sorun devam ederse Ayarlar > Bağlantı > 'LCU Yeniden Bağlan' düğmesine tıkla. League kurulum klasörü doğru tanıtılmış olmalı.",
    },
    {
      problem: "Skin'ler maç içinde görünmüyor",
      cause: "Patcher başlatılmamış olabilir; ya da League oyununa girdikten sonra Patcher kapatılmış olabilir.",
      fix: "Özel Kostümler sekmesinin üstündeki \"Start Patcher\" düğmesine basıldıktan sonra durum yeşil \"Ready to start\" haline gelmeli. Patcher arka planda çalışırken oyuna gir. Patcher'ı asla maç sırasında kapatma.",
    },
    {
      problem: "Antivirüs frekanslol'u engelliyor / siliyor",
      cause: "Topluluk araçları genellikle false-positive olarak algılanır. frekanslol içeriği zararlı değildir; kaynak kodu GitHub üzerinde herkese açıktır.",
      fix: "Antivirüs yazılımının istisna listesine frekanslol kurulum klasörünü ekle (varsayılan: %LOCALAPPDATA%/frekanslol). Windows Defender için Ayarlar > Virüs ve Tehdit Koruması > İstisnalar üzerinden klasörü ekleyebilirsin.",
    },
  ];

  const releaseNotes = [
    "✨ YENİ — Resmi Skin Galerisi: tüm Riot skinleri DDragon entegrasyonuyla uygulamada görüntülenebilir, chroma karşılaştırması yapılabilir.",
    "🧠 İYİLEŞTİRME — AI Maç Koçu modelinde güncelleme: rakip eşleşme tahmininde ortalama %12 daha yüksek doğruluk.",
    "⚡ İYİLEŞTİRME — Skin Patcher başlatma süresi %40 azaltıldı; küçük donmaları engelleyen yeni iş parçacığı yönetimi.",
    "🌐 YENİ — TR/EN dil seçimi uygulama üst menüsünde, anlık değişim.",
    "🛡️ DÜZELTME — LCU API yeniden bağlanma kararlılığı geliştirildi; istemci yeniden başlatıldığında otomatik tekrar bağlanır.",
    "🐛 DÜZELTME — Bazı şampiyonlarda Eternals sayaçlarının yanlış senkronize olduğu sorun çözüldü.",
    "🧹 DÜZELTME — \"Import .fantome\" sırasında belleğin sızdığı edge case giderildi.",
  ];

  return (
    <main>
      <section className="dl-hero">
        <div className="container">
          <span className="eyebrow"><span className="dot" />İndir</span>
          <h1 style={{ marginTop: 18 }}>Windows için frekanslol</h1>
          <p style={{ fontSize: "1.1rem", marginTop: 18, maxWidth: 580, margin: "18px auto 0" }}>
            Tek bir yükleyici. League açıkken çalışır. Ücretsiz sürümle başla, istediğin zaman Premium'a yükselt.
          </p>
        </div>
      </section>

      <section className="section section-tight">
        <div className="container">
          <div className="dl-card">
            <div className="dl-platform">
              <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
                <div className="dl-platform-icon"><Icon.Windows /></div>
                <div>
                  <h2 style={{ fontSize: "1.5rem", marginBottom: 4 }}>Windows 10 / 11</h2>
                  <div className="dl-meta">
                    <span className="dl-meta-item">~80 MB</span>
                    <span>·</span>
                    <span className="dl-meta-item">x64</span>
                  </div>
                </div>
              </div>
              <span className="dl-version">
                <span className="dot" />
                Son sürüm · v1.7.1 · Mayıs 2026
              </span>
              <a
                className="btn btn-primary btn-lg"
                href={tweaks.githubReleaseUrl}
                target="_blank"
                rel="noopener noreferrer"
                style={{ width: "fit-content" }}
              >
                <Icon.Download />frekanslol-1.7.1-setup.exe
              </a>
              <p style={{ fontSize: "0.85rem", color: "var(--text-muted)" }}>
                İndirme GitHub Releases üzerinden sağlanır. Kurulum sırasında SmartScreen uyarısı görebilirsin — "Yine de çalıştır" seçeneğine tıkla.
              </p>
            </div>

            <div className="specs">
              <div style={{ fontSize: "0.78rem", color: "var(--text-muted)", textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: 600 }}>
                Sistem Gereksinimleri
              </div>
              <div className="spec-row">
                <span className="spec-key">İşletim sistemi</span>
                <span className="spec-val">Windows 10/11 (64-bit)</span>
              </div>
              <div className="spec-row">
                <span className="spec-key">RAM</span>
                <span className="spec-val">4 GB minimum</span>
              </div>
              <div className="spec-row">
                <span className="spec-key">Disk</span>
                <span className="spec-val">250 MB + skin kütüphanesi</span>
              </div>
              <div className="spec-row">
                <span className="spec-key">Ekran kartı</span>
                <span className="spec-val">DirectX 11 destekli</span>
              </div>
              <div className="spec-row">
                <span className="spec-key">Gereken</span>
                <span className="spec-val">League of Legends yüklü</span>
              </div>
              <div className="spec-row">
                <span className="spec-key">.NET</span>
                <span className="spec-val">8.0 (otomatik kurulur)</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Installation steps */}
      <section className="section">
        <div className="container">
          <div className="section-head" style={{ marginBottom: 36 }}>
            <span className="eyebrow"><span className="dot" />Kurulum</span>
            <h2>5 adımda hazır</h2>
            <p style={{ maxWidth: 580 }}>
              Toplam süre yaklaşık 2-3 dakika. Skin kütüphanesi indirimi için ek 5-15 dakika ayır.
            </p>
          </div>
          <div className="steps-list" style={{ maxWidth: 760, margin: "0 auto" }}>
            {steps.map((s, i) => (
              <div key={i} className="step-item">
                <div className="step-num">{String(i + 1).padStart(2, "0")}</div>
                <div className="step-content">
                  <h4>{s.t}</h4>
                  <p>{s.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Troubleshooting */}
      <section className="section section-tight">
        <div className="container" style={{ maxWidth: 880 }}>
          <div className="section-head" style={{ marginBottom: 32 }}>
            <span className="eyebrow"><span className="dot" />Sorun giderme</span>
            <h2>En sık 3 sorun ve çözümü</h2>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            {troubleshoot.map((t, i) => (
              <div key={i} className="card" style={{ padding: 24 }}>
                <h3 style={{ fontSize: "1.05rem", marginBottom: 10, display: "flex", alignItems: "center", gap: 10 }}>
                  <span style={{ width: 22, height: 22, borderRadius: 6, background: "rgba(248,113,113,0.12)", border: "1px solid rgba(248,113,113,0.3)", color: "var(--danger)", display: "grid", placeItems: "center", fontSize: "0.78rem", fontFamily: "var(--font-mono)" }}>{i + 1}</span>
                  {t.problem}
                </h3>
                <p style={{ fontSize: "0.92rem", marginBottom: 8 }}>
                  <strong style={{ color: "var(--text)" }}>Neden:</strong> {t.cause}
                </p>
                <p style={{ fontSize: "0.92rem" }}>
                  <strong style={{ color: "var(--accent-hi)" }}>Çözüm:</strong> {t.fix}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Release notes */}
      <section className="section section-tight">
        <div className="container" style={{ maxWidth: 880 }}>
          <div className="section-head" style={{ marginBottom: 32 }}>
            <span className="eyebrow"><span className="dot" />Sürüm notları</span>
            <h2>v1.7.1 — Mayıs 2026</h2>
            <p style={{ maxWidth: 600 }}>
              Bu sürümde gelen yenilikler ve düzeltmeler. Önceki sürüm notları için GitHub Releases sayfasına bakabilirsin.
            </p>
          </div>
          <div className="card" style={{ padding: 32 }}>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 14 }}>
              {releaseNotes.map((note, i) => (
                <li key={i} style={{ display: "flex", gap: 12, alignItems: "flex-start", fontSize: "0.95rem", color: "var(--text-soft)", lineHeight: 1.55 }}>
                  <span style={{ flexShrink: 0, color: "var(--accent-hi)", marginTop: 2 }}>•</span>
                  <span>{note}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>

      <section className="section section-tight">
        <div className="container" style={{ maxWidth: 760 }}>
          <div className="card" style={{ padding: 28 }}>
            <h3 style={{ marginBottom: 10, display: "flex", alignItems: "center", gap: 10 }}>
              <span style={{ color: "var(--accent-hi)" }}><Icon.Shield /></span>
              Güvenlik & Banlanma riski
            </h3>
            <p style={{ fontSize: "0.95rem", marginBottom: 12 }}>
              frekanslol, oyun istemcisinin hafızasına ya da dosyalarına dokunmaz. Yalnızca Riot'un resmi <span className="mono" style={{ color: "var(--text)" }}>LCU API</span>'sini kullanır. Skin yönetimi yerel FANTOME formatıyla çalışır ve oyun verisi üzerinde kalıcı bir değişiklik yapmaz.
            </p>
            <p style={{ fontSize: "0.95rem" }}>
              Yine de Riot'un Hizmet Şartları üçüncü taraf araç kullanımını yasaklar; bu nedenle teorik bir risk her zaman vardır. 4 yılı aşkın süredir aktif olan benzer araçlardan ban raporu pratikte çok düşüktür. Kullanım kararı tamamen kullanıcıya aittir.
            </p>
          </div>
        </div>
      </section>
    </main>
  );
}

window.DownloadPage = DownloadPage;