/* Serviços — baralho de cards arrastáveis (swipe stack), estilo Cheer.
   Efeito: card do topo arrastável; os de trás espiam rotacionados;
   ao passar do limite, o card "voa" e o próximo assume. Setas + dots. */

const SERVICOS = [
  { tag: "Serviço 01", color: "yellow", t: "Branding & Rebranding completo",
    m: "Para marcas que precisam nascer ou renascer certas.",
    d: "Processo completo via framework CREATE: da imersão no negócio ao sistema de marca operacional. Para quem cresceu e a marca ficou para trás." },
  { tag: "Serviço 02", color: "lilac", t: "Ativação estratégica de marca",
    m: "Para marcas que têm o visual. Falta a alma.",
    d: "Identidade feita, brand book pronto, mas sem posicionamento, narrativa ou direção. Entramos como parceiras do que já existe, sem refazer do zero." },
  { tag: "Serviço 03", color: "blue", t: "Mentoria estratégica mensal",
    m: "Minha mente a serviço do seu negócio.",
    d: "Retainer com acesso direto à Patricia: sessões de estratégia, revisão de decisões de marca, orientação de lançamentos. Sem o custo de um time interno." },
  { tag: "Serviço 04", color: "cyan", t: "Execução estratégica mensal",
    m: "Estratégia que sai do papel todos os dias.",
    d: "Mídias, campanhas e conteúdo como extensão direta da estratégia de marca. A Patricia pensa, o estúdio executa, sem ruído entre estratégia e resultado." },
];

function Servicos() {
  const { Badge, IconButton } = window.CheerDesignSystem_4677f5;
  const n = SERVICOS.length;
  const [index, setIndex] = React.useState(0);
  const [drag, setDrag] = React.useState(0);
  const [exitX, setExitX] = React.useState(0);
  const [dragging, setDragging] = React.useState(false);
  const start = React.useRef(0);
  const moved = React.useRef(false);
  const busy = React.useRef(false);

  const paginate = (dir) => {
    if (busy.current) return;
    busy.current = true;
    setDragging(false);
    setDrag(0);
    setExitX(dir > 0 ? -560 : 560);   // próximo voa p/ esquerda, anterior p/ direita
    setTimeout(() => {
      setIndex((i) => (i + dir + n) % n);
      setExitX(0);
      busy.current = false;
    }, 260);
  };

  const onDown = (e) => {
    if (busy.current) return;
    setDragging(true); moved.current = false;
    start.current = e.clientX;
    try { e.currentTarget.setPointerCapture(e.pointerId); } catch (_) {}
  };
  const onMove = (e) => {
    if (!dragging || busy.current) return;
    const dx = e.clientX - start.current;
    if (Math.abs(dx) > 4) moved.current = true;
    setDrag(dx);
  };
  const onUp = (e) => {
    if (!dragging) return;
    const dx = e.clientX - start.current;
    setDragging(false);
    if (dx < -100) paginate(1);
    else if (dx > 100) paginate(-1);
    else setDrag(0);
  };

  const tx = dragging ? drag : exitX;

  return (
    <section className="sec band-soft" id="servicos">
      <div className="wrap">
        <div className="sec__head sec__head--center reveal">
          <div className="eyebrow" style={{ justifyContent: "center" }}><span className="eyebrow__rule"></span>Serviços</div>
          <h2 className="h-section">como trabalhamos</h2>
          <p className="lead">Quatro frentes que se complementam. Você entra por qualquer
            uma. O caminho natural é o CREATE completo.</p>
        </div>

        <div className="svc-stack reveal">
          <div className="svc-deck">
            {SERVICOS.map((s, i) => {
              const slot = (i - index + n) % n;       // 0 = topo, 1/2 = atrás
              if (slot > 2) return null;
              const isTop = slot === 0;
              const style = isTop
                ? { zIndex: 3, transform: `translateX(${tx}px) rotate(${tx / 22}deg)`,
                    opacity: 1, transition: dragging ? "none" : "transform .5s cubic-bezier(.22,.61,.36,1), opacity .3s" }
                : { zIndex: 3 - slot, pointerEvents: "none",
                    transform: `translateY(${slot * 16}px) scale(${1 - slot * 0.05}) rotate(${slot === 1 ? -2.4 : -4.8}deg)`,
                    opacity: slot === 1 ? 0.6 : 0.32,
                    transition: "transform .5s cubic-bezier(.22,.61,.36,1), opacity .4s" };
              return (
                <article key={s.tag} className={"svc-card" + (isTop ? " svc-card--top" : "")}
                  style={style}
                  onPointerDown={isTop ? onDown : undefined}
                  onPointerMove={isTop ? onMove : undefined}
                  onPointerUp={isTop ? onUp : undefined}
                  onPointerCancel={isTop ? onUp : undefined}>
                  <div className="svc-head">
                    <span className="svc-tag">{s.tag}</span>
                    <Badge color={s.color} dot>Sob consulta</Badge>
                  </div>
                  <h3 className="svc-title">{s.t}</h3>
                  <p className="svc-moment">“{s.m}”</p>
                  <p className="svc-desc">{s.d}</p>
                  <button className="svc-foot" type="button"
                    onClick={(e) => { e.stopPropagation(); if (!moved.current) window.open(window.FORM, "_blank"); }}>
                    Quero conversar <window.Icon.Arrow />
                  </button>
                </article>
              );
            })}
          </div>

          <div className="svc-controls">
            <IconButton label="Serviço anterior" variant="outline" onClick={() => paginate(-1)}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
            </IconButton>
            <div className="svc-dots">
              {SERVICOS.map((_, i) => (
                <button key={i} className={"svc-dot" + (i === index ? " is-on" : "")}
                  aria-label={"Ir para o serviço " + (i + 1)}
                  onClick={() => { if (i !== index && !busy.current) { setDrag(0); setExitX(0); setIndex(i); } }}></button>
              ))}
            </div>
            <IconButton label="Próximo serviço" variant="solid" onClick={() => paginate(1)}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 18l6-6-6-6"/></svg>
            </IconButton>
          </div>
          <div className="svc-hint">arraste o card ou use as setas</div>
        </div>
      </div>
    </section>
  );
}

window.Servicos = Servicos;