// Three summary cards: signups, funded/conversion, First-100 progress.
function StatCard(props) {
  return (
    <div className={"card stat " + (props.accent ? "stat-accent" : "")}>
      <div className="stat-head">
        <span className="stat-icon"><Icon name={props.icon} size={16} /></span>
        <span className="stat-label">{props.label}</span>
      </div>
      <div className="stat-body">{props.children}</div>
      {props.foot ? <div className="stat-foot">{props.foot}</div> : null}
    </div>
  );
}

function Donut({ pct }) {
  const r = 20, c = 2 * Math.PI * r;
  const off = c * (1 - pct / 100);
  return (
    <svg width="52" height="52" viewBox="0 0 52 52" style={{ flex: "0 0 auto" }}>
      <circle cx="26" cy="26" r={r} fill="none" stroke="var(--ll-grey-400)" strokeWidth="6" />
      <circle cx="26" cy="26" r={r} fill="none" stroke="var(--ll-neon)" strokeWidth="6"
        strokeDasharray={c} strokeDashoffset={off} strokeLinecap="round"
        transform="rotate(-90 26 26)" style={{ transition: "stroke-dashoffset var(--t-med)" }} />
      <text x="26" y="26" textAnchor="middle" dominantBaseline="central"
        style={{ fill: "#fff", font: "700 14px var(--font-display)" }} className="num">{pct}%</text>
    </svg>
  );
}

function Summary() {
  const s = window.DASH.summary;
  const conv = s.signups ? Math.round((s.funded / s.signups) * 100) : 0;
  const ftPct = Math.min(100, Math.round((s.funded / 100) * 100));

  return (
    <section className="grid-summary">
      <StatCard icon="users" label="Total signups"
        foot={<span>via referral link</span>}>
        <span className="stat-num num">{s.signups}</span>
      </StatCard>

      <StatCard icon="wallet" label="Funded &amp; trading"
        foot={<span><b className="num" style={{ color: "var(--ll-neon)" }}>{conv}%</b> conversion</span>}>
        <div className="conv-row">
          <span className="stat-num num">{s.funded}<span className="stat-of"> / {s.signups}</span></span>
          <Donut pct={conv} />
        </div>
      </StatCard>

      <StatCard icon="flag" label="First 100 Traders"
        foot={<span><b className="num">{Math.max(0, 100 - s.funded)}</b> traders to goal</span>}>
        <div className="fh">
          <span className="stat-num num">{s.funded}<span className="stat-of"> / 100</span></span>
          <div className="bar"><div className="bar-fill" style={{ width: ftPct + "%" }} /></div>
        </div>
      </StatCard>
    </section>
  );
}

window.Summary = Summary;
