// DayRhythm.jsx — the "A day in the life" horizontal rhythm strip.
// On desktop it's a 7-column grid (all visible). On mobile (≤900px) it becomes
// a horizontal snap-scroller — so we add a bottom nav (prev/next + dots) to make
// it obvious there's more to swipe through. Used by Preschool / Junior Prep /
// Senior Prep in place of the raw <div className="day-rhythm"> markup.

function DayRhythm({ items }) {
  const trackRef = React.useRef(null);
  const [idx, setIdx] = React.useState(0);
  const [edges, setEdges] = React.useState({ start: true, end: false });

  const step = () => {
    const t = trackRef.current;
    if (!t) return 1;
    const kids = t.querySelectorAll('.day-rhythm__item');
    if (kids.length > 1) return Math.max(1, kids[1].offsetLeft - kids[0].offsetLeft);
    return Math.max(1, (kids[0] && kids[0].offsetWidth) || 1);
  };

  const update = () => {
    const t = trackRef.current;
    if (!t) return;
    const i = Math.round(t.scrollLeft / step());
    setIdx(Math.max(0, Math.min(items.length - 1, i)));
    setEdges({
      start: t.scrollLeft <= 2,
      end: t.scrollLeft + t.clientWidth >= t.scrollWidth - 2,
    });
  };

  const goTo = (i) => {
    const t = trackRef.current;
    if (!t) return;
    const target = Math.max(0, Math.min(items.length - 1, i));
    t.scrollTo({ left: target * step(), behavior: 'smooth' });
  };

  React.useEffect(() => {
    const t = trackRef.current;
    if (!t) return;
    update();
    const onScroll = () => window.requestAnimationFrame(update);
    t.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', update);
    return () => {
      t.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', update);
    };
  }, []);

  return (
    <React.Fragment>
      <div className="day-rhythm" ref={trackRef}>
        {items.map((d, i) => (
          <div className="day-rhythm__item" key={i}>
            <div className="day-rhythm__time">{d.time}</div>
            <div className="day-rhythm__dot"></div>
            <div className="day-rhythm__body">{d.body}</div>
          </div>
        ))}
      </div>

      <div className="day-rhythm-nav" role="group" aria-label="Browse the day">
        <button
          type="button"
          className="day-rhythm-nav__arrow"
          aria-label="Previous"
          disabled={edges.start}
          onClick={() => goTo(idx - 1)}>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg>
        </button>
        <div className="day-rhythm-nav__dots">
          {items.map((d, i) => (
            <button
              type="button"
              key={i}
              className={`day-rhythm-nav__dot${i === idx ? ' is-active' : ''}`}
              aria-label={`Go to ${typeof d.time === 'string' ? d.time : 'item ' + (i + 1)}`}
              aria-current={i === idx ? 'true' : undefined}
              onClick={() => goTo(i)}></button>
          ))}
        </div>
        <button
          type="button"
          className="day-rhythm-nav__arrow"
          aria-label="Next"
          disabled={edges.end}
          onClick={() => goTo(idx + 1)}>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg>
        </button>
      </div>
    </React.Fragment>
  );
}

Object.assign(window, { DayRhythm });