/* global React, Icon, FAQ, AppMockSkinLibrary, AppMockDraft, AppMockNews */
// ============================================================
// frekanslol — Home page (content-rich, AdSense-friendly)
// ============================================================

function HomePage({ onNav, tweaks }) {
  const fmt = (n) => Number(n).toLocaleString("tr-TR", { minimumFractionDigits: 2, maximumFractionDigits: 2 });

  const features = [
    {
      icon: <Icon.Palette />,
      title: "Skin Yöneticisi & Skin Changer",
      desc: "frekanslol, League of Legends için en kapsamlı skin yönetim aracıdır. 4.000'den fazla topluluk tarafından üretilmiş .fantome formatındaki skini tek tıkla yükleyebilir, etkinleştirebilir veya kaldırabilirsin. Çoklu profil desteğiyle her şampiyon için farklı yükleme setleri oluşturabilirsin. Skin'ler yerel olarak saklanır, internet bağlantısına gerek yoktur.",
      tags: ["FANTOME formatı", "4.000+ skin", "Çoklu profil"],
    },
    {
      icon: <Icon.Sparkle />,
      title: "Resmi Skinler Galerisi",
      desc: "Tüm resmi Riot skinlerini uygulama içinden görüntüle. Sahip olduğun ve olmadığın skinleri yan yana karşılaştır, chromas'ları incele. Hangi skini satın alacağına karar vermek için mükemmel bir referans aracı. DDragon verileriyle her patch'te otomatik güncellenir.",
      tags: ["DDragon", "Chroma desteği", "Otomatik patch"],
    },
    {
      icon: <Icon.Brain />,
      title: "AI Maç Koçu",
      desc: "Draft aşamasında şampiyon seç, rün önerisi al ve rakip analizini görüntüle. frekanslol, Riot'un resmi LCU API'sini kullanarak champ select ekranını okur ve sana özelleştirilmiş tavsiyeler sunar. Scout skoru, kazanma olasılığı tahmini ve rakip maç geçmişi — hepsini uygulama içinden takip edebilirsin.",
      tags: ["LCU API", "Scout skoru", "Rakip analizi"],
    },
    {
      icon: <Icon.Trophy />,
      title: "Otomasyon Araçları (Premium)",
      desc: "Kilitleme anında otomatik rün sayfası uygulaması, otomatik şampiyon seçimi, otomatik ban ve çok hesap takibi. frekanslol, sık yaptığın işlemleri otomatikleştirerek her maçta zaman kazandırır. Premium kullanıcılar için sınırsız analiz, çoklu hesap senkronu ve öncelikli destek.",
      tags: ["Auto rün", "Auto ban/pick", "Çok hesap"],
    },
  ];

  const compareRows = [
    ["Tek tıkla skin yükleme", true, false],
    ["Resmi skin galerisi (DDragon)", true, false],
    ["Çoklu profil / yükleme seti", true, false],
    ["Otomatik rün uygulama (Premium)", true, false],
    ["AI maç koçu & rakip analizi", true, false],
    ["Patch ile otomatik güncelleme", true, false],
    ["Ücretsiz kullanım", true, true],
  ];

  const faqItems = [
    {
      q: "frekanslol nedir ve ne işe yarar?",
      a: "frekanslol, Windows için geliştirilmiş ücretsiz bir League of Legends yardımcı uygulamasıdır. İki ana bileşenden oluşur: (1) Skin Yöneticisi — .fantome formatındaki topluluk skinlerini yükleyip yönetmeni sağlar ve tüm resmi Riot skinlerini görüntülemeni mümkün kılar. (2) Maç Koçu — Riot'un resmi LCU API'si aracılığıyla champ select verilerini okur, AI destekli rün önerisi, rakip analizi ve kazanma olasılığı tahmini sunar. Uygulama tamamen yerel çalışır, kişisel veri toplamaz ve oyun dosyalarını kalıcı olarak değiştirmez.",
    },
    {
      q: "frekanslol kullanmak güvenli mi, ban yer miyim?",
      a: "frekanslol, oyun dosyalarını kalıcı olarak değiştirmez. Skin yönetimi özelliği yalnızca yerel .fantome dosyalarını kullanır ve oyun istemcisini doğrudan modifiye etmez. Maç koçu özellikleri yalnızca Riot'un resmi ve kamuya açık LCU API'sini kullanır — bu API, üçüncü taraf araçlar tarafından kullanılması için Riot tarafından tasarlanmıştır. Bununla birlikte, herhangi bir üçüncü taraf aracın kullanımında olduğu gibi, riskleri bizzat değerlendirmenizi öneririz. frekanslol, Riot Games tarafından onaylı değildir; kullanım kararı tamamen kullanıcıya aittir.",
    },
    {
      q: "Ücretsiz sürüm ile Premium arasındaki fark nedir?",
      a: "Ücretsiz sürüm; tüm skin yönetimi, resmi skin galerisi, temel maç koçu ve günlük 10 AI analizi içerir. Bu, çoğu oyuncunun ihtiyaçlarını karşılayan tam özellikli bir sürümdür. Premium sürüm ise sınırsız AI analiz, otomatik rün uygulama, otomatik ban/pick, çok hesap takibi, şampiyon havuzu analizi ve öncelikli destek gibi gelişmiş özellikleri açar. Premium, aylık ₺" + fmt(tweaks.priceTry) + " olup uygulama içinden lisans anahtarıyla aktifleştirilir. İstediğin zaman iptal edebilirsin.",
    },
    {
      q: "Hangi Windows sürümleri destekleniyor?",
      a: "frekanslol, Windows 10 (64-bit) ve Windows 11 ile tam uyumludur. Minimum sistem gereksinimleri: 4 GB RAM, DirectX 11 destekli ekran kartı ve League of Legends'ın kurulu olduğu bir sistem. Kurulum dosyası yaklaşık 80 MB boyutundadır ve kurulumu 2 dakikadan kısadır. .NET 8.0 çalışma zamanı otomatik olarak kurulur, manuel müdahale gerekmez. macOS ve Linux için yerel destek bulunmamaktadır; ancak Wine/Crossover üzerinde sınırlı kullanım deneyimleri topluluk tarafından raporlanmıştır.",
    },
    {
      q: "frekanslol'u nasıl kurarım?",
      a: "GitHub Releases sayfasından en son .exe dosyasını indirin. Dosyayı çalıştırın ve kurulum sihirbazını takip edin. İlk açılışta League of Legends kurulum klasörünüzü seçmeniz istenecektir (genelde C:/Riot Games/League of Legends). Bundan sonra frekanslol otomatik olarak League Client'ı algılar ve tüm özellikler kullanıma hazır hale gelir. Kurulum sırasında SmartScreen uyarısı çıkabilir; bu durumda \"Daha fazla bilgi\" → \"Yine de çalıştır\" seçeneklerini kullanın. Detaylı kurulum rehberi için İndir sayfamızı inceleyebilirsiniz.",
    },
    {
      q: "Skin'leri nereden indirebilirim?",
      a: "frekanslol, uygulama içinde \"Custom Skins Library\" düğmesi aracılığıyla topluluk skin koleksiyonuna doğrudan erişim sağlar. Buradan istediğin skinleri arayabilir, önizleyebilir ve tek tıkla yükleyebilirsin. Ayrıca dışarıdan elde ettiğin .fantome formatındaki dosyaları \"Import .fantome\" seçeneğiyle manuel olarak ekleyebilirsin. Tüm skinler yerel diske kaydedilir; bir kez indirildikten sonra çevrimdışı olarak da kullanılabilir. Skin'lerin kaynağı topluluk tarafından üretilen içeriklerdir ve hiçbir Riot dosyası değiştirilmez.",
    },
  ];

  return (
    <main>
      {/* ============================================ HERO */}
      <section className="hero">
        <div className="container">
          <div className="hero-grid">
            <div className="hero-copy">
              <span className="eyebrow">
                <span className="dot" />
                v1.7.1 · {tweaks.userCount.toLocaleString("tr-TR")}+ aktif kullanıcı
              </span>
              <h1>
                <span className="accent">League of Legends</span> Skin Changer and More
              </h1>
              <p className="hero-sub">
                4.000+ topluluk skini ve tüm resmi skinleri tek uygulamada yönet. Kilitleme anında otomatik rün, AI maç koçu, rakip analizi — hepsi ücretsiz.
              </p>
              <div className="hero-ctas">
                <a className="btn btn-primary btn-lg" href={tweaks.githubReleaseUrl} target="_blank" rel="noopener noreferrer">
                  <Icon.Download />Ücretsiz İndir — Windows
                </a>
                <a className="btn btn-ghost btn-lg" onClick={() => onNav("premium")}>
                  <Icon.Sparkle />Premium Al
                </a>
              </div>
              <div className="hero-meta">
                <span className="hero-meta-item"><Icon.Check />Windows 10/11</span>
                <span className="hero-meta-item"><Icon.Check />Resmi LCU API</span>
                <span className="hero-meta-item"><Icon.Check />Ücretsiz başla</span>
                <span className="hero-meta-item"><Icon.Check />Yerel depolama</span>
              </div>
            </div>
          </div>

          <div className="hero-shot" style={{ marginTop: 56 }}>
            <AppMockSkinLibrary />
          </div>
        </div>
      </section>

      {/* ============================================ FEATURES */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow"><span className="dot" />Özellikler</span>
            <h2>Tek uygulama. Tüm araçlar.</h2>
            <p style={{ maxWidth: 620, fontSize: "1.05rem" }}>
              Skin yönetiminden AI koçluğa, resmi galeri görüntüleyiciden çok hesap takibine — League of Legends deneyimini bir üst seviyeye taşıyan modüllerin tamamı.
            </p>
          </div>

          <div className="features-grid features-grid-2x2">
            {features.map((f, i) => (
              <div key={i} className="card feature">
                <div className="feature-icon">{f.icon}</div>
                <h3>{f.title}</h3>
                <p>{f.desc}</p>
                <div className="feature-tags">
                  {f.tags.map((t) => <span key={t} className="chip">{t}</span>)}
                </div>
              </div>
            ))}
          </div>

          <div style={{ textAlign: "center", marginTop: 32 }}>
            <a className="btn btn-ghost" onClick={() => onNav("features")}>
              Tüm özellikleri keşfet <Icon.Arrow />
            </a>
          </div>
        </div>
      </section>

      {/* ============================================ OFFICIAL SKINS HIGHLIGHT BANNER */}
      <section className="section-tight" style={{ paddingBottom: 24 }}>
        <div className="container">
          <div className="card" style={{
            padding: "32px 36px",
            background: "linear-gradient(120deg, rgba(99,102,241,0.16), rgba(192,132,252,0.08))",
            borderColor: "rgba(99,102,241,0.32)",
            display: "grid",
            gridTemplateColumns: "1fr auto",
            gap: 24,
            alignItems: "center",
          }} className="banner-grid">
            <div>
              <div style={{ fontSize: "0.78rem", color: "var(--accent-hi)", textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: 600, marginBottom: 8 }}>
                ✨ Yeni · v1.7
              </div>
              <h3 style={{ fontSize: "1.4rem", marginBottom: 8 }}>
                Artık sadece mod skinler değil — tüm <span style={{ color: "var(--accent-hi)" }}>RESMİ</span> skinler de frekanslol'da!
              </h3>
              <p style={{ fontSize: "0.98rem" }}>
                Patch'e özel skin galerisi, chroma görünümleri ve şampiyon bazlı filtreleme. Sahip olduğun skinleri, henüz almadıklarınla yan yana karşılaştır.
              </p>
            </div>
            <a className="btn btn-primary" onClick={() => onNav("features")}>
              Galeriyi Gör <Icon.Arrow />
            </a>
          </div>
        </div>
      </section>

      {/* ============================================ APP_SCREENSHOT_2 (draft) */}
      <section className="section section-tight">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }} className="split-2col">
            <div>
              <span className="eyebrow"><span className="dot" />Maç koçu</span>
              <h2 style={{ margin: "16px 0 18px" }}>Şampiyon seçiminde canlı strateji.</h2>
              <p style={{ fontSize: "1.05rem", marginBottom: 20 }}>
                AI; rakip kompozisyonunu, eşleşme istatistiklerini ve mevcut metanı analiz ederek karşılaştırmalı rehberlik sunar. Hangi rün, hangi build, hangi yol — hepsi anında ekranında belirir. Champ select'in saniyeleri çok değerlidir; frekanslol bu saniyeleri sana geri kazandırır.
              </p>
              <ul style={{ listStyle: "none", padding: 0, display: "flex", flexDirection: "column", gap: 10, color: "var(--text-soft)", fontSize: "0.95rem" }}>
                <li style={{ display: "flex", alignItems: "center", gap: 10 }}>
                  <span style={{ color: "var(--accent-hi)" }}><Icon.Check /></span>
                  Rakip eşleşme analizi (Plat+ verisi)
                </li>
                <li style={{ display: "flex", alignItems: "center", gap: 10 }}>
                  <span style={{ color: "var(--accent-hi)" }}><Icon.Check /></span>
                  Scout skoru ile rakip oyuncuların güç tahmini
                </li>
                <li style={{ display: "flex", alignItems: "center", gap: 10 }}>
                  <span style={{ color: "var(--accent-hi)" }}><Icon.Check /></span>
                  Otomatik rün uygulaması (Premium)
                </li>
                <li style={{ display: "flex", alignItems: "center", gap: 10 }}>
                  <span style={{ color: "var(--accent-hi)" }}><Icon.Check /></span>
                  Şampiyon havuzu önerisi ve meta uyumu
                </li>
              </ul>
            </div>
            <AppMockDraft />
          </div>
        </div>
      </section>

      {/* ============================================ COMPARISON: frekanslol vs MANUAL */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow"><span className="dot" />Karşılaştırma</span>
            <h2>Neden frekanslol?</h2>
            <p style={{ maxWidth: 600 }}>
              Manuel skin kurulumu, ayrı maç analiz siteleri ve elle rün uygulama — hepsini tek bir araçla değiştir.
            </p>
          </div>

          <div className="compare-table" style={{ maxWidth: 880, margin: "0 auto" }}>
            <div className="compare-row head">
              <div>Özellik</div>
              <div className="premium-col">frekanslol</div>
              <div>Manuel Yöntem</div>
            </div>
            {compareRows.map(([feat, fr, man], i) => (
              <div key={i} className="compare-row">
                <div className="compare-cell feature-name">{feat}</div>
                <div className="compare-cell col-premium" style={{ textAlign: "center" }}>
                  {fr
                    ? <span style={{ color: "var(--success)" }}><Icon.Check /></span>
                    : <span style={{ color: "var(--text-muted)", opacity: 0.5 }}><Icon.X /></span>}
                </div>
                <div className="compare-cell" style={{ textAlign: "center" }}>
                  {man
                    ? <span style={{ color: "var(--success)" }}><Icon.Check /></span>
                    : <span style={{ color: "var(--text-muted)", opacity: 0.5 }}><Icon.X /></span>}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ============================================ SOCIAL PROOF */}
      <section className="section section-tight">
        <div className="container">
          <div className="stats">
            <div className="stat">
              <div className="stat-num">{tweaks.userCount.toLocaleString("tr-TR")}+</div>
              <div className="stat-label">Aktif kullanıcı</div>
            </div>
            <div className="stat">
              <div className="stat-num">4.000+</div>
              <div className="stat-label">Topluluk skini</div>
            </div>
            <div className="stat">
              <div className="stat-num mono" style={{ fontSize: "2.2rem" }}>v1.7.1</div>
              <div className="stat-label">Son sürüm — Mayıs 2026</div>
            </div>
          </div>
        </div>
      </section>

      {/* ============================================ NEWS SECTION (real screenshot 2) */}
      <section className="section section-tight">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }} className="split-2col">
            <AppMockNews />
            <div>
              <span className="eyebrow"><span className="dot" />Haberler &amp; Yama Notları</span>
              <h2 style={{ margin: "16px 0 18px" }}>Oyunla ilgili her şey tek yerde.</h2>
              <p style={{ fontSize: "1.05rem", marginBottom: 16 }}>
                Riot'un son yama notları, LoL haberleri, eSports güncellemeleri ve topluluk olayları — uygulamayı açar açmaz. Türkçe ve İngilizce dil desteğiyle, oyunculuğunla ilgili hiçbir gelişmeyi kaçırma.
              </p>
              <p style={{ fontSize: "0.95rem" }}>
                Her yama yayınlandığında frekanslol; rün önerilerini, meta verilerini ve resmi skin galerisini otomatik olarak günceller. Tarayıcıda Wiki sayfaları arasında dolaşmana gerek kalmaz.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* ============================================ FAQ */}
      <section className="section" id="sss">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow"><span className="dot" />SSS</span>
            <h2>Sıkça Sorulan Sorular</h2>
            <p style={{ maxWidth: 560 }}>
              Aşağıda en sık aldığımız soruların ayrıntılı yanıtlarını bulabilirsin. Aradığını bulamadıysan <a onClick={() => onNav("contact")} style={{ color: "var(--accent-hi)", cursor: "pointer", textDecoration: "underline" }}>iletişim sayfamıza</a> uğra.
            </p>
          </div>
          <FAQ items={faqItems} />
        </div>
      </section>

      {/* ============================================ CTA */}
      <section className="section section-tight">
        <div className="container">
          <div className="card" style={{
            textAlign: "center",
            padding: "56px 32px",
            background: "linear-gradient(140deg, rgba(99,102,241,0.12), rgba(99,102,241,0.02))",
            borderColor: "rgba(99,102,241,0.3)"
          }}>
            <h2 style={{ marginBottom: 14 }}>League'i bir üst seviyeye taşı.</h2>
            <p style={{ fontSize: "1.05rem", marginBottom: 28, maxWidth: 560, margin: "0 auto 28px" }}>
              Ücretsiz başla, istediğin zaman Premium'a geç. Lisans anında e-postanla gönderilir.
            </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 />Ücretsiz İ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.HomePage = HomePage;