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

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

  return (
    <section id="references" className="references-section" ref={sectionRef}>
      <div className="references-section__container">
        <h2 className="references-section__title reveal-item">{t.title}</h2>
        <ul className="references-section__list" aria-label={t.title}>
          {t.items.map((item, index) => (
            <li
              key={index}
              className="references-section__item reveal-item"
              style={{ '--reveal-delay': `${index * 100}ms` } as React.CSSProperties}
            >
              <p className="references-section__quote">{item.referenceText}</p>
              <div className="references-section__author">
                <p className="references-section__name">{item.name}</p>
                <p className="references-section__position">{item.position}</p>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}
