'use client'

import Image from 'next/image'

export default function GuestVoicesSection() {
  const voices = [
    {
      quote: "Watching elephants drink from the waterhole at dusk — our children will never forget that quiet magic.",
      name: "The Dlamini Family",
      location: "Johannesburg",
      image: "https://images.pexels.com/photos/37769918/pexels-photo-37769918.jpeg?auto=compress&cs=tinysrgb&h=350"
    },
    {
      quote: "Marietjie's home-baked bread with apricot jam, fresh from the oven... pure Thornveld warmth.",
      name: "Sarah & Tom",
      location: "London, UK",
      image: "https://images.pexels.com/photos/7431701/pexels-photo-7431701.jpeg?auto=compress&cs=tinysrgb&h=350"
    },
    {
      quote: "Learning to track spoor with ranger Thabo — warthog, kudu, even a leopard's pugmark. Real bush school.",
      name: "Jenna & Ryan",
      location: "Cape Town",
      image: "https://images.pexels.com/photos/7431701/pexels-photo-7431701.jpeg?auto=compress&cs=tinysrgb&h=350"
    }
  ]

  return (
    <section id="guest-voices" data-vula-section="guestvoices" className="py-20 bg-[#f5f5dc]">
      <div className="max-w-7xl mx-auto px-4">
        <h2 className="font-heading text-3xl md:text-4xl text-[#1b210d] mb-12 text-center">
          Entries from our veranda guestbook
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {voices.map((voice, i) => (
            <div
              key={i}
              className="bg-[#f7f9f4] rounded-2xl p-6 shadow-soft border border-[#dee2d4]"
            >
              <div className="flex items-center mb-4">
                <div className="relative w-12 h-12 rounded-full overflow-hidden mr-3">
                  <Image
                    src={voice.image}
                    alt={`Photo of ${voice.name}`}
                    fill
                    sizes="48px"
                    className="object-cover"
                  />
                </div>
                <div>
                  <p className="font-semibold text-[#1b210d]">{voice.name}</p>
                  <p className="text-sm text-[#8b5a3c]">{voice.location}</p>
                </div>
              </div>
              <p className="font-serif italic text-[#1b210d]/80 leading-relaxed">
                &ldquo;{voice.quote}&rdquo;
              </p>
              <div className="mt-4 h-px bg-[#dee2d4] w-16" />
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}