/* eslint-disable */
/* CategoryRail — horizontal pill rail of jewelry categories with counts */
const CATS = [
  { label: "Necklaces", img: "assets/hero-necklaces.jpg",       href: "collection.html?handle=necklaces" },
  { label: "Bracelets", img: "assets/hero-main.jpg",            href: "collection.html?handle=bracelets" },
  { label: "Rings",     img: "assets/product-amelia-ring.jpg",  href: "collection.html?handle=rings" },
  { label: "Earrings",  img: "assets/banner-bundles.jpg",       href: "collection.html?handle=earrings" },
  { label: "Bundles",   img: "assets/banner-bundles.jpg",       href: "collection.html?handle=bundles" },
];

function CategoryRail() {
  return (
    <section className="catrail">
      <div className="catrail-head">
        <span className="eyebrow">Shop by category</span>
        <a className="catrail-all" href="collection.html?handle=shop-all">View all categories →</a>
      </div>
      <div className="catrail-scroll">
        {CATS.map(c => (
          <a key={c.label} className="cat-pill" href={c.href}>
            <div className="cat-pill-img" style={{backgroundImage:`url(${c.img})`}}></div>
            <div className="cat-pill-meta">
              <span className="cat-pill-label">{c.label}</span>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}
window.CategoryRail = CategoryRail;