---
// Lucide icons inline SVG — no emojis
const features = [
  {
    // Lucide: Zap
    icon: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg>`,
    title: 'Partidas de 15-20 minutos',
    description: 'Una carrera completa en el tiempo de un cafe. Sin sesiones de 2 horas.',
    iconBg: 'bg-primary/20',
    iconColor: 'text-primary',
  },
  {
    // Lucide: Car (using a racing-appropriate icon)
    icon: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2"/><circle cx="7" cy="17" r="2"/><path d="M9 17h6"/><circle cx="17" cy="17" r="2"/></svg>`,
    title: 'Mecanicas de automovilismo real',
    description: 'Gestion de neumaticos, pit stops, coche de seguridad. Las mecanicas reales del motorsport son el motor del juego.',
    iconBg: 'bg-accent/20',
    iconColor: 'text-accent',
  },
  {
    // Lucide: Users
    icon: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>`,
    title: 'Online con amigos',
    description: 'Crea una sala, comparte el enlace, a correr. Multijugador desde cualquier dispositivo.',
    iconBg: 'bg-blue-500/20',
    iconColor: 'text-blue-400',
  },
  {
    // Lucide: Ban
    icon: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m4.9 4.9 14.2 14.2"/></svg>`,
    title: 'Sin pay-to-win',
    description: 'Mismas cartas para todos. Aqui gana quien juega mejor. Punto.',
    iconBg: 'bg-green-500/20',
    iconColor: 'text-green-400',
  },
];
---

<section class="px-4 py-16 md:py-24">
  <div class="max-w-4xl mx-auto">
    <h2 class="font-heading text-text text-3xl md:text-4xl font-bold text-center mb-10 tracking-tight">
      Por que Racing Cards
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 md:gap-6">
      {features.map((feature) => (
        <div class="bg-surface p-6 rounded-xl border border-white/5 flex flex-col gap-3 hover:border-accent/20 transition-colors duration-200">
          <div class={`w-10 h-10 rounded-lg ${feature.iconBg} ${feature.iconColor} flex items-center justify-center`}>
            <Fragment set:html={feature.icon} />
          </div>
          <h3 class="font-heading text-text font-bold text-lg">{feature.title}</h3>
          <p class="text-text-muted text-sm leading-relaxed">{feature.description}</p>
        </div>
      ))}
    </div>
  </div>
</section>
