function Timeline() {
  const items = [
    { src: '/assets/how-it-works/timeline-01.png', alt: 'Week 1' },
    { src: '/assets/how-it-works/timeline-02.png', alt: 'Week 2–3' },
    { src: '/assets/how-it-works/timeline-03.png', alt: 'Week 4' },
    { src: '/assets/how-it-works/timeline-04.png', alt: 'Month 3' },
  ];

  const [active, setActive] = React.useState(0);
  const trackRef = React.useRef(null);

  function onTouchStart(e) {
    trackRef.current._touchX = e.touches[0].clientX;
  }

  function onTouchEnd(e) {
    const dx = e.changedTouches[0].clientX - (trackRef.current._touchX || 0);
    if (dx < -40 && active < items.length - 1) setActive(active + 1);
    if (dx >  40 && active > 0)               setActive(active - 1);
  }

  return (
    <section style={{
      padding: 'clamp(96px, 13vw, 160px) clamp(24px, 5vw, 64px)',
      background: 'var(--bg-canvas)',
    }}>
      <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
        <p className="eyebrow-text" style={{ color: 'var(--fg-accent)', marginBottom: '20px' }}>
          Timeline
        </p>
        <h2 className="t-h2" style={{ margin: '0 0 clamp(64px, 10vw, 96px)' }}>
          What to expect
        </h2>

        {/* Desktop / tablet grid */}
        <div className="tl-grid">
          {items.map((item, i) => (
            <div key={i} className="tl-img-wrap">
              <img src={item.src} alt={item.alt} />
            </div>
          ))}
        </div>

        {/* Mobile carousel */}
        <div className="tl-carousel">
          <div
            ref={trackRef}
            className="tl-track"
            style={{ transform: `translateX(calc(-${active * 100}% - ${active * 16}px))` }}
            onTouchStart={onTouchStart}
            onTouchEnd={onTouchEnd}
          >
            {items.map((item, i) => (
              <div key={i} className="tl-slide">
                <div className="tl-img-wrap">
                  <img src={item.src} alt={item.alt} />
                </div>
              </div>
            ))}
          </div>
          <div className="tl-dots">
            {items.map((_, i) => (
              <button
                key={i}
                className={'tl-dot' + (i === active ? ' tl-dot-active' : '')}
                onClick={() => setActive(i)}
                aria-label={`Slide ${i + 1}`}
              />
            ))}
          </div>
        </div>
      </div>

      <style>{`
        /* Tablet default: 2×2 grid */
        .tl-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: clamp(24px, 4vw, 40px);
        }
        .tl-carousel { display: none; }

        /* Mobile: carousel */
        @media (max-width: 639px) {
          .tl-grid    { display: none; }
          .tl-carousel { display: block; overflow: hidden; }
        }

        /* Desktop: single row */
        @media (min-width: 1024px) {
          .tl-grid { grid-template-columns: repeat(4, 1fr); }
        }

        .tl-img-wrap {
          border-radius: clamp(16px, 2vw, 24px);
          overflow: hidden;
          aspect-ratio: 3 / 4;
          background: var(--grey-100);
        }
        .tl-img-wrap img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }

        /* Carousel */
        .tl-track {
          display: flex;
          gap: 16px;
          transition: transform 300ms ease;
          will-change: transform;
        }
        .tl-slide {
          flex: 0 0 100%;
        }
        .tl-dots {
          display: flex;
          justify-content: center;
          gap: 8px;
          margin-top: 24px;
        }
        .tl-dot {
          width: 8px; height: 8px;
          border-radius: 999px;
          border: none;
          background: var(--grey-300);
          cursor: pointer;
          padding: 0;
          transition: background 150ms ease, width 150ms ease;
        }
        .tl-dot-active {
          background: var(--fg-primary);
          width: 24px;
        }
      `}</style>
    </section>
  );
}

window.Timeline = Timeline;