// Para quem — formato editorial em lista horizontal (variedade visual vs Abordagem)
function ParaQuem() {
  const grupos = [
    { n: '01', icon: 'user', t: 'Psicoterapia individual', who: 'Adultos · Adolescentes (a partir dos 10)', d: 'Ansiedade, autoconhecimento, transições de vida, luto, dificuldades de relacionamento, gestão do estresse.' },
    { n: '02', icon: 'heart', t: 'Terapia de casal', who: 'Casais em qualquer fase', d: 'Comunicação, conflitos recorrentes, reconstrução da intimidade, decisões importantes, terapia pré e pós-separação.' },
    { n: '03', icon: 'users', t: 'Terapia familiar', who: 'Famílias com crianças, adolescentes ou adultos', d: 'Crises familiares, conflitos entre gerações, separação, recasamento, adolescência difícil, perdas.' },
  ];
  return (
    <section className="section">
      <div className="container">
        <Reveal>
          <div style={{ maxWidth: 640, marginBottom: 56 }}>
            <h2 className="h-section">Três formatos. <span className="em">Um mesmo cuidado.</span></h2>
            <p style={{ fontSize: 17, color: 'var(--muted)', marginTop: 14, lineHeight: 1.6 }}>
              A escuta é a mesma. O que muda é quem está na sala.
            </p>
          </div>
        </Reveal>
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {grupos.map((g, i) => (
            <Reveal key={g.t} delay={i * 0.06}>
              <div style={{ display: 'grid', gridTemplateColumns: '80px 1fr auto', gap: 28, alignItems: 'center', padding: '30px 0', borderTop: '1px solid var(--line)', ...(i === grupos.length - 1 ? { borderBottom: '1px solid var(--line)' } : {}) }} className="row-hover">
                <span style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 36, fontWeight: 500, color: 'var(--brand-300)', letterSpacing: '-.02em' }}>{g.n}</span>
                <div>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 600, margin: 0, color: 'var(--ink-2)' }}>{g.t}</h3>
                  <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--muted)', margin: '8px 0 6px', maxWidth: '64ch' }}>{g.d}</p>
                  <span style={{ fontSize: 13, fontWeight: 500, letterSpacing: '.04em', color: 'var(--brand)' }}>{g.who}</span>
                </div>
                <div style={{ width: 56, height: 56, borderRadius: 999, background: 'var(--paper-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }} className="icon-bubble">
                  <Icon name={g.icon} size={26} color="var(--brand)" stroke={1.6} />
                </div>
              </div>
            </Reveal>
          ))}
        </div>
        <style>{`
          .row-hover { transition: padding-left .35s var(--ease-out); }
          .row-hover:hover { padding-left: 14px !important; }
          .row-hover:hover .icon-bubble { background: var(--brand); }
          .row-hover:hover .icon-bubble svg { stroke: #fff !important; }
          @media (max-width: 720px) {
            .row-hover { grid-template-columns: 1fr !important; gap: 14px !important; }
            .row-hover > div:last-child { display: none !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

window.ParaQuem = ParaQuem;