function Awards({ bare }) {
  const { Reveal } = window.JMK;
  const awards = [
    { src: "assets/awards/laurel-winner-90sec.png", label: "Winner — 90 Second Short Film, 2017" },
    { src: "assets/awards/laurel-music-shorts-1.png", label: "Official Selection — Music Shorts Film Festival, 2019" },
    { src: "assets/awards/laurel-first-time-filmmaker.png", label: "Official Selection — First-Time Filmmaker Sessions, 2019" },
    { src: "assets/awards/cert-excellence-2021.png", label: "Certificate of Excellence, 2021" },
  ];
  // Triple the set, then double the strip, so the -50% loop is perfectly seamless.
  const strip = [...awards, ...awards, ...awards];
  const track = [...strip, ...strip];

  return (
    <section id="our-awards" className="jmk-stage" style={{ background: "#ffffff", padding: "clamp(80px,12vw,120px) 0", overflow: "hidden" }}>
      {!bare && (
      <Reveal>
        <div style={{ padding: "0 clamp(20px,5vw,64px)", marginBottom: 12 }}>
          <h2 style={{ fontFamily: "var(--font-editorial)", fontSize: "clamp(32px,4.5vw,56px)", margin: "0 0 10px", color: "var(--ink-900)" }}>Our Awards</h2>
          <p style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-base)", color: "var(--ink-500)", margin: 0 }}>
            We'd rest on our laurels &mdash; but they won't sit still.
          </p>
        </div>
      </Reveal>
      )}

      <div
        className="awards-marquee"
        style={{
          marginTop: "clamp(32px,5vw,56px)",
          WebkitMaskImage: "linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)",
          maskImage: "linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)",
        }}
      >
        <div className="awards-marquee-track" style={{ display: "flex", alignItems: "center", gap: "clamp(40px,7vw,96px)", width: "max-content", animation: "awardsMarquee 42s linear infinite" }}>
          {track.map((a, i) => (
            <img
              key={i}
              src={a.src}
              alt={a.label}
              title={a.label}
              style={{ height: "clamp(120px,15vw,190px)", width: "auto", objectFit: "contain", flexShrink: 0 }}
            />
          ))}
        </div>
      </div>
    </section>
  );
}
window.JMK = window.JMK || {};
window.JMK.Awards = Awards;