(function attachFindabilityScoreCards(global) {
  const React = global.React;
  if (!React) return;
  function pct(value) { return `${Math.round((Number(value) || 0) * 100)}%`; }
  function FindabilityScoreCards({ run }) {
    if (!run) return null;
    const s = run.summary || {};
    const scores = run.categoryScores || {};
    return <section className="free-seo-card">
      <h2>AI Findability Score</h2>
      <div className="metric-grid">
        <div className="metric"><strong>{s.grade || '-'}</strong><span>Grade</span></div>
        <div className="metric"><strong>{pct(s.overallScore)}</strong><span>Overall</span></div>
        <div className="metric"><strong>{s.answerableCount || 0}/{s.testCount || 0}</strong><span>Answerable</span></div>
        <div className="metric"><strong>{s.citationReadyCount || 0}</strong><span>Citation-ready</span></div>
      </div>
      <div className="score-list">{Object.entries(scores).map(([key, value]) => <div className="score-row" key={key}><span>{key}</span><progress value={Number(value) || 0} max="1" /><strong>{pct(value)}</strong></div>)}</div>
    </section>;
  }
  global.FindabilityScoreCards = FindabilityScoreCards;
})(window);