// ============ EXPERIENCE TIMELINE ============
function Experience() {
  const { t } = window.useLang();
  const ref = window.useReveal();
  return (
    <section id="experience" ref={ref}>
      <div className="container">
        <div className="fade-up">
          <span className="kicker">{t.exp.kicker}</span>
          <h2 className="section-title">{t.exp.h2}</h2>
        </div>
        <div className="timeline">
          {window.EXPERIENCE.map((e, i) => (
            <div key={i} className={`tl-item fade-up ${e.featured ? 'featured' : ''}`}>
              <div className={`tl-card glass ${e.featured ? 'featured' : ''} ${i % 2 === 0 ? 'left' : 'right'}`}>
                <div className="head">
                  <div className="avatar">{e.co.split(/[\s·]/).filter(Boolean).slice(0,2).map(w => w[0]).join('').slice(0,2).toUpperCase()}</div>
                  <div style={{flex:1, minWidth:0}}>
                    <h4>{e.role}</h4>
                    <div className="meta">{e.co} · {e.dates}</div>
                  </div>
                  {e.featured && <span className="badge-feat">★ Active</span>}
                </div>
                <ul>
                  {e.bullets.map((b, j) => <li key={j}>{b}</li>)}
                </ul>
              </div>
              <div className="dot" />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Experience = Experience;