/* Timeline.jsx — section summary: pilot circle ← dashed line w/ 4 thumbs → end circle */
function Timeline() {
  return (
    <section className="timeline-sec" id="timeline">
      <div className="timeline-head">
        <h2 className="timeline-title">TI.<span>MEME</span>.LINE</h2>
        <p>
          From first deployment to cultural signal in 2021, Sgt Pepe World has moved through memes, art, objects, events, and people. The timeline is not just a record of dates, it is proof of presence.
        </p>
        <p style={{ marginTop: 18 }}>
          Every year adds another layer.<br />Every moment becomes part of the lore.
        </p>
        <div className="cta">
          <a href="pages/timeline.html" className="btn on-dark">explore the timeline</a>
        </div>
      </div>

      <div className="timeline-rail">
        <div className="tl-circle">
          <img src="assets/t-sgtplane.png" alt="Sgt. Pepe pilot, 2021" />
        </div>

        <div className="tl-middle">
          <span className="tl-side-label left">Est. 2021</span>
          <div className="tl-line" />
          <span className="tl-side-label right">2026</span>

          <div className="tl-thumb up">
            <img src="assets/timeline2.png" alt="" />
            <div className="lbl">MoMA</div>
          </div>
          <div className="tl-thumb down">
            <img src="assets/timeline3.png" alt="" />
            <div className="lbl">Coffee</div>
          </div>
          <div className="tl-thumb up">
            <img src="assets/timeline5.png" alt="" />
            <div className="lbl">Comic Book</div>
          </div>
          <div className="tl-thumb down">
            <img src="assets/timeline4.png" alt="" />
            <div className="lbl">World Mural</div>
          </div>
        </div>

        <div className="tl-circle">
          <img src="assets/timeline6.png" alt="World tour, 2026" />
        </div>
      </div>

      <div className="timeline-mobile">
        <div className="tm-node tm-end"><img src="assets/t-sgtplane.png" alt="" /><span>EST. 2021</span></div>
        <div className="tm-line" />
        <div className="tm-node"><img src="assets/timeline2.png" alt="" /><span>MoMA</span></div>
        <div className="tm-line" />
        <div className="tm-node"><img src="assets/timeline3.png" alt="" /><span>Coffee</span></div>
        <div className="tm-line" />
        <div className="tm-node"><img src="assets/timeline4.png" alt="" /><span>World Mural</span></div>
        <div className="tm-line" />
        <div className="tm-node"><img src="assets/timeline5.png" alt="" /><span>Comic Book</span></div>
        <div className="tm-line" />
        <div className="tm-node tm-end"><img src="assets/timeline6.png" alt="" /><span>2026</span></div>
      </div>
    </section>
  );
}
window.Timeline = Timeline;