function MobileSection() {
  return (
    <section style={{ background: 'linear-gradient(180deg, var(--purple-darker) 0%, var(--purple-deep) 100%)', color: 'white', position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden="true" style={{
        position: 'absolute', top: -200, right: -200, width: 600, height: 600,
        background: 'radial-gradient(circle, rgba(80, 208, 128, 0.18) 0%, transparent 70%)',
        pointerEvents: 'none',
      }} />

      <div className="container" style={{ position: 'relative' }}>
        <div className="mobile-grid" style={{
          display: 'grid',
          gridTemplateColumns: '1.2fr 1fr',
          gap: 64,
          alignItems: 'center',
        }}>
          <div>
            <div className="eyebrow" style={{ background: 'rgba(255,255,255,0.08)', borderColor: 'rgba(255,255,255,0.12)', color: 'rgba(255,255,255,0.8)' }}>
              <span className="dot" style={{ background: '#50D080' }} />
              Pensado para o momento da compra
            </div>
            <h2 style={{ color: 'white', fontSize: 'clamp(32px, 4.5vw, 52px)', marginTop: 20, marginBottom: 20, letterSpacing: '-0.03em' }}>
              Feito para registrar na hora,<br/>
              <span style={{ color: '#50D080' }}>de qualquer lugar.</span>
            </h2>
            <p style={{ fontSize: 18, color: 'rgba(255,255,255,0.75)', lineHeight: 1.55, marginBottom: 32, maxWidth: 480 }}>
              O Econome é uma aplicação web responsiva. Use no computador para analisar
              seus dados e no celular para registrar gastos no momento em que eles acontecem.
            </p>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 420, marginBottom: 32 }}>
              {[
                { icon: 'Cart', label: 'No supermercado, antes de passar no caixa' },
                { icon: 'Coffee', label: 'No restaurante, ao dividir a conta' },
                { icon: 'Bolt', label: 'No transporte, no posto, na farmácia' },
              ].map(it => {
                const I = Icon[it.icon];
                return (
                  <div key={it.label} style={{
                    display: 'flex', alignItems: 'center', gap: 14,
                    padding: '14px 18px',
                    background: 'rgba(255,255,255,0.06)',
                    border: '1px solid rgba(255,255,255,0.08)',
                    borderRadius: 14,
                  }}>
                    <div style={{ width: 36, height: 36, borderRadius: 10, background: 'rgba(80, 208, 128, 0.20)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      <I size={18} color="#50D080" />
                    </div>
                    <span style={{ fontSize: 15, color: 'rgba(255,255,255,0.92)' }}>{it.label}</span>
                  </div>
                );
              })}
            </div>
          </div>

          <div style={{ display: 'flex', justifyContent: 'center', position: 'relative' }}>
            <div style={{ width: 300, position: 'relative' }}>
              <PhoneFrame>
                <PhoneAppContent />
              </PhoneFrame>
              {/* Floating tag */}
              <div style={{
                position: 'absolute',
                left: -40, top: '42%',
                background: '#50D080',
                color: 'white',
                padding: '10px 14px',
                borderRadius: 12,
                fontSize: 13,
                fontWeight: 600,
                boxShadow: '0 8px 24px rgba(80, 208, 128, 0.42)',
                display: 'flex', alignItems: 'center', gap: 8,
              }}>
                <Icon.Bolt size={14} color="white" />
                Em 5 segundos
              </div>
            </div>
          </div>
        </div>

        <style>{`
          @media (max-width: 880px) {
            .mobile-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

window.MobileSection = MobileSection;