'use client'

import Link from "next/link"
import Image from "next/image"
import Button from "@/components/ui/Button"
import { Compass, Music, Star, UtensilsCrossed } from 'lucide-react'

const activities = [
  {
    title: "Traditional Dance & Drumming",
    description: "Join local Venda dancers in a rhythmic evening under the stars. Learn the tshikona reed dance or beat the djembe around a fire.",
    icon: Music,
    image: "https://images.pexels.com/photos/36019668/pexels-photo-36019668.jpeg?auto=compress&cs=tinysrgb&h=350",
  },
  {
    title: "Village Walk & Storytelling",
    description: "Walk through the neighbouring Makhado village with an elder guide who shares oral histories, folklore, and the meaning behind Venda symbols.",
    icon: Compass,
    image: "https://images.pexels.com/photos/30767896/pexels-photo-30767896.jpeg?auto=compress&cs=tinysrgb&h=350",
  },
  {
    title: "Home-Cooked Venda Cuisine",
    description: "Taste dishes passed down through generations: morogo with pap, tshiovha (pumpkin leaves), and freshly brewed mageu. Cook alongside our chefs.",
    icon: UtensilsCrossed,
    image: "https://images.pexels.com/photos/8168571/pexels-photo-8168571.png?auto=compress&cs=tinysrgb&h=350",
  },
  {
    title: "Craft Workshops",
    description: "Try your hand at clay pottery, basket weaving, or beadwork with Venda artisans. Take home your own creation as a souvenir.",
    icon: Star,
    image: "https://images.pexels.com/photos/1973889/pexels-photo-1973889.jpeg?auto=compress&cs=tinysrgb&h=350",
  },
]

export default function VendaExperiencesSection() {
  return (
    <section data-vula-section="vendaexperiences" id="venda-experiences" className="py-20 lg:py-28" style={{ backgroundColor: "#f9f7f4" }}>
      <div className="container mx-auto px-4">
        <div className="text-center mb-14">
          <span className="inline-block text-[#16a34a] text-sm md:text-base tracking-widest uppercase font-semibold mb-2">
            Cultural Immersion
          </span>
          <h2 className="text-3xl md:text-5xl font-bold" style={{ color: "#211c0d" }}>
            Beyond the Lodge
          </h2>
          <p className="mt-4 max-w-2xl mx-auto" style={{ color: "#211c0d/80" }}>
            Step into daily Venda life — each experience is led by community members who open their homes and
            their hearts.
          </p>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {activities.map((activity, i) => {
            const Icon = activity.icon
            return (
              <div
                key={i}
                className="group relative rounded-2xl overflow-hidden bg-white shadow-md hover:shadow-xl transition-all duration-300"
              >
                <div className="relative h-48 overflow-hidden">
                  <Image
                    src={activity.image}
                    alt={activity.title}
                    fill
                    sizes="(max-width: 768px) 100vw, 50vw"
                    className="object-cover transition-transform duration-500 group-hover:scale-105"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent" />
                </div>
                <div className="p-6">
                  <div className="flex items-center gap-3 mb-3">
                    <div className="p-2 rounded-lg" style={{ backgroundColor: "#d4af37/15" }}>
                      <Icon className="w-5 h-5" style={{ color: "#d4af37" }} />
                    </div>
                    <h3 className="text-lg font-bold" style={{ color: "#211c0d" }}>
                      {activity.title}
                    </h3>
                  </div>
                  <p className="text-sm leading-relaxed" style={{ color: "#211c0d/70" }}>
                    {activity.description}
                  </p>
                  <div className="mt-5">
                    <Link href="/booking">
                      <Button variant="outline" size="sm" className="w-full">
                        Enquire Now
                      </Button>
                    </Link>
                  </div>
                </div>
              </div>
            )
          })}
        </div>

        {/* Contact CTA */}
        <div className="mt-16 text-center">
          <p className="text-sm" style={{ color: "#211c0d/60" }}>
            All experiences are seasonal — contact us to plan your itinerary.
          </p>
          <p className="text-sm mt-1" style={{ color: "#211c0d/60" }}>
            +27 15 001 2345 &nbsp;·&nbsp; info@vavendalodge.co.za
          </p>
        </div>
      </div>
    </section>
  )
}