// How It Works — reduces anxiety, transparency microcopy
// Inserted between Practice and Credibility. Informative tone (OAB Provimento 205 compliant).

function ComoFunciona({ palette, serifFamily }) {
  const passos = [
    {
      n: '01',
      titulo: 'First contact',
      texto: 'Send a message by WhatsApp or email describing your situation in Brazil — a contract, inheritance, divorce, unpaid debt. No long form, no signup.',
      tempo: 'Reply within 1 business day',
    },
    {
      n: '02',
      titulo: 'Initial conversation',
      texto: 'A short video meeting in your time zone. We review what is happening, what documents exist, and the realistic legal options under Brazilian law.',
      tempo: 'In English, Spanish or Portuguese',
    },
    {
      n: '03',
      titulo: 'Power of Attorney',
      texto: 'You sign and apostille a Power of Attorney in your country. From that moment I can act for you in Brazil — courts, banks, registries — without you traveling.',
      tempo: 'Most clients never come to Brazil',
    },
    {
      n: '04',
      titulo: 'Execution & reporting',
      texto: 'Fees and strategy are agreed in writing before work begins. You receive plain-English updates at every milestone of the case.',
      tempo: 'Confidentiality by professional ethics',
    },
  ];

  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 — How it works
        </p>
        <h2
          className="font-serif"
          style={{
            fontFamily: serifFamily,
            color: palette.ink,
            fontSize: 'clamp(32px, 3.6vw, 48px)',
            fontWeight: 500,
            lineHeight: 1.05,
          }}
        >
          From first contact to an{' '}
          <span style={{ fontStyle: 'italic', color: palette.accent }}>
            informed decision
          </span>
          .
        </h2>
        <p
          className="font-sans text-[15px] leading-[1.7] mt-6"
          style={{ color: palette.muted }}
        >
          Looking for a lawyer often comes with anxiety and doubt. So you know
          exactly what to expect, this is the path most cases follow at the firm.
        </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 }}
                >
                  Step {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 }}
        >
          {[
            'Reply within 1 business day',
            'Confidential service',
            'Fees disclosed before work begins',
            'Fees agreed in writing',
          ].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;