// mobile-ui.jsx — padrões reutilizáveis para mobile-first sem build step

function MobileSectionCards({ items, className = '' }) {
  return (
    <div className={`mobile-section-cards ${className}`.trim()}>
      {items.map((item, idx) => (
        <div key={item.key ?? idx} className="mobile-section-card">
          {item.content}
        </div>
      ))}
    </div>
  );
}

function MobileStackActions({ children, className = '' }) {
  return <div className={`mobile-stack-actions ${className}`.trim()}>{children}</div>;
}

function MobileDataList({ rows, renderRow, empty }) {
  if (!rows.length) return empty ?? null;
  return <div className="mobile-data-list">{rows.map(renderRow)}</div>;
}

Object.assign(window, { MobileSectionCards, MobileStackActions, MobileDataList });