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

  function SchemaOpportunityTable({ opportunities }) {
    opportunities = opportunities || [];
    if (!opportunities.length) return <div className="free-seo-card"><h3>No schema opportunities yet</h3><p>Generate a run to see detected opportunities.</p></div>;
    return <div className="free-seo-card"><h3>Schema opportunities</h3><div className="table-wrap"><table><thead><tr><th>Priority</th><th>Type</th><th>Target</th><th>Rationale</th><th>Confidence</th></tr></thead><tbody>{opportunities.map((opp) => <tr key={opp.id}><td><span className={'badge ' + (opp.priority || 'medium')}>{opp.priority}</span></td><td>{opp.schemaType}</td><td>{opp.targetPageUrl || 'Site-wide'}</td><td>{opp.rationale}{opp.caution ? <p className="muted">{opp.caution}</p> : null}</td><td>{Math.round((opp.confidence || 0) * 100)}%</td></tr>)}</tbody></table></div></div>;
  }

  global.SchemaOpportunityTable = SchemaOpportunityTable;
})(window);