"use client";

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

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

  return (
    <SectionContainer paddingY="lg" className="border-t border-aiero-card-border bg-aiero-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,
          }}
        >
          Tinker with a Neural Network right here in your browser. Don’t worry, you can’t break it. We Promise.
        </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/aiero/logo-dark.png";
                }}
              />
            </div>
          ))}
        </div>
      </PageContainer>
    </SectionContainer>
  );
}