function FreeSeoCompetitorOpportunitiesView(){
  const [providers,setProviders]=React.useState([]); const [run,setRun]=React.useState(null); const [runs,setRuns]=React.useState([]); const [error,setError]=React.useState('');
  const api=window.JS_API && window.JS_API.freeSeo && window.JS_API.freeSeo.competitorOpportunities;
  React.useEffect(()=>{ if(api){ api.providers().then(x=>setProviders(x.providers||[])); api.listRuns().then(x=>setRuns(x.runs||[])).catch(()=>{}); } },[]);
  const create=(payload)=>api.createRun(payload).then(x=>{setRun(x.run); setRuns([x.run].concat(runs));}).catch(e=>setError(e.message));
  if(!api) return <div className="card">Competitor Opportunities client not loaded.</div>;
  return <section className="free-seo-lab competitor-opportunities"><h2>Advanced Competitor Opportunity Miner</h2>{error?<p className="error">{error}</p>:null}<OptionalScraperAdapterPanel providers={providers}/><CompetitorOpportunityRunForm onCreate={create}/><CompetitorOpportunityScoreCards run={run}/><CompetitorSignalTable competitors={run&&run.competitors}/><CompetitorOpportunityMatrix opportunities={run&&run.opportunities}/><CompetitorOpportunityExportPanel run={run}/><div className="card"><h3>Recent runs</h3><ul>{runs.map(r=><li key={r.id}><button onClick={()=>api.getRun(r.id).then(x=>setRun(x.run))}>{r.targetDomain} - {r.summary&&r.summary.grade}</button></li>)}</ul></div></section>;
}
window.FreeSeoCompetitorOpportunitiesView=FreeSeoCompetitorOpportunitiesView;