// Priority queue tiers section + queue-status widget.

function PrioritySection({ onOpenAccount }) {
  const { session } = useAuth();
  return (
    <section id="priority">
      <div className="shell">
        <SectionHead
          num="§09 — PRIORITY QUEUE"
          title={<>SKIP THE LINE.<br/>NOT THE FIGHT.</>}
          sub={<>No pay-to-win — no loot perks, no stat boosts, no in-game advantages. You're paying to skip the queue when the server is full, and to wear a Discord role with bragging rights.</>}
        />

        <div className="tier-grid">
          {TIERS.map(t => (
            <article key={t.key} className={"tier-card" + (t.popular ? " popular" : "")}>
              {t.popular && <div className="tier-popular">MOST PICKED</div>}
              <div className="tier-name" style={{color: t.color}}>{t.label.toUpperCase()}</div>
              <div className="tier-price">
                <span className="tier-amount">${t.price}</span>
                <span className="tier-period">/ month</span>
              </div>
              <div className="tier-skip">
                <div className="tier-skip-k">QUEUE SKIP</div>
                <div className="tier-skip-v" style={{color: t.color}}>
                  {t.queueSkip > 999 ? "∞" : t.queueSkip}<span style={{fontSize:14,color:"var(--ink-3)"}}> spots</span>
                </div>
              </div>
              <ul className="tier-perks">
                {t.perks.map(p => (
                  <li key={p}>
                    <svg width="12" height="12" viewBox="0 0 12 12" style={{color: t.color, flexShrink: 0, marginTop: 4}}>
                      <path d="M2 6 L5 9 L10 3" fill="none" stroke="currentColor" strokeWidth="2"/>
                    </svg>
                    <span>{p}</span>
                  </li>
                ))}
              </ul>
              <button className="tier-btn" onClick={onOpenAccount} style={{
                background: t.popular ? t.color : "transparent",
                color: t.popular ? "var(--accent-ink)" : t.color,
                borderColor: t.color,
              }}>
                {session.tier === t.key ? "ACTIVE" : `Get ${t.label}`}
              </button>
            </article>
          ))}
        </div>

        <div className="priority-faq">
          <div className="faq-item">
            <div className="faq-q">Is this pay-to-win?</div>
            <div className="faq-a">No. You don't get loot, stats, or any in-game advantage. You get to connect when the server is full — that's it. Same loot rolls, same hit reg, same combat.</div>
          </div>
          <div className="faq-item">
            <div className="faq-q">How does the queue skip work?</div>
            <div className="faq-a">When the server hits {SERVER.slots}/{SERVER.slots}, new connections go in a queue. The DayZ priority-queue mod reads a SteamID whitelist and reorders accordingly. Higher tier = higher position.</div>
          </div>
          <div className="faq-item">
            <div className="faq-q">Cancellation?</div>
            <div className="faq-a">Cancel anytime from your account modal. Your tier stays active through the end of the paid month. No refunds on partial months.</div>
          </div>
          <div className="faq-item">
            <div className="faq-q">What data do you store?</div>
            <div className="faq-a">Discord ID, Steam ID, tier, and expiry date. That's it. No emails, no card numbers (PayPal handles those), no IP logs. Delete it anytime by canceling.</div>
          </div>
        </div>

        <QueueWidget />
      </div>
    </section>
  );
}

function QueueWidget() {
  const { session } = useAuth();
  const liveStatus = useLiveStatus();
  const queue = liveStatus.queue ?? 0;
  const live = liveStatus.queueSource === "battlemetrics";

  const tierObj = TIERS.find(t => t.key === session.tier);
  const skip = tierObj?.queueSkip || 0;
  const yourPos = Math.max(1, queue + 1 - Math.min(queue, skip));

  return (
    <div className="queue-widget">
      <div className="qw-eyebrow">— LIVE QUEUE {live ? <span style={{color:"var(--good)"}}>· BATTLEMETRICS</span> : <span style={{color:"var(--ink-4)"}}>· {liveStatus.queueSource === "unavailable" ? "FIELD NOT EXPOSED" : "DEMO"}</span>}</div>
      <div className="qw-grid">
        <div>
          <div className="qw-k">CURRENT QUEUE</div>
          <div className="qw-v">{queue}<span style={{color:"var(--ink-3)",fontSize:18}}> waiting</span></div>
        </div>
        <div>
          <div className="qw-k">YOUR POSITION</div>
          <div className="qw-v">
            {!session.tier && <span style={{color:"var(--ink)"}}>#{queue + 1}</span>}
            {session.tier && (
              <>
                <span style={{color:tierObj.color}}>#{yourPos}</span>
                <span style={{color:"var(--ink-4)",fontSize:18,textDecoration:"line-through",marginLeft:8}}>#{queue + 1}</span>
              </>
            )}
          </div>
        </div>
        <div>
          <div className="qw-k">EST WAIT</div>
          <div className="qw-v">
            {(session.tier ? yourPos : queue + 1) <= 1
              ? <span style={{color:"var(--good)"}}>NONE</span>
              : ((session.tier ? yourPos : queue + 1) * 90) + "s"}
          </div>
        </div>
      </div>
      {!session.tier && (
        <div className="qw-cta">
          <span className="muted">Tired of waiting?</span>
          <a href="#priority" className="btn btn-primary">Get priority</a>
        </div>
      )}
    </div>
  );
}

window.PrioritySection = PrioritySection;