import Image from "next/image";

/* ----------------------------- TYPES ----------------------------- */

type TeamItems = {
  itemTitle1?: string | null;
  itemTitle2?: string | null;
  itemTitle3?: string | null;
  itemTitle4?: string | null;
  itemTitle5?: string | null;
  itemTitle6?: string | null;
};
type TeamsImage = {
  node?: {
    sourceUrl: string;
    altText?: string | null;
  } | null;
} | null;

type OurTeamData = {
  teamTitle: string;
  teamSubtitle: string;
  teamExpert?: string | null;
  teamItems: TeamItems;
  teamsImage?: TeamsImage;
  buttonText?: string | null;
  buttonLink?: string | null;
};


type OurTeamProps = {
  data: OurTeamData;
};

/* ----------------------------- COMPONENT ----------------------------- */

export default function OurTeam({ data }: OurTeamProps) {
  const tags = [
    data.teamItems?.itemTitle1,
    data.teamItems?.itemTitle2,
    data.teamItems?.itemTitle3,
    data.teamItems?.itemTitle4,
    data.teamItems?.itemTitle5,
    data.teamItems?.itemTitle6,
  ].filter(
    (item): item is string =>
      typeof item === "string" && item.trim() !== ""
  );

  return (
    <section className="py-24 bg-[#F3F3F3]">
      <div className="mx-auto text-center">

        {/* Subtitle */}
        <span className="text-lg font-medium text-[#202020]/50 block mb-2">
          {data.teamSubtitle}
        </span>

        {/* Heading */}
        <h2 className="text-2xl md:text-[40px] font-medium text-[#202020] font-mono mb-4">
          {data.teamTitle}
        </h2>

        {/* Description */}
        {data.teamExpert && (
          <div
            className="max-w-2xl mx-auto text-md lg:text-lg font-medium text-[#202020]/70 mb-10"
            dangerouslySetInnerHTML={{ __html: data.teamExpert }}
          />
        )}

        {/* Tag Slider */}
        <div className="relative mb-14 overflow-hidden">

          {/* Marquee wrapper */}
          <div className="w-full overflow-hidden">

            {/* Track */}
            <div className="marquee gap-5 px-4 py-2">
              {[...tags, ...tags] // duplicate ONCE
                .filter(Boolean)
                .map((tag, index) => (
                  <span
                    key={index}
                    className="
                      flex-shrink-0
                      bg-[#202020]
                      text-white
                      px-6
                      py-3
                      rounded
                      text-md lg:text-lg
                      font-medium
                      hover:bg-[#101010]
                      transition
                      cursor-pointer
                    "
                  >
                    {tag}
                  </span>
                ))}
            </div>

          </div>

          {/* Fade edges */}
          <div className="pointer-events-none absolute left-0 top-0 h-full w-20 bg-gradient-to-r from-[#F3F3F3] to-transparent" />
          <div className="pointer-events-none absolute right-0 top-0 h-full w-20 bg-gradient-to-l from-[#F3F3F3] to-transparent" />

        </div>


      </div>
      <div className="container mx-auto px-4 text-center">
        {/* Image wrapper */}
        <div className="relative mx-auto mt-12 overflow-hidden rounded-2xl">
            {data.teamsImage?.node?.sourceUrl && (
              <Image
                src={data.teamsImage.node.sourceUrl}
                alt={data.teamsImage.node.altText || "Our Team"}
                width={1400}
                height={600}
                unoptimized
                className="w-full h-full object-contain"
              />
            )}


            {/* SUBTRACT SHAPE */}
            <div className="absolute left-1/2 -translate-x-1/2 bottom-[-20px] z-10">
              {/* Main white plate */}
              <div className="relative bg-[#f3f3f3] w-full p-6 rounded-[20px] flex items-center justify-center shadow-md">
                {/* Button */}
                <a
                    href={data.buttonLink || "/careers"}
                    className="
                    group inline-flex items-center gap-2
                    border border-[#202020]/50 px-6 py-3 rounded text-md lg:text-lg font-medium
                    hover:bg-[#101010] text-[#202020] hover:text-white transition
                    relative z-20
                    whitespace-nowrap
                    "
                >
                    Join Togwe Team
                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.67188 0.5L17.3026 8.73842L8.67188 16.9768" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M17.2999 8.73828L0.5 8.73828" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path></svg>
                </a>
              </div>
            </div>
        </div>
      </div>
    </section>
  );
}