// Nova seção "Para família" (home-v3) — layout split: texto à esquerda
// (dentro do .container, como o resto do site) + foto full-bleed à direita
// (até a borda da viewport, não limitada pelo .container). Padrão novo no
// site (as outras seções não têm foto full-bleed), por isso o grid fica no
// <section> inteiro, não dentro de um .container.
// window.ParaFamiliaSection.

const PARA_FAMILIA_STEPS = [
  {
    n: '1',
    title: 'Você assina o Econome',
    text: 'Uma única assinatura para cuidar das finanças em família, com até 4 pessoas e sem custo adicional.',
  },
  {
    n: '2',
    title: 'Convida até 3 pessoas',
    text: 'Envie o link gerado pelo Econome para seu parceiro, sua parceira ou outros membros da família.',
  },
  {
    n: '3',
    title: 'Cada um participa. Todos acompanham.',
    text: 'Cada pessoa registra seus gastos e recebimentos no app do próprio dispositivo, e todos têm a mesma visão das contas.',
  },
];

function ParaFamiliaSection() {
  return (
    <section id="para-familia">
      <div className="familia-grid">
        <div className="familia-text">
          <div className="eyebrow"><span className="dot" />Para família</div>
          <h2>
            Pronto para quem<br />
            <span className="familia-highlight">compartilha</span> a vida<br />
            e as contas.
          </h2>

          <div className="familia-steps">
            {PARA_FAMILIA_STEPS.map((s) => (
              <div key={s.n} className="familia-step">
                <h3>{s.n}. {s.title}</h3>
                <p>{s.text}</p>
              </div>
            ))}
          </div>
        </div>

        <div className="familia-photo">
          <img src="assets/casal.jpg" alt="Casal escolhendo roupas de bebê juntos, planejando as finanças da família" />
        </div>
      </div>

      <style>{`
        /* A seção herda o padding-bottom:96px do <section> global, mas a foto
           é full-bleed até a borda — isso deixava uma faixa vazia entre a
           foto e o início da próxima seção (Planos). Zera só o de baixo;
           o de cima (gap com "Planeja melhor") continua herdado. */
        #para-familia { padding-bottom: 0; }

        .familia-grid {
          display: grid;
          /* 4 colunas iguais (25% cada): texto ocupa as 2 primeiras (0-50%),
             foto ocupa as 3 últimas (25-100%) — elas DIVIDEM a faixa de 25 a
             50%, texto por cima (z-index), onde a foto já esmaeceu pro fundo
             da página (mask-image abaixo). Não é lado a lado, é sobreposto. */
          grid-template-columns: repeat(4, 1fr);
          align-items: stretch;
          min-height: 620px;
        }
        .familia-text {
          grid-column: 1 / 3;
          grid-row: 1;
          position: relative;
          z-index: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          /* align-items: flex-start — sem isso o eyebrow (inline-flex, só do
             tamanho do próprio texto) esticava pra largura inteira da coluna,
             virando aquele pílula gigante e vazia. */
          align-items: flex-start;
          padding: 64px clamp(32px, 5vw, 80px) 64px max(32px, calc((100vw - 1240px) / 2 + 32px));
        }
        .familia-text h2 {
          font-size: clamp(30px, 3.6vw, 44px);
          line-height: 1.12;
          margin: 16px 0 32px;
        }
        .familia-highlight { color: var(--purple); }
        .familia-steps { display: flex; flex-direction: column; gap: 20px; max-width: 440px; }
        .familia-step h3 { font-size: 16.5px; margin-bottom: 4px; }
        .familia-step p { font-size: 15px; color: var(--ink-3); line-height: 1.6; }

        .familia-photo {
          grid-column: 2 / 5;
          grid-row: 1;
          position: relative;
          min-height: 320px;
        }
        .familia-photo img {
          position: absolute; inset: 0;
          width: 100%; height: 100%;
          object-fit: cover;
          object-position: 50% 0%;
          display: block;
          /* Esmaece a borda que fica sob o texto, em vez de cortar reto —
             mesma ideia do vídeo em loop-video-wrap (problem-v3.jsx): a foto
             se funde no fundo da página ali, só fica full-bleed nas outras
             bordas (topo/direita/baixo). A faixa sobreposta com o texto é um
             terço da largura da própria foto (25% de 4 colunas / 75% dela) —
             o esmaecido termina um pouco depois, em 40%, de folga. */
          -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 52%, #000 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 52%, #000 100%);
        }

        @media (max-width: 880px) {
          .familia-grid { grid-template-columns: 1fr; min-height: 0; }
          /* No mobile some a sobreposição — volta a empilhar normal (foto
             na linha 1, texto na linha 2, sem overlap). */
          .familia-text { grid-column: 1; grid-row: 2; z-index: auto; padding: 56px 32px 40px; text-align: center; align-items: center; }
          .familia-photo { grid-column: 1; grid-row: 1; min-height: 320px; }
          .familia-steps { margin: 0 auto; text-align: left; }
          /* Empilhado, a foto fica em cima do texto — esmaece embaixo (não
             mais à esquerda) pra fundir com o que vem depois dela. */
          .familia-photo img {
            -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
          }
        }
      `}</style>
    </section>
  );
}

window.ParaFamiliaSection = ParaFamiliaSection;