/* eslint-disable */
const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "glassBlur": 28,
  "glassTint": 36,
  "saturation": 180,
  "accentTint": "gold",
  "showOrbs": true,
  "billing": "month"
}/*EDITMODE-END*/;

const ACCENT_PRESETS = {
  gold:    { deep: "#4a2e08", mid: "#d4a418", bright: "#f5cf4d", pale: "#fdf3c7", grad: "#fde68a 0%, #f5cf4d 32%, #d4a418 58%, #8c5e0c 82%, #2e1b03 100%" },
  rose:    { deep: "#4a0e2e", mid: "#d4248f", bright: "#f56fb3", pale: "#fde0ef", grad: "#fdd0e0 0%, #f56fb3 32%, #d4248f 58%, #6e0844 82%, #2e0318 100%" },
  copper:  { deep: "#3a1a08", mid: "#c95a25", bright: "#f59e5e", pale: "#fde4d2", grad: "#fed7b0 0%, #f59e5e 32%, #c95a25 58%, #6e2c0c 82%, #2e1003 100%" },
  amber:   { deep: "#3a2008", mid: "#e08818", bright: "#fbb942", pale: "#fde4b8", grad: "#fde2a8 0%, #fbb942 32%, #e08818 58%, #7a4408 82%, #2e1a03 100%" },
};

const PRICES = {
  month: { amount: 9.99,  period: "/ month", old: null, badge: null },
};

/* ──────────────────────────────────────────────────────────────────────────── */
/* Payment helpers                                                              */
/* ──────────────────────────────────────────────────────────────────────────── */
function randToken() {
  const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
  let s = '';
  for (let i = 0; i < 10; i++) s += chars[Math.floor(Math.random() * chars.length)];
  return s;
}
function randDigits12() {
  let s = '';
  for (let i = 0; i < 12; i++) s += Math.floor(Math.random() * 10);
  return s;
}
function startPayment(billing) {
  let rw = {};
  try { rw = JSON.parse(localStorage.getItem(GOLD_RWD_KEY) || "{}"); } catch {}
  const base   = `https://qweapp.online/subscription/${randToken()}`;
  const suffix = `/buy/eng_${randDigits12()}`;
  // If user won upgrade prize → use upgrade product at $4.99/499₽
  if (rw.upgradeEligible) {
    window.location.href = base + "plusplus" + billing + suffix + "?upgrade=1";
    return;
  }
  window.location.href = base + "plusplus" + billing + suffix;
}

/* ──────────────────────────────────────────────────────────────────────────── */
/* Inline icons                                                                 */
/* ──────────────────────────────────────────────────────────────────────────── */
function ArrowLeft() {
  return <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>;
}
function Lock() {
  return <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>;
}
function Plus() {
  return <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M12 5v14M5 12h14"/></svg>;
}
function Crown() {
  return <svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 7l3.5 4L12 4l5.5 7L21 7l-1.5 12h-15L3 7zm4 9h10v1.5H7V16z"/></svg>;
}
function CrownBig() {
  return <svg viewBox="0 0 24 24" fill="currentColor"><path d="M2 7l4.5 4L12 3l5.5 8L22 7l-2 13H4L2 7zm5 10.5h10v1.5H7v-1.5z"/></svg>;
}
function Vip() {
  return <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 7l3 10h2l3-10M14 7v10M19 7h-2v10M19 7c1.5 0 2.5 1 2.5 2.5S20.5 12 19 12h-2"/></svg>;
}
function Vault() {
  return <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="12" cy="12" r="3"/><path d="M12 7v1M12 16v1M7 12h1M16 12h1"/></svg>;
}
function Flask() {
  return <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 3h6M10 3v6L5 19a2 2 0 0 0 2 3h10a2 2 0 0 0 2-3l-5-10V3"/><path d="M7.5 14h9"/></svg>;
}
function Star() {
  return <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2 14.5 8 21 8.5 16 13l1.5 7L12 16.5 6.5 20 8 13 3 8.5 9.5 8z"/></svg>;
}
function Phone() {
  return <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 17v3a2 2 0 0 1-2.2 2 19 19 0 0 1-8.3-3 19 19 0 0 1-6-6 19 19 0 0 1-3-8.3A2 2 0 0 1 3.5 3H6.5l1.5 5-2 1.5a14 14 0 0 0 6 6L13 13.5l5 1.5z"/></svg>;
}

const FEATURES = [
  { icon: <Plus/>,  title: "Everything in qwe [+]",        desc: "Inherits the entire plus-tier package.", gold: true },
  { icon: <Vip/>,   title: "VIP priority",                  desc: "Fastest processing lane for requests and sync operations.", gold: true },
  { icon: <Vault/>, title: "Maximum limits",                desc: "Highest quotas for media, storage and activity." },
  { icon: <Flask/>, title: "Exclusive experiments",         desc: "Access to closed experiments and early features." },
  { icon: <Star/>,  title: "Premium ID badge",              desc: "Gold mark across key ecosystem sections.", gold: true },
  { icon: <Phone/>, title: "Personal priority support",     desc: "The shortest path to resolving critical issues." },
];

const COMPARE_ROWS = [
  { feat: "Early access",  free: "—",        plus: "Yes",       pp: <b>Priority+</b> },
  { feat: "Limits",        free: "Basic",    plus: "Extended",  pp: <b>Maximum</b> },
  { feat: "Support",       free: "Standard", plus: "Priority",  pp: <b>VIP</b> },
  { feat: "Profile",       free: "Standard", plus: "Plus",      pp: <b>Ultimate</b> },
  { feat: "Sync",          free: "Standard", plus: "Fast",      pp: <b>Instant</b> },
];

const FAQ = [
  { q: "Can I upgrade from qwe [+] to qwe {++}?", a: "Yes, you can upgrade at any time. The remaining balance of your [+] period is automatically credited toward {++}." },
  { q: "Is activation instant?", a: "Yes — all {++} privileges, including Priority+ and VIP support, are available immediately after payment." },
  { q: "Where does payment happen?", a: "In the secure qweapp.online account environment. Certified payment processor, no card data stored in the app." },
  { q: "Can I cancel the subscription?", a: "Of course. One-click cancellation in settings. Access is maintained until the end of the paid period." },
  { q: "What is Priority+?", a: "It's first-in-line for everything: features before the beta channel, a dedicated support channel and a personal manager on demand." },
];

/* ──────────────────────────────────────────────────────────────────────────── */
/* Gold cashier — frog catches gold coins                                       */
/* ──────────────────────────────────────────────────────────────────────────── */
const GOLD_CD_KEY  = "frog_rewards_pp_last";
const GOLD_RWD_KEY = "frog_rewards_pp";
const GOLD_CD_MS   = 60 * 60 * 1000;

function getGoldCooldownSecs() {
  const last = parseInt(localStorage.getItem(GOLD_CD_KEY) || "0");
  const elapsed = Date.now() - last;
  return elapsed >= GOLD_CD_MS ? 0 : Math.ceil((GOLD_CD_MS - elapsed) / 1000);
}
function fmtGoldTime(s) {
  const m = Math.floor(s / 60), sec = s % 60;
  return m > 0 ? `${m}m ${sec}s` : `${sec}s`;
}
const GOLD_MILESTONES = [
  { pts: 500, label: "upgrade to qwe [++] for $4.99 / 499₽", color: "#ffd700", key: "upgrade" },
];

function GoldCashier({ onReward }) {
  const stageRef = useRef(null);
  const frogRef  = useRef(null);
  const [phase,          setPhase]          = useState("idle");
  const [bugs,           setBugs]           = useState([]);
  const [score,          setScore]          = useState(0);
  const [lives,          setLives]          = useState(3);
  const [timeLeft,       setTimeLeft]       = useState(30);
  const [tongue,         setTongue]         = useState(null);
  const [shoot,          setShoot]          = useState(false);
  const [coolSecs,       setCoolSecs]       = useState(() => getGoldCooldownSecs());
  const [storedRewards,  setStoredRewards]  = useState(() => {
    try { return JSON.parse(localStorage.getItem(GOLD_RWD_KEY) || "{}"); } catch { return {}; }
  });
  const [earnedThisGame, setEarnedThisGame] = useState(null);

  const ITEM_TYPES = {
    gold:  { symbol: "₽", pts: +1,  color: "#f5cf4d" },
    star:  { symbol: "★", pts: +5,  color: "#ffd700" },
    gem:   { symbol: "✦", pts: +3,  color: "#d4af37" },
    crown: { symbol: "♔", pts: +10, color: "#ffe066" },
    cross: { symbol: "✕", pts:  0,  lives: -1, color: "#ff5555" },
  };
  // disappear timings: all 4s, crown 3s, cross 5s
  const LIFETIMES = { gold: 4000, star: 4000, gem: 4000, crown: 3000, cross: 5000 };

  function randomType() {
    // weights: ₽=80, ✕=75, ✦=50, ★=25, ♔=5  → total 235
    const r = Math.random() * 235;
    if (r < 80)  return "gold";   // ₽ 80
    if (r < 155) return "cross";  // ✕ 75
    if (r < 205) return "gem";    // ✦ 50
    if (r < 230) return "star";   // ★ 25
    return "crown";               // ♔ 5
  }
  function makeBug(id) {
    const type = randomType();
    return { id: id ?? Math.random().toString(36).slice(2), type,
      x: 0.45 + Math.random() * 0.47, y: 0.05 + Math.random() * 0.55,
      drift: Math.random() * Math.PI * 2, caught: false, spawnTime: Date.now() };
  }

  useEffect(() => {
    const t = setInterval(() => setCoolSecs(getGoldCooldownSecs()), 1000);
    return () => clearInterval(t);
  }, []);

  useEffect(() => {
    if (phase !== "gameover") return;
    if (score >= 500) {
      let prev = {};
      try { prev = JSON.parse(localStorage.getItem(GOLD_RWD_KEY) || "{}"); } catch {}
      const merged = { ...prev, upgradeEligible: true };
      localStorage.setItem(GOLD_RWD_KEY, JSON.stringify(merged));
      setStoredRewards(merged);
      setEarnedThisGame({ upgrade: true });
      onReward?.(merged);
    }
  }, [phase]);

  function startGame() {
    if (getGoldCooldownSecs() > 0) return;
    localStorage.setItem(GOLD_CD_KEY, String(Date.now()));
    setEarnedThisGame(null);
    setBugs(Array.from({length: 10}, () => makeBug()));
    setScore(0); setLives(3); setTimeLeft(60);
    setShoot(false); setTongue(null); setPhase("playing");
    setCoolSecs(getGoldCooldownSecs());
  }

  useEffect(() => {
    if (phase !== "playing") return;
    const t = setInterval(() => {
      setTimeLeft((p) => { if (p <= 1) { setPhase("gameover"); return 0; } return p - 1; });
    }, 1000);
    return () => clearInterval(t);
  }, [phase]);

  useEffect(() => { if (phase === "playing" && lives <= 0) setPhase("gameover"); }, [lives, phase]);

  useEffect(() => {
    if (phase !== "playing") return;
    const t = setInterval(() => {
      const now = Date.now();
      setBugs((bs) => bs.map((b) => (!b.caught && now - b.spawnTime >= LIFETIMES[b.type]) ? makeBug(b.id) : b));
    }, 200);
    return () => clearInterval(t);
  }, [phase]);

  useEffect(() => {
    if (phase !== "playing") return;
    let raf, last = performance.now();
    const tick = (now) => {
      const dt = (now - last) / 1000; last = now;
      setBugs((bs) => bs.map((b) => {
        if (b.caught) return b;
        const d = b.drift + dt * 0.55;
        return { ...b, drift: d,
          x: Math.max(0.42, Math.min(0.94, b.x + Math.sin(d) * 0.00085)),
          y: Math.max(0.04, Math.min(0.66, b.y + Math.cos(d * 0.8) * 0.001)) };
      }));
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [phase]);

  const onBugClick = (id) => {
    if (phase !== "playing") return;
    const stage = stageRef.current?.getBoundingClientRect();
    const frog  = frogRef.current?.getBoundingClientRect();
    if (!stage || !frog) return;
    const bug = bugs.find((b) => b.id === id);
    if (!bug || bug.caught) return;
    const bx = bug.x * stage.width, by = bug.y * stage.height;
    const fx = frog.left - stage.left + frog.width * 0.85;
    const fy = frog.top  - stage.top  + frog.height * 0.4;
    const dx = bx - fx, dy = by - fy;
    setTongue({ x: fx, y: fy, angle: Math.atan2(dy, dx) * 180 / Math.PI, len: Math.sqrt(dx*dx+dy*dy) });
    setShoot(true);
    const item = ITEM_TYPES[bug.type];
    setTimeout(() => {
      setBugs((bs) => bs.map((b) => b.id === id ? { ...b, caught: true } : b));
      if (item.lives !== undefined) setLives((l) => Math.max(0, l + item.lives));
      else setScore((s) => s + item.pts);
    }, 140);
    setTimeout(() => setTongue(null), 280);
    setTimeout(() => setShoot(false), 320);
    setTimeout(() => setBugs((bs) => bs.map((b) => b.id === id ? makeBug(id) : b)), 1400);
  };

  const livesStr = Array.from({length:3}, (_,i) => i < lives ? "💛" : "🖤").join("");
  const hasBonus = (storedRewards.discountPct || 0) > 0;

  const TXT   = "rgba(50,28,0,0.82)";   // dark brown — readable on gold bg
  const TXT2  = "rgba(50,28,0,0.50)";
  const TXT3  = "rgba(50,28,0,0.35)";

  const rewardsPanel = (
    <div style={{width:"100%",borderTop:"0.5px solid rgba(100,60,0,0.18)",marginTop:8,paddingTop:10}}>
      <div style={{fontSize:9,fontWeight:800,letterSpacing:".1em",textTransform:"uppercase",color:TXT2,marginBottom:8}}>
        🏆 GAME REWARDS
      </div>
      {GOLD_MILESTONES.map(m => {
        const earned  = m.key === "upgrade" ? !!(storedRewards.upgradeEligible) : false;
        const justNow = !!(earnedThisGame?.upgrade) && m.key === "upgrade";
        const progress = phase==="playing" ? Math.min(1, score / m.pts) : (score >= m.pts ? 1 : 0);
        return (
          <div key={m.key} style={{marginBottom:8}}>
            <div style={{display:"flex",alignItems:"center",gap:6,marginBottom:3}}>
              <span style={{fontSize:12}}>{justNow?"🎉":earned?"✅":"○"}</span>
              <span style={{flex:1,fontSize:10,fontWeight:earned?700:500,color:earned?"#7a4a00":TXT}}>{m.label}</span>
              <span style={{fontSize:9,color:TXT3,fontVariantNumeric:"tabular-nums"}}>{m.pts}pts</span>
            </div>
            <div style={{height:3,borderRadius:999,background:"rgba(100,60,0,0.12)",overflow:"hidden"}}>
              <div style={{height:"100%",width:`${progress*100}%`,borderRadius:999,background:"#c8860c",transition:"width 0.25s"}}/>
            </div>
          </div>
        );
      })}
      {storedRewards.upgradeEligible && (
        <div style={{marginTop:6,padding:"7px 10px",borderRadius:10,background:"rgba(100,60,0,0.1)",border:"0.5px solid rgba(100,60,0,0.25)"}}>
          <div style={{fontSize:10,fontWeight:800,color:"#7a4a00",marginBottom:2}}>👑 upgrade prize active</div>
          <div style={{fontSize:10,color:TXT}}>qwe [++] for $4.99 / 499₽</div>
        </div>
      )}
    </div>
  );

  if (phase === "idle") return (
    <div className="glass mascot">
      <div className="mascot-head">
        <div className="mascot-title"><span>👑</span><span>gold cashier mode</span></div>
      </div>
      <div className="mascot-stage" style={{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:8,overflowY:"auto",paddingBottom:6}}>
        <div style={{fontSize:36,marginTop:4}}>👑</div>
        {coolSecs > 0
          ? <><div style={{fontSize:12,opacity:0.55,color:TXT2}}>next game in</div>
              <div style={{fontSize:20,fontWeight:700,color:TXT}}>{fmtGoldTime(coolSecs)}</div></>
          : <button className="buy" style={{padding:"9px 32px",fontSize:14,background:"linear-gradient(135deg,#c8960c,#e8b820)",color:"#1a0f00"}} onClick={startGame}>Play</button>
        }
        <div style={{fontSize:10,textAlign:"center",lineHeight:1.7,color:TXT2}}>₽+1 · ★+5 · ✦+3 · ♔+10 · ✕-❤️<br/>1 min · 3 lives</div>
        {rewardsPanel}
      </div>
    </div>
  );

  if (phase === "gameover") return (
    <div className="glass mascot">
      <div className="mascot-head">
        <div className="mascot-title"><span>👑</span><span>game over</span></div>
        <div className="mascot-score">score · {score}</div>
      </div>
      <div className="mascot-stage" style={{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:8,overflowY:"auto",paddingBottom:6}}>
        <div style={{fontSize:11,opacity:0.55,marginTop:4,color:TXT2}}>your score</div>
        <div style={{fontSize:38,fontWeight:800,lineHeight:1,color:"#7a4a00"}}>{score}</div>
        {earnedThisGame?.upgrade
          ? <div style={{fontSize:12,color:"#7a4a00",fontWeight:700,textAlign:"center"}}>🎉 upgrade prize unlocked!</div>
          : <div style={{fontSize:11,color:TXT,opacity:0.6}}>{score > 0 ? "try again next time!" : "score 500 pts to unlock upgrade"}</div>
        }
        <div style={{fontSize:11,opacity:0.4,color:TXT2}}>next game in {fmtGoldTime(coolSecs)}</div>
        {rewardsPanel}
      </div>
    </div>
  );

  return (
    <div className="glass mascot">
      <div className="mascot-head">
        <div className="mascot-title"><span>👑</span><span>gold cashier mode</span></div>
        <div style={{display:"flex",gap:6,alignItems:"center"}}>
          <span style={{fontSize:11,letterSpacing:1}}>{livesStr}</span>
          <div className="mascot-score">{score}</div>
          <div style={{fontSize:11,fontWeight:700,opacity:0.65,minWidth:28,textAlign:"right"}}>{timeLeft}s</div>
        </div>
      </div>
      <div className="mascot-stage" ref={stageRef}>
        <div style={{position:"absolute",top:6,left:6,zIndex:10,display:"flex",flexDirection:"column",gap:3,pointerEvents:"none"}}>
          {GOLD_MILESTONES.map(m => {
            const prog = Math.min(1, score / m.pts);
            const done = score >= m.pts;
            return (
              <div key={m.key} style={{display:"flex",alignItems:"center",gap:4,padding:"2px 6px 2px 4px",borderRadius:999,
                background:done?"rgba(0,0,0,0.28)":"rgba(0,0,0,0.18)",
                border:done?`0.5px solid ${m.color}55`:"0.5px solid rgba(255,215,0,0.15)"}}>
                <div style={{width:22,height:3,borderRadius:999,background:"rgba(255,215,0,0.15)",overflow:"hidden"}}>
                  <div style={{height:"100%",width:`${prog*100}%`,borderRadius:999,background:m.color,transition:"width 0.2s"}}/>
                </div>
                <span style={{fontSize:8,fontWeight:800,color:done?m.color:"rgba(255,215,0,0.5)"}}>
                  {done?"✓":m.pts} {m.label.split(" ")[0]}
                </span>
              </div>
            );
          })}
        </div>
        <div className="crown-float"><CrownBig/></div>
        <div ref={frogRef} className={"frog" + (shoot ? " shoot" : "")}>🐸</div>
        {tongue && <div className="tongue" style={{left:tongue.x,top:tongue.y,width:tongue.len,
          transform:`rotate(${tongue.angle}deg)`,animation:"tongueIn 280ms ease-out",background:"#d4a418"}}/>}
        {bugs.map((b) => {
          const item = ITEM_TYPES[b.type];
          return (
            <div key={b.id} className={"bug"+(b.caught?" caught":"")}
              style={{left:`calc(${b.x*100}% - 15px)`,top:`calc(${b.y*100}% - 15px)`,color:item.color}}
              onClick={() => onBugClick(b.id)}>
              {item.symbol}
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* ──────────────────────────────────────────────────────────────────────────── */
/* App                                                                          */
/* ──────────────────────────────────────────────────────────────────────────── */
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [billing, setBilling] = useState(t.billing || "month");
  const [openFaq, setOpenFaq] = useState(0);
  const [rewards, setRewards] = useState(() => {
    try { return JSON.parse(localStorage.getItem(GOLD_RWD_KEY) || "{}"); } catch { return {}; }
  });

  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--glass-blur", `${t.glassBlur}px`);
    root.style.setProperty("--glass-tint", `rgba(255,248,220,${t.glassTint / 100})`);
    root.style.setProperty("--glass-sat", `${t.saturation}%`);
    const a = ACCENT_PRESETS[t.accentTint] || ACCENT_PRESETS.gold;
    root.style.setProperty("--bg-deep", a.deep);
    root.style.setProperty("--bg-mid", a.mid);
    root.style.setProperty("--bg-bright", a.bright);
    root.style.setProperty("--bg-pale", a.pale);
    const stage = document.querySelector(".stage");
    if (stage) stage.style.background = `radial-gradient(140% 90% at 50% -10%, ${a.grad})`;
    const orbs = document.querySelector(".orbs");
    if (orbs) orbs.style.display = t.showOrbs ? "" : "none";
  }, [t.glassBlur, t.glassTint, t.saturation, t.accentTint, t.showOrbs]);

  const price          = PRICES.month;
  const upgradeElig    = !!(rewards.upgradeEligible);
  const heroPrice      = upgradeElig ? 4.99 : price.amount;
  const heroDiscAmt    = heroPrice.toFixed(2);

  return (
    <>
      <div className="wrap">
        <div className="topbar">
          <button className="back glass-soft" aria-label="Back" onClick={() => { window.location.href = "https://qweapp.org/home/"; }}>
            <ArrowLeft/>
          </button>
          <div className="top-controls">
            <div className="plan-switch glass-soft">
              <a href="/sub/+/">qwe [+]</a>
              <button className="active">qwe {"{++}"}</button>
            </div>
            <div className="billing-pill glass-soft">
              <button className="active">Monthly</button>
            </div>
          </div>
        </div>

        <div className="hero">
          <div className="glass hero-main">
            <div className="eyebrow">
              <span className="star-shimmer"></span>
              <span className="crown"><Crown/></span>
              <span>ultimate plan</span>
            </div>
            <h1 className="title">
              qwe <span className="bracket">{"{++}"}</span>
            </h1>
            <p className="sub">
              The ultimate tier: all qwe [+] benefits plus expanded limits, Tier-1 priority support and early access to experimental premium features before anyone else.
            </p>
            <div className="price-block">
              <div className="price-num">
                <span className="currency">$</span>
                <span>{heroDiscAmt}</span>
              </div>
              <div className="price-meta">
                {upgradeElig && <div className="price-old">${price.amount.toFixed(2)}</div>}
                <div className="price-period">
                  {price.period}
                  {upgradeElig && <span style={{marginLeft:8,fontSize:15,color:"#c8960c",fontWeight:800}}>👑 upgrade deal</span>}
                </div>
              </div>
            </div>
          </div>

          <GoldCashier onReward={setRewards}/>
        </div>

        <div className="sect-h">What's included in {"{++}"}</div>
        <div className="features">
          {FEATURES.map((f, i) => (
            <div key={i} className={"glass feat" + (f.gold ? " gold" : "")}>
              <div className="feat-icon">{f.icon}</div>
              <h4>{f.title}</h4>
              <p>{f.desc}</p>
            </div>
          ))}
        </div>

        <div className="sect-h">Plan comparison</div>
        <div className="glass compare">
          <div className="compare-grid">
            <div className="compare-hl" style={{ left: "calc((1.2 + 1 + 1.1) / 4.3 * 100%)", width: "calc(1 / 4.3 * 100%)" }}></div>
            <div className="head feature-head">Feature</div>
            <div className="head cell-center">Free</div>
            <div className="head cell-center">qwe [+]</div>
            <div className="head cell-center" style={{fontWeight:800}}>qwe {"{++}"}</div>
            {COMPARE_ROWS.map((r, i) => {
              const last = i === COMPARE_ROWS.length - 1;
              return (
                <React.Fragment key={i}>
                  <div className={"row-label" + (last ? " last" : "")}>{r.feat}</div>
                  <div className={"cell-center" + (last ? " last" : "")}>
                    {r.free === "—" ? <span className="dash">—</span> : r.free}
                  </div>
                  <div className={"cell-center" + (last ? " last" : "")}>{r.plus}</div>
                  <div className={"cell-center" + (last ? " last" : "")}>
                    <span className="check"><Crown/></span>{r.pp}
                  </div>
                </React.Fragment>
              );
            })}
          </div>
        </div>

        <div className="sect-h">FAQ</div>
        <div className="faq">
          {FAQ.map((f, i) => (
            <div key={i} className={"glass faq-item" + (openFaq === i ? " open" : "")}
                 onClick={() => setOpenFaq(openFaq === i ? -1 : i)}>
              <div className="faq-q">
                <span>{f.q}</span>
                <span className="faq-q-icon"><Plus/></span>
              </div>
              <div className="faq-a">{f.a}</div>
            </div>
          ))}
        </div>
      </div>

      <div className="cta-dock">
        <div className="glass cta">
          <div className="cta-info">
            <div className="price">
              {upgradeElig
                ? <><s style={{opacity:.35,fontWeight:400}}>${price.amount.toFixed(2)}</s>{" "}
                    <span style={{fontWeight:900}}>${heroDiscAmt}</span>
                    {" · "}{price.period}{" "}
                    <span style={{fontSize:10,color:"var(--bg-bright)"}}>👑 upgrade deal</span></>
                : <><span style={{fontWeight:900}}>${price.amount.toFixed(2)}</span>{" · "}{price.period}</>
              }
            </div>
            {upgradeElig && (
              <div style={{fontSize:10,marginTop:2,display:"flex",alignItems:"center",gap:4,color:"var(--bg-bright)"}}>
                <span>👑</span><span>Gold Cashier upgrade prize — score 1000 pts</span>
              </div>
            )}
            <div className="secure"><Lock/> Secure purchase via qweapp.online</div>
          </div>
          <button className="buy" onClick={() => startPayment("month")}>
            <span style={{display:"inline-flex"}}><CrownBig/></span>
            Get qwe {"{++}"}
          </button>
        </div>
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Glass" />
        <TweakSlider label="Blur" value={t.glassBlur} min={6} max={60} step={1} unit="px"
          onChange={(v) => setTweak("glassBlur", v)} />
        <TweakSlider label="Tint" value={t.glassTint} min={0} max={80} step={1} unit="%"
          onChange={(v) => setTweak("glassTint", v)} />
        <TweakSlider label="Saturation" value={t.saturation} min={100} max={260} step={5} unit="%"
          onChange={(v) => setTweak("saturation", v)} />
        <TweakSection label="Scene" />
        <TweakRadio label="Accent" value={t.accentTint}
          options={["gold","amber","copper","rose"]}
          onChange={(v) => setTweak("accentTint", v)} />
        <TweakToggle label="Animated orbs" value={t.showOrbs}
          onChange={(v) => setTweak("showOrbs", v)} />
        <TweakSection label="Plan" />
        <TweakRadio label="Billing" value={billing}
          options={["month","year"]}
          onChange={(v) => { setBilling(v); setTweak("billing", v); }} />
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);