// Experience timeline
const Experience = () => {
  const [ref, visible] = window.useReveal();
  const data = window.PORTFOLIO_DATA;

  return (
    <section id="experience">
      <div className="container">
        <div ref={ref} className={`timeline reveal-stagger ${visible ? "visible" : ""}`}>
          {data.experience.map((item, i) => (
            <div key={i} className="timeline-item">
              <div className="timeline-dot"></div>
              <div className="timeline-period">{item.period}</div>
              <div className="timeline-role">{item.role}</div>
              <div className="timeline-company">
                <span className="at">@</span>
                {item.company}
                {item.location && (
                  <span style={{ color: "var(--text-dim)", marginLeft: 10 }}>· {item.location}</span>
                )}
              </div>
              <p className="timeline-desc">{item.desc}</p>
              <div className="timeline-tags">
                {item.tags.map((tag, j) => (
                  <span key={j} className="tag">{tag}</span>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Experience = Experience;