// SECTION — USED PRODUCTS (brand ticker)
(function injectTickerKeyframes() {
  var existing = document.getElementById("bm-ticker-css");
  if (existing) existing.remove();
  const style = document.createElement("style");
  style.id = "bm-ticker-css";
  style.textContent = `
    @keyframes bmTicker {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    @keyframes bmTickerMobile {
      from { transform: translateX(0); }
      to   { transform: translateX(-25%); }
    }
    @media (prefers-reduced-motion: reduce) {
      .bm-ticker-track { animation: none !important; }
    }
  `;
  document.head.appendChild(style);
})();

const BRAND_LOGOS = [
  { name: "Davines",  src: "uploads/DAVINES%20W.png" },
  { name: "Oribe",    src: "uploads/ORIBE%20W.png"   },
  { name: "Redken",   src: "uploads/REDKEN%20W.png"  },
  { name: "Kerasilk", src: "uploads/kera%20w.png"    },
  { name: "Noir",     src: "uploads/noir%20w.png"    },
];

const sb = {
  wrap: {
    background: "#061A2E",
    padding: "80px 0",
    overflow: "hidden",
  },
  track: {
    display: "flex",
    alignItems: "center",
    width: "max-content",
    animation: "bmTicker 8s linear infinite",
    willChange: "transform",
  },
  item: {
    display: "flex",
    alignItems: "center",
    flexShrink: 0,
    padding: "0 60px",
  },
  logo: {
    height: 54,
    width: "auto",
    display: "block",
    filter: "brightness(0) invert(1)",
    opacity: 0.88,
    userSelect: "none",
    pointerEvents: "none",
  },
};

function BrandsSection() {
  const mobile = useMobile();
  // 4 copies on mobile (smaller logos = fewer visible), 2 on desktop
  const copies = mobile ? 4 : 2;
  const items = Array.from({ length: copies }, () => BRAND_LOGOS).flat();
  return (
    <section aria-label="Gebruikte merken" style={sb.wrap}>
      <div style={{ width: "100%", overflow: "hidden" }}>
        <div className="bm-ticker-track" style={{
          ...sb.track,
          animationName: mobile ? "bmTickerMobile" : "bmTicker",
          animationDuration: mobile ? "12s" : "8s",
        }}>
          {items.map(function(brand, i) {
            return (
              <div key={i} style={{ ...sb.item, padding: mobile ? "0 32px" : "0 60px" }}>
                <img
                  src={brand.src}
                  alt={brand.name}
                  style={{ ...sb.logo, height: mobile ? 32 : 54 }}
                />
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}
window.BrandsSection = BrandsSection;