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

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

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

        <div className="experience-section__body">
          {t.paragraphs.map((paragraph, index) => (
            <p
              key={paragraph.substring(0, 40)}
              className={`experience-section__paragraph reveal-item${index === t.paragraphs.length - 1 ? ' experience-section__paragraph--outro' : ''}`}
              style={{ '--reveal-delay': `${index * 100}ms` } as React.CSSProperties}
            >
              {paragraph}
            </p>
          ))}
        </div>
      </div>
    </section>
  );
}

