(function attachLocalSignalAuditPanel(global) {
  const React = global.React;
  if (!React) return;
  function pct(value) { return `${Math.round((Number(value) || 0) * 100)}%`; }
  function LocalSignalAuditPanel({ run }) {
    const audit = run && run.localSignalAudit || {};
    const nap = run && run.napAudit || {};
    return <section className="free-seo-card">
      <h2>Local Signal Audit</h2>
      <div className="metric-grid">
        <div className="metric"><strong>{audit.pageCount || 0}</strong><span>Pages</span></div>
        <div className="metric"><strong>{audit.schemaPages || 0}</strong><span>Schema pages</span></div>
        <div className="metric"><strong>{audit.reviewPages || 0}</strong><span>Trust pages</span></div>
        <div className="metric"><strong>{pct(nap.score)}</strong><span>NAP</span></div>
      </div>
      <h3>Services</h3>
      <div className="pill-list">{(audit.serviceCoverage || []).map((item) => <span className={item.covered ? 'pill good' : 'pill warn'} key={item.serviceName}>{item.serviceName}: {item.covered ? 'covered' : 'missing'}</span>)}</div>
      <h3>Locations</h3>
      <div className="pill-list">{(audit.locationCoverage || []).map((item) => <span className={item.covered ? 'pill good' : 'pill warn'} key={item.locationName}>{item.locationName}: {item.covered ? 'covered' : 'missing'}</span>)}</div>
      {(nap.issues || []).length ? <><h3>NAP issues</h3><ul>{nap.issues.map((issue) => <li key={issue.code}>{issue.message}</li>)}</ul></> : null}
    </section>;
  }
  global.LocalSignalAuditPanel = LocalSignalAuditPanel;
})(window);