const features = [
  {
    emoji: "📱",
    title: "Mobile-first",
    description: "Designed for your thumb. Play on the go, anytime.",
  },
  {
    emoji: "🌍",
    title: "5 languages",
    description:
      "English, Italian, German, French, Spanish — with more on the way.",
  },
  {
    emoji: "⚔️",
    title: "Real-time multiplayer",
    description: "Create a room, share the code, and race to the best score.",
  },
];

const FeatureCards = () => {
  return (
    <section className="py-14">
      <div className="text-center">
        <div className="inline-flex items-center gap-2 rounded-full bg-(--color-surface) border border-(--color-primary-light) px-4 py-1 text-xs font-bold tracking-widest uppercase text-(--color-primary)">
          Tiny rounds · big dopamine
        </div>
        <h2 className="text-3xl font-black tracking-tight text-(--color-text)">
          Why lila
        </h2>
        <p className="mt-3 text-(--color-text-muted) max-w-2xl mx-auto">
          Built to be fast to start, satisfying to finish, and fun to repeat.
        </p>
      </div>

      <div className="mt-10 grid grid-cols-1 md:grid-cols-3 gap-6">
        {features.map(({ emoji, title, description }) => (
          <div
            key={title}
            className="group relative overflow-hidden rounded-2xl border border-(--color-primary-light) bg-(--color-bg) p-6 shadow-sm hover:shadow-lg transition-shadow"
          >
            <div className="absolute -top-24 -right-24 h-48 w-48 rounded-full bg-(--color-primary) opacity-[0.08] blur-2xl transition-transform duration-300 group-hover:translate-x-2 group-hover:-translate-y-2" />
            <div className="flex items-center gap-4">
              <div className="relative h-12 w-12 rounded-2xl bg-(--color-surface) border border-(--color-primary-light) grid place-items-center text-2xl">
                <span aria-hidden>{emoji}</span>
              </div>
              <h3 className="text-lg font-bold text-(--color-text)">{title}</h3>
            </div>
            <p className="mt-3 text-sm text-(--color-text-muted) leading-relaxed">
              {description}
            </p>
            <div className="mt-5 flex flex-wrap gap-2">
              <span className="inline-flex items-center gap-2 rounded-full bg-(--color-surface) border border-(--color-primary-light) px-3 py-1 text-xs font-bold text-(--color-primary-dark)">
                <span className="h-1.5 w-1.5 rounded-full bg-(--color-accent)" />
                Instant feedback
              </span>
              <span className="inline-flex items-center gap-2 rounded-full bg-(--color-surface) border border-(--color-primary-light) px-3 py-1 text-xs font-bold text-(--color-primary-dark)">
                <span className="h-1.5 w-1.5 rounded-full bg-(--color-primary)" />
                Type-safe API
              </span>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
};

export default FeatureCards;