function CTABand() {
  // Playful collage — varying sizes, vertical jitter, slight rotations.
  // Order + params tuned for horizontal rhythm (tall–short–tall–short…).
  const photos = [
    { src: 'assets/photos/people-01.jpg', h: 150, mt: 28, rot: -2.5 },
    { src: 'assets/photos/people-09.jpg', h: 190, mt: 0,  rot:  1.8 },
    { src: 'assets/photos/people-02.jpg', h: 140, mt: 44, rot: -1.2 },
    { src: 'assets/photos/people-06.jpg', h: 200, mt: 10, rot:  2.5 },
    { src: 'assets/photos/people-04.jpg', h: 160, mt: 36, rot: -3.0 },
    { src: 'assets/photos/people-07.jpg', h: 180, mt: 6,  rot:  1.0 },
    { src: 'assets/photos/people-08.jpg', h: 145, mt: 48, rot: -1.5 },
    { src: 'assets/photos/people-03.jpg', h: 200, mt: 14, rot:  2.2 },
    { src: 'assets/photos/people-05.jpg', h: 155, mt: 32, rot: -2.0 },
  ];
  return (
    <section className="section-pad" style={{ background: '#000', color: '#fff', textAlign: 'center', overflow: 'hidden' }}>
      <style>{`
        .eivi-ctaband-collage {
          display: flex;
          gap: clamp(8px, 1.2vw, 14px);
          justify-content: center;
          align-items: flex-start;
          flex-wrap: nowrap;
          overflow-x: auto;
          overflow-y: visible;
          padding: 32px clamp(12px, 3vw, 24px) 40px;
          margin: 0 calc(-1 * clamp(20px, 5vw, 64px)) clamp(40px, 6vw, 64px);
          scrollbar-width: none;
          -ms-overflow-style: none;
        }
        .eivi-ctaband-collage::-webkit-scrollbar { display: none; }
        .eivi-ctaband-collage img {
          flex-shrink: 0;
          border-radius: clamp(10px, 1.2vw, 14px);
          object-fit: cover;
          display: block;
          box-shadow: 0 6px 18px rgba(0,0,0,0.25);
          transition: transform 260ms ease;
        }
        .eivi-ctaband-collage img:hover {
          transform: translateY(-4px) rotate(0deg) scale(1.03);
          z-index: 2;
        }
        /* On mobile, scale the collage down visually so it fits nicely */
        @media (max-width: 720px) {
          .eivi-ctaband-collage { gap: 6px; padding-top: 20px; padding-bottom: 28px; }
        }
      `}</style>
      <div className="eivi-ctaband-collage">
        {photos.map((p, i) => (
          <img
            key={p.src}
            src={p.src}
            alt=""
            style={{
              height: `clamp(${Math.round(p.h * 0.55)}px, ${p.h / 10}vw, ${p.h}px)`,
              aspectRatio: '4 / 5',
              marginTop: `clamp(0px, ${p.mt / 20}vw, ${p.mt}px)`,
              transform: `rotate(${p.rot}deg)`,
            }}
          />
        ))}
      </div>
      <div style={{ maxWidth: 1440, margin: '0 auto' }}>
        <h2 className="t-h2" style={{ margin: 0, color: '#fff' }}>
          Eivi is for people who want to truly understand their metabolism, weight and health. Are you ready?
        </h2>
        <div style={{ marginTop: 'clamp(28px, 3.5vw, 40px)' }}>
          <a href="/join.html" className="btn btn-secondary btn-lg">Join the waitlist</a>
        </div>
      </div>
    </section>
  );
}
window.CTABand = CTABand;