function DifferentSection() {
  const others = [
    'Importam dados automaticamente',
    'Mostram o resultado depois',
    'Podem gerar distância da decisão de gasto',
    'Organizam, mas nem sempre ensinam',
  ];
  const econome = [
    'Incentivam o registro consciente',
    'Mostram o impacto no mês atual',
    'Ajudam você a assumir o controle',
    'Organizam, ensinam e criam clareza',
  ];

  return (
    <section id="diferenciais">
      <div className="container">
        <div className="section-header">
          <div className="eyebrow"><span className="dot" />Diferencial</div>
          <h2>Menos automação cega.<br/>Mais consciência financeira.</h2>
          <p>
            O Econome não foi criado para fazer você apenas assistir aos números.
            Foi criado para fazer você participar do próprio controle financeiro.
          </p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
          gap: 16,
          maxWidth: 960,
          margin: '0 auto',
        }}>
          {/* Outros apps */}
          <div style={{
            background: 'var(--bg-elevated)',
            border: '1px solid var(--line)',
            borderRadius: 'var(--radius-xl)',
            padding: 32,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 24 }}>
              <div style={{
                width: 36, height: 36, borderRadius: 10,
                background: 'var(--bg-soft)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: 'var(--ink-3)',
              }}>
                <Icon.X size={18} />
              </div>
              <div>
                <div style={{ fontSize: 12, color: 'var(--ink-4)', textTransform: 'uppercase', letterSpacing: '0.04em', fontWeight: 600 }}>Outros apps</div>
                <div style={{ fontSize: 16, fontWeight: 600, color: 'var(--ink-2)' }}>Automatização total</div>
              </div>
            </div>
            <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 14 }}>
              {others.map((t, i) => (
                <li key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 15, color: 'var(--ink-3)', lineHeight: 1.5 }}>
                  <span style={{ flexShrink: 0, marginTop: 6, width: 4, height: 4, borderRadius: '50%', background: 'var(--ink-5)' }} />
                  {t}
                </li>
              ))}
            </ul>
          </div>

          {/* Econome */}
          <div style={{
            background: 'linear-gradient(180deg, var(--purple-darker) 0%, var(--purple-deep) 100%)',
            color: 'white',
            borderRadius: 'var(--radius-xl)',
            padding: 32,
            position: 'relative',
            overflow: 'hidden',
            boxShadow: '0 20px 40px -12px rgba(76, 29, 149, 0.4)',
          }}>
            <div aria-hidden="true" style={{
              position: 'absolute', top: -100, right: -100, width: 300, height: 300,
              background: 'radial-gradient(circle, rgba(80, 208, 128, 0.20) 0%, transparent 70%)',
              pointerEvents: 'none',
            }} />
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 24, position: 'relative' }}>
              <div style={{
                width: 36, height: 36, borderRadius: 10,
                background: 'var(--green)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: 'white',
              }}>
                <Icon.Check size={20} color="white" />
              </div>
              <div>
                <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)', textTransform: 'uppercase', letterSpacing: '0.04em', fontWeight: 600 }}>Econome</div>
                <div style={{ fontSize: 16, fontWeight: 600 }}>Registro consciente</div>
              </div>
            </div>
            <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 14, position: 'relative' }}>
              {econome.map((t, i) => (
                <li key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 15, lineHeight: 1.5 }}>
                  <span style={{ flexShrink: 0, marginTop: 4 }}><Icon.Check size={16} color="#50D080" /></span>
                  {t}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

window.DifferentSection = DifferentSection;