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

function PremiumPage({ onNav, tweaks }) {
  const [annual, setAnnual] = React.useState(false);
  const fmt = (n) => Number(n).toLocaleString("tr-TR", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
  const buyUrl = annual ? (tweaks.lemonSqueezyAnnualUrl || tweaks.lemonSqueezyUrl) : tweaks.lemonSqueezyUrl;

  const rows = [
    { feature: "Skin Yöneticisi", free: "yes", premium: "yes" },
    { feature: "Resmi Skin Galerisi", free: "yes", premium: "yes" },
    { feature: "Temel Maç Koçu", free: "yes", premium: "yes" },
    { feature: "Günlük AI Analizi", free: "10/gün", premium: "unlim" },
    { feature: "Otomatik Rün", free: "no", premium: "yes" },
    { feature: "Otomatik Ban/Pick", free: "no", premium: "yes" },
    { feature: "Çok Hesap Takibi", free: "no", premium: "yes" },
    { feature: "Şampiyon Havuzu Analizi", free: "no", premium: "yes" },
    { feature: "Eternals Takibi", free: "no", premium: "yes" },
    { feature: "Öncelikli Destek", free: "no", premium: "yes" },
  ];

  const premiumFeatures = [
    "Sınırsız günlük AI analizi",
    "Otomatik rün uygulaması",
    "Otomatik ban / pick",
    "Çok hesap takibi & senkron",
    "Şampiyon havuzu istatistikleri",
    "Eternals & mastery takibi",
    "Öncelikli destek",
  ];

  const faqItems = [
    {
      q: "Lisans anahtarı hemen mi gelir?",
      a: "Evet. LemonSqueezy üzerinden ödemeyi tamamladıktan sonra lisans anahtarın e-posta adresine anlık olarak gönderilir. Genellikle 30 saniye içinde gelir; e-posta sağlayıcına bağlı olarak bazen 1-2 dakika gecikme olabilir. E-postan ulaşmadıysa spam/junk klasörünü kontrol etmeyi unutma. 10 dakika içinde anahtar gelmezse frekanslol@proton.me adresine sipariş numaranla birlikte yazabilirsin.",
    },
    {
      q: "Birden fazla cihazda kullanabilir miyim?",
      a: "Bir lisans anahtarı; aynı anda en fazla 2 cihazda aktif olabilir (örneğin masaüstün ve dizüstün). Üçüncü bir cihaza geçmek istersen, eski cihazlardan birinde lisansı deaktive edip yeni cihazda aktive edebilirsin. Bu işlem uygulamanın Ayarlar > Premium menüsünden yapılır. Lisans anahtarını başka kullanıcılarla paylaşmak yasaktır ve tespit edildiğinde iade olmadan iptal sebebidir.",
    },
    {
      q: "İptal edersem ne olur?",
      a: "Premium aboneliğin LemonSqueezy üzerinden tek tıkla iptal edilebilir. İptal işleminden sonra mevcut faturalama döneminin sonuna kadar tüm Premium özellikleri kullanmaya devam edersin — örneğin 15 Mayıs'ta iptal edersen, ödediğin dönemin son günü olan 31 Mayıs'a kadar Premium aktif kalır. Sonraki dönem otomatik yenileme yapılmaz ve hesabın ücretsiz plana geçer. Skinlerin ve ayarların korunur.",
    },
    {
      q: "Ödeme yöntemi olarak ne kabul ediliyor?",
      a: "Tüm Premium ödemeleri LemonSqueezy üzerinden işlenir. Kabul edilen yöntemler: kredi kartı (Visa, MasterCard, American Express), banka kartı, PayPal ve bazı bölgelerde Apple Pay / Google Pay. Türkiye'den TL ile ödeme yapılabilir. Tüm işlemler PCI-DSS sertifikalı ödeme altyapısı üzerinden gerçekleştirilir ve frekanslol hiçbir kart bilgisini görmez/saklamaz.",
    },
  ];

  return (
    <main>
      <section className="premium-hero">
        <div className="container">
          <span className="eyebrow"><span className="dot" />frekanslol Premium</span>
          <h1 style={{ marginTop: 18 }}>Tam güç, <br />sınırsız koçluk.</h1>
          <p style={{ fontSize: "1.15rem", marginTop: 18, maxWidth: 620, margin: "18px auto 0" }}>
            Sınırsız AI koçluk, otomasyon araçları ve gelişmiş analiz. Tek bir aylık abonelikle League deneyimini profesyonel seviyeye taşı.
          </p>
        </div>
      </section>

      <section className="section section-tight">
        <div className="container">
          <div className="plans-grid">
            <div className="compare-table">
              <div className="compare-row head">
                <div>Özellik</div>
                <div>Ücretsiz</div>
                <div className="premium-col">Premium</div>
              </div>
              {rows.map((r, i) => (
                <div key={i} className="compare-row">
                  <div className="compare-cell feature-name">{r.feature}</div>
                  <div className="compare-cell" style={{ textAlign: "center" }}>
                    {r.free === "yes" && <span style={{ color: "var(--success)" }}><Icon.Check /></span>}
                    {r.free === "no" && <span style={{ color: "var(--text-muted)", opacity: 0.5 }}><Icon.X /></span>}
                    {!["yes", "no"].includes(r.free) && <span>{r.free}</span>}
                  </div>
                  <div className="compare-cell col-premium" style={{ textAlign: "center" }}>
                    {r.premium === "yes" && <span style={{ color: "var(--success)" }}><Icon.Check /></span>}
                    {r.premium === "no" && <span style={{ color: "var(--text-muted)", opacity: 0.5 }}><Icon.X /></span>}
                    {r.premium === "unlim" && <span style={{ color: "var(--accent-hi)", fontWeight: 600 }}>Sınırsız</span>}
                    {!["yes", "no", "unlim"].includes(r.premium) && <span>{r.premium}</span>}
                  </div>
                </div>
              ))}
            </div>

            <div className="price-card">
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <span className="chip chip-accent"><Icon.Sparkle width="12" height="12" />Premium</span>
                {annual && <span className="chip" style={{ background: "rgba(52,211,153,0.1)", borderColor: "rgba(52,211,153,0.3)", color: "var(--success)" }}>2 ay bedava</span>}
                {!annual && <span className="chip">En popüler</span>}
              </div>

              {/* Billing toggle */}
              <div className="billing-toggle">
                <button
                  className={"billing-opt " + (!annual ? "active" : "")}
                  onClick={() => setAnnual(false)}
                  type="button"
                >
                  Aylık
                </button>
                <button
                  className={"billing-opt " + (annual ? "active" : "")}
                  onClick={() => setAnnual(true)}
                  type="button"
                >
                  Yıllık <span className="billing-save">— %15 indirim</span>
                </button>
              </div>

              <div className="price-tag">
                <span className="price-amount">₺{fmt(annual ? tweaks.priceTryAnnual : tweaks.priceTry)}</span>
                <span className="price-period">/ {annual ? "yıl" : "ay"}</span>
              </div>
              <p style={{ fontSize: "0.92rem", marginTop: -8 }}>
                {annual
                  ? <>~ €{fmt(tweaks.priceEurAnnual)} · Yılda bir ödeme · 2 ay bedava</>
                  : <>~ €{fmt(tweaks.priceEur)} · İstediğin zaman iptal et.</>}
              </p>

              <div className="price-features">
                {premiumFeatures.map((f) => (
                  <div key={f} className="price-feature">
                    <span className="check"><Icon.Check /></span>
                    {f}
                  </div>
                ))}
              </div>

              <a
                className="btn btn-primary btn-lg"
                href={buyUrl}
                target="_blank"
                rel="noopener noreferrer"
                style={{ justifyContent: "center", marginTop: 8 }}
              >
                Satın Al <Icon.External />
              </a>

              <div className="price-badges">
                <div className="price-badge">
                  <Icon.Mail />
                  Anında lisans anahtarı — e-posta ile gönderilir
                </div>
                <div className="price-badge">
                  <Icon.Shield width="16" height="16" />
                  Güvenli ödeme — LemonSqueezy altyapısı
                </div>
              </div>
            </div>
          </div>

          {/* How to activate */}
          <div className="howto">
            <h3>Satın aldıktan sonra: 4 adımda Premium aktivasyon</h3>
            <p style={{ fontSize: "0.95rem", marginBottom: 18 }}>
              Satın alma sonrası süreç tamamen otomatik. Aşağıdaki adımlar genellikle 1 dakikadan kısa sürer:
            </p>
            <div className="howto-steps-list">
              <div className="howto-step-row">
                <span className="num">1</span>
                <div>
                  <strong>E-posta gelir.</strong> LemonSqueezy, ödeme tamamlandığında lisans anahtarını e-posta adresine iletir. Spam klasörünü kontrol etmeyi unutma.
                </div>
              </div>
              <div className="howto-step-row">
                <span className="num">2</span>
                <div>
                  <strong>frekanslol'u aç.</strong> Uygulama açıkken sağ alt köşedeki Ayarlar simgesine tıkla.
                </div>
              </div>
              <div className="howto-step-row">
                <span className="num">3</span>
                <div>
                  <strong>Premium sekmesine git.</strong> Lisans anahtarını ilgili kutuya yapıştır.
                </div>
              </div>
              <div className="howto-step-row">
                <span className="num">4</span>
                <div>
                  <strong>"Aktifleştir" butonuna tıkla.</strong> Tüm Premium özellikler anında aktif olur. Uygulamayı yeniden başlatmana gerek yok.
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section section-tight">
        <div className="container" style={{ maxWidth: 880 }}>
          <div className="section-head" style={{ marginBottom: 32 }}>
            <h2 style={{ fontSize: "1.7rem" }}>Premium ile gelen ekstra modüller</h2>
            <p style={{ maxWidth: 600 }}>
              Aboneliğinle birlikte aktive olan, ücretsiz sürümde yer almayan özelliklerin detaylı tanıtımı.
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }} className="grid-2">
            {[
              { t: "Otomatik Rün", d: "Şampiyon kilitlendiği anda en iyi rün sayfası uygulanır. Mod, eşleşme ve role göre değişir. Yüksek win-rate'li topluluk build'leri kaynak olarak kullanılır." },
              { t: "Çok Hesap Takibi", d: "Tüm hesaplarını aynı uygulamadan takip et. Sıralı ve normal queue istatistikleri tek yerde; LP grafikleri ve son maç sonuçları paneline yansır." },
              { t: "Şampiyon Havuzu Analizi", d: "Hangi şampiyonlarda iyisin, hangileri zayıf? Premium analiz seni doğru havuza yönlendirir. Rol bazında winrate, KDA ve oynanma sıklığı görselleştirilir." },
              { t: "Sınırsız AI", d: "Her maçta, her draftta, kısıtlama olmadan AI önerisi al. 10/gün limiti kaldırılır. Yoğun grind dönemleri için ideal." },
              { t: "Otomatik Ban/Pick", d: "Önceden tanımladığın listeden otomatik ban ve hazır pick. Düşük sıralarda 'rakip benim main'imi banlasın' korkusuyla bekleme; frekanslol senin için anında yapar." },
              { t: "Öncelikli Destek", d: "Premium kullanıcılar destek taleplerinde sıranın başına geçer. Genellikle 6 saat içinde dönüş alırsın." },
            ].map((b) => (
              <div key={b.t} className="card" style={{ padding: 24 }}>
                <h3 style={{ fontSize: "1.05rem", marginBottom: 6, display: "flex", alignItems: "center", gap: 8 }}>
                  <span style={{ color: "var(--accent-hi)" }}><Icon.Sparkle width="16" height="16" /></span>
                  {b.t}
                </h3>
                <p style={{ fontSize: "0.93rem" }}>{b.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section" id="premium-faq">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow"><span className="dot" />Premium SSS</span>
            <h2>Sıkça Sorulan Sorular</h2>
          </div>
          <FAQ items={faqItems} />
        </div>
      </section>
    </main>
  );
}

window.PremiumPage = PremiumPage;