// Cómo funciona — reduce la ansiedad, microcopia de transparencia
// Inserido entre Práctica y Credibilidad. Tono informativo (conforme Provimiento 205 OAB).

function ComoFunciona({ palette, serifFamily }) {
  const passos = [
    {
      n: '01',
      titulo: 'Primer contacto',
      texto: 'Envíe un mensaje por WhatsApp o correo describiendo su situación en Brasil — un contrato, una herencia, un divorcio, una deuda. Sin formularios largos.',
      tempo: 'Respuesta en 1 día hábil',
    },
    {
      n: '02',
      titulo: 'Reunión inicial',
      texto: 'Una breve videollamada en su zona horaria. Revisamos qué está pasando, qué documentos existen y las opciones legales realistas bajo la ley brasileña.',
      tempo: 'En español, inglés o portugués',
    },
    {
      n: '03',
      titulo: 'Poder Notarial',
      texto: 'Usted firma y apostilla un Poder Notarial en su país. Desde ese momento puedo actuar por usted en Brasil — tribunales, bancos, registros — sin que tenga que viajar.',
      tempo: 'La mayoría nunca viene a Brasil',
    },
    {
      n: '04',
      titulo: 'Ejecución y reportes',
      texto: 'Honorarios y estrategia se acuerdan por escrito antes de iniciar el trabajo. Recibe actualizaciones claras en su idioma en cada etapa del caso.',
      tempo: 'Confidencialidad por ética profesional',
    },
  ];

  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 — Cómo funciona
        </p>
        <h2
          className="font-serif"
          style={{
            fontFamily: serifFamily,
            color: palette.ink,
            fontSize: 'clamp(32px, 3.6vw, 48px)',
            fontWeight: 500,
            lineHeight: 1.05,
          }}
        >
          Del primer contacto a una{' '}
          <span style={{ fontStyle: 'italic', color: palette.accent }}>
            decisión informada
          </span>
          .
        </h2>
        <p
          className="font-sans text-[15px] leading-[1.7] mt-6"
          style={{ color: palette.muted }}
        >
          Buscar un abogado suele venir acompañado de ansiedad e incertidumbre. Para que sepa exactamente
          qué esperar, este es el camino que sigue la mayoría de los casos en el despacho.
        </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 }}
                >
                  Paso {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 }}
        >
          {[
            'Respuesta en 1 día hábil',
            'Atención confidencial',
            'Honorarios informados antes del trabajo',
            'Honorarios 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;