/* global React */ const { useState, useEffect, useRef } = React; /* ============ Icons ============ */ const Ic = { play: (p) => , pause: (p) => , prev: (p) => , next: (p) => , shuffle: (p) => , repeat: (p) => , heart: (p) => , music: (p) => , list: (p) => , check: (p) => , x: (p) => , plus: (p) => , arrow: (p) => , spark: (p) => , bolt: (p) => , shield: (p) => , lock: (p) => , key: (p) => , panel: (p) => , chart: (p) => , term: (p) => , tune: (p) => , spotify: (p) => , youtube: (p) => , rocket: (p) => , premium: (p) => , globe: (p) => , external: (p) => , sun: (p) => , moon: (p) => , }; /* ============ Brand Mark ============ */ const Brand = ({ small }) => ( WSG Winners Side Guardian {!small && · WSG} ); /* ============ Nav ============ */ const LANGS = [ { code: "tr", label: "Türkçe" }, { code: "en", label: "English" }, { code: "es", label: "Español" }, { code: "pt", label: "Português" }, ]; const LangPicker = ({ lang, onLang, t }) => { const [open, setOpen] = useState(false); const ref = useRef(null); const cur = LANGS.find(l => l.code === lang) || LANGS[0]; useEffect(() => { if (!open) return; const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener("mousedown", onDoc); return () => document.removeEventListener("mousedown", onDoc); }, [open]); return (
{open && (
{LANGS.map(l => ( ))}
)}
); }; const Nav = ({ theme, onTheme, lang, onLang, t }) => ( ); /* ============ Hero ============ */ const Hero = ({ t }) => (
{t.hero.eyebrow}

{t.hero.h1a}
{t.hero.h1b} {t.hero.h1em} {t.hero.h1c}

{t.hero.lead}

{t.hero.cta1} {t.hero.cta2}
{t.hero.m1}
{t.hero.m2}
{t.hero.m3}
!play fein · {t.hero.chip1}
{t.hero.chip2} {t.hero.chipActive}
); /* ============ Player widget ============ */ const Player = (props) => { const [tab, setTab] = useState("Lyrics"); const [playing, setPlaying] = useState(true); return (
{(props.t && props.t.hero.now) || "Şimdi Çalıyor · #genel"} PRO
via Spotify · 320 kbps
FE!N
Travis Scott ft. Playboi Carti
1:424:12
{["Play", "Lyrics", "Queue", "Loop"].map(t => ( setTab(t)}>{t} ))}
{tab === "Lyrics" && (
♪ yeah, you know that I'm lit
→ fein, fein, fein, fein, fein
♪ devil in a new dress (yeah)
)} {tab === "Queue" && (
→ 1. FE!N — Travis Scott · 4:12
♪ 2. Sky — Playboi Carti · 3:36
♪ 3. Type Shit — Future, Metro · 3:48
)}
); }; /* ============ Logo / capability strip ============ */ const Strip = ({ t }) => { const items = [ { i: , t: t.strip.spotify }, { i: , t: t.strip.youtube }, { i: , t: t.strip.lyrics }, { i: , t: t.strip.playlist }, { i: , t: t.strip.fav }, { i: , t: t.strip.nuke }, { i: , t: t.strip.automod }, { i: , t: t.strip.panel }, { i: , t: t.strip.license }, { i: , t: t.strip.langs }, ]; const all = [...items, ...items]; return (
{all.map((it, i) => ( {it.i} {it.t} ))}
); }; /* ============ Features (numbered editorial) ============ */ const Features = ({ t }) => { const f = t.feat; const rows = [ { num: "01", title: f.r1t, badge: "FREE+PRO", desc: f.r1d }, { num: "02", title: f.r2t, badge: "PRO", desc: f.r2d }, { num: "03", title: f.r3t, badge: "PRO", desc: f.r3d }, { num: "04", title: f.r4t, badge: "PRO", desc: f.r4d }, { num: "05", title: f.r5t, badge: "PANEL", desc: f.r5d }, { num: "06", title: f.r6t, badge: "FREE+PRO", desc: f.r6d }, ]; return (
{f.label}

{f.titleA}
{f.titleB}

{f.sub}

{rows.map(r => (
{r.num}

{r.title}{r.badge}

{r.desc}

))}
); }; /* ============ Modules grid ============ */ const Modules = ({ t }) => { const m = t.mods; return (
{m.label}

{m.titleA}
{m.titleB}

PRO

{m.m1t}

{m.m1d}

{Array.from({ length: 24 }).map((_, i) => ( ))}
PRO

{m.m2t}

{m.m2d}

♪ yeah you know
→ fein, fein, fein
PRO

{m.m3t}

{m.m3d}

gece — fein
sabah — sky
PRO

{m.m4t}

{m.m4d}

{Array.from({ length: 6 }).map((_, i) =>
)}
FREE

{m.m5t}

{m.m5d}

PANEL

{m.m6t}

{m.m6d}

{["OAuth2", "License", "Plan", "TR/EN/ES/PT"].map(x => ( {x} ))}
); }; /* ============ Pricing ============ */ const Pricing = ({ t }) => { const p = t.price; return (
{p.label}

{p.titleA}
{p.titleB}

{p.sub}

Free
₺0 {p.forever}

{p.freeTag}

  • {p.f1}
  • {p.f2}
  • {p.f3}
  • {p.f4}
  • {p.f5}
  • {p.f6}
{t.hero.cta1}
Pro {p.recommended}
₺799 {p.monthly}

{p.proTag}

  • {p.p1}
  • {p.p2}
  • {p.p3}
  • {p.p4}
  • {p.p5}
  • {p.p6}
  • {p.p7}
{t.hero.cta2}
); }; /* ============ Panel preview ============ */ const Panel = ({ t }) => { const pn = t.panel; const [filters, setFilters] = useState({ ad: true, kufur: true, spam: true, caps: false, repeat: true, nuke: true }); const tog = (k) => setFilters(f => ({ ...f, [k]: !f[k] })); return (
{pn.label}

{pn.titleA}
{pn.titleB}

{pn.sub}

panel.wsguardian.com / dashboard

{pn.overview}

{pn.synced}
{pn.labelPlan}
PRO
{pn.labelLicense}
{pn.licenseActive}
{pn.labelToday}
∞ / ∞
{pn.labelRenew}
28 {pn.days}
{pn.protectionTitle}
{[["ad",pn.ad],["kufur",pn.swear],["spam",pn.spam],["caps",pn.caps],["repeat",pn.repeat],["nuke",pn.nuke]].map(([k, l]) => (
tog(k)} style={{ cursor: "pointer" }}> {l}
))}
{pn.musicConfig}
{pn.autoplay}
{pn.twentyfour}
{pn.dj}
{pn.botLang}Türkçe ▾
{pn.licenseField}
WSG-PRO-XXXX-XXXX-XXXX
!play
!play travis scott fein
!lyrics
!lyrics
!playlist
!playlist iceaktar chill spotify.link
!fav
!fav ekle gece
); }; /* ============ FAQ ============ */ const FAQ = ({ t }) => { const [open, setOpen] = useState(0); const f = t.faq; const items = [ { q: f.q1, a: f.a1 }, { q: f.q2, a: f.a2 }, { q: f.q3, a: f.a3 }, { q: f.q4, a: f.a4 }, { q: f.q5, a: f.a5 }, { q: f.q6, a: f.a6 }, ]; return (
{f.label}

{f.titleA} {f.titleB}

{items.map((it, i) => (
setOpen(open === i ? -1 : i)}>
{String(i + 1).padStart(2, "0")}

{it.q}

{it.a}
))}
); }; /* ============ Final CTA ============ */ const CTA = ({ t }) => (
{t.cta.label}

{t.cta.h1}
{t.cta.h2} {t.cta.h2em}
{t.cta.h3}

{t.cta.p}

); /* ============ Footer ============ */ const Footer = ({ t }) => ( ); /* ============ Tweaks ============ */ const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "accent": "violet", "hero": "split", "density": "default" }/*EDITMODE-END*/; const App = () => { const [tweaks, setTweak] = window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, () => {}]; const [theme, setTheme] = useState(() => { try { return localStorage.getItem("wsg-theme") || "light"; } catch { return "light"; } }); const toggleTheme = () => { const next = theme === "dark" ? "light" : "dark"; setTheme(next); try { localStorage.setItem("wsg-theme", next); } catch {} }; const [lang, setLang] = useState(() => { try { return localStorage.getItem("wsg-lang") || "tr"; } catch { return "tr"; } }); const onLang = (code) => { setLang(code); try { localStorage.setItem("wsg-lang", code); } catch {} document.documentElement.lang = code; }; useEffect(() => { document.documentElement.dataset.accent = tweaks.accent; document.documentElement.dataset.hero = tweaks.hero; document.documentElement.dataset.density = tweaks.density; document.documentElement.dataset.theme = theme; }, [tweaks, theme]); const TP = window.TweaksPanel; const TS = window.TweakSection; const TR = window.TweakRadio; const t = (window.WSG_T && window.WSG_T[lang]) || (window.WSG_T && window.WSG_T.tr) || {}; return ( <>