/* Experience timeline — i18n-aware */

const EXPERIENCE_KEYS = [
  { key: 'freelance', stack: ['TypeScript', 'Vue', 'React', 'AdonisJS', 'Langchain', 'PostgreSQL', 'Stripe'] },
  { key: 'personal',  stack: ['Rust', 'Axum', 'TypeScript', 'Three.js', 'Python'] },
  { key: 'school42',  stack: ['C', 'C++', 'Algorithms', 'Unix'] },
];

function Experience() {
  const t = window.t;
  const title = t('experience.sectionTitle');
  return (
    <section className="section" id="experience">
      <div className="container">

        <div className="section-label reveal">
          <span className="num">04</span>
          <span>{t('experience.label')}</span>
          <span className="bar" />
          <span>{t('experience.tagline')}</span>
        </div>

        <h2 className="section-title reveal">
          {title.before}<em>{title.em}</em>{title.after}
        </h2>
        <p className="section-lede reveal delay-1">{t('experience.lede')}</p>

        <div className="exp-timeline">
          {EXPERIENCE_KEYS.map((x, i) => (
            <div className="exp-item reveal" key={x.key} style={{ transitionDelay: `${i * 60}ms` }}>
              <div className="exp-period">{t(`experience.items.${x.key}.period`)}</div>
              <div className="exp-body">
                <h3 className="exp-role">
                  {t(`experience.items.${x.key}.role`)} <span className="at">{t('experience.at')}</span>{' '}
                  <span className="exp-company">{t(`experience.items.${x.key}.company`)}</span>
                </h3>
                <p className="exp-desc">{t(`experience.items.${x.key}.desc`)}</p>
                <div className="exp-stack">
                  {x.stack.map(s => <span className="stack-chip" key={s}>{s}</span>)}
                </div>
              </div>
            </div>
          ))}
        </div>

      </div>
    </section>
  );
}

window.Experience = Experience;