Team Sections

import Image from "next/image";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { X, Facebook, Linkedin } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";

const teams = [
  {
    name: "Emily Carter",
    role: "Founder & CEO",
    bio: "Former IBM engineer with a passion for building innovative and human-centered software products.",
    image:
      "https://plus.unsplash.com/premium_photo-1754211654507-e0a561f6b9c4?q=80&w=721&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    social: {
      x: "#",
      facebook: "#",
      linkedin: "#"
    }
  },
  {
    name: "Lucas Bennett",
    role: "Lead Designer",
    bio: "Creative strategist focused on clean UI and intuitive UX. Believes in the power of simplicity.",
    image:
      "https://images.unsplash.com/photo-1754051486494-cfdbf29a589c?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    social: {
      x: "#",
      facebook: "#",
      linkedin: "#"
    }
  },
  {
    name: "Sophie Miller",
    role: "Lead Engineer",
    bio: "Award-winning developer with a passion for solving complex problems and building scalable systems.",
    image:
      "https://images.unsplash.com/photo-1754006320747-a90ba54b93cd?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    social: {
      x: "#",
      facebook: "#",
      linkedin: "#"
    }
  },
  {
    name: "Ethan Johnson",
    role: "Facilities Manager",
    bio: "Behind-the-scenes operator ensuring our workspace runs smoothly and efficiently.",
    image:
      "https://images.unsplash.com/photo-1598891960072-675d49bb4242?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    social: {
      x: "#",
      facebook: "#",
      linkedin: "#"
    }
  }
];

export default function TeamSection() {
  return (
    <section className="py-12 lg:py-20">
      <div className="mx-auto max-w-7xl space-y-6 px-4 lg:space-y-8">
        <div className="flex flex-col items-start gap-4 md:flex-row md:items-end md:justify-between">
          <header className="space-y-4">
            <Badge className="dark:text-foreground inline-block rounded-full bg-blue-100 text-blue-600 dark:bg-blue-950">
              We&#39;re Hiring!
            </Badge>
            <h2 className="font-heading text-3xl md:text-4xl">Let&#39;s Meet Our Team</h2>
            <p className="text-muted-foreground text-balance md:text-lg">
              Gravida in fermentum et sollicitudin ac orci phasellus egestas. Molestie a iaculis at
              erat pellentesque adipiscing commodo.
            </p>
          </header>
          <div className="flex gap-2">
            <Button variant="outline" className="rounded-full px-6 py-3">
              About Us
            </Button>
            <Button className="rounded-full">Job Openings</Button>
          </div>
        </div>
        <Separator />
        <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
          {teams.map((member, index) => (
            <div key={index} className="flex flex-col items-start gap-4">
              <div className="relative size-20 overflow-hidden rounded-3xl">
                <Image
                  src={member.image}
                  alt={`Picture of ${member.name}`}
                  layout="fill"
                  objectFit="cover"
                />
              </div>
              <div className="space-y-2">
                <h5 className="text-xl font-bold">{member.name}</h5>
                <Badge variant="outline">{member.role}</Badge>
                <p className="text-muted-foreground text-sm">{member.bio}</p>
              </div>
              <div className="flex gap-2 [&_a]:flex [&_a]:size-8 [&_a]:items-center [&_a]:justify-center [&_a]:rounded-full [&_a]:border">
                <Link href={member.social.x}>
                  <X className="size-4" />
                  <span className="sr-only">X (Twitter)</span>
                </Link>
                <Link href={member.social.facebook}>
                  <Facebook className="size-4" />
                  <span className="sr-only">Facebook</span>
                </Link>
                <Link
                  href={member.social.linkedin}
                  className="text-muted-foreground hover:text-gray-900">
                  <Linkedin className="size-4" />
                  <span className="sr-only">LinkedIn</span>
                </Link>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}