Team Section 6

"use client";

import { useState } from "react";
import Image from "next/image";
import { motion, AnimatePresence } from "motion/react";
import { cn } from "@/lib/utils";

interface TeamMember {
  id: string;
  name: string;
  role: string;
  image: string;
  categories: string[];
}

const teamMembers: TeamMember[] = [
  {
    id: "member-1",
    name: "David Kim",
    role: "Founder & CEO",
    image: "https://assets.solaceui.com/solaceui-member-two.png",
    categories: ["Product", "GTM"],
  },
  {
    id: "member-2",
    name: "Sarah Chen",
    role: "Head of Design",
    image: "https://assets.solaceui.com/solaceui-member-five.png",
    categories: ["Design"],
  },
  {
    id: "member-3",
    name: "James Mitchell",
    role: "Product Manager",
    image: "https://assets.solaceui.com/solaceui-member-four.png",
    categories: ["Product", "GTM"],
  },
  {
    id: "member-4",
    name: "Marcus Rodriguez",
    role: "VP of Engineering",
    image: "https://assets.solaceui.com/solaceui-member-one.png",
    categories: ["Security", "Product"],
  },
  {
    id: "member-5",
    name: "Olivia Koe",
    role: "Lead Designer",
    image: "https://assets.solaceui.com/solaceui-member-six.png",
    categories: ["Design"],
  },
  {
    id: "member-6",
    name: "Amara Okonkwo",
    role: "CTO",
    image: "https://assets.solaceui.com/solaceui-member-three.png",
    categories: ["Security", "Product"],
  },
  {
    id: "member-7",
    name: "Sofia Weber",
    role: "Sales Director",
    image: "https://assets.solaceui.com/solaceui-member-six.png",
    categories: ["Sales", "GTM"],
  },
  {
    id: "member-8",
    name: "Elena Rodriguez",
    role: "Head of Operations",
    image: "https://assets.solaceui.com/solaceui-member-five.png",
    categories: ["Operations"],
  },
];

const categories = ["All", "Product", "Design", "Sales", "Security", "GTM", "Operations"];

export default function Team6() {
  const [activeCategory, setActiveCategory] = useState<string>("All");

  const filteredMembers =
    activeCategory === "All"
      ? teamMembers
      : teamMembers.filter((member) => member.categories.includes(activeCategory));

  return (
    <section className="relative w-full py-18 md:py-20 bg-white dark:bg-background overflow-hidden flex flex-col items-center justify-center">
      <div className="w-full max-w-6xl px-4 md:px-8 z-10 flex flex-col items-start text-left">

        {/* Title */}
        <h2 className="text-4xl md:text-5xl lg:text-6xl font-sans font-semibold tracking-tight text-neutral-900 dark:text-white capitalize max-w-4xl mb-10 leading-tight">
          Meet The Incredible Team Behind Solace UI
        </h2>

        {/* Category Filters */}
        <div className="flex flex-wrap gap-2 md:gap-3 mb-14 w-full">
          {categories.map((category) => (
            <button
              key={category}
              onClick={() => setActiveCategory(category)}
              className={cn(
                "px-4 py-1 text-sm md:text-base font-sans  border transition-all duration-300 cursor-pointer focus:outline-none",
                activeCategory === category
                  ? "border-black dark:border-white text-black dark:text-white bg-neutral-50 dark:bg-zinc-900 font-medium shadow-sm"
                  : "border-neutral-200/60 dark:border-zinc-800/80 text-neutral-400 dark:text-zinc-500 hover:text-neutral-900 dark:hover:text-zinc-200 hover:border-neutral-300 dark:hover:border-zinc-700"
              )}
            >
              {category}
            </button>
          ))}
        </div>

        {/* Grid Container */}
        <div className="relative w-full overflow-visible">

          <motion.div
            layout
            className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-1 gap-y-1 w-full"
          >
            <AnimatePresence mode="popLayout">
              {filteredMembers.map((member) => (
                <motion.div
                  layout
                  initial={{ opacity: 0, scale: 0.95 }}
                  animate={{ opacity: 1, scale: 1 }}
                  exit={{ opacity: 0, scale: 0.95 }}
                  transition={{ duration: 0.4, ease: "easeInOut" }}
                  key={member.id}
                  className="group relative aspect-[3/4.2] w-full rounded-md overflow-hidden bg-neutral-50 dark:bg-zinc-900 border border-neutral-200/50 dark:border-zinc-800/50 shadow-sm hover:shadow-xl transition-all duration-500 cursor-pointer"
                >
                  {/* Image */}
                  <Image
                    src={member.image}
                    alt={member.name}
                    fill
                    className="object-cover object-top transition-all duration-500 grayscale contrast-[1.05] group-hover:grayscale-0 group-hover:scale-[1.02]"
                    sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
                    unoptimized
                  />

                  {/* Gradient Overlay for Text Readability */}
                  <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/25 to-transparent z-10" />

                  {/* Name overlay at the bottom left */}
                  <div className="absolute bottom-6 left-6 z-20 flex flex-col text-left">
                    <h3 className="font-sans font-bold text-white text-2xl md:text-3xl leading-tight">
                      {member.name}
                    </h3>
                    <p className="font-sans text-white/70 text-sm md:text-base mt-2 font-light">
                      {member.role}
                    </p>
                  </div>
                </motion.div>
              ))}
            </AnimatePresence>
          </motion.div>
        </div>
      </div>

      {/* Bottom fade overlay spanning end-to-end */}
      <div className="absolute bottom-0 left-0 right-0 h-44 bg-gradient-to-t from-white via-white/80 to-transparent dark:from-background dark:via-background/80 pointer-events-none z-20" />
    </section>
  );
}