import { useTranslation } from 'react-i18next';
import { Shield, Globe2, BarChart3, Blocks, Mail, Tag, Users, Layers, Zap } from 'lucide-react';

const Icons = { Shield, Globe2, BarChart3, Blocks, Mail, Tag, Users, Layers, Zap };

export default function Features() {
  const { t } = useTranslation();

  return (
    <section className="pb-32 pt-12 bg-white text-gray-900">
      <div className="max-w-6xl mx-auto px-6">
        <div className="text-center mb-20">
          <h2 className="text-4xl md:text-6xl font-black mb-4">
            {t('features.title')}
          </h2>
          <p className="text-2xl md:text-3xl font-bold text-red-700">
            {t('features.subtitle')}
          </p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {t('features.items', { returnObjects: true }).map((feature, i) => {
            const Icon = Icons[feature.icon];
            return (
              <div key={i} className="card-hover bg-gray-100 rounded-2xl p-8 border border-gray-200">
                <div className="w-14 h-14 bg-red-700 rounded-xl flex items-center justify-center mb-6">
                  <Icon size={28} className="text-white" />
                </div>
                <h3 className="text-xl font-bold mb-3">{feature.title}</h3>
                <p className="text-gray-600 leading-relaxed">{feature.desc}</p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}