---
import { Mountain, Waves, Bike, Fish } from 'lucide-astro';

const features = [
  { icon: Mountain, label: 'GR470 · Étape officielle' },
  { icon: Waves,    label: 'Canoë & kayak' },
  { icon: Bike,     label: 'VTT & VTTAE' },
  { icon: Fish,     label: 'Pêche à la mouche' },
];
---

<section class="py-20 bg-dark">
  <div class="max-w-6xl mx-auto px-6">
    <div class="grid grid-cols-2 md:grid-cols-5 gap-8 text-center">
      {features.map(({ icon: Icon, label }) => (
        <div class="flex flex-col items-center gap-4 text-white/60 group">
          <div class="w-14 h-14 flex items-center justify-center border border-white/20 group-hover:border-primary transition-colors">
            <Icon class="w-5 h-5" />
          </div>
          <span class="text-xs tracking-[0.2em] uppercase">{label}</span>
        </div>
      ))}
    </div>
  </div>
</section>