window.AdCard = function AdCard({ ad, selected, onToggle, onExpand, minimal }) {
  const p = PLATFORMS[ad.platform] || PLATFORMS.foreplay;
  const hasTranscript = ad.transcript && ad.transcript.length > 0;
  const hasVideo = !!ad.creativeUrl;
  const showVideoThumb = hasVideo && !ad.thumbnailUrl;
  const score = ad.score;
  const scoreText = (typeof score === 'number')
    ? (score > 10 ? Math.round(score) : score.toFixed(1))
    : null;
  const metricChips = RESILIA_ADAPT.metricChips(ad);

  const openExpand = (e) => { e.stopPropagation(); onExpand(ad); };

  return (
    <div className={`ad ${selected ? 'sel' : ''} ${minimal ? 'minimal' : ''}`} onClick={onToggle}>
      <div className="ad-thumb" style={{ background: ad.thumb }}>
        {showVideoThumb && (
          <video
            className="ad-thumb-video"
            src={ad.creativeUrl}
            muted
            playsInline
            preload="metadata"
            onLoadedMetadata={(e) => {
              try { e.currentTarget.currentTime = 0.15; } catch { /* preview seek can fail on some streams */ }
            }}
            onError={(e) => { e.currentTarget.style.display = 'none'; }}
          />
        )}
        <div className={`ad-cbx ${selected ? 'on' : ''}`} onClick={(e) => { e.stopPropagation(); onToggle(); }}>
          {selected && <Icon name="check" size={10} />}
        </div>
        <span className="ad-plat" style={{ background: p.bg, color: p.color }}>
          <span className="ad-plat-dot" style={{ background: p.color }} />
          {p.label}
        </span>
        <button
          className="ad-play"
          onClick={openExpand}
          title={hasVideo ? 'Play in drawer' : 'Open details'}
          style={{ border: 'none', cursor: 'pointer' }}
        >
          <Icon name="play" size={14} />
        </button>
        {ad.duration && <span className="ad-duration">{ad.duration}</span>}
        <button
          className="ad-expand"
          onClick={openExpand}
          title="Open details + transcript"
        >
          <Icon name="expand" size={12} />
        </button>
      </div>
      {!minimal && (
        <div className="ad-body">
          <div className="ad-brand-row">
            <span className="ad-brand">{ad.brand}</span>
            {hasTranscript && (
              <span className="ad-has-transcript" title="Transcript available">
                <Icon name="caption" size={11} />
              </span>
            )}
          </div>
          {ad.directionLabel && (
            <div className="ad-direction" title={`Direction: ${ad.directionLabel}`}>
              <Icon name="target" size={10} />
              <span>{ad.directionLabel}</span>
            </div>
          )}
          <div className="ad-copy">{ad.copy}</div>
          <div className="ad-meta">
            {scoreText !== null && (
              <span className="ad-score" title="Evaluator score (0–10)">
                <Icon name="trend" size={10} />
                {scoreText}
              </span>
            )}
            {metricChips.map(({ label, value, title, className }) => (
              <span key={label} className={`ad-metric-chip ${className}`.trim()} title={title}>
                <span className="ad-metric-label">{label}</span>
                {value}
              </span>
            ))}
            {ad.daysRunning ? <span>{ad.daysRunning}d running</span> : null}
          </div>
        </div>
      )}
      {minimal && (
        <div className="ad-body ad-body-min">
          <div className="ad-brand">{ad.brand}</div>
          {scoreText !== null && (
            <span className="ad-score"><Icon name="trend" size={10} />{scoreText}</span>
          )}
        </div>
      )}
    </div>
  );
};