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

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

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

        <p className="winnings-section__intro reveal-item">
          {t.intro}
        </p>

        <ul className="winnings-section__list" aria-label={t.title}>
          {t.items.map((item, index) => (
            <li
              key={item.text.substring(0, 40)}
              className="winnings-section__item reveal-item"
              style={{ '--reveal-delay': `${index * 80}ms` } as React.CSSProperties}
            >
              <p className="winnings-section__text">{item.text}</p>
            </li>
          ))}
        </ul>

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

