function Problema() {
  const crencas = [
    { wrong: 'Vou refazer a embalagem.', right: 'Ninguém compra embalagem. Compra-se posicionamento.' },
    { wrong: 'Preciso de um logo mais moderno.', right: 'O seu produto não tem problema de logo. Tem problema de direção.' },
    { wrong: 'Meu concorrente só cresce porque tem dinheiro.', right: 'Ele cresce porque decidiu onde jogar. Você ainda está tentando agradar todo mundo.' },
    { wrong: 'A gente testa e vê o que funciona.', right: 'Testar sem hipótese é chutar com método. Cansa, queima caixa e não ensina nada.' },
  ];
  return (
    <Section id="problema" style={{ background: 'var(--bg)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2.2fr', gap: 60, marginBottom: 80 }} className="prob-head">
          <Label n="02">Quebra de crença</Label>
          <div>
            <MaskLines
              tag="h2"
              className="serif"
              style={{ fontSize: 'clamp(38px, 6vw, 84px)', lineHeight: 0.98, letterSpacing: '-0.03em' }}
              lines={[
                <>Design <em className="italic">bonito</em> não</>,
                <>resolve produto <em className="italic">errado.</em></>,
              ]}
            />
            <Reveal delay={400}>
              <p style={{ marginTop: 36, fontSize: 18, color: 'var(--fg-dim)', maxWidth: 620, lineHeight: 1.55 }}>
                A maioria dos produtos não morre na prateleira por falta de capricho visual.
                Morre porque foi criado no achismo — sem hipótese clara, sem leitura de concorrência,
                sem entender a dor real de quem paga.
              </p>
            </Reveal>
          </div>
        </div>

        <div style={{ display: 'grid', gap: 0, borderTop: '1px solid var(--line-soft)' }}>
          {crencas.map((c, i) => (
            <Reveal key={i} delay={i * 100} style={{
              display: 'grid', gridTemplateColumns: '80px 1fr 1fr', gap: 40,
              padding: '40px 0', borderBottom: '1px solid var(--line-soft)',
              alignItems: 'start',
            }} className="belief-row">
              <span className="mono" style={{ color: 'var(--fg-mute)' }}>0{i + 1}</span>
              <div style={{ color: 'var(--fg-mute)' }}>
                <div className="mono" style={{ marginBottom: 12 }}>O que você está pensando</div>
                <p className="belief-wrong" style={{ fontSize: 22, letterSpacing: '-0.01em', lineHeight: 1.35, textDecoration: 'line-through', textDecorationColor: 'var(--line)' }}>
                  {c.wrong}
                </p>
              </div>
              <div>
                <div className="mono" style={{ marginBottom: 12, color: 'var(--accent)' }}>→ O que o mercado está dizendo</div>
                <p className="serif belief-right" style={{ fontSize: 26, letterSpacing: '-0.015em', lineHeight: 1.3 }}>
                  {c.right}
                </p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 820px) {
          .prob-head { grid-template-columns: 1fr !important; gap: 20px !important; }
          .belief-row { grid-template-columns: 1fr !important; gap: 14px !important; padding: 28px 0 !important; }
        }
        @media (max-width: 480px) {
          .belief-wrong { font-size: 18px !important; }
          .belief-right { font-size: 20px !important; }
        }
      `}</style>
    </Section>
  );
}

window.Problema = Problema;