import { SectionContainer } from "@/components/shared/SectionContainer";
import { PageContainer } from "@/components/shared/PageContainer";
import { SectionHeading } from "@/components/shared/SectionHeading";
import { RevealOnView } from "@/components/shared/RevealOnView";
import { tenextButton as TenextButton } from "@/components/shared/Button";
import { Icon } from "@/components/shared/Icon";
import { practiceTeamCards } from "@/data/about";

/**
 * AboutPracticeTeams — the disciplines that staff an engagement.
 * Each card has a unique gradient header and icon (no repeated artwork,
 * no invented individuals).
 */
export function AboutPracticeTeams() {
  return (
    <SectionContainer paddingY="lg" className="bg-white px-[20px]">
      <PageContainer>
        <div className="mb-[50px] flex flex-col gap-[24px] md:flex-row md:items-end md:justify-between">
          <SectionHeading
            tag="practice teams"
            title="Specialist teams behind every engagement"
            description="Engagements are staffed from practices that work together — so the people who design a system are the ones who build and support it."
            titleClassName="text-tenext-dark max-w-[640px]"
            descriptionClassName="max-w-[560px]"
          />
          <TenextButton
            href="/careers"
            variant="simple"
            className="shrink-0 text-[15px] font-semibold text-tenext-dark"
            showArrow={true}
          >
            See open roles
          </TenextButton>
        </div>

        <div className="grid grid-cols-1 gap-[20px] sm:grid-cols-2 lg:grid-cols-3">
          {practiceTeamCards.map((team, index) => (
            <RevealOnView key={team.name} delay={index * 80}>
              <div className="group flex h-full flex-col overflow-hidden rounded-[25px] border border-tenext-card-border transition-all duration-300 hover:-translate-y-2 hover:shadow-[0_22px_55px_rgba(31,31,31,0.12)]">
                {/* Unique gradient header */}
                <div className={`relative h-[130px] bg-gradient-to-br ${team.gradient}`}>
                  <div className="absolute inset-0 opacity-30 [background-image:radial-gradient(rgba(255,255,255,0.5)_1px,transparent_1px)] [background-size:16px_16px]" />
                  <span className="absolute bottom-[-26px] left-[30px] flex h-[54px] w-[54px] items-center justify-center rounded-[16px] border border-white/20 bg-tenext-dark text-tenext-teal transition-transform duration-500 group-hover:-translate-y-1">
                    <Icon name={team.icon} className="h-[26px] w-[26px]" />
                  </span>
                </div>

                <div className="flex flex-1 flex-col p-[30px] pt-[40px]">
                  <h3 className="font-[var(--font-dm-sans)] text-[20px] font-bold text-tenext-dark">
                    {team.name}
                  </h3>
                  <p className="mt-[4px] text-[14px] font-semibold text-tenext-teal">
                    / {team.focus} /
                  </p>
                  <p className="mt-[14px] text-[15px] leading-[1.7] text-tenext-text-muted">
                    {team.description}
                  </p>
                </div>
              </div>
            </RevealOnView>
          ))}
        </div>
      </PageContainer>
    </SectionContainer>
  );
}