// MenuSection.jsx — script label + brush banner + grid
const MenuSection = ({ scriptLabel, title, note, items, onItemClick }) => {
  return (
    <section className="psd-menu-section">
      <header className="psd-menu-header">
        <div className="psd-script psd-menu-script">{scriptLabel}</div>
        <div className="psd-menu-banner">
          <span aria-hidden="true">★</span>
          <span>{title}</span>
          <span aria-hidden="true">★</span>
        </div>
        {note && <p className="psd-menu-note">{note}</p>}
      </header>
      <div className="psd-menu-grid">
        {items.map((item, i) => <MenuItem key={i} {...item} onItemClick={onItemClick} />)}
      </div>
    </section>
  );
};

window.MenuSection = MenuSection;