/* global React, BtnPrimary, BtnGhost */

const CTA = ({ onNavigate }) => (
  <section
    id="cta"
    data-screen-label="06 CTA"
    style={{
      padding: '80px 32px',
      position: 'relative',
      overflow: 'hidden',
      zIndex: 1,
    }}
  >
    {/* CTA glow — blue + warm */}
    <div
      aria-hidden
      style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: `
          radial-gradient(ellipse 400px 300px at 50% 50%, rgba(33,88,164,0.22) 0%, transparent 70%),
          radial-gradient(ellipse 280px 200px at 62% 60%, rgba(244,205,99,0.08) 0%, transparent 70%)
        `,
      }}
    />
    <div style={{
      position: 'relative',
      maxWidth: 720, margin: '0 auto', textAlign: 'center',
    }}>
      <h2 style={{
        fontSize: 42, fontWeight: 700, lineHeight: 1.15,
        letterSpacing: '-0.02em', color: 'var(--mlc-cream)',
        margin: '0 0 16px',
      }}>
        Ready to start charting?
      </h2>
      <p style={{
        fontSize: 17, color: 'rgba(254,255,238,0.55)',
        margin: '0 0 32px', fontWeight: 400,
      }}>
        Join thousands of traders using mylittlechart.
      </p>
      <div style={{
        display: 'flex', gap: 16,
        justifyContent: 'center', flexWrap: 'wrap',
      }}>
        <BtnPrimary onClick={(e) => { e.preventDefault(); onNavigate?.('download'); }}>
          Get Started Free →
        </BtnPrimary>
        <BtnGhost onClick={(e) => { e.preventDefault(); onNavigate?.('features'); }}>
          See Features
        </BtnGhost>
      </div>
    </div>
  </section>
);

window.CTA = CTA;