// Shared case-study carousel — used by both infrastructure and AI platform pages.
// Reads from window.CASE_STUDIES (provided by data.jsx).
const { useState: useCaseState, useRef: useCaseRef } = React;

const CaseStudySection = () => {
  const total = CASE_STUDIES.length;
  // Looped track: render the case list twice. `pos` only ever increases so
  // every transition slides left-to-right (visually right-to-left swipe).
  // When pos reaches `total`, we snap silently back to pos-total so the
  // sequence can keep moving forward.
  const slides = React.useMemo(() => [...CASE_STUDIES, ...CASE_STUDIES], []);
  const [pos, setPos] = useCaseState(0);
  const [animate, setAnimate] = useCaseState(true);
  const [paused, setPaused] = useCaseState(false);
  const trackRef = useCaseRef(null);

  const visualIndex = ((pos % total) + total) % total;

  const goForwardTo = React.useCallback((targetIdx) => {
    setPos(p => {
      const cur = ((p % total) + total) % total;
      if (targetIdx === cur) return p;
      const delta = (targetIdx - cur + total) % total;
      return p + delta;
    });
  }, [total]);

  const next = React.useCallback(() => setPos(p => p + 1), []);
  const prev = React.useCallback(() => {
    setPos(p => p + (total - 1));
  }, [total]);

  React.useEffect(() => {
    if (paused) return;
    const id = setInterval(() => setPos(p => p + 1), 7000);
    return () => clearInterval(id);
  }, [paused]);

  React.useEffect(() => {
    const t = trackRef.current;
    if (!t) return;
    const onEnd = (e) => {
      if (e.propertyName !== 'transform') return;
      if (pos >= total) {
        setAnimate(false);
        setPos(p => p - total);
        requestAnimationFrame(() => requestAnimationFrame(() => setAnimate(true)));
      }
    };
    t.addEventListener('transitionend', onEnd);
    return () => t.removeEventListener('transitionend', onEnd);
  }, [pos, total]);

  return (
    <section id="case" className="section" style={{paddingTop: 0}}>
      <div className="wrap">
        <div className="section-head reveal" style={{display:'flex', alignItems:'baseline', justifyContent:'space-between', gap: 24, flexWrap:'wrap', maxWidth:'none'}}>
          <div>
            <div className="eyebrow">Case study / 05</div>
            <h2 style={{marginTop: 18, maxWidth: '18ch'}}>Recent delivery, in the operator's words.</h2>
          </div>
          <span className="case-counter mono">
            {String(visualIndex + 1).padStart(2, '0')} / {String(total).padStart(2, '0')}
          </span>
        </div>

        <div
          className="case-carousel reveal d1"
          onMouseEnter={() => setPaused(true)}
          onMouseLeave={() => setPaused(false)}
          aria-roledescription="carousel"
        >
          <div className="case-viewport">
            <div
              ref={trackRef}
              className="case-track"
              style={{
                transform: `translateX(-${pos * 100}%)`,
                transition: animate ? 'transform .9s cubic-bezier(.65,.05,.15,1)' : 'none',
              }}
            >
              {slides.map((c, i) => {
                const idx = i % total;
                const isActive = idx === visualIndex && (i === visualIndex || i === visualIndex + total);
                return (
                  <div className="case-slide" key={`${c.code}-${i}`} aria-hidden={!isActive}>
                    <div className="case-num-rail">
                      <span className="label">Case</span>
                      <div className="num">{String(idx + 1).padStart(2, '0')}</div>
                      <span className="of">of {String(total).padStart(2, '0')}</span>
                    </div>
                    <div className="case-card">
                      <div className="eyebrow">{c.code} · {c.location}</div>
                      <h2>{c.title}</h2>
                      <p className="sub">{c.subtitle}.</p>
                      <div className="case-stats">
                        {c.stats.map(s => (
                          <div key={s.lbl} className="case-stat">
                            <div className="n">{s.n}<span className="u">{s.u}</span></div>
                            <div className="lbl">{s.lbl}</div>
                          </div>
                        ))}
                      </div>
                      <div className="case-meta">
                        <div>
                          <span className="lbl">Project duration</span>
                          <span>{c.duration}</span>
                        </div>
                        <div>
                          <span className="lbl">Scope</span>
                          <span>{c.scope.join(' · ')}</span>
                        </div>
                        <div>
                          <span className="lbl">Coverage</span>
                          <span>{c.coverage}</span>
                        </div>
                        <div>
                          <span className="lbl">Customer profile</span>
                          <span>{c.customer}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          <div className="case-controls">
            <div className="case-dots" role="tablist">
              {CASE_STUDIES.map((c, i) => (
                <button
                  key={c.code}
                  className={`case-dot ${i === visualIndex ? 'on' : ''}`}
                  onClick={() => goForwardTo(i)}
                  aria-label={`Show case ${i + 1}: ${c.title}`}
                  aria-selected={i === visualIndex}
                  role="tab"
                />
              ))}
            </div>
            <div className="case-arrows">
              <button className="case-arrow" onClick={prev} aria-label="Previous case">
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                  <path d="M12 7H2M6.5 11.5 2 7l4.5-4.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </button>
              <button className="case-arrow" onClick={next} aria-label="Next case">
                <I.arrow/>
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { CaseStudySection });