import { PageContainer } from "@/components/shared/PageContainer";
import { SectionContainer } from "@/components/shared/SectionContainer";
import { industries } from "@/data/site-pages";

/**
 * Industries trust strip.
 *
 * Replaces the template's fabricated partner-logo carousel. Tenext does
 * not publish client logos here, so this presents the real industries it
 * serves. Swap in a genuine client-logo row once approved logos exist.
 */
export function PartnerLogosSection() {
  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,
          }}
        >
          Trusted to deliver across the industries we serve
        </h3>

        <div className="flex flex-wrap items-center justify-center gap-x-10 gap-y-6 md:gap-x-16">
          {industries.map((industry) => (
            <span
              key={industry.id}
              className="text-[18px] font-semibold text-white/70 transition-colors hover:text-tenext-teal md:text-[22px]"
              style={{ fontFamily: "var(--font-sora)" }}
            >
              {industry.title}
            </span>
          ))}
        </div>
      </PageContainer>
    </SectionContainer>
  );
}