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: "Multiplayer coming",
    description: "Challenge friends and see who has the bigger vocabulary.",
  },
];

const FeatureCards = () => {
  return (
    <section className="py-16">
      <h2 className="text-center text-3xl font-black tracking-tight text-(--color-text) mb-12">
        Why lila
      </h2>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {features.map(({ emoji, title, description }) => (
          <div
            key={title}
            className="flex flex-col gap-3 p-6 rounded-2xl border border-(--color-primary-light)"
          >
            <span className="text-3xl">{emoji}</span>
            <h3 className="text-lg font-bold text-(--color-text)">{title}</h3>
            <p className="text-sm text-(--color-text-muted) leading-relaxed">
              {description}
            </p>
          </div>
        ))}
      </div>
    </section>
  );
};

export default FeatureCards;