/* Campaña — full-bleed marquee of real key-arts */
function Campana() {
  const arts = ["p06.jpg", "p04.jpg", "p01.jpg", "p07.jpg", "p05.jpg", "p02.jpg", "p03.jpg"];
  const row = [...arts, ...arts];
  return (
    <section id="campana" style={{ background: LA.black, padding: "80px 0", overflow: "hidden" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto", padding: "0 28px", marginBottom: 40, display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 20, flexWrap: "wrap" }}>
        <div>
          <div className="la-kicker">Marca &amp; contenido</div>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "clamp(30px,4vw,46px)", letterSpacing: "-0.01em", color: "#fff", margin: "6px 0 0" }}>
            Así se vive LA 100
          </h2>
        </div>
        <p style={{ color: "rgba(255,255,255,.66)", fontSize: 16, maxWidth: 420, margin: 0 }}>
          Una identidad visual fuerte, moderna y reconocible. Producción de nivel nacional al servicio de tu marca.
        </p>
      </div>
      <div style={{ display: "flex", gap: 20, width: "max-content", animation: "marquee 46s linear infinite" }}>
        {row.map((a, i) => (
          <div key={i} style={{ width: 300, height: 300, borderRadius: 20, overflow: "hidden", flex: "0 0 auto", boxShadow: "0 16px 40px rgba(0,0,0,.4)" }}>
            <img src={"./assets/promos/" + a} alt="Campaña LA 100" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
          </div>
        ))}
      </div>
    </section>
  );
}
window.Campana = Campana;