import type { ReactNode } from "react"
import {
  DiscordLogoIcon,
  GitHubLogoIcon,
  LinkedInLogoIcon,
  TwitterLogoIcon,
} from "@radix-ui/react-icons"
import * as motion from "motion/react-client"

const team = [
  {
    name: "Samuel Dupont",
    role: "CEO",
    image: "https://cdn.badtz-ui.com/pro/blocks/1.webp",
    description: "Visionary leader with a passion for innovation and growth.",
    socials: {
      twitter: "#",
      linkedin: "#",
    },
  },
  {
    name: "Bob Martin",
    role: "CTO",
    image: "https://cdn.badtz-ui.com/pro/blocks/2.webp",
    description:
      "Tech enthusiast driving the technical strategy and execution.",
    socials: {
      github: "#",
    },
  },
  {
    name: "Claire Nguyen",
    role: "Head of Marketing",
    image: "https://cdn.badtz-ui.com/pro/blocks/3.webp",
    description: "Creative mind behind our brand and marketing campaigns.",
    socials: {
      twitter: "#",
      linkedin: "#",
      discord: "#",
    },
  },
  {
    name: "David Lee",
    role: "Lead Developer",
    image: "https://cdn.badtz-ui.com/pro/blocks/4.webp",
    description: "Expert in software development and agile methodologies.",
    socials: {},
  },
  {
    name: "Eva Green",
    role: "Customer Success Manager",
    image: "https://cdn.badtz-ui.com/pro/blocks/5.webp",
    description: "Dedicated to ensuring customer satisfaction and success.",
    socials: {
      linkedin: "#",
    },
  },
  {
    name: "Florence White",
    role: "Product Manager",
    image: "https://cdn.badtz-ui.com/pro/blocks/6.webp",
    description: "Focused on delivering user-centric product solutions.",
    socials: {
      twitter: "#",
      github: "#",
    },
  },
]

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.2,
      delayChildren: 0.3,
    },
  },
}

const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0, transition: { duration: 0.5 } },
}

interface SocialLinkProps {
  href: string
  icon: ReactNode
}

interface SocialLinkProps {
  href: string
  icon: ReactNode
  platform: string
}

function SocialLink({ href, icon, platform }: SocialLinkProps) {
  return (
    <a
      href={href}
      target="_blank"
      rel="noopener noreferrer"
      className="bg-background text-muted-foreground hover:text-foreground flex h-8 w-8 shrink-0 items-center justify-center rounded-md border shadow-sm transition-colors"
      aria-label={`Visit ${platform} profile`}
      role="listitem"
    >
      {icon}
    </a>
  )
}

export function Team() {
  return (
    <section
      className="bg-background w-full py-24"
      aria-labelledby="team-heading"
      aria-describedby="team-description"
    >
      <div className="container mx-auto max-w-6xl px-6 lg:px-8">
        <div className="mx-auto flex max-w-3xl flex-col items-center gap-4 text-center">
          <p className="text-primary font-medium" aria-label="Section category">
            Team
          </p>
          <h2
            id="team-heading"
            className="text-foreground text-4xl text-[clamp(40px,10vw,44px)] leading-[1.2] font-bold tracking-tighter text-balance sm:text-5xl"
          >
            Meet Our Dedicated Team
          </h2>
          <p
            id="team-description"
            className="text-muted-foreground leading-7 font-normal text-pretty sm:max-w-[600px] sm:text-lg"
          >
            Our team is committed to providing the best service and support to
            help your business thrive. Discover the people who make it all
            happen.
          </p>
        </div>
        <motion.div
          className="mx-auto mt-14 grid grid-cols-1 justify-center gap-8 sm:grid-cols-2 lg:grid-cols-3"
          variants={containerVariants}
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, amount: 0.2 }}
          role="list"
          aria-label="Team members list"
        >
          {team.map((member, index) => (
            <motion.div
              key={index}
              className="col-span-1"
              variants={itemVariants}
              role="listitem"
              aria-label={`Team member ${index + 1}: ${member.name}, ${
                member.role
              }`}
            >
              <img
                src={member.image}
                alt={`Portrait of ${member.name}, ${member.role}`}
                className="h-60 w-full rounded-lg object-cover transition-all duration-300 hover:scale-102"
              />
              <h3
                className="text-foreground mt-4 text-xl font-semibold"
                aria-label={`Name: ${member.name}`}
              >
                {member.name}
              </h3>
              <p
                className="text-primary mt-1 text-xs font-medium"
                aria-label={`Role: ${member.role}`}
              >
                {member.role}
              </p>
              <p
                className="text-muted-foreground mt-2 text-base text-balance"
                aria-label={`Description: ${member.description}`}
              >
                {member.description}
              </p>
              <div
                className="mt-3 flex space-x-3 [&>svg]:size-1"
                aria-label={`Social media links for ${member.name}`}
                role="list"
              >
                {member.socials.twitter && (
                  <SocialLink
                    href={member.socials.twitter}
                    icon={<TwitterLogoIcon />}
                    platform="Twitter"
                  />
                )}
                {member.socials.linkedin && (
                  <SocialLink
                    href={member.socials.linkedin}
                    icon={<LinkedInLogoIcon />}
                    platform="LinkedIn"
                  />
                )}
                {member.socials.github && (
                  <SocialLink
                    href={member.socials.github}
                    icon={<GitHubLogoIcon />}
                    platform="GitHub"
                  />
                )}
                {member.socials.discord && (
                  <SocialLink
                    href={member.socials.discord}
                    icon={<DiscordLogoIcon />}
                    platform="Discord"
                  />
                )}
              </div>
            </motion.div>
          ))}
        </motion.div>
      </div>
    </section>
  )
}
Team 01

Team 02
