Etapas interativas

"use client";

import { useEffect, useId, useRef, useState, type CSSProperties, type ReactNode } from "react";
import { CURVA_SUAVE, useEmTela, useSemMovimento } from "@/library/revelar/Movimento";

/** Curva com um leve passo além do fim: o marco "salta" ao aparecer. */
const CURVA_SALTO = "cubic-bezier(0.34, 1.56, 0.64, 1)";

/** Classes que dependem do fundo da seção (escritas por extenso para o Tailwind encontrar). */
const CORES = {
  page: { borda: "border-page", cartao: "bg-surface", rotulo: "bg-surface/95" },
  surface: { borda: "border-surface", cartao: "bg-page", rotulo: "bg-page/95" },
} as const;

export type EtapaInterativa = {
  titulo: string;
  /** Aparece no rótulo da etapa quando ela está aberta. */
  descricao: ReactNode;
  /** Imagem ou ilustração que ocupa o painel inteiro (use `size-full` ou `absolute inset-0`). Sem ela, o painel mostra o número da etapa. */
  midia?: ReactNode;
};

/**
 * Processo em etapas numa linha do tempo horizontal.
 *
 * Entrada (uma vez, ao aparecer na tela): a linha se desenha da esquerda para a
 * direita, cada marco numerado salta quando a linha chega nele e os painéis
 * sobem; no fim, a primeira etapa se abre. Depois disso, passar o mouse, focar
 * ou clicar numa etapa abre ela: o painel cresce, os outros se comprimem, e o
 * rótulo mostra a descrição.
 *
 * Abaixo de `lg` a linha continua horizontal, com rolagem lateral e painéis de
 * larguras iguais. Com "reduzir movimento", tudo aparece pronto, com a primeira
 * etapa aberta.
 */
export function EtapasInterativas({
  itens,
  alturaDoPainel = 440,
  crescimentoAberto = 2.8,
  duracaoDaLinha = 3000,
  fundo = "page",
  aoMudar,
}: {
  itens: EtapaInterativa[];
  /** Altura dos painéis: px (número) ou qualquer medida do CSS ("60vh", "28rem"). */
  alturaDoPainel?: number | string;
  /** Quantas vezes o painel aberto cresce em relação aos outros (`flex-grow`), a partir de telas largas. */
  crescimentoAberto?: number;
  /** Duração (ms) do desenho da linha na entrada. Os marcos e painéis acompanham. */
  duracaoDaLinha?: number;
  /**
   * Token do fundo onde o componente fica. A borda dos marcos usa essa cor para
   * abrir um vão na linha, e os painéis usam a outra superfície para contrastar.
   */
  fundo?: "page" | "surface";
  /** Chamada quando outra etapa é aberta, com o índice dela. */
  aoMudar?: (indice: number) => void;
}) {
  const id = useId();
  const ref = useRef<HTMLDivElement>(null);
  const semMovimento = useSemMovimento();
  const emTela = useEmTela(ref, { margem: "0px 0px -35% 0px" });
  const [escolhido, setEscolhido] = useState<number | null>(null);
  const [entradaConcluida, setEntradaConcluida] = useState(false);

  const entrou = semMovimento || emTela;
  // Até alguém escolher, a primeira etapa abre quando a entrada termina.
  const aberto = escolhido ?? (semMovimento || entradaConcluida ? 0 : null);

  useEffect(() => {
    if (!emTela || semMovimento || entradaConcluida) return;
    const espera = setTimeout(() => setEntradaConcluida(true), duracaoDaLinha);
    return () => clearTimeout(espera);
  }, [emTela, semMovimento, entradaConcluida, duracaoDaLinha]);

  const escolher = (i: number) => {
    if (i === aberto) return;
    setEscolhido(i);
    aoMudar?.(i);
  };

  const cores = CORES[fundo];
  const altura = typeof alturaDoPainel === "number" ? `${alturaDoPainel}px` : alturaDoPainel;
  const n = itens.length;

  return (
    // Abaixo de lg: rolagem lateral, sem barra visível (os botões em foco rolam até aparecer).
    <div
      ref={ref}
      className="w-full overflow-x-auto pb-4 [scrollbar-width:none] lg:overflow-visible [&::-webkit-scrollbar]:hidden"
    >
      <div
        className="relative min-w-[calc(var(--quantidade)*13rem)] lg:min-w-0"
        style={{ "--quantidade": n, "--altura-painel": altura } as CSSProperties}
      >
        {/* Linha na altura do centro dos marcos (size-10): trilho e traço que se desenha. */}
        <div aria-hidden="true" className="absolute inset-x-0 top-5 h-px bg-rule" />
        <div
          aria-hidden="true"
          className="absolute inset-x-0 top-5 h-px origin-left bg-accent"
          style={{
            transform: `scaleX(${entrou ? 1 : 0})`,
            transition: semMovimento ? undefined : `transform ${duracaoDaLinha}ms linear`,
          }}
        />

        <ol className="flex gap-4 lg:gap-5">
          {itens.map((etapa, i) => {
            const estaAberta = aberto === i;
            // Instante em que o traço chega ao marco, que fica na borda esquerda da coluna i.
            const atraso = Math.round((duracaoDaLinha * i) / n);

            return (
              <li
                key={`${etapa.titulo}-${i}`}
                className="relative min-w-0 grow basis-0 lg:grow-(--crescimento)"
                style={
                  {
                    "--crescimento": estaAberta ? crescimentoAberto : 1,
                    transition: semMovimento ? undefined : `flex-grow 650ms ${CURVA_SUAVE}`,
                  } as CSSProperties
                }
                onMouseEnter={() => escolher(i)}
                onFocus={() => escolher(i)}
                // O clique em qualquer parte do painel abre a etapa (o botão do título também chega aqui).
                onClick={() => escolher(i)}
              >
                {/* Marco: o número fica sobre a linha; a borda na cor do fundo abre um vão nela. */}
                <span
                  aria-hidden="true"
                  className={`absolute top-0 left-0 z-10 grid size-10 place-items-center rounded-full border-4 font-display text-lg leading-none ${cores.borda} ${
                    estaAberta ? "bg-accent text-page" : `${cores.cartao} text-ink/45`
                  }`}
                  style={{
                    transform: entrou ? "scale(1)" : "scale(0)",
                    opacity: entrou ? 1 : 0,
                    transition: semMovimento
                      ? undefined
                      : `transform 400ms ${CURVA_SALTO} ${atraso}ms, opacity 300ms ease-out ${atraso}ms, background-color 500ms, color 500ms`,
                  }}
                >
                  {i + 1}
                </span>

                <div
                  className="pt-16"
                  style={{
                    transform: entrou ? "none" : "translateY(28px)",
                    opacity: entrou ? 1 : 0,
                    transition: semMovimento
                      ? undefined
                      : `transform 550ms ${CURVA_SUAVE} ${atraso + 80}ms, opacity 550ms ${CURVA_SUAVE} ${atraso + 80}ms`,
                  }}
                >
                  <div className={`relative h-(--altura-painel) overflow-hidden rounded-3xl ${cores.cartao}`}>
                    {etapa.midia ?? (
                      <span
                        aria-hidden="true"
                        className="absolute inset-0 grid place-items-center font-display text-7xl text-ink/10"
                      >
                        {i + 1}
                      </span>
                    )}

                    {/* Rótulo: só o título quando comprimida; a descrição aparece na etapa aberta. */}
                    <div
                      className={`absolute inset-x-3 bottom-3 rounded-[max(var(--radius-sm),calc(var(--radius-3xl)_-_var(--spacing)*3))] p-4 backdrop-blur-sm lg:inset-x-4 lg:bottom-4 lg:rounded-[max(var(--radius-sm),calc(var(--radius-3xl)_-_var(--spacing)*4))] lg:p-5 ${cores.rotulo}`}
                    >
                      <h3>
                        <button
                          type="button"
                          aria-expanded={estaAberta}
                          aria-controls={`${id}-descricao-${i}`}
                          className="block w-full truncate text-left font-semibold text-ink outline-accent focus-visible:outline-2 focus-visible:outline-offset-4 lg:text-lg"
                        >
                          {etapa.titulo}
                        </button>
                      </h3>
                      <div
                        id={`${id}-descricao-${i}`}
                        inert={!estaAberta}
                        className={`grid ${semMovimento ? "" : "transition-all duration-500 ease-out"} ${
                          estaAberta ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
                        }`}
                      >
                        <div className="overflow-hidden">
                          <div className="pt-2 text-sm leading-relaxed text-ink-2 lg:text-base">{etapa.descricao}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            );
          })}
        </ol>
      </div>
    </div>
  );
}

import { useState, type ReactNode } from "react";
import { defineStories } from "@/registry/stories";
import { EtapasInterativas, type EtapaInterativa } from "./EtapasInterativas";

/** Mídia de exemplo: painel na cor de uma série do tema com um ícone grande (sem arquivos externos). */
function Painel({ serie, children }: { serie: number; children: ReactNode }) {
  const cor = `var(--series-${serie})`;
  return (
    <div
      className="absolute inset-0 grid place-items-center pb-24"
      style={{ backgroundColor: `color-mix(in oklab, ${cor} 16%, var(--surface))`, color: cor }}
    >
      <svg
        aria-hidden="true"
        viewBox="0 0 24 24"
        className="size-24"
        fill="none"
        stroke="currentColor"
        strokeWidth={1.25}
        strokeLinecap="round"
        strokeLinejoin="round"
      >
        {children}
      </svg>
    </div>
  );
}

const ETAPAS: EtapaInterativa[] = [
  {
    titulo: "Conversa inicial",
    descricao: "Entendemos o que você precisa, o prazo e o orçamento numa reunião de meia hora.",
    midia: (
      <Painel serie={1}>
        <path d="M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12Z" />
      </Painel>
    ),
  },
  {
    titulo: "Proposta",
    descricao: "Em até três dias você recebe o escopo, o cronograma e o valor fechado, sem letras miúdas.",
    midia: (
      <Painel serie={2}>
        <path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9l-6-6Z" />
        <path d="M14 3v6h6M8 13h8M8 17h5" />
      </Painel>
    ),
  },
  {
    titulo: "Produção",
    descricao: "A equipe trabalha em ciclos de uma semana e mostra o andamento ao fim de cada um.",
    midia: (
      <Painel serie={3}>
        <circle cx="12" cy="12" r="3" />
        <path d="M12 2v3M12 19v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M2 12h3M19 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1" />
      </Painel>
    ),
  },
  {
    titulo: "Entrega e suporte",
    descricao: "Entregamos com documentação e acompanhamos os primeiros meses de uso de perto.",
    midia: (
      <Painel serie={4}>
        <path d="m5 12 5 5L20 7" />
      </Painel>
    ),
  },
];

const SEM_MIDIA = ETAPAS.map(({ titulo, descricao }) => ({ titulo, descricao }));

type Valores = {
  quantidade: number;
  comMidia: boolean;
  crescimentoAberto: number;
  duracaoDaLinha: number;
  alturaDoPainel: number;
};

/** Playground com um botão para ver a entrada de novo (a chave remonta o componente). */
function ExemploComRepetir(a: Valores) {
  const [vez, setVez] = useState(0);
  return (
    <div className="flex w-full max-w-6xl flex-col items-start gap-8">
      <EtapasInterativas
        key={`${vez}-${a.quantidade}-${a.duracaoDaLinha}`}
        itens={(a.comMidia ? ETAPAS : SEM_MIDIA).slice(0, a.quantidade)}
        crescimentoAberto={a.crescimentoAberto}
        duracaoDaLinha={a.duracaoDaLinha}
        alturaDoPainel={a.alturaDoPainel}
      />
      <button
        type="button"
        onClick={() => setVez((v) => v + 1)}
        className="rounded-full border border-rule-strong px-4 py-2 text-sm font-medium text-ink outline-accent hover:bg-surface focus-visible:outline-2 focus-visible:outline-offset-2"
      >
        Ver a entrada de novo
      </button>
    </div>
  );
}

export default defineStories({
  args: { quantidade: 4, comMidia: true, crescimentoAberto: 2.8, duracaoDaLinha: 3000, alturaDoPainel: 400 },
  controls: {
    quantidade: { type: "number", label: "etapas (quantidade)", min: 2, max: 4 },
    comMidia: { type: "boolean", label: "com mídia" },
    crescimentoAberto: { type: "number", min: 1, max: 5, step: 0.2 },
    duracaoDaLinha: { type: "number", label: "duracaoDaLinha (ms)", min: 300, max: 6000, step: 100 },
    alturaDoPainel: { type: "number", label: "alturaDoPainel (px)", min: 200, max: 600, step: 20 },
  },
  render: (a) => <ExemploComRepetir {...a} />,
  stories: [
    { name: "Com mídia" },
    { name: "Sem mídia (número no painel)", args: { comMidia: false, alturaDoPainel: 320 } },
    {
      name: "Sobre fundo surface",
      render: () => (
        <div className="w-full max-w-6xl rounded-3xl bg-surface p-6 sm:p-10">
          <EtapasInterativas itens={SEM_MIDIA.slice(0, 3)} fundo="surface" alturaDoPainel={300} duracaoDaLinha={1800} />
        </div>
      ),
    },
  ],
});