/* ============ EXPERIENCES — a day at The Last Stop (timeline) ============ */
function Experiences() {
  const S = window.SITE;
  return (
    <section id="experiences" className="section experiences">
      <div className="container">
        <div className="section-head">
          <Eyebrow>A day at The Last Stop</Eyebrow>
          <Reveal as="h2" className="display">From first light to <em className="muted-em">last star.</em></Reveal>
          <Reveal as="p" delay={100}>No two days are the same up here — but the good ones tend to follow a rhythm like this.</Reveal>
        </div>

        <div className="timeline">
          <span className="tl-line" />
          {S.experiences.map((e, i) => (
            <Reveal key={e.title} className="tl-item" delay={i * 80}>
              <span className="tl-node"><Icon name="location-dot" /></span>
              <span className="tl-time serif">{e.time}</span>
              <div className="tl-card">
                <h3 className="serif">{e.title}</h3>
                <p>{e.body}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>

      <style>{`
        .timeline { position: relative; margin-top: 20px; padding-left: 4px; }
        .tl-line { position: absolute; left: 90px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--primary), var(--accent)); opacity: .5; }
        .tl-item { display: grid; grid-template-columns: 70px 30px 1fr; align-items: start; gap: 20px; padding: 16px 0; }
        .tl-time { font-size: 1.4rem; color: var(--primary); text-align: right; padding-top: 14px; }
        html[data-theme="dark"] .tl-time { text-shadow: 0 0 16px var(--glow); }
        .tl-node { width: 30px; height: 30px; border-radius: 50%; background: var(--surface); border: 2px solid var(--primary); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 12px; margin-top: 16px; z-index: 1; }
        html[data-theme="dark"] .tl-node { box-shadow: 0 0 18px -2px var(--glow); }
        .tl-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 22px 26px; transition: transform .35s var(--ease), border-color .35s; }
        .tl-item:hover .tl-card { transform: translateX(6px); border-color: var(--primary); }
        .tl-card h3 { font-size: 1.45rem; margin-bottom: 6px; }
        .tl-card p { color: var(--text-2); font-size: 14.5px; }
        @media (max-width: 620px) {
          .tl-line { left: 15px; }
          .tl-item { grid-template-columns: 30px 1fr; gap: 14px; }
          .tl-time { grid-column: 2; text-align: left; padding-top: 0; font-size: 1.1rem; color: var(--text-3); }
          .tl-node { grid-row: 1; grid-column: 1; margin-top: 0; }
          .tl-card { grid-column: 2; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Experiences });