function AEOVisibilityPanel({ client }) {
  const { data, loading, error } = useApi(`/api/clients/${client.id}/aeo-visibility?days=30`, [client.id]);
  if (loading) return <div className="loading-state">Loading AI visibility...</div>;
  if (error) return <div className="error-state">Failed to load AI visibility: {error}</div>;
  const m = (data && data.metrics) || {};
  const vis = m.visibility || {}; const sov = m.share_of_voice || { competitors: {} };
  const cit = m.citations || { channel_mix: {}, top_domains: [] };
  return (
    <>
      <div className="section-head"><span className="label">AI visibility (last 30 days)</span></div>
      <div className="kpi-grid">
        <div className="kpi"><span className="label">Brand visibility</span><span className="value">{vis.blended ?? 0}%</span></div>
        <div className="kpi"><span className="label">Share of voice</span><span className="value">{sov.brand_pct ?? 0}%</span></div>
        <div className="kpi"><span className="label">Brand in citations</span><span className="value">{cit.brand_mention_rate_in_citations ?? 0}%</span></div>
      </div>
      {Object.keys(vis).filter((k) => k !== 'blended').length > 0 && (
        <>
          <div className="section-head"><span className="label">Visibility by engine</span></div>
          <table className="table"><tbody>
            {Object.entries(vis).filter(([k]) => k !== 'blended').map(([eng, p]) => (
              <tr key={eng}><td style={{ textTransform: 'capitalize' }}>{eng}</td><td>{p}%</td></tr>
            ))}
          </tbody></table>
        </>
      )}
      <div className="section-head"><span className="label">Share of voice vs competitors</span></div>
      <table className="table"><tbody>
        <tr><td>{client.name || 'Brand'}</td><td>{sov.brand_pct ?? 0}%</td></tr>
        {Object.entries(sov.competitors).map(([n, p]) => <tr key={n}><td>{n}</td><td>{p}%</td></tr>)}
      </tbody></table>
      <div className="section-head"><span className="label">Top cited domains</span></div>
      <table className="table"><tbody>
        {(cit.top_domains || []).map((d) => <tr key={d.domain}><td>{d.domain}</td><td>{d.count}</td></tr>)}
      </tbody></table>
    </>
  );
}
window.AEOVisibilityPanel = AEOVisibilityPanel;