import { useScrollReveal } from '../../hooks/useScrollReveal';
import { useLanguage } from '../../contexts/LanguageContext';

export default function ReasonsSection() {
  const { texts } = useLanguage();
  const t = texts.landingReasons;
  const sectionRef = useScrollReveal();

  return (
    <section id="reasons" className="reasons-section" ref={sectionRef}>
      <div className="reasons-section__container">
        <h2 className="reasons-section__title reveal-item">
          {t.title}
        </h2>




        <ul className="reasons-section__list" aria-label="Reasons">
          {t.reasons.map((item, index) => (
            <li
              key={item.stat}
              className="reasons-section__item reveal-item"
              style={{ '--reveal-delay': `${index * 100}ms` } as React.CSSProperties}
            >
              <span className="reasons-section__stat" aria-hidden="true">
                {item.stat}
              </span>
              <p className="reasons-section__text">{item.text}</p>
            </li>
          ))}
        </ul>

        <p className="reasons-section__outro reveal-item">
          {t.outro}
        </p>
      </div>
    </section>
  );
}
