"use client";

import { PageContainer } from "@/components/shared/PageContainer";
import { SectionContainer } from "@/components/shared/SectionContainer";
import { SectionHeading } from "@/components/shared/SectionHeading";
import { tenextButton as TenextButton } from "@/components/shared/Button";
import { practiceTeams } from "@/data/site-content";

export function TeamSection() {
  return (
    <SectionContainer id="teams" paddingY="lg" className="scroll-mt-[120px]">
      <PageContainer>
        <div className="columns-1 gap-6 sm:columns-2 lg:columns-4">
          <div className="mb-6 flex break-inside-avoid flex-col">
            <SectionHeading
              tag="our teams"
              title="Specialist teams behind every engagement"
              titleClassName="text-tenext-dark"
            />
            <p className="mt-[24px] text-[16px] leading-[1.8] text-tenext-text-muted">
              Engagements are staffed from practices that work together —
              engineering, cloud, data, mobility, and commerce — so the people
              who design a system are the ones who build and support it.
            </p>
            <TenextButton
              href="/careers"
              variant="simple"
              className="mt-[25px] text-[15px] font-medium text-tenext-dark"
              showArrow={true}
            >
              See open roles
            </TenextButton>
          </div>

          {practiceTeams.map((team, i) => (
            <div
              key={`${team.name}-${i}`}
              className="group relative mb-6 break-inside-avoid overflow-hidden rounded-[25px] bg-tenext-card-dark"
            >
              <div className="relative aspect-[3/4] w-full">
                <img
                  src={team.image}
                  alt=""
                  loading="lazy"
                  decoding="async"
                  className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
                  onError={(e) => {
                    (e.target as HTMLImageElement).src =
                      "/images/tenext/home-9-img.png";
                  }}
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-80" />
              </div>
              <div className="absolute bottom-0 left-0 w-full p-6 text-white transition-transform duration-300 group-hover:-translate-y-2">
                <h4
                  className="text-[20px] font-bold"
                  style={{ fontFamily: "var(--font-dm-sans)" }}
                >
                  {team.name}
                </h4>
                <p className="text-[14px] text-tenext-teal">/ {team.focus} /</p>
              </div>
            </div>
          ))}
        </div>
      </PageContainer>
    </SectionContainer>
  );
}