// Operação Brasil — faixa de logos das lojas (entre Hero e Oferta)
const STORE_LOGOS = [
  {
    name: "Big Boar",
    src: "../../assets/partners/big-boar-clean.png",
    maxWidth: "280px",
    maxHeight: "76px",
    brightness: 1,
  },
  {
    name: "CAC Armas",
    src: "../../assets/partners/cac-armas.png",
    maxWidth: "142px",
    maxHeight: "74px",
    brightness: 1,
  },
  {
    name: "Canil do Caçador",
    src: "../../assets/partners/canil-do-cacador-clean.png",
    maxWidth: "220px",
    maxHeight: "82px",
    brightness: 1,
  },
];

function LogoBand() {
  return (
    <section aria-label="Lojas parceiras" style={{
      padding: "clamp(28px, 4vw, 44px) clamp(20px, 4vw, 62px)",
      background: "var(--carbon)", borderTop: "1px solid var(--border-card)", borderBottom: "1px solid var(--border-card)",
    }}>
      <div style={{ width: "min(100%, 1120px)", margin: "0 auto" }}>
        <span style={{
          display: "block", textAlign: "center", fontFamily: "var(--font-mono)", fontSize: "0.68rem",
          fontWeight: 800, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--text-muted)", marginBottom: "20px",
        }}>Lojas parceiras da operação</span>
        <div className="partner-logo-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "clamp(24px, 5vw, 64px)" }}>
          {STORE_LOGOS.map((store, index) => (
            <div key={store.name} className="partner-logo-item" style={{
              display: "flex", alignItems: "center", justifyContent: "center", minHeight: "108px",
              minWidth: 0, padding: "12px 8px", animationDelay: `${index * 90}ms`,
            }}>
              <img
                src={store.src}
                alt={store.name}
                className="partner-logo-image"
                style={{
                  display: "block", width: "100%", height: "auto", objectFit: "contain",
                  maxWidth: store.maxWidth, maxHeight: store.maxHeight,
                  "--logo-brightness": store.brightness,
                }}
              />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.LogoBand = LogoBand;