import { useTranslations } from 'next-intl';
import { ShieldCheck, Zap, Cpu } from 'lucide-react';
import styles from './Features.module.css';

export default function Features() {
    const t = useTranslations('Features');

    const features = [
        {
            icon: <ShieldCheck size={32} />,
            title: t('xmssTitle'),
            desc: t('xmssDesc')
        },
        {
            icon: <Zap size={32} />,
            title: t('mldsaTitle'),
            desc: t('mldsaDesc')
        },
        {
            icon: <Cpu size={32} />,
            title: t('evmTitle'),
            desc: t('evmDesc')
        }
    ];

    return (
        <section className={styles.section}>
            <div className={styles.container}>
                <h2 className={styles.title}>{t('title')}</h2>
                <div className={styles.grid}>
                    {features.map((feature, index) => (
                        <div key={index} className={styles.card}>
                            <div className={styles.iconWrapper}>{feature.icon}</div>
                            <h3 className={styles.cardTitle}>{feature.title}</h3>
                            <p className={styles.cardDesc}>{feature.desc}</p>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
}

