// demo-verdict.jsx -- ClipGrid demo: the codec-verdict card.
//
// Renders the result of window.ClipGridCompat.decodeVerdict as a colored chip
// that maps to the supported state (yes / maybe / unknown / sample).
//
// Extracted from the old monolithic demo module so each demo file reads in one
// pass. Loaded as a Babel <script> BEFORE the browser-mode module, which
// consumes it via window.ClipGridVerdictCard.
(function () {

function VerdictCard({ verdict, inspection }) {
  if (!verdict) return null;
  const colorFor = {
    yes:     "var(--accent-deep)",
    maybe:   "#b58320",
    unknown: "#c0392b",
    sample:  "var(--ink-mute)",
  }[verdict.supported] || "var(--ink-mute)";
  const labelFor = {
    yes:     "ClipGrid can decode this",
    maybe:   "Probably decodable",
    unknown: "Verdict unclear",
    sample:  "Sample preview",
  }[verdict.supported] || "Unknown";

  return (
    <div style={{
      border: "1px solid var(--rule)",
      borderLeft: "3px solid " + colorFor,
      borderRadius: 10,
      padding: "14px 16px",
      background: "var(--bg-card)",
    }}>
      <div className="mono" style={{ fontSize: 10.5, color: colorFor, letterSpacing: ".14em", marginBottom: 6 }}>
        ● {labelFor.toUpperCase()}
      </div>
      <div className="serif" style={{ fontSize: 22, lineHeight: 1.15 }}>
        {verdict.label}
        {verdict.family && verdict.family !== verdict.label && (
          <span className="mono" style={{ fontSize: 12, color: "var(--ink-mute)", marginLeft: 8 }}>· {verdict.family}</span>
        )}
      </div>
      <div className="row gap-3" style={{ marginTop: 8, flexWrap: "wrap" }}>
        {inspection && inspection.container && (
          <span className="mono" style={{ fontSize: 11, padding: "4px 8px", border: "1px solid var(--rule)", borderRadius: 6, color: "var(--ink-soft)" }}>
            {inspection.container}
          </span>
        )}
        {verdict.decoder && (
          <span className="mono" style={{ fontSize: 11, padding: "4px 8px", border: "1px solid var(--rule)", borderRadius: 6, color: "var(--ink-soft)" }}>
            Decoder: {verdict.decoder}
          </span>
        )}
      </div>
      {verdict.notes && verdict.notes.length > 0 && (
        <div className="muted" style={{ fontSize: 12.5, marginTop: 10, lineHeight: 1.45 }}>
          {verdict.notes.map((n, i) => <div key={i}>{n}</div>)}
        </div>
      )}
    </div>
  );
}

  window.ClipGridVerdictCard = VerdictCard;
})();