/* global React, Icon, AppMockSkinLibrary, AppMockNews, AppMockDraft */
// ============================================================
// frekanslol — Features page (content-rich deep-dive)
// ============================================================

function FeaturesPage({ onNav, tweaks }) {
  const features = [
    {
      id: "skin-manager",
      tag: "ÖZEL KOSTÜMLER",
      icon: <Icon.Palette />,
      title: "Skin Yöneticisi & Skin Changer",
      lead: "League of Legends için en kapsamlı .fantome skin yönetim aracı.",
      body: (
        <>
          <p>
            frekanslol Skin Yöneticisi; topluluk tarafından üretilen 4.000'i aşkın .fantome formatlı skini tek bir merkezi arayüzden yönetmeni sağlar. Şampiyon adıyla arama yapabilir, kategori filtresi uygulayabilir veya kütüphaneyi alfabetik gezebilirsin. Her şampiyon kartı, kaç skinin yüklü olduğunu ve hangilerinin aktif olduğunu gösterir — böylece kütüphanene tek bakışla hakim olursun.
          </p>
          <p>
            "Çoklu profil" özelliği sayesinde, farklı oyun stilleri ya da takım kompozisyonları için ayrı yükleme setleri oluşturabilir, tek tıkla profilleri değiştirebilirsin. Skin'ler tamamen yerel diskte saklanır; bu nedenle uygulama çevrimdışı modda da çalışır, internet bağlantısına gerek duymaz. Manuel olarak elinde bulunan .fantome dosyalarını da "Import .fantome" düğmesiyle hızlıca koleksiyonuna ekleyebilirsin.
          </p>
          <h4>Nasıl kullanılır?</h4>
          <ol>
            <li>frekanslol'u aç, sol menüden <strong>Özel Kostümler</strong> sekmesine gir.</li>
            <li><strong>Download Custom Skins Library</strong> ile topluluk koleksiyonunu indir.</li>
            <li>Şampiyon kartına tıkla, istediğin skinleri seç.</li>
            <li>Üstteki <strong>Start Patcher</strong> düğmesine tıkla — League açıkken aktif olur.</li>
          </ol>
        </>
      ),
      visual: <AppMockSkinLibrary />,
    },
    {
      id: "official-skins",
      tag: "RESMİ GALERİ",
      icon: <Icon.Sparkle />,
      title: "Resmi Skinler Galerisi",
      lead: "DDragon verileriyle güncel kalan, tüm resmi Riot skin koleksiyonuna referans.",
      body: (
        <>
          <p>
            v1.7 ile gelen Resmi Skinler Galerisi; her şampiyon için Riot'un yayımladığı tüm skinleri, chroma varyasyonlarını ve splash art görsellerini görüntülemeni sağlar. Riot'un resmi <span className="mono" style={{ color: "var(--text)" }}>DDragon</span> CDN'inden veri çeker; her patch'te otomatik güncellenir, manuel yükleme gerektirmez. Sahip olduğun skinleri, henüz almadıklarınla yan yana karşılaştır; satın alma kararlarını görsel olarak doğrula.
          </p>
          <p>
            Kategori, yıl, fiyat aralığı ve sınıf bazında filtreleme uygulanabilir. Yeni eklenen, sınırlı sürede satılan ve efsanevi sürüm skinleri için ayrı rozetler vardır. Galeride bir skine tıkladığında ilgili chroma rengini, fiyatını ve in-game önizleme bağlantısını görebilirsin. Bu özellik tamamen ücretsizdir ve oyun dosyalarıyla hiçbir etkileşim kurmaz — tamamen kataloglama amaçlıdır.
          </p>
          <h4>Nasıl kullanılır?</h4>
          <ol>
            <li>Üst menüden <strong>Şampiyonlar</strong> sekmesine gir.</li>
            <li>Bir şampiyon kartını tıkla, sağ panelde tüm skinler ve chromas görünür.</li>
            <li>Üst filtre çubuğundan kategoriye göre daralt (Efsanevi, Ultimate vb.).</li>
            <li>"Bende olmayanlar" filtresiyle satın alma listesi oluştur.</li>
          </ol>
        </>
      ),
      visual: <AppMockNews />,
    },
    {
      id: "match-coach",
      tag: "OYUN ASİSTANI",
      icon: <Icon.Brain />,
      title: "AI Maç Koçu",
      lead: "Champ select'in saniyeleri çok değerlidir. frekanslol o saniyeleri sana geri kazandırır.",
      body: (
        <>
          <p>
            Maç Koçu modülü, Riot'un resmi LCU API'sini kullanarak champ select ekranını gerçek zamanlı okur. Senin ve takımının seçtiği şampiyonları, rakip kompozisyonu ve eşleşmedeki istatistiksel güçlü/zayıf noktaları analiz eder. Sana özelleştirilmiş rün önerisi, build yolu ve oynanış ipuçları sunar — hem solo queue hem de takım maçları için.
          </p>
          <p>
            <strong>Scout skoru</strong>, lobiye giren rakip oyuncuların son 20 maçındaki performansını, win rate'ini ve şampiyon havuzu derinliğini özetler. Bu skor; karşında oturduğun rakibin ne kadar deneyimli olduğunu hızlıca anlamana yardımcı olur. Ayrıca rakibinizin sık oynadığı şampiyonlara karşı counter-pick önerileri de sunar.
          </p>
          <h4>Nasıl kullanılır?</h4>
          <ol>
            <li>League Client'ı aç, queue'ya gir.</li>
            <li>Champ select açıldığında frekanslol otomatik olarak LCU API'yi algılar.</li>
            <li><strong>Oyun Asistanı</strong> sekmesinde scout skoru, rakip analizi ve rün önerisi görünür.</li>
            <li>Önerilen rünü tek tıkla uygulayabilirsin (Premium: otomatik).</li>
          </ol>
        </>
      ),
      visual: <AppMockDraft />,
    },
  ];

  const minorFeatures = [
    {
      title: "Otomatik Rün",
      desc: "Şampiyonun kilitlendiği anda, role ve eşleşmeye göre en uygun rün sayfası otomatik olarak uygulanır. Premium kullanıcılar için aktiftir; kaynak olarak topluluğun yüksek win-rate'li build'leri kullanılır.",
    },
    {
      title: "Otomatik Ban / Pick",
      desc: "Önceden tanımladığın ban ve pick listelerini frekanslol senin yerine uygular. Sıraya girdiğin anda hazır pick'i otomatik kilitle; ban fazında istemediğin şampiyonları anında engelle.",
    },
    {
      title: "Çok Hesap Takibi",
      desc: "Smurf, yan hesap veya farklı bölgelerdeki hesaplarını tek panelden takip et. Her hesabın LP'sini, win/lose serisini ve son maç sonuçlarını ayrı ayrı görüntüle. Toplu senkron tek tıkla.",
    },
    {
      title: "Şampiyon Havuzu Analizi",
      desc: "Hangi şampiyonlarda iyisin, hangileri sana yük? Premium analiz; rol bazında winrate, KDA, oynanma sıklığı ve meta uyumunu tek grafikte gösterir. Önerilen pratik listesiyle eksiklerini gider.",
    },
    {
      title: "Eternals Takibi",
      desc: "Şampiyon başına Eternals ilerlemen, son maçlardaki kazanımların ve seviye atlama yakınlıkları — hepsi anlık. Premium kullanıcılar için anlık bildirimler aktif.",
    },
    {
      title: "Yama Notları & Haberler",
      desc: "Riot'un son yama notları, LoL haberleri ve eSports güncellemeleri uygulama içinden. Tarayıcı açmadan, son sürüm değişikliklerini ve meta etkilerini takip et.",
    },
  ];

  return (
    <main>
      <section className="dl-hero" style={{ paddingBottom: 32 }}>
        <div className="container">
          <span className="eyebrow"><span className="dot" />Tüm özellikler</span>
          <h1 style={{ marginTop: 18 }}>frekanslol'un içinde ne var?</h1>
          <p style={{ fontSize: "1.1rem", marginTop: 18, maxWidth: 620, margin: "18px auto 0" }}>
            Skin yönetiminden AI koçluğa, resmi galeriden çok hesap takibine kadar — League of Legends deneyimini bir üst seviyeye taşıyan tüm modüllerin teknik detayları.
          </p>
        </div>
      </section>

      {/* Detailed deep-dives */}
      {features.map((f, i) => (
        <section key={f.id} id={f.id} className="section section-tight">
          <div className="container">
            <div
              className="split-2col"
              style={{
                display: "grid",
                gridTemplateColumns: i % 2 === 0 ? "1fr 1fr" : "1fr 1fr",
                gap: 48,
                alignItems: "center",
              }}
            >
              <div style={{ order: i % 2 === 0 ? 1 : 2 }}>
                <span className="chip chip-accent" style={{ marginBottom: 14 }}>
                  <span style={{ display: "inline-flex", color: "var(--accent-hi)" }}>{f.icon}</span>
                  {f.tag}
                </span>
                <h2 style={{ marginBottom: 12 }}>{f.title}</h2>
                <p style={{ fontSize: "1.08rem", color: "var(--text)", marginBottom: 18, fontWeight: 500 }}>
                  {f.lead}
                </p>
                <div className="prose">{f.body}</div>
              </div>
              <div style={{ order: i % 2 === 0 ? 2 : 1 }}>
                {f.visual}
              </div>
            </div>
          </div>
        </section>
      ))}

      {/* Minor features grid */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow"><span className="dot" />Ekstra modüller</span>
            <h2>Premium ile gelen güç</h2>
            <p style={{ maxWidth: 560 }}>
              Otomasyondan istatistik takibine kadar — Premium aboneliği ile uygulanan ek modüllerin tamamı.
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }} className="features-grid">
            {minorFeatures.map((m) => (
              <div key={m.title} className="card" style={{ padding: 26 }}>
                <h3 style={{ fontSize: "1.05rem", marginBottom: 8, display: "flex", alignItems: "center", gap: 8 }}>
                  <span style={{ color: "var(--accent-hi)" }}><Icon.Sparkle width="16" height="16" /></span>
                  {m.title}
                </h3>
                <p style={{ fontSize: "0.93rem" }}>{m.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="section section-tight">
        <div className="container">
          <div className="card" style={{
            textAlign: "center",
            padding: "48px 32px",
            background: "linear-gradient(140deg, rgba(99,102,241,0.10), rgba(99,102,241,0.02))",
            borderColor: "rgba(99,102,241,0.3)"
          }}>
            <h2 style={{ marginBottom: 12, fontSize: "1.8rem" }}>Hepsini ücretsiz dene.</h2>
            <p style={{ marginBottom: 24, fontSize: "1.02rem" }}>Premium'a yükseltmek istediğin zaman tek tıkla aktifleştir.</p>
            <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
              <a className="btn btn-primary btn-lg" href={tweaks.githubReleaseUrl} target="_blank" rel="noopener noreferrer">
                <Icon.Download />İndir
              </a>
              <a className="btn btn-ghost btn-lg" onClick={() => onNav("premium")}>
                Premium'u Gör <Icon.Arrow />
              </a>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

window.FeaturesPage = FeaturesPage;