industries/components/Leadership.tsx

"use client";

import { motion } from "framer-motion";
import { cn } from "@/lib/utils";

export default function Leadership() {
  const leaders = [
    {
      name: "Antje Worring",
      title: "Chief Executive Officer",
      bio: "Sets company vision and strategy across Zoo's research, product, and operations. Drives execution and organizational effectiveness end to end.",
      image: "/leadership/antje-worring.png"
    },
    {
      name: "Zach Kelling",
      title: "Founding CTO",
      bio: "Technical founder driving Zoo's mission to build frontier AI. Leads architecture, product vision, and technical strategy across the full stack.",
      image: "/leadership/zach-kelling.png"
    },
    {
      name: "Dave Lorenzini",
      title: "Chief Strategy Officer",
      bio: "Strategy visionary with decades of experience in immersive computing and AI. Leads strategic planning, partnerships, and long-term company direction.",
      image: "/leadership/dave-lorenzini.jpg"
    },
    {
      name: "Michael Kelling",
      title: "President",
      bio: "Strategic operations leader overseeing commercial expansion and enterprise partnerships. Expert in scaling AI solutions for global impact.",
      image: "/leadership/michael-kelling.png"
    },
    {
      name: "Vincent Butta",
      title: "Chief Revenue Officer",
      bio: "Driving revenue growth and commercial strategy. Expert in scaling enterprise sales and building high-performance go-to-market organizations.",
      image: "/leadership/vincent-butta.jpg"
    },
    {
      name: 'Major "Dream" Williams',
      title: "Chief Visionary Officer",
      bio: "Visionary leader with diverse talents in finance, entrepreneurship, and technology. Inspires and collaborates with international thought leaders to transform challenges into opportunities.",
      image: "/leadership/major-williams.png"
    },
    {
      name: "Danielle Savage",
      title: "Chief Brand Officer",
      bio: "Brand visionary elevating Zoo's global presence and market positioning. Expert in creating compelling brand narratives and customer experiences.",
      image: "/leadership/danielle-savage.png"
    },
    {
      name: "Anastasia Zacharaoff",
      title: "VP Engineering",
      bio: "Engineering leader driving technical excellence and innovation. Expert in building high-performing engineering teams and scalable systems.",
      image: "/leadership/anastasia-zacharaoff.png",
      zoom: 1.15,
    },
    {
      name: "Rob Ruiz",
      title: "VP Strategy",
      bio: "Strategic planning expert developing business intelligence and growth initiatives. Focused on market analysis and strategic partnerships.",
      image: "/leadership/rob-ruiz.png"
    },
    {
      name: "Marcus White",
      title: "VP Research",
      bio: "Research leader advancing AI capabilities and innovation. Expert in applied research and bringing cutting-edge technology to production.",
      image: "/leadership/marcus-white.png",
      zoom: 1.15,
    },
    {
      name: "Jackson Mori",
      title: "VP Engineering",
      bio: "Engineering leader building scalable distributed systems. Focused on performance, reliability, and developer experience.",
      image: "/leadership/jackson-mori.png",
      zoom: 1.15,
    },
    {
      name: "Ole Brereton",
      title: "Executive VP",
      bio: "Senior executive driving strategic initiatives and high-impact partnerships across the organization.",
      image: "/leadership/ole-brereton.png"
    }
  ];

  return (
    <section className={cn(
      "py-20 transition-colors duration-300",
      "bg-secondary"
    )}>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-16">
          <motion.h2
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className={cn(
              "text-4xl font-bold mb-4",
              "text-foreground"
            )}
          >
            Leadership Team
          </motion.h2>
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.1 }}
            className={cn(
              "text-xl max-w-3xl mx-auto",
              "text-muted-foreground"
            )}
          >
            Our leadership team combines deep AI expertise with operational excellence,
            driving innovation in frontier AI research while maintaining focus on safety and alignment
          </motion.p>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-8">
          {leaders.map((leader, index) => (
            <motion.div
              key={leader.name}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: index * 0.05 }}
              className="text-center group"
            >
              <div className="mb-4">
                {/* Avatar circle. The ``rounded-full`` class is what
                    actually clips the image — without it, the global
                    brutalist reset (``*:not(.rounded-full) { border-radius:
                    0 !important }`` in globals.css) overrides any inline
                    border-radius. ``overflow-hidden`` + ``aspect-square``
                    guarantee a clean 1:1 circle in every grid context.
                    Per-leader ``zoom`` lets specific portraits crop in
                    tighter (Marcus / Jackson / Anastasia framed wide). */}
                <div className="w-32 h-32 mx-auto overflow-hidden rounded-full aspect-square border border-black transition-all duration-300">
                  <img
                    src={leader.image}
                    alt={leader.name}
                    className="w-full h-full object-cover grayscale transition-all duration-500 rounded-full"
                    style={leader.zoom ? { transform: `scale(${leader.zoom})` } : undefined}
                  />
                </div>
              </div>
              <h3 className={cn(
                "text-lg font-semibold mb-1",
                "text-foreground"
              )}>
                {leader.name}
              </h3>
              <p className={cn(
                "text-sm font-medium mb-3",
                "text-muted-foreground"
              )}>
                {leader.title}
              </p>
              <p className={cn(
                "text-sm",
                "text-muted-foreground"
              )}>
                {leader.bio}
              </p>
            </motion.div>
          ))}
        </div>

        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.4 }}
          className={cn(
            "mt-16 grid grid-cols-1 md:grid-cols-3 gap-8 border-t pt-16",
            "border-border"
          )}
        >
          <div className="text-center">
            <h4 className={cn(
              "text-3xl font-bold mb-2",
              "text-foreground"
            )}>
              2,500+
            </h4>
            <p className={"text-muted-foreground"}>
              OSS Projects
            </p>
          </div>
          <div className="text-center">
            <h4 className={cn(
              "text-3xl font-bold mb-2",
              "text-foreground"
            )}>
              130+
            </h4>
            <p className={"text-muted-foreground"}>
              Research Papers
            </p>
          </div>
          <div className="text-center">
            <h4 className={cn(
              "text-3xl font-bold mb-2",
              "text-foreground"
            )}>
              100+
            </h4>
            <p className={"text-muted-foreground"}>
              AI Model Weights
            </p>
          </div>
        </motion.div>
      </div>
    </section>
  );
}