// Como Funciona — Pacote A: reduz ansiedade do leigo, microcopy de transparência
// Inserido entre Atuacao e Credibilidade. Tom informativo (compatível OAB Provimento 205).

function ComoFunciona({ palette, serifFamily }) {
  const passos = [
    {
      n: '01',
      titulo: 'Primeiro contato',
      texto: 'Você envia uma mensagem pelo WhatsApp ou e-mail descrevendo, em poucas linhas, o que está acontecendo. Sem formulário longo, sem cadastro.',
      tempo: 'Resposta em até 24h úteis',
    },
    {
      n: '02',
      titulo: 'Conversa inicial',
      texto: 'Marcamos uma conversa — presencial em Porto Velho ou por videoconferência. O Dr. Roberto ouve seu caso e tira as primeiras dúvidas.',
      tempo: 'Rápido e direto',
    },
    {
      n: '03',
      titulo: 'Análise técnica',
      texto: 'Caso haja contrato, processo ou documentos, o escritório analisa e devolve um parecer claro: o que pode ser feito, qual o caminho e quais os prazos realistas.',
      tempo: 'Linguagem acessível, sem jargão',
    },
    {
      n: '04',
      titulo: 'Decisão sua',
      texto: 'Você decide se quer prosseguir. Honorários e estratégia são acordados por escrito antes de qualquer atuação. Tudo transparente, do começo ao fim.',
      tempo: 'Sigilo absoluto sob ética profissional',
    },
  ];

  return (
    <section
      id="como-funciona"
      className="px-6 md:px-12 py-24"
      style={{ background: palette.bgAlt }}
    >
      <Reveal variant="up" className="max-w-3xl mb-16">
        <p
          className="font-mono text-[10px] uppercase tracking-[0.3em] mb-4"
          style={{ color: palette.gold }}
        >
          № 03 — Como funciona
        </p>
        <h2
          className="font-serif"
          style={{
            fontFamily: serifFamily,
            color: palette.ink,
            fontSize: 'clamp(32px, 3.6vw, 48px)',
            fontWeight: 500,
            lineHeight: 1.05,
          }}
        >
          Do primeiro contato à{' '}
          <span style={{ fontStyle: 'italic', color: palette.accent }}>
            decisão informada
          </span>
          .
        </h2>
        <p
          className="font-sans text-[15px] leading-[1.7] mt-6"
          style={{ color: palette.muted }}
        >
          Procurar um advogado costuma vir junto com ansiedade e dúvida. Para que
          você saiba exatamente o que esperar, este é o caminho que a maioria dos
          casos percorre no escritório.
        </p>
      </Reveal>

      <div
        className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4"
        style={{
          borderTop: `1px solid ${palette.rule}`,
          borderLeft: `1px solid ${palette.rule}`,
        }}
      >
        {passos.map((p, i) => {
          const ref = useReveal({ threshold: 0.1 });
          return (
            <article
              key={p.n}
              ref={ref}
              className="rg-reveal rg-reveal--up p-8 flex flex-col"
              style={{
                borderRight: `1px solid ${palette.rule}`,
                borderBottom: `1px solid ${palette.rule}`,
                transitionDelay: `${i * 100}ms`,
                minHeight: '280px',
                background: palette.bg,
              }}
            >
              <div className="flex items-baseline justify-between mb-6">
                <span
                  className="font-mono text-[10px] uppercase tracking-[0.28em]"
                  style={{ color: palette.gold }}
                >
                  Passo {p.n}
                </span>
                <span
                  className="font-serif text-[28px] leading-none"
                  style={{
                    fontFamily: serifFamily,
                    color: palette.accent,
                    opacity: 0.25,
                    fontWeight: 500,
                  }}
                >
                  {p.n}
                </span>
              </div>
              <h3
                className="font-serif text-[22px] leading-tight mb-3"
                style={{
                  fontFamily: serifFamily,
                  color: palette.ink,
                  fontWeight: 500,
                }}
              >
                {p.titulo}
              </h3>
              <p
                className="font-sans text-[13.5px] leading-[1.6] mb-6"
                style={{ color: palette.muted }}
              >
                {p.texto}
              </p>
              <p
                className="font-mono text-[10px] uppercase tracking-[0.18em] mt-auto pt-4"
                style={{
                  color: palette.gold,
                  borderTop: `1px solid ${palette.rule}`,
                }}
              >
                {p.tempo}
              </p>
            </article>
          );
        })}
      </div>

      {/* Linha de microcopy de confiança */}
      <Reveal variant="up" delay={400}>
        <div
          className="mt-16 flex flex-wrap gap-x-10 gap-y-4 items-center justify-center text-center"
          style={{ color: palette.muted }}
        >
          {[
            'Resposta em até 24h úteis',
            'Atendimento sigiloso',
            'Honorários apresentados antes do início do trabalho',
            'Honorários acordados por escrito',
          ].map((t, i) => (
            <span
              key={i}
              className="font-mono text-[10px] uppercase tracking-[0.22em] flex items-center gap-2"
            >
              <svg
                width="10"
                height="10"
                viewBox="0 0 24 24"
                fill="none"
                stroke={palette.gold}
                strokeWidth="2.5"
                aria-hidden="true"
              >
                <path d="M5 12l5 5L20 6" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
              {t}
            </span>
          ))}
        </div>
      </Reveal>
    </section>
  );
}

window.ComoFunciona = ComoFunciona;