import { IoIosLink, IoIosCall, IoIosAnalytics, IoIosFingerPrint, IoIosBook, IoIosChatbubbles, IoIosDesktop } from 'react-icons/io';
import styles from './SpeechInfo.module.css';
import { useLanguage } from '../../providers/language/LanguageContext';

function SpeechInfo() {
  const { t } = useLanguage();
  
  const features = [
    {
      key: 'va',
      icon: IoIosCall,
      title: t('speech.info.va'),
      description: t('speech.info.va_description'),
      color: 'var(--color-secondary)'
    },
    {
      key: 'sa',
      icon: IoIosAnalytics,
      title: t('speech.info.sa'),
      description: t('speech.info.sa_description'),
      color: 'var(--color-secondary)'
    },
    {
      key: 'vb',
      icon: IoIosFingerPrint,
      title: t('speech.info.vb'),
      description: t('speech.info.vb_description'),
      color: 'var(--color-secondary)'
    },
    {
      key: 'ka',
      icon: IoIosBook,
      title: t('speech.info.ka'),
      description: t('speech.info.ka_description'),
      color: 'var(--color-secondary)'
    },
    {
      key: 'cp',
      icon: IoIosChatbubbles,
      title: t('speech.info.cp'),
      description: t('speech.info.cp_description'),
      color: 'var(--color-secondary)'
    },
    {
      key: 'aa',
      icon: IoIosDesktop,
      title: t('speech.info.aa'),
      description: t('speech.info.aa_description'),
      color: 'var(--color-secondary)'
    }
  ];

  return (
    <div className={styles.container}>
      <div className={styles.content}>
        <div className={styles.features}>
          {features.map((feature) => (
            <div 
              key={feature.key} 
              className={`${styles.feature}`}
              style={{ '--feature-color': feature.color } as React.CSSProperties}
            >
                <div className={styles.featureIconContainer}>
                  <span className={styles.featureAcronym}>{feature.key.toUpperCase()}</span>
                </div>
                <h3 className={styles.featureTitle}>{feature.title}</h3>
                <p className={styles.featureDescription}>{feature.description}</p>
            </div>
          ))}
        </div>

         <div className={styles.partnerInfo}>
           <h2>{t('speech.info.about')}</h2>
           <p className={styles.introText}>
             {t('speech.info.about_intro')}
           </p>
           
           <div className={styles.featureSection}>
             <div className={styles.featureItem}>
               <h3>🎯 {t('speech.info.workflow_title')}</h3>
               <p>{t('speech.info.workflow_description')}</p>
             </div>
             
             <div className={styles.featureItem}>
               <h3>🤖 {t('speech.info.ai_title')}</h3>
               <p>{t('speech.info.ai_description')}</p>
             </div>
             
             <div className={styles.featureItem}>
               <h3>🔄 {t('speech.info.sync_title')}</h3>
               <p>{t('speech.info.sync_description')}</p>
             </div>
             
             <div className={styles.featureItem}>
               <h3>💰 {t('speech.info.cost_title')}</h3>
               <p>{t('speech.info.cost_description')}</p>
             </div>
           </div>
           
           <div className={styles.partnerLink}>
             <IoIosLink className={styles.linkIcon} />
             <a href="https://spitch.ai" target="_blank" rel="noopener noreferrer">
               {t('speech.info.about_link')}
             </a>
           </div>
         </div>
      </div>
    </div>
  );
}

export default SpeechInfo;
