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

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

  return (
    <section id="processes" className="processes-section" ref={sectionRef}>
      <div className="processes-section__container">
        <h2 className="processes-section__title reveal-item">{t.title}</h2>
        <p className="processes-section__intro reveal-item">{t.intro}</p>
        <ul className="processes-section__list" aria-label={t.title}>
          {t.items.map((item, index) => (
            <li
              key={item.text.substring(0, 40)}
              className="processes-section__item reveal-item"
              style={{ '--reveal-delay': `${index * 80}ms` } as React.CSSProperties}
            >
              <p className="processes-section__text">{item.text}</p>
            </li>
          ))}
        </ul>
        <p className="processes-section__outro reveal-item">{t.outro}</p>
      </div>
    </section>
  );
}
