/* Cases — painéis interativos que expandem (estilo "interactive selector").
   Preenchem a largura toda; o painel ativo expande e mostra nome + categoria.
   Clicar no painel ativo abre a página do case; clicar em outro o ativa. */

const CASE_DOT3 = { yellow: "var(--cheer-yellow)", lilac: "var(--cheer-lilac)", blue: "var(--cheer-blue)", cyan: "var(--cheer-cyan)" };

function Cases() {
  const CASES = window.CASES;
  const [active, setActive] = React.useState(0);
  const [shown, setShown] = React.useState([]);

  React.useEffect(() => {
    const reduced = window.Motion && window.Motion.REDUCED;
    if (reduced) { setShown(CASES.map((_, i) => i)); return; }
    const timers = CASES.map((_, i) => setTimeout(() => setShown((p) => [...p, i]), 140 * i));
    return () => timers.forEach(clearTimeout);
  }, []);

  const onPanel = (i) => () => {
    if (i !== active) { setActive(i); return; }
    window.location.href = "case.html?c=" + CASES[i].slug;
  };

  return (
    <section className="sec dark" id="cases">
      <div className="wrap">
        <div className="sec__head sec__head--center reveal">
          <div className="eyebrow eyebrow--ondark" style={{ justifyContent: "center" }}>
            <span className="eyebrow__rule"></span>Trabalhos
          </div>
          <h2 className="h-section">cases recentes</h2>
          <p className="lead" style={{ color: "rgba(255,255,255,0.66)" }}>
            Clique para abrir cada painel. Clique de novo para ver o case completo.
          </p>
        </div>

        <div className="isel">
          {CASES.map((c, i) => {
            const isActive = i === active;
            const cover = c.cover || c.img;
            return (
              <div key={c.slug}
                className={"isel__panel" + (isActive ? " is-active" : "")}
                style={{
                  flexGrow: isActive ? 7 : 1,
                  backgroundImage: cover ? `url('${cover}')` : "none",
                  backgroundColor: cover ? "#15151a" : "var(--cheer-blue-deep)",
                  opacity: shown.includes(i) ? 1 : 0,
                  transform: shown.includes(i) ? "translateX(0)" : "translateX(-48px)",
                }}
                onClick={onPanel(i)}
                role="button" tabIndex={0}
                aria-label={isActive ? ("Ver case: " + c.name) : ("Abrir painel: " + c.name)}
                onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onPanel(i)(); } }}>
                <div className="isel__scrim"></div>
                <div className="isel__foot">
                  <span className="isel__dot" style={{ borderColor: CASE_DOT3[c.color] || "var(--cheer-yellow)" }}>
                    {c.name.charAt(0)}
                  </span>
                  <div className="isel__text">
                    <div className="isel__nm">{c.name}</div>
                    <div className="isel__ct">{c.sector}</div>
                  </div>
                  <span className="isel__view">ver case <window.Icon.Arrow /></span>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

window.Cases = Cases;