function Cases() {
  const trackRef = React.useRef(null);

  const scroll = (dir) => {
    const t = trackRef.current;
    if (!t) return;
    const card = t.querySelector('.case-card');
    const step = card ? card.offsetWidth + 24 : 400;
    t.scrollBy({ left: dir * step, behavior: 'smooth' });
  };

  const cases = [
    {
      category: "Comunicação Municipal",
      img: "assets/case-comunicacao-municipal.png",
      challenge: "O município precisava de um canal centralizado para se comunicar com seus cidadãos e gerenciar solicitações de serviços públicos de forma digital.",
      solution: "A prefeitura lançou o app oficial, oferecendo aos moradores um portal único para notícias, serviços e atualizações — aproximando gestão e cidadãos.",
    },
    {
      category: "Programas Sociais",
      img: "assets/case-programas-sociais.png",
      challenge: "Cidadãos enfrentavam processos longos para acessar benefícios públicos, enquanto equipes municipais sofriam com gestão manual e dados fragmentados.",
      solution: "Com a plataforma unificada, cidadãos solicitam e acompanham benefícios com facilidade, enquanto equipes gerenciam programas com total transparência.",
    },
    {
      category: "Resposta a Emergências",
      img: "assets/case-resposta-emergencias.png",
      challenge: "Em situações de crise como enchentes, equipes de defesa civil precisavam coordenar ajuda, emitir alertas e atender pedidos de socorro com agilidade.",
      solution: "Pelo app, autoridades emitiram alertas, compartilharam informações verificadas e gerenciaram pedidos em tempo real — melhorando coordenação e resposta.",
    },
    {
      category: "Auxílio Emergencial",
      img: "assets/case-auxilio-emergencial.png",
      challenge: "Durante os lockdowns da COVID-19, famílias de escolas públicas em regiões rurais, remotas e urbanas perderam o acesso à alimentação escolar e à assistência alimentar.",
      solution: "O app permitiu que as escolas organizassem a entrega de cestas básicas com eficiência, monitorassem o andamento e garantissem que as famílias recebessem o suporte essencial com agilidade e segurança.",
    },
  ];

  return (
    <section id="casos">
      <div className="container">
        <div className="cases-head">
          <div>
            <span className="eyebrow"><span className="dot"></span>Casos de uso</span>
            <h2 style={{marginTop:14}}>
              Como o aplicativo já<br/>
              <span className="serif-i" style={{color:'var(--accent)'}}>transforma realidades.</span>
            </h2>
            <p className="lead" style={{marginTop:14,maxWidth:480}}>
              Exemplos reais de como prefeituras estão entregando serviços mais ágeis, simples e acessíveis ao cidadão.
            </p>
          </div>
          <div className="cases-arrows">
            <button className="cases-arrow" onClick={() => scroll(-1)} aria-label="Anterior">
              <Icons.Arrow style={{width:15,height:15,transform:'rotate(180deg)'}}/>
            </button>
            <button className="cases-arrow" onClick={() => scroll(1)} aria-label="Próximo">
              <Icons.Arrow style={{width:15,height:15}}/>
            </button>
          </div>
        </div>

        <div className="cases-track" ref={trackRef}>
          {cases.map((c, i) => (
            <div className="case-card" key={i}>
              <div className="case-imgs">
                {c.img
                  ? <img src={c.img} alt={c.category} className="case-img-real"/>
                  : <>
                      <div className="case-img" style={{background:`linear-gradient(135deg,${c.colors[0]},${c.colors[0]}bb)`}}/>
                      <div className="case-img" style={{background:`linear-gradient(135deg,${c.colors[1]},${c.colors[1]}bb)`}}/>
                    </>
                }
              </div>
              <div className="case-body">
                <p className="case-category">{c.category}</p>
                <p className="case-label">Desafio</p>
                <p className="case-text">{c.challenge}</p>
                <p className="case-label">Solução</p>
                <p className="case-text" style={{marginBottom:0}}>{c.solution}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Cases = Cases;