import React from 'react'
import { Reveal } from '../Reveal'
import { SectionHeading } from '../SectionHeading'
import { useSectionHeading, useSite } from '../../api'

export function Team() {
  const { team } = useSite()
  const heading = useSectionHeading('team')
  return (
    <section className="bg-ink py-24 lg:py-32" aria-labelledby="team-title">
      <div className="mx-auto max-w-site px-6 lg:px-10">
        <SectionHeading
          title={heading.title}
          lead={heading.lead}
          align="center"
        />

        <div className="mt-16 grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
          {team.map((member, i) => (
            <Reveal key={member.name} delay={0.06 * i} className="h-full">
              <article className="group flex h-full flex-col items-center border border-ivory/10 bg-char p-10 text-center transition-[transform,box-shadow,border-color] duration-500 ease-out hover:-translate-y-3 hover:border-copper/50 hover:shadow-lift">
                <div className="flex h-24 w-24 items-center justify-center rounded-full border border-copper/30 text-3xl font-bold text-copper transition-colors duration-500 group-hover:border-copper">
                  {member.name.trim().charAt(0)}
                </div>
                <h3 className="mt-8 text-lg font-bold text-ivory">{member.name}</h3>
                <p className="mt-2 text-sm font-light text-copper">{member.role}</p>
                <p className="mt-6 border-t border-ivory/10 pt-6 text-sm font-light text-ivory/60">
                  {member.bio}
                </p>
              </article>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  )
}