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

  function MissingFactsPanel({ missingFacts = [], actions = [] }) {
    return <div className="free-seo-grid-2">
      <section className="free-seo-card compact">
        <h4>Missing facts</h4>
        {missingFacts.length ? <ul>{missingFacts.map((fact, index) => <li key={fact.code || fact.type || index}><strong>{fact.label || String(fact.type || fact.code || 'Missing fact').replace(/_/g, ' ')}</strong><br /><span>{fact.detail || fact.message}</span></li>)}</ul> : <p>No major missing facts detected.</p>}
      </section>
      <section className="free-seo-card compact">
        <h4>Recommended actions</h4>
        {actions.length ? <ol>{actions.map((action, index) => <li key={action.id || index}><strong>{action.title}</strong><br /><span>{action.detail || action.implementation || action.rationale}</span></li>)}</ol> : <p>No actions generated.</p>}
      </section>
    </div>;
  }

  global.FreeSeoMissingFactsPanel = MissingFactsPanel;
})(window);
