'use client'

import { Card } from "@/components/ui/Card"
import Button from "@/components/ui/Button"
import Image from "next/image"
import Link from "next/link"

const experiences = [
  {
    id: "safari-walk",
    title: "Guided Safari Walk",
    description: "Track lion prides and elephant herds with a KPSGA-certified guide — just you and the wild.",
    image: "https://images.pexels.com/photos/2854553/pexels-photo-2854553.jpeg?auto=compress&cs=tinysrgb&h=350",
    price: "KSh 8,500 per person",
  },
  {
    id: "village-visit",
    title: "Maasai Village Immersion",
    description: "Spend a morning with a boma: learn beadwork, milking, and the art of jumping dance.",
    image: "https://images.pexels.com/photos/28933066/pexels-photo-28933066.jpeg?auto=compress&cs=tinysrgb&h=350",
    price: "KSh 4,500 per person",
  },
  {
    id: "sundowner-dinner",
    title: "Sundowner Bush Dinner",
    description: "A private four-course feast on the escarpment — lanterns, gin tonics, and a horizon of fire.",
    image: "https://images.pexels.com/photos/7946907/pexels-photo-7946907.jpeg?auto=compress&cs=tinysrgb&h=350",
    price: "KSh 12,000 per couple",
  },
]

export default function MaasaiExperiencesSection() {
  return (
    <section data-vula-section="maasaiexperiences" id="experiences" className="py-20 bg-[#f9f4f4]">
      <div className="max-w-7xl mx-auto px-4">
        <h2 className="font-bricolage text-3xl md:text-5xl font-bold text-[#210d0d] text-center mb-4">
          Beyond the Suite
        </h2>
        <p className="font-lora text-center text-[#210d0d]/70 max-w-2xl mx-auto mb-12 italic">
          Curated adventures that bring the Mara into your soul — from dawn tracking to starlit feasts.
        </p>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {experiences.map((exp) => (
            <Card key={exp.id} className="overflow-hidden rounded-xl shadow-md bg-white border border-[#e2d4d4] transition-all duration-200 ease-out hover:shadow-lg hover:-translate-y-1">
              <div className="relative h-48 overflow-hidden">
                <Image
                  src={exp.image}
                  alt={exp.title}
                  fill
                  sizes="(max-width: 768px) 100vw, 33vw"
                  className="object-cover hover:scale-105 transition-transform duration-500 ease-out"
                />
              </div>
              <div className="p-5">
                <h3 className="font-bricolage text-xl font-semibold text-[#210d0d] mb-2">{exp.title}</h3>
                <p className="font-lora text-sm text-[#210d0d]/70 mb-4 leading-relaxed">{exp.description}</p>
                <div className="flex items-center justify-between">
                  <span className="font-bricolage text-lg font-bold text-[#d4af37]">{exp.price}</span>
                  <Link href={`/booking/${exp.id}`}>
                    <Button variant="outline" size="sm" className="border-[#dc2626] text-[#dc2626] hover:bg-[#dc2626] hover:text-[#f9f4f4] rounded-lg transition-all duration-200 ease-out">
                      Book Now
                    </Button>
                  </Link>
                </div>
              </div>
            </Card>
          ))}
        </div>
        <div className="text-center mt-12">
          <Link href="/booking">
            <Button variant="secondary" size="lg" className="bg-[#0f52ba] hover:bg-[#0a3d8f] text-[#f9f4f4] px-8 py-3 rounded-xl shadow-md transition-all duration-200 ease-out">
              View All Experiences
            </Button>
          </Link>
        </div>
      </div>
    </section>
  )
}