/* global React */
// ============================================================
// frekanslol — app screenshot frames
// Real screenshots from the desktop app, presented in a
// stylized window frame for the marketing site.
// ============================================================

function AppFrame({ src, title, alt }) {
  return (
    <div className="mock" style={{
      overflow: "hidden",
      padding: 0,
      borderRadius: "var(--r-xl)",
    }}>
      <img
        src={src}
        alt={alt}
        loading="lazy"
        style={{ display: "block", width: "100%", height: "auto" }}
      />
    </div>
  );
}

// APP_SCREENSHOT_1 — Custom Skins library (real screenshot)
function AppMockSkinLibrary() {
  return (
    <AppFrame
      // <!-- APP_SCREENSHOT_1: Main app window showing skin library -->
      src="assets/screenshot-custom-skins.png"
      title="frekanslol · Custom Skins"
      alt="frekanslol Özel Kostümler — League of Legends skin yöneticisi ekran görüntüsü"
    />
  );
}

// APP_SCREENSHOT_3 — News / Resmi galeri-benzeri ekran (real screenshot)
function AppMockNews() {
  return (
    <AppFrame
      // <!-- APP_SCREENSHOT_3: News / official content view -->
      src="assets/screenshot-news.png"
      title="frekanslol · Haberler & Yama Notları"
      alt="frekanslol Haberler ekranı — yama notları ve oyun haberleri"
    />
  );
}

// APP_SCREENSHOT_2 — Game assistant / draft view (synthesized — no real shot available)
function AppMockDraft() {
  return (
    // <!-- APP_SCREENSHOT_2: Game assistant / draft screen (placeholder design) -->
    <div className="mock" aria-label="APP_SCREENSHOT_2 placeholder">
      <div className="mock-titlebar">
        <div className="mock-dots">
          <span className="mock-dot" />
          <span className="mock-dot" />
          <span className="mock-dot" />
        </div>
        <span className="mock-title">Şampiyon Seçimi · Solo/Duo</span>
      </div>
      <div style={{ padding: 20, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          <div style={{ fontSize: "0.78rem", color: "var(--text-muted)", textTransform: "uppercase", letterSpacing: "0.08em" }}>Senin Takım</div>
          {["MID", "JNG", "TOP", "ADC", "SUP"].map((r, i) => (
            <div key={r} style={{
              display: "flex", alignItems: "center", gap: 10,
              padding: "8px 10px", borderRadius: 8,
              background: i === 0 ? "rgba(99,102,241,0.12)" : "var(--surface)",
              border: "1px solid " + (i === 0 ? "rgba(99,102,241,0.35)" : "var(--border)")
            }}>
              <span className="mono" style={{ width: 32, color: "var(--text-muted)", fontSize: "0.72rem" }}>{r}</span>
              <span style={{ width: 24, height: 24, borderRadius: 6, background: "linear-gradient(140deg,#2a2a3a,#1a1a26)" }} />
              <span style={{ fontSize: "0.85rem", color: "var(--text-soft)" }}>
                {i === 0 ? "Ahri" : i === 1 ? "Lee Sin" : "—"}
              </span>
            </div>
          ))}
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          <div style={{ fontSize: "0.78rem", color: "var(--accent-hi)", textTransform: "uppercase", letterSpacing: "0.08em", display: "flex", alignItems: "center", gap: 6 }}>
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--accent-hi)" }} />
            AI Önerisi
          </div>
          <div style={{ padding: 14, borderRadius: 10, background: "linear-gradient(140deg, rgba(99,102,241,0.12), rgba(99,102,241,0.03))", border: "1px solid rgba(99,102,241,0.3)" }}>
            <div style={{ fontSize: "0.88rem", color: "var(--text)", marginBottom: 6, fontWeight: 600 }}>Rakip Top: Darius</div>
            <div style={{ fontSize: "0.8rem", color: "var(--text-soft)", lineHeight: 1.5 }}>
              Kısa menzilli, all-in odaklı. Erken evrede pasif oyna; lv6 sonrası ult cooldown'larını izle.
            </div>
          </div>
          <div style={{ padding: 12, borderRadius: 10, background: "var(--surface)", border: "1px solid var(--border)", fontSize: "0.82rem", color: "var(--text-soft)" }}>
            Önerilen Rün: <span style={{ color: "var(--accent-hi)", fontFamily: "var(--font-mono)" }}>Elektrokütle</span>
          </div>
          <div style={{ padding: 12, borderRadius: 10, background: "var(--surface)", border: "1px solid var(--border)", fontSize: "0.82rem", color: "var(--text-soft)" }}>
            Maç gücü: <strong style={{ color: "var(--success)" }}>+ 4.2%</strong> kazanma oranı
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AppFrame, AppMockSkinLibrary, AppMockNews, AppMockDraft });