/* Stack de valor + Qual Mãe é você (v3.1) */

function ValueStack() {
  const items = [
    { name: 'Método Corpo Definido vitalício', value: '1.485' },
    { name: 'SOS Mães — 21 dias pra recomeçar', value: '197' },
    { name: 'Bumbum na Lua', value: '98' },
    { name: 'Barriga Definida', value: '98' },
    { name: 'Comunidade e suporte de continuidade', value: 'incluso' },
  ];
  return (
    <section style={{ padding: '64px 22px', background: '#fff' }}>
      <span className="eyebrow" style={{ color: 'var(--jp-pink)' }}>O que você recebe hoje</span>
      <h2 className="display" style={{
        fontSize: 'clamp(28px, 7vw, 38px)',
        marginTop: 12,
        marginBottom: 24,
        letterSpacing: '-0.025em',
        lineHeight: 1.05,
      }}>
        O pacote completo de Dia das Mães:
      </h2>

      <div style={{
        background: 'var(--jp-pink-50)',
        border: '2px solid var(--jp-pink-100)',
        borderRadius: 18,
        padding: '20px 18px',
        marginBottom: 22,
      }}>
        {items.map((it, i) => (
          <div key={i} style={{
            display: 'flex',
            alignItems: 'flex-start',
            justifyContent: 'space-between',
            gap: 14,
            padding: '12px 0',
            borderBottom: i < items.length - 1 ? '1px solid rgba(255,20,147,0.15)' : 'none',
          }}>
            <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10, flex: 1 }}>
              <i data-lucide="check-circle-2" style={{ width: 18, height: 18, color: 'var(--jp-green)', flexShrink: 0, marginTop: 2 }}></i>
              <span style={{ fontSize: 15, fontWeight: 600, color: 'var(--fg-strong)', lineHeight: 1.4 }}>{it.name}</span>
            </div>
            <span style={{
              fontSize: 13,
              fontWeight: 700,
              color: it.value === 'incluso' ? 'var(--jp-pink-600)' : 'var(--fg-muted)',
              whiteSpace: 'nowrap',
            }}>{it.value === 'incluso' ? 'Incluso' : `R$ ${it.value}`}</span>
          </div>
        ))}
      </div>

      <div style={{
        display: 'flex',
        flexDirection: 'column',
        gap: 6,
        background: 'var(--jp-black)',
        borderRadius: 14,
        padding: '22px 20px',
        color: '#fff',
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', fontSize: 14 }}>
          <span style={{ color: 'rgba(255,255,255,0.7)' }}>Valor total dos itens</span>
          <span style={{ textDecoration: 'line-through', color: 'rgba(255,255,255,0.55)', fontWeight: 600 }}>R$ 1.878</span>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: 6 }}>
          <span style={{ fontSize: 16, fontWeight: 700, color: 'var(--jp-pink)' }}>Você paga uma vez</span>
          <span className="display" style={{ fontSize: 38, color: '#fff', letterSpacing: '-0.02em' }}>R$ 297</span>
        </div>
        <p style={{ fontSize: 13, color: 'rgba(255,255,255,0.7)', marginTop: 10, lineHeight: 1.5 }}>
          E treina com a Jaque <strong style={{ color: '#fff' }}>pra sempre.</strong>
        </p>
      </div>

      <p style={{ fontSize: 13, color: 'var(--fg-subtle)', marginTop: 14, lineHeight: 1.5 }}>
        Menos que uma pizza por mês no primeiro ano. Sem mensalidade. Sem renovação.
      </p>
    </section>
  );
}

function QualMae() {
  const cenarios = [
    { tag: '🟢', titulo: 'Já treina comigo', desc: 'Transforma seu acesso atual em uma decisão pra sempre.' },
    { tag: '🟡', titulo: 'Comprou e pausou', desc: 'Esse é o reset pra voltar sem recomeçar do zero.' },
    { tag: '🔴', titulo: 'Seu acesso expirou', desc: 'Você volta com condição especial e bônus de recomeço.' },
    { tag: '🆕', titulo: 'Nunca foi minha aluna', desc: 'Você entra agora e não precisa mais comprar de novo.' },
  ];
  return (
    <section style={{ padding: '60px 22px', background: 'var(--jp-pink-50)' }}>
      <span className="eyebrow" style={{ color: 'var(--jp-pink)' }}>Pra qualquer mãe</span>
      <h2 className="display" style={{
        fontSize: 'clamp(28px, 7vw, 38px)',
        marginTop: 12,
        marginBottom: 22,
        letterSpacing: '-0.025em',
        lineHeight: 1.05,
      }}>
        Qual mãe é você hoje?
      </h2>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 22 }}>
        {cenarios.map((c, i) => (
          <div key={i} style={{
            background: '#fff',
            border: '1px solid var(--jp-pink-100)',
            borderRadius: 14,
            padding: '14px 16px',
            display: 'flex',
            alignItems: 'flex-start',
            gap: 12,
          }}>
            <span style={{ fontSize: 22, lineHeight: 1, flexShrink: 0 }}>{c.tag}</span>
            <div>
              <h3 style={{
                fontSize: 14,
                fontWeight: 800,
                color: 'var(--fg-strong)',
                margin: '0 0 4px 0',
                fontFamily: 'var(--font-display)',
              }}>{c.titulo}</h3>
              <p style={{ fontSize: 13.5, color: 'var(--fg-muted)', margin: 0, lineHeight: 1.5 }}>{c.desc}</p>
            </div>
          </div>
        ))}
      </div>

      <p style={{
        fontSize: 16,
        lineHeight: 1.5,
        fontStyle: 'italic',
        color: 'var(--fg-strong)',
        textAlign: 'center',
        padding: '0 8px',
      }}>
        Quem tem resultado não é quem nunca para. É quem sempre <span style={{ color: 'var(--jp-pink)', fontStyle: 'normal', fontWeight: 700 }}>sabe recomeçar.</span>
      </p>
    </section>
  );
}

Object.assign(window, { ValueStack, QualMae });