"use client";

import { ChevronLeft, ChevronRight, ExternalLink, MessageCircle } from "lucide-react";
import {
  GridOverlay,
  GradientText,
  ScrollReveal,
  StaggerChildren,
  GlowCard,
} from "@/components/ui/primitives";

const members = [
  {
    name: "Alex Morgan",
    role: "CEO & Co-Founder",
    avatar: "AM",
    bio: "Previously VP Engineering at Stripe. 15+ years building developer platforms.",
    linkedin: "#",
    twitter: "#",
  },
  {
    name: "Priya Sharma",
    role: "CTO & Co-Founder",
    avatar: "PS",
    bio: "Ex-Google, built distributed systems serving billions of requests daily.",
    linkedin: "#",
    twitter: "#",
  },
  {
    name: "David Kim",
    role: "Head of Product",
    avatar: "DK",
    bio: "Former PM at Figma. Passionate about developer experience and design systems.",
    linkedin: "#",
    twitter: "#",
  },
];

export default function SaasTeam1() {
  return (
    <section className="relative bg-white py-24 overflow-hidden">
      <GridOverlay type="dots" fade="radial" opacity={0.03} />

      <div className="relative mx-auto max-w-6xl px-6">
        {/* Header */}
        <ScrollReveal variant="blur-in">
          <div className="mx-auto max-w-2xl text-center">
            <h2 className="text-3xl font-semibold tracking-tight text-gray-900 md:text-4xl">
              Our <GradientText from="indigo-500" to="violet-500">Crew</GradientText>
            </h2>
            <p className="mt-4 text-base leading-relaxed text-gray-500">
              A small team of experienced builders, obsessed with creating the
              best tools for modern development teams.
            </p>
          </div>
        </ScrollReveal>

        {/* 3-column card grid */}
        <StaggerChildren staggerDelay={0.12} className="mt-14 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {members.map((member) => (
            <GlowCard key={member.name} glowColor="indigo" className="p-6">
              {/* Avatar placeholder */}
              <div className="aspect-4/3 overflow-hidden rounded-xl bg-gray-100">
                <div className="flex h-full items-center justify-center bg-linear-to-br from-gray-50 to-gray-100">
                  <span className="text-4xl font-light text-gray-300">
                    {member.avatar}
                  </span>
                </div>
              </div>

              {/* Info */}
              <div className="mt-5">
                <h3 className="text-base font-medium text-gray-900">
                  {member.name}
                </h3>
                <p className="mt-0.5 text-sm text-indigo-500">{member.role}</p>
                <p className="mt-3 text-sm leading-relaxed text-gray-500">
                  {member.bio}
                </p>
              </div>

              {/* Social links */}
              <div className="mt-4 flex items-center gap-2">
                <a
                  href={member.linkedin}
                  aria-label={`${member.name} LinkedIn`}
                  className="flex h-8 w-8 items-center justify-center rounded-lg text-gray-400 transition-colors hover:bg-gray-100 hover:text-indigo-500"
                >
                  <ExternalLink className="h-4 w-4" />
                </a>
                <a
                  href={member.twitter}
                  aria-label={`${member.name} MessageCircle`}
                  className="flex h-8 w-8 items-center justify-center rounded-lg text-gray-400 transition-colors hover:bg-gray-100 hover:text-indigo-500"
                >
                  <MessageCircle className="h-4 w-4" />
                </a>
              </div>
            </GlowCard>
          ))}
        </StaggerChildren>

        {/* Slider controls */}
        <div className="mt-8 flex items-center justify-center gap-3">
          <button className="flex h-10 w-10 items-center justify-center rounded-full border border-gray-200 text-gray-400 transition-colors hover:border-indigo-300 hover:text-indigo-500">
            <ChevronLeft className="h-5 w-5" />
          </button>
          <button className="flex h-10 w-10 items-center justify-center rounded-full border border-gray-200 text-gray-400 transition-colors hover:border-indigo-300 hover:text-indigo-500">
            <ChevronRight className="h-5 w-5" />
          </button>
        </div>
      </div>
    </section>
  );
}