"use client";

import { PageContainer } from "@/components/shared/PageContainer";
import { SectionContainer } from "@/components/shared/SectionContainer";

export function PartnerLogosSection() {
  const logos = [
    "/images/tenext/partners-1.png",
    "/images/tenext/partners-2.png",
    "/images/tenext/partners-1.png",
    "/images/tenext/partners-2.png",
    "/images/tenext/partners-1.png",
    "/images/tenext/partners-2.png",
  ];

  return (
    <SectionContainer
      paddingY="lg"
      className="border-t border-tenext-card-border bg-tenext-dark"
    >
      <PageContainer className="flex flex-col items-center">
        <h3
          className="mb-16 max-w-[800px] text-center text-white"
          style={{
            fontFamily: "var(--font-dm-sans)",
            fontSize: "clamp(24px, 3vw, 36px)",
            fontWeight: 500,
            lineHeight: 1.2,
          }}
        >
          Our trusted collaborators in progress and success
        </h3>

        <div className="flex flex-wrap justify-center gap-8 md:gap-16 lg:gap-24 opacity-60">
          {logos.map((src, index) => (
            <div
              key={index}
              className="flex h-12 items-center justify-center grayscale transition-all hover:grayscale-0"
            >
              <img
                src={src}
                alt={`Partner ${index + 1}`}
                className="h-full w-auto object-contain"
                onError={(e) => {
                  (e.target as HTMLImageElement).src =
                    "/images/tenext/logo-dark.png";
                }}
              />
            </div>
          ))}
        </div>
      </PageContainer>
    </SectionContainer>
  );
}