"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/AieroButton";
import { Counter } from "@/components/shared/Counter";

const teamMembers = [
  {
    name: "Alan Begham",
    role: "CEO",
    image: "/images/tenext/waist-up-shot-handsome-calm.jpg",
  },
  {
    name: "Arthur Dowson",
    role: "AI Programmer",
    image: "/images/tenext/funny-curious-man-makes.jpg",
  },
  {
    name: "Dan Smith",
    role: "Manager",
    image: "/images/tenext/portrait-confident-man.jpg",
  },
  {
    name: "Brandon Adams",
    role: "HR",
    image: "/images/tenext/confident-ginger-man-with-trendy.jpg",
  },
  {
    name: "Alan Begham",
    role: "CEO Neuro",
    image: "/images/tenext/waist-up-shot-handsome-calm.jpg",
  },
];

export function TeamSection() {
  return (
    <SectionContainer paddingY="lg">
      <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="team"
              title="The Neural Network experts: uniting talent for intelligent solutions"
              titleClassName="text-tenext-dark"
            />
            <div className="mt-[40px]">
              <Counter
                target={500}
                prefix="+"
                numberClassName="text-[60px] font-extrabold leading-none font-[var(--font-manrope)] text-transparent"
                style={{
                  WebkitTextStroke: "1px #E2D7F8",
                  backgroundImage:
                    "linear-gradient(180deg, rgba(226, 215, 248, 0.44) 0%, rgba(226, 215, 248, 0.06) 90%)",
                  backgroundClip: "text",
                  WebkitBackgroundClip: "text",
                }}
                title="Awesome team members"
                titleClassName="mt-[15px] text-[16px] font-bold text-tenext-dark"
              />
            </div>
            <TenextButton
              variant="simple"
              className="mt-[25px] text-[15px] font-medium text-tenext-dark"
              showArrow={true}
            >
              Explore more
            </TenextButton>
          </div>

          {teamMembers.map((member, i) => (
            <div
              key={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={member.image}
                  alt={member.name}
                  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)" }}
                >
                  {member.name}
                </h4>
                <p className="text-[14px] text-tenext-teal">
                  / {member.role} /
                </p>
              </div>
            </div>
          ))}
        </div>
      </PageContainer>
    </SectionContainer>
  );
}