// Responsive styles live in index.html, keyed off [data-bp-and-below~="…"]
// or @container queries on .r-tower. Do not add new inline ternaries on
// viewport width or `compact` — convert to a CSS class instead.

// Extracted from matrix.jsx 2026-05-14. No logic change — pure split.

function Plinth({ col, dark, t, lang }) {
  const text = dark ? "#FAF7F3" : "#393433";
  const muted = dark ? "#8A827F" : "#6B6361";
  const border = dark ? "#2A2825" : "#E2E0DF";
  const faint = dark ? "#5A5654" : "#9A9290";
  const accent = "#4866B2";
  const lime = "#EDFE38";

  const s = window.plinthStats(col);
  if (!s) return null;
  const barBg = dark ? "#1A1817" : "#F1ECE4";
  const fillColor = s.status === "open" ? accent : s.status === "closed" ? (dark ? "#5A5654" : "#9A9290") : faint;

  const urgentClose = s.daysLeft != null && s.daysLeft <= 14;
  const secondary = s.status === "closed"
    ? t.fullySub
    : s.status === "coming-soon"
      ? `$${s.targetM}M ${t.target} · ${s.commits} ${t.commits}`
      : `$${s.raisedM}M / $${s.targetM}M · ${s.commits} ${t.commits}`;

  return (
    <div className="r-plinth" style={{
      border: `1px solid ${text}`, borderTop: "none",
      background: dark ? "#0D0D0D" : "#FFFFFF",
    }}>
      {/* Progress bar */}
      <div className="r-plinth-bar" style={{ background: barBg }}>
        <div className="r-plinth-bar-fill" style={{
          width: `${Math.max(2, s.pct)}%`,
          background: fillColor,
        }}/>
      </div>
      {/* Percent + days-left */}
      <div className="r-plinth-row">
        <span className="r-plinth-pct" style={{ color: text }}>
          {s.status === "closed" ? "100%" : `${s.pct}%`}
          {s.status !== "closed" && <span className="r-plinth-pct-sub" style={{ color: muted }}> {t.raised}</span>}
        </span>
        {s.daysLeft != null && s.pct < 100 && (
          <span className="r-plinth-days" style={{ color: urgentClose ? (dark ? "#FFB48A" : "#B04C1C") : muted }}>
            {urgentClose && <span className="r-plinth-days-dot"/>}
            {t.closeIn} {s.daysLeft}{t.daysShort}
          </span>
        )}
      </div>
    </div>
  );
}