/**
 * ResultadosReais — prova social REAL (painéis ZapSign auditados de escritórios
 * previdenciários). Recria o efeito "shuffle cards" do 21st.dev SEM framer-motion
 * (o projeto roda React UMD via CDN, sem build): cards empilhados e rotacionados,
 * o da frente é arrastável; arrastar pra esquerda joga ele pro fundo.
 *
 * Números do slide oficial de resultados (conversapp-slides/resultados).
 */
const CASES_RESULTADOS = [
  { img: 'assets/cases/case-maternidade.png', area: 'Salário Maternidade', num: '1.636', label: 'contratos assinados' },
  { img: 'assets/cases/case-acidente.png',    area: 'Auxílio Acidente',    num: '1.088', label: 'contratos assinados' },
  { img: 'assets/cases/case-bpc.png',         area: 'BPC / LOAS',          num: '320',   label: 'contratos assinados' },
];

const CaseCard = ({ data, position, isFront, onShuffle }) => {
  const startX = React.useRef(0);
  const [dragX, setDragX] = React.useState(0);

  const base =
    position === 'front'  ? { rot: -5, x: 0 }  :
    position === 'middle' ? { rot: 0,  x: 11 } :
                            { rot: 5,  x: 22 };
  const z = position === 'front' ? 3 : position === 'middle' ? 2 : 1;

  const onDown = (e) => {
    if (!isFront) return;
    startX.current = e.clientX;
    try { e.currentTarget.setPointerCapture(e.pointerId); } catch (_) {}
  };
  const onMove = (e) => {
    if (!isFront || !startX.current) return;
    setDragX(e.clientX - startX.current);
  };
  const onUp = (e) => {
    if (!isFront) return;
    if (startX.current && startX.current - e.clientX > 120) onShuffle();
    startX.current = 0;
    setDragX(0);
  };

  const style = {
    zIndex: z,
    transform: `translateX(calc(${base.x}% + ${dragX}px)) rotate(${base.rot}deg)`,
    transition: dragX ? 'none' : 'transform .42s cubic-bezier(.2,.8,.2,1)',
    cursor: isFront ? (dragX ? 'grabbing' : 'grab') : 'default',
    opacity: position === 'back' ? 0.85 : 1,
  };

  return (
    <div
      className="case-card"
      style={style}
      onPointerDown={onDown}
      onPointerMove={onMove}
      onPointerUp={onUp}
      onPointerCancel={onUp}
    >
      <div className="case-card-imgwrap">
        <img src={data.img} alt={`Painel ZapSign — ${data.area}`} draggable="false" loading="lazy"/>
      </div>
      <div className="case-card-meta">
        <span className="case-card-area">{data.area}</span>
        <span className="case-card-num"><b>{data.num}</b> {data.label}</span>
      </div>
    </div>
  );
};

const ResultadosReais = () => {
  const [positions, setPositions] = React.useState(['front', 'middle', 'back']);
  const shuffle = () => setPositions((p) => { const n = [...p]; n.unshift(n.pop()); return n; });

  return (
    <section className="section section-resultados" id="resultados" data-screen-label="07 Resultados">
      <div className="container">
        <div className="resultados-grid">
          <div className="resultados-copy">
            <h2>Não é promessa.<br/><span className="text-accent">É contrato assinado.</span></h2>
            <p>Painéis ZapSign auditados de escritórios que vendem com a nossa IA: mais de 50.000 contratos fechados, com assinatura em horas — não em dias.</p>
            <div className="resultados-stats">
              <div className="r-stat"><b>+300</b><span>escritórios vendendo com a IA</span></div>
              <div className="r-stat"><b>+50 mil</b><span>contratos assinados</span></div>
            </div>
            <div className="resultados-zapsign">
              <span>Contratos assinados e auditados em</span>
              {/* Logo branca no dark, colorida no light (toggle via CSS body[data-bg]) */}
              <img className="zapsign-logo zapsign-logo-dark" src="https://zapsign.com.br/hubfs/raw_assets/public/ZapSign_v2/images/logo_white_samesize.svg" alt="ZapSign" loading="lazy"/>
              <img className="zapsign-logo zapsign-logo-light" src="https://zapsign.com.br/hubfs/raw_assets/public/ZapSign_v2/images/logo.svg" alt="ZapSign" loading="lazy"/>
            </div>
          </div>

          <div className="resultados-cards">
            <div className="case-stack">
              {CASES_RESULTADOS.map((c, i) => (
                <CaseCard
                  key={i}
                  data={c}
                  position={positions[i]}
                  isFront={positions[i] === 'front'}
                  onShuffle={shuffle}
                />
              ))}
            </div>
            <button type="button" className="case-hint" onClick={shuffle}>
              <Icon.Arrow size={14}/> arraste ou toque pra ver os outros painéis
            </button>
          </div>
        </div>
      </div>
    </section>
  );
};

window.ResultadosReais = ResultadosReais;