const LOGOS = [
  { src: '/images/trusted/512px-Subway_icon.svg.webp',                        alt: 'Subway',                     dark: false },
  { src: '/images/trusted/Yale_press_logo.webp',                              alt: 'Yale',                       dark: false },
  { src: '/images/trusted/256px-Quinnipiac_University_logo_(2017).svg.webp',  alt: 'Quinnipiac University',      dark: false },
  { src: '/images/trusted/512px-University_of_New_Haven_logo.webp',           alt: 'University of New Haven',    dark: false },
  { src: '/images/trusted/Planet_Fitness_(2).webp',                           alt: 'Planet Fitness',             dark: false },
  { src: '/images/trusted/Mohegan-Sun-Logo.webp',                             alt: 'Mohegan Sun',                dark: false },
  { src: '/images/trusted/Post_university_of_conn_logo.webp',                 alt: 'Post University',            dark: false },
  { src: '/images/trusted/logo-full-color.webp',                              alt: 'Edge Fitness',               dark: false },
  { src: '/images/trusted/lincoln-culinary.webp',                             alt: 'Lincoln Culinary Institute', dark: false },
  { src: '/images/trusted/amazon.webp',                                       alt: 'Amazon',                     dark: false },
  { src: '/images/trusted/woodwinds-2024-logo-white.webp',                    alt: 'The Woodwinds',              dark: true  },
  { src: '/images/trusted/sallys-apizza.webp',                                alt: "Sally's Apizza",             dark: false },
]

export default function TrustedBrands() {
  return (
    <section className="section trusted-section">
      <div className="container">
        <div className="has-text-centered mb-5">
          <h2 className="is-size-3">Trusted by</h2>
          <p className="is-size-6 has-text-grey">
            Brands and organizations we have had the joy of celebrating with.
          </p>
        </div>
        <div className="trusted-logos">
          {LOGOS.map((logo) => (
            <figure
              key={logo.alt}
              className={`trusted-logo ${logo.dark ? 'trusted-logo--dark' : ''}`}
            >
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img src={logo.src} alt={`${logo.alt} logo`} loading="lazy" />
            </figure>
          ))}
        </div>
      </div>
    </section>
  )
}