'use client'

import Image from 'next/image'

const team = [
  {
    name: 'Nompumelelo Zondi',
    role: 'Host & Manager',
    message:
      'I have been welcoming guests since 2004. For me, ubuntu means every visitor leaves as family. I love seeing their faces light up when they spot a zebra from the veranda.',
    image: 'https://images.pexels.com/photos/8837170/pexels-photo-8837170.jpeg?auto=compress&cs=tinysrgb&h=350',
  },
  {
    name: 'Thandiwe Mthembu',
    role: 'Hospitality Coordinator',
    message:
      'Making sure every room is perfect and every breakfast is warm is my joy. KwaNtofontofo is a home, and I take pride in that feeling.',
    image: 'https://images.pexels.com/photos/8837170/pexels-photo-8837170.jpeg?auto=compress&cs=tinysrgb&h=350',
  },
  {
    name: 'Sipho Dlamini',
    role: 'Grounds & Maintenance',
    message:
      'I keep the garden, pool, and braai area pristine. Our guests deserve a beautiful outside space to relax and connect with nature.',
    image: 'https://images.pexels.com/photos/8837170/pexels-photo-8837170.jpeg?auto=compress&cs=tinysrgb&h=350',
  },
]

export default function UbuntuTeamSection() {
  return (
    <section data-vula-section="ubuntuteam" id="ubuntu-team" className="bg-[#FDF6EC] py-24 px-4">
      <div className="max-w-6xl mx-auto">
        <h2 className="text-4xl font-bold text-[#2C1810] text-center mb-4">The People Behind the Welcome</h2>
        <p className="text-center text-[#2C1810]/70 mb-12 max-w-xl mx-auto">
          A small team with big hearts – our staff live the spirit of ubuntu every day.
        </p>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {team.map((member, i) => (
            <div
              key={i}
              className="rounded-xl overflow-hidden bg-white shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-lifted)] hover:-translate-y-0.5 transition-all duration-200 ease-out"
            >
              <div className="aspect-[4/5] overflow-hidden">
                <Image
                  src={member.image}
                  alt={member.name}
                  width={400}
                  height={500}
                  className="object-cover w-full h-full"
                />
              </div>
              <div className="p-5">
                <h3 className="text-lg font-bold text-[#2C1810]">{member.name}</h3>
                <p className="text-sm font-medium text-[#E67E22] mb-3">{member.role}</p>
                <p className="text-sm text-[#2C1810]/70 leading-relaxed italic">"{member.message}"</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}