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

  function BriefGapPanel(props) {
    const gaps = props.gaps || [];
    if (!gaps.length) return <div className="free-seo-success">No major content gaps detected.</div>;
    return <div className="free-seo-gap-list">
      {gaps.map((gap) => <article key={gap.id} className={`free-seo-gap severity-${gap.severity || 'medium'}`}>
        <strong>{gap.message}</strong>
        <small>{gap.severity || 'medium'} · {gap.type}</small>
        <p>{gap.recommendation}</p>
      </article>)}
    </div>;
  }

  global.FreeSeoBriefGapPanel = BriefGapPanel;
})(window);