(function registerFreeSeoEvidenceValidationSummary(global) {
  const React = global.React;
  if (!React) return;

  function pct(value) { return value === null || value === undefined ? 'n/a' : `${Math.round(Number(value) * 1000) / 10}%`; }

  function EvidenceValidationSummary(props) {
    const record = props.record || {};
    const validation = record.validation || {};
    const summary = record.summary || {};
    const totals = summary.totals || {};
    return <section className="free-seo-card">
      <div className="free-seo-card-header"><div><p className="eyebrow">{record.provider} · {record.status}</p><h3>Evidence summary</h3><p>{record.normalizedRowCount || 0} normalized rows · {record.invalidRowCount || 0} invalid rows</p></div></div>
      <div className="free-seo-metric-grid">
        <div><strong>{totals.clicks || 0}</strong><span>Clicks</span></div>
        <div><strong>{totals.impressions || 0}</strong><span>Impressions</span></div>
        <div><strong>{pct(totals.ctr)}</strong><span>CTR</span></div>
        <div><strong>{totals.sessions || 0}</strong><span>Sessions</span></div>
        <div><strong>{totals.conversions || 0}</strong><span>Conversions</span></div>
      </div>
      {(validation.errors || []).length > 0 && <div className="free-seo-error"><strong>Errors</strong><ul>{validation.errors.slice(0, 10).map((item, index) => <li key={index}>{item.message || item.code}</li>)}</ul></div>}
      {(validation.warnings || []).length > 0 && <div className="free-seo-warning"><strong>Warnings</strong><ul>{validation.warnings.slice(0, 12).map((item, index) => <li key={index}>{item.message || item.code}</li>)}</ul></div>}
    </section>;
  }

  global.FreeSeoEvidenceValidationSummary = EvidenceValidationSummary;
})(window);