// Coverflow-style carousel for the "Études de cas" section.
// Active card sits centered + full-size; neighbours scale back and tuck
// behind it. Auto-advances, pauses on hover, syncs a details panel below.

const { useState, useEffect, useRef, useCallback } = React;

function CaseCarousel({ cases }) {
  const n = cases.length;
  const [active, setActive] = useState(0);
  const [paused, setPaused] = useState(false);
  const touch = useRef(null);

  const go = useCallback((dir) => setActive((a) => (a + dir + n) % n), [n]);
  const jump = useCallback((i) => setActive(((i % n) + n) % n), [n]);

  // auto-advance
  useEffect(() => {
    if (paused) return undefined;
    const id = setInterval(() => setActive((a) => (a + 1) % n), 5200);
    return () => clearInterval(id);
  }, [paused, n]);

  // keyboard
  useEffect(() => {
    const onKey = (e) => {
      if (e.key === "ArrowLeft") go(-1);
      if (e.key === "ArrowRight") go(1);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [go]);

  // relative offset with wrap (-1, 0, 1 for n=3)
  const offset = (i) => {
    let d = i - active;
    if (d > n / 2) d -= n;
    if (d < -n / 2) d += n;
    return d;
  };

  const onTouchStart = (e) => { touch.current = e.touches[0].clientX; setPaused(true); };
  const onTouchEnd = (e) => {
    if (touch.current == null) return;
    const dx = e.changedTouches[0].clientX - touch.current;
    if (Math.abs(dx) > 40) go(dx < 0 ? 1 : -1);
    touch.current = null;
    setPaused(false);
  };

  const act = cases[active];

  return (
    <div
      className="cc"
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
      onTouchStart={onTouchStart}
      onTouchEnd={onTouchEnd}
    >
      <div className="cc-stage">
        {cases.map((c, i) => {
          const d = offset(i);
          const ad = Math.abs(d);
          const hidden = ad > 1;
          const style = {
            transform:
              `translateX(calc(-50% + ${d * 38}%)) ` +
              `translateZ(${ad ? -180 : 0}px) ` +
              `rotateY(${d * -7}deg) ` +
              `scale(${1 - ad * 0.12})`,
            zIndex: 20 - ad,
            opacity: hidden ? 0 : 1 - ad * 0.25,
            filter: `brightness(${1 - ad * 0.22}) saturate(${1 - ad * 0.15})`,
            pointerEvents: hidden ? "none" : "auto",
            cursor: d === 0 ? "default" : "pointer",
          };
          return (
            <figure
              key={c.title}
              className={`cc-card${d === 0 ? " is-active" : ""}`}
              style={style}
              onClick={() => d !== 0 && jump(i)}
              aria-hidden={d !== 0}
            >
              <img src={c.img} alt={c.title} draggable="false" />
              <div className="cc-badge">{c.label}</div>
              <figcaption className="cc-cap">
                <span className="cc-cap-k">Étude de cas · fictive</span>
                <span className="cc-cap-t">{c.title}</span>
              </figcaption>
            </figure>
          );
        })}
      </div>

      <div className="cc-controls">
        <button className="cc-arrow" onClick={() => go(-1)} aria-label="Précédent">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6" /></svg>
        </button>
        <div className="cc-dots">
          {cases.map((c, i) => (
            <button
              key={c.title}
              className={`cc-dot${i === active ? " on" : ""}`}
              onClick={() => jump(i)}
              aria-label={`Aller à ${c.title}`}
            />
          ))}
        </div>
        <button className="cc-arrow" onClick={() => go(1)} aria-label="Suivant">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6" /></svg>
        </button>
      </div>

      <div className="cc-details" key={act.title}>
        <div className="cc-detail">
          <div className="cc-detail-k">Problème</div>
          <p className="cc-detail-v">{act.problem}</p>
        </div>
        <div className="cc-detail">
          <div className="cc-detail-k">Solution</div>
          <p className="cc-detail-v">{act.solution}</p>
        </div>
        <div className="cc-detail">
          <div className="cc-detail-k">Objectif</div>
          <p className="cc-detail-v">{act.objective}</p>
        </div>
        <div className="cc-detail">
          <div className="cc-detail-k">Livrables</div>
          <div className="cc-deliv">
            {act.deliverables.map((d) => <span key={d}>{d}</span>)}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CaseCarousel });