import Image from "next/image";

import BBCLogo from "@/public/participant/social-proof/bbc.webp";
import BHFoundationLogo from "@/public/participant/social-proof/british-heart-foundation.webp";
import BTGroupLogo from "@/public/participant/social-proof/bt-group.webp";
import CoOpLogo from "@/public/participant/social-proof/co-op.webp";
import NHSLogo from "@/public/participant/social-proof/nhs.webp";
import type { ParticipantHomeContent } from "@/lib/participant-home-ghost-content";

type BrandsSectionProps = { content: ParticipantHomeContent["brands"] };

function BrandsSection({ content }: BrandsSectionProps) {
  return (
    <div className="text-center lg:text-start bg-participant-light dark:bg-participant-dark flex items-center justify-center flex-col space-y-8 py-16">
      <span className="text-black dark:text-white font-noto xxl:text-lg xxxl:text-xl">
        {content.intro}
      </span>
      <div className="grid grid-cols-1 sm:grid-cols-5 gap-8 grayscale dark:invert">
        <Image
          alt="BBC logo with bold black letters B, B, and C on white squares."
          className="object-cover w-28 xxl:w-32 xxxl:w-36 m-auto"
          loading="eager"
          src={BBCLogo}
        />
        <Image
          alt="British Heart Foundation logo with a red heart and white heartbeat line."
          className="object-cover w-28 xxl:w-32 xxxl:w-36 m-auto"
          loading="eager"
          src={BHFoundationLogo}
        />
        <Image
          alt="Co-Operative logo with a blue clover leaf design."
          className="object-cover w-16 xxl:w-20 xxxl:w-24 m-auto"
          loading="eager"
          src={CoOpLogo}
        />
        <Image
          alt="BT Group logo with rounded blue BT letters in a circle."
          className="object-cover w-28 xxl:w-32 xxxl:w-36 m-auto"
          loading="eager"
          src={BTGroupLogo}
        />
        <Image
          alt="NHS logo with bold white letters on a blue background."
          className="object-cover w-28 xxl:w-32 xxxl:w-36 m-auto"
          loading="eager"
          src={NHSLogo}
        />
      </div>
    </div>
  );
}

export default BrandsSection;