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

  function RecipeTemplateGallery({ templates, onSelect }) {
    const items = templates || [];
    return <section className="free-seo-card">
      <h2>Default recipe templates</h2>
      <p className="muted">Start from a reusable delivery workflow, then edit steps for the client.</p>
      {!items.length ? <p className="muted">No templates loaded.</p> : <div className="grid three">{items.map((template) => <article className="mini-card" key={template.id}>
        <h3>{template.name}</h3>
        <p>{template.description}</p>
        <p className="muted">{(template.steps || []).length} steps · {template.category}</p>
        <button className="button" onClick={() => onSelect && onSelect(template)}>Use template</button>
      </article>)}</div>}
    </section>;
  }

  global.RecipeTemplateGallery = RecipeTemplateGallery;
})(window);