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

  function BriefChecklist(props) {
    const items = props.items || [];
    if (!items.length) return <div className="free-seo-empty">No checklist items generated.</div>;
    return <div className="free-seo-checklist">
      {items.map((item) => <label key={item.id} className={`free-seo-check-item priority-${item.priority || 'medium'}`}>
        <input type="checkbox" checked={item.status === 'done'} readOnly />
        <span><strong>{item.title}</strong><small>{item.priority || 'medium'} · {item.category || 'content'}</small><p>{item.detail}</p></span>
      </label>)}
    </div>;
  }

  global.FreeSeoBriefChecklist = BriefChecklist;
})(window);