import Image from 'next/image'
import { H2, PS } from '@/components/UI/Texts'
import { Button } from '@/components/Button'

const members = [
  {
    src: '/images/team/kristof.jpg',
    alt: 'Kristof',
    name: 'Kristof De Spiegeleer',
    role: 'Co-Founder, CEO',
    bio:
      'Kristof is a technologist, philosopher, and builder dedicated to creating systems that serve the common good, with a deep focus on open collaboration, self-sovereignty, and planetary resilience.',
  },
  {
    src: '/images/team/adnan.jpg',
    alt: 'Adnan',
    name: 'Adnan Fatayerji',
    role: 'Telecom Strategic Relations',
    bio:
      'Adnan is a systems thinker and venture architect focused on reimagining how digital systems serve people, bridging innovation and impact through scalable, grounded execution.',
  },
  {
    src: '/images/team/chris.jpg',
    alt: 'Chris',
    name: 'Chris Camponovo',
    role: 'Director, Co-Founder of Zanzibar Digital Free Zone',
    bio:
      'Christopher is a strategic advisor and legal thinker working at the intersection of law, governance, and international development, helping design resilient and future-aligned frameworks.',
  },
  {
    src: '/images/team/florian.jpg',
    alt: 'Florian',
    name: 'Florian Fournier',
    role: 'Marketing & Business Development',
    bio:
      'Florian is a global venture builder and storyteller at the intersection of technology, education, and social impact.',
  },
]

export function Team() {
  return (
    <div className="bg-transparent py-24">
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        <div className="mx-auto flex max-w-4xl flex-col items-center gap-6 text-center">
          <H2 className="text-void">
            Great Ventures Start with Supported People.
          </H2>
          <PS className="text-void max-w-3xl">
            We invest in the human behind the ventures, because transformative companies grow from grounded, supported individuals.
          </PS>
          <Button variant="solid" color="green" className="w-fit mt-2">
            Meet the Team
          </Button>
        </div>
        <div className="mx-auto mt-16 max-w-6xl px-4 sm:px-6 lg:px-0">
          <dl className="grid grid-cols-1 gap-x-8 gap-y-8 lg:gap-y-16 lg:grid-cols-4">
            {members.map((member) => (
              <div key={member.src} className="flex flex-col">
                <dd className="flex flex-auto flex-col">
                  <div
                    className="group relative mx-auto max-w-xs overflow-hidden rounded-lg cursor-pointer"
                    tabIndex={0}
                    role="button"
                  >
                    <Image
                      src={member.src}
                      alt={member.alt}
                      width={480}
                      height={320}
                      className="h-auto w-full object-cover transition-transform duration-300 lg:group-hover:scale-105"
                    />
                    <div className="pointer-events-none absolute inset-0 flex flex-col justify-between bg-black/70 opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-active:opacity-100 group-focus-visible:opacity-100 p-5 text-left text-white">
                      <div>
                        <p className="text-lg font-semibold leading-snug">{member.name}</p>
                        <p className="text-sm mt-1 opacity-80">{member.role}</p>
                      </div>
                      <p className="mt-4 text-sm leading-relaxed">
                        {member.bio}
                      </p>
                    </div>
                  </div>
                </dd>
              </div>
            ))}
          </dl>
        </div>
      </div>
    </div>
  )
}
