export default function UseCases() {

  return (
    <section id="benefits" className="py-20 bg-gradient-to-br from-blue-50 to-indigo-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 rounded-2xl">
        <h3 className="text-2xl lg:text-3xl font-bold text-center text-foreground mb-12">
          こんな業務に最適
        </h3>

        <div className="grid grid-cols-2 lg:grid-cols-4 gap-6">
          {[
            { icon: "🏢", title: "企業内調査", desc: "従業員満足度調査" },
            { icon: "🛍️", title: "顧客アンケート", desc: "商品・サービス評価" },
            { icon: "🎓", title: "教育機関", desc: "学習効果測定" },
            { icon: "📈", title: "マーケティング", desc: "市場調査・分析" }
          ].map((useCase, index) => (
            <div key={index} className="text-center space-y-3">
              <div className="text-4xl">{useCase.icon}</div>
              <h4 className="font-semibold text-foreground">{useCase.title}</h4>
              <p className="text-sm text-muted-foreground">{useCase.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}