// Empty-state card — used by category pages for the 21 non-enriched
// categories. Yellow "cataloguing in progress" chip + WhatsApp CTA.

(function () {
  window.EmptyState = function EmptyState({ categoryName }) {
    const text = categoryName
      ? `Looking for ${categoryName} — please send me the current SKU list.`
      : 'Looking for product info — please send me the current SKU list.';
    return (
      <section className="empty-state" aria-live="polite">
        <div className="empty-state-chip">
          <span className="empty-state-dot" />
          cataloguing in progress
        </div>
        <h2 className="empty-state-h">
          We're enriching this catalogue.
        </h2>
        <p className="empty-state-body">
          {categoryName ? `${categoryName} listings ` : 'Detailed listings '}
          aren't live yet — but we stock them today. Send us a quick
          WhatsApp and we'll reply with the current SKU list as a PDF,
          usually within the hour during business hours.
        </p>
        <window.WhatsAppButton variant="primary" text={text} label="WhatsApp us for the SKU list" />
      </section>
    );
  };
})();