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

  function BriefOutlineEditor(props) {
    const outline = props.outline || {};
    const sections = outline.sections || [];
    if (!sections.length) return <div className="free-seo-empty">No outline sections generated.</div>;
    return <div className="free-seo-outline-list">
      {sections.map((section) => <article key={section.id} className="free-seo-outline-section">
        <div className="free-seo-card-header"><div><p className="eyebrow">H{section.level || 2} · {section.recommendedWordCount || 0} words</p><h4>{section.title}</h4></div></div>
        <p>{section.purpose}</p>
        {(section.questionsToAnswer || []).length > 0 && <div><strong>Questions to answer</strong><ul>{section.questionsToAnswer.map((question, index) => <li key={index}>{question}</li>)}</ul></div>}
        {(section.requiredEntities || []).length > 0 && <p className="free-seo-muted">Required entities: {section.requiredEntities.join(', ')}</p>}
      </article>)}
    </div>;
  }

  global.FreeSeoBriefOutlineEditor = BriefOutlineEditor;
})(window);