import type { SignatureBrandPartner } from "@/types/event";
import { QueueSection } from "@/components/motion/QueueSection";
import { QueueItem } from "@/components/motion/QueueItem";
import { readBrandSvg } from "@/lib/brand-svg";
import { SIGNATURE_SECTION_MIN_HEIGHT } from "./section-layout";

const brandHeadingSvg = readBrandSvg("signaturee-heading-brand.svg");

/** "Brand" — horizontally-scrollable strip of circular logo chips + sponsorship-invite heading. */
export function SignatureBrand({ partners }: { partners?: SignatureBrandPartner[] }) {
  return (
    <QueueSection as="section" className={`bg-signaturee-cream ${SIGNATURE_SECTION_MIN_HEIGHT} px-6 py-16`}>
      <div className="mx-auto w-full max-w-3xl">
        <QueueItem as="div">
          <div
            role="img"
            aria-label="Sponsored By"
            className="aspect-[345/161] h-20 sm:h-24"
            dangerouslySetInnerHTML={{ __html: brandHeadingSvg }}
          />
        </QueueItem>

        {!partners || partners.length === 0 ? (
          <p className="mt-6 text-neutral-700">Coming soon.</p>
        ) : (
          <div className="mt-6 flex items-start gap-6 overflow-x-auto px-2 pb-2">
            {partners.map((partner, i) => (
              <QueueItem
                key={partner.id}
                as="div"
                className={`flex h-24 w-24 shrink-0 items-center justify-center rounded-full bg-white p-3 text-center shadow-lg ${
                  i % 2 === 0 ? "mt-0" : "mt-10"
                }`}
              >
                {partner.logo_url ? (
                  // eslint-disable-next-line @next/next/no-img-element -- partner-provided path, not on next/image allowlist
                  <img src={partner.logo_url} alt={partner.name} className="max-h-full max-w-full object-contain" />
                ) : (
                  <span className="text-xs font-medium text-neutral-700">{partner.name}</span>
                )}
              </QueueItem>
            ))}
          </div>
        )}
      </div>
    </QueueSection>
  );
}