// Journey — timeline rows
function Journey() {
  const data = window.PORTFOLIO_DATA.journey;
  return (
    <section className="journey" id="journey">
      <div className="container">
        <div className="journey__head" data-reveal>
          <span className="eyebrow">PROFESSIONAL JOURNEY</span>
          <h2 className="h-section journey__title" style={{ marginTop: 18 }}>
            從視覺設計 走進產品設計的這幾年。
          </h2>
        </div>
        <div className="journey__list">
          {data.map((row, i) => (
            <div className="journey-row" key={i} data-reveal data-reveal-delay={String((i % 4) + 1)}>
              <div className="journey-row__date">{row.date}</div>
              <div className="journey-row__role">
                <span className="journey-row__company">{row.company}</span>
                <span className="journey-row__title">{row.title}</span>
              </div>
              <p className="journey-row__desc" dangerouslySetInnerHTML={{ __html: row.desc }} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Journey = Journey;