Team 3

import { GithubIcon } from "@/components/icons/github-icon";
import { LinkedinIcon } from "@/components/icons/linkedin-icon";
import { XIcon } from "@/components/icons/x-icon";
import {
	Avatar,
	AvatarFallback,
	AvatarImage,
} from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { FullWidthDivider } from "@/components/full-width-divider";

type Social = {
	label: "X" | "GitHub" | "LinkedIn";
	href: string;
};

type TeamMember = {
	name: string;
	role: string;
	image: string;
	socials: Social[];
};

const socialIcons = {
	X: XIcon,
	GitHub: GithubIcon,
	LinkedIn: LinkedinIcon,
} as const;

const team: TeamMember[] = [
	{
		name: "Shaban Haider",
		role: "Founder & CEO",
		image: "https://github.com/shabanhr.png",
		socials: [
			{ label: "X", href: "#" },
			{ label: "GitHub", href: "#" },
			{ label: "LinkedIn", href: "#" },
		],
	},
	{
		name: "Jordan Blake",
		role: "Head of Product",
		image:
			"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=800&q=80",
		socials: [
			{ label: "X", href: "#" },
			{ label: "GitHub", href: "#" },
		],
	},
	{
		name: "Priya Nair",
		role: "Design Lead",
		image:
			"https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&w=800&q=80",
		socials: [
			{ label: "X", href: "#" },
			{ label: "LinkedIn", href: "#" },
		],
	},
	{
		name: "Alex Rivera",
		role: "Engineering",
		image:
			"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=800&q=80",
		socials: [
			{ label: "X", href: "#" },
			{ label: "GitHub", href: "#" },
		],
	},
	{
		name: "Sam Okonkwo",
		role: "Growth",
		image:
			"https://images.unsplash.com/photo-1580489944761-15a19d654956?auto=format&fit=crop&w=800&q=80",
		socials: [
			{ label: "X", href: "#" },
			{ label: "LinkedIn", href: "#" },
		],
	},
	{
		name: "Leo Park",
		role: "Developer Experience",
		image:
			"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&w=800&q=80",
		socials: [
			{ label: "X", href: "#" },
			{ label: "GitHub", href: "#" },
		],
	},
];

export function TeamSection() {
	return (
		<section
			aria-labelledby="team-heading"
			className="mx-auto w-full max-w-5xl border-x py-4"
		>
			<div className="flex flex-col gap-2 px-4 py-8 md:px-6 md:py-12">
				<h2
					className="font-heading text-balance font-medium text-3xl md:text-4xl"
					id="team-heading"
				>
					Meet the <span className="font-serif italic">people</span>
				</h2>
				<p className="max-w-lg text-pretty text-muted-foreground text-sm md:text-base">
					The humans who design, ship, and obsess over every Efferd block.
				</p>
			</div>

			<div className="relative">
				<FullWidthDivider position="top" />
				<div
					aria-hidden="true"
					className="pointer-events-none absolute inset-y-0 left-1/2 hidden w-px bg-border sm:block lg:hidden"
				/>
				<div
					aria-hidden="true"
					className="pointer-events-none absolute inset-y-0 left-1/3 hidden w-px bg-border lg:block"
				/>
				<div
					aria-hidden="true"
					className="pointer-events-none absolute inset-y-0 left-2/3 hidden w-px bg-border lg:block"
				/>
				<ul className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
					{team.map((member) => (
						<TeamMemberCard key={member.name} member={member} />
					))}
				</ul>
				<FullWidthDivider position="bottom" />
			</div>

			<div className="relative flex flex-col items-start justify-between gap-4 px-4 py-6 md:flex-row md:items-center md:px-6">
				<FullWidthDivider position="bottom" />
				<p className="text-pretty text-lg text-muted-foreground">
					<span className="font-medium text-foreground">Join us!</span> Let's
					shape the future of the web together
				</p>
				<Button asChild variant="outline">
					<a href="#careers">View openings</a>
				</Button>
			</div>
		</section>
	);
}

function TeamMemberCard({ member }: { member: TeamMember }) {
	const { name, role, image, socials } = member;

	return (
		<li className="flex flex-col items-center gap-5 px-6 py-10 text-center md:py-14">
			<Avatar className="size-20 md:size-24">
				<AvatarImage alt={`${name}'s portrait`} src={image} />
				<AvatarFallback>{getInitials(name)}</AvatarFallback>
			</Avatar>
			<div className="flex flex-col items-center gap-1">
				<h3 className="font-heading font-medium text-foreground">{name}</h3>
				<p className="text-pretty text-muted-foreground text-sm">{role}</p>
				<div className="mt-1 flex">
					{socials.map((social) => {
						const Icon = socialIcons[social.label];

						return (
							<Button
								asChild
								className="text-muted-foreground"
								key={social.label}
								size="icon-xs"
								variant="ghost"
							>
								<a aria-label={`${name} on ${social.label}`} href={social.href}>
									<Icon />
								</a>
							</Button>
						);
					})}
				</div>
			</div>
		</li>
	);
}

function getInitials(name: string) {
	return name
		.split(" ")
		.map((part) => part[0])
		.join("")
		.slice(0, 2)
		.toUpperCase();
}