// $1,000 FTT Raffle — 5 × $200 slots + eligible entries.
function Slot({ i }) {
  return (
    <div className="slot">
      <div className="slot-top"><Icon name="ticket" size={14} color="var(--ll-neon)" /> Slot {i}</div>
      <div className="slot-prize num">$200</div>
      <div className="slot-state">Awaiting draw</div>
    </div>
  );
}

function Raffle(props) {
  const r = window.DASH.raffle;
  const hideWallets = props && props.hideWallets;
  const odds = r.eligibleCount > 0 ? (r.slots / r.eligibleCount * 100) : 0;
  return (
    <section className="card panel">
      <div className="panel-head">
        <div className="panel-titles">
          <div className="panel-eyebrow"><Icon name="ticket" size={14} color="var(--ll-neon)" /> FTT Raffle</div>
          <h2 className="panel-title">First-Time Trader Raffle</h2>
          <p className="panel-desc">
            <b>{r.slots} × ${r.prizeEach}</b> drawn at close. Eligible: first-time Limitless
            traders via the link with <b className="num">≥ ${r.minVolume}</b> volume.
            The <b>top 3 leaderboard finishers are excluded</b> (they win the cash prize instead).
          </p>
        </div>
        <div className="panel-meta">
          <span className="pool-pill">$1,000 pool</span>
          <span className="panel-substat num">~{odds.toFixed(0)}% per entry</span>
        </div>
      </div>

      <div className="raffle-body">
        <div className="slots">
          {[1, 2, 3, 4, 5].map((i) => <Slot key={i} i={i} />)}
        </div>

        <div className="elig">
          <div className="elig-count">
            <span className="stat-num num">{r.eligibleCount}</span>
            <span className="elig-cap">eligible entries</span>
          </div>
          <div className="elig-note"><Icon name="check" size={13} color="var(--ll-yes)" /> Verified ≥ ${r.minVolume} volume · first trade via Ted's link</div>
        </div>
      </div>

      <div className="wallets" style={hideWallets ? { display: "none" } : null}>
        <div className="wallets-head">Eligible wallets <span className="wallets-n num">({r.eligibleCount})</span></div>
        <div className="wallet-grid">
          {r.eligible.map((w, i) => (
            <span className="wallet-chip num" key={i}>
              <span className="wchip-dot" />{w}
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Raffle = Raffle;