import Image from "next/image";
import { LinkedinIcon } from "@/components/social-icons";
import type { TeamMemberRow } from "@/lib/types";

const GRADIENTS = [
  "from-[var(--navy)] to-blue-400",
  "from-blue-400 to-cyan-400",
  "from-violet-500 to-purple-500",
  "from-sky-500 to-emerald-400",
];

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

export function TeamGrid({ members }: { members: TeamMemberRow[] }) {
  if (members.length === 0) return null;
  return (
    <div className="mx-auto grid max-w-3xl gap-8 sm:grid-cols-2">
      {members.map((m, i) => (
        <article
          key={m.$id}
          className="group rounded-3xl border border-[var(--border)] bg-white p-8 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-[var(--navy)]/10"
        >
          {/* Avatar — Foto veya gradient initial */}
          <div className="mx-auto mb-6 size-20">
            {m.photo_url ? (
              <div className="relative size-20 overflow-hidden rounded-2xl">
                <Image
                  src={m.photo_url}
                  alt={m.name}
                  fill
                  sizes="80px"
                  className="object-cover"
                />
              </div>
            ) : (
              <div
                className={`flex size-20 items-center justify-center rounded-2xl bg-gradient-to-br ${
                  GRADIENTS[i % GRADIENTS.length]
                } text-2xl font-bold text-white shadow-lg`}
              >
                {initials(m.name)}
              </div>
            )}
          </div>

          <div className="text-center">
            <h3 className="text-xl font-bold text-[var(--navy)]">{m.name}</h3>
            {m.role && (
              <div className="mt-1 text-sm font-medium text-[var(--sky-600)]">
                {m.role}
              </div>
            )}
            {m.bio && (
              <p className="mt-4 text-sm leading-relaxed text-[var(--muted)]">
                {m.bio}
              </p>
            )}

            {m.skills && m.skills.length > 0 && (
              <div className="mt-5 flex flex-wrap items-center justify-center gap-1.5">
                {m.skills.map((s) => (
                  <span
                    key={s}
                    className="rounded-full bg-[var(--sky-50)] px-3 py-1 text-xs font-medium text-[var(--sky-600)]"
                  >
                    {s}
                  </span>
                ))}
              </div>
            )}

            {m.linkedin_url && (
              <a
                href={m.linkedin_url}
                target="_blank"
                rel="noopener noreferrer"
                className="mt-5 inline-flex items-center gap-1.5 rounded-full border border-[var(--border)] bg-white px-3 py-1.5 text-xs font-medium text-[var(--muted)] transition hover:border-[var(--sky)] hover:text-[var(--navy)]"
              >
                <LinkedinIcon className="size-3.5" />
                LinkedIn
              </a>
            )}
          </div>
        </article>
      ))}
    </div>
  );
}