/* global React, BtnPrimary, Eyebrow */

const PRICING_FEATURES = [
  'All 480+ indicators',
  'All 48 exchanges',
  'Unlimited charts & layouts',
  'Alert system with Telegram',
  'Agent API access',
  'Community support',
];

const Check = () => (
  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" style={{ flexShrink: 0 }} aria-hidden>
    <polyline points="1,7 5,12 13,2"
      stroke="var(--mlc-gold)" strokeWidth="1.5"
      strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

const Pricing = ({ onNavigate }) => (
  <section
    id="pricing"
    data-screen-label="05 Pricing"
    style={{ padding: '80px 32px', position: 'relative', zIndex: 1 }}
  >
    <div style={{ maxWidth: 1080, margin: '0 auto' }}>
      <Eyebrow style={{ textAlign: 'center' }}>Pricing</Eyebrow>
      <h2 style={{
        fontSize: 42, fontWeight: 700, lineHeight: 1.15,
        letterSpacing: '-0.02em', color: 'var(--mlc-cream)',
        textAlign: 'center', margin: '0 0 40px',
      }}>
        Free. Forever.
      </h2>
      <div style={{ display: 'flex', justifyContent: 'center' }}>
        <div
          style={{
            position: 'relative',
            width: '100%', maxWidth: 420,
            background: 'rgba(33,88,164,0.10)',
            borderRadius: 16,
            border: '1.5px solid rgba(33,88,164,0.45)',
            padding: 28,
            overflow: 'hidden',
            animation: 'mlcPulseGlow 3s ease-in-out infinite',
          }}
        >
          {/* Top gold hairline */}
          <div style={{
            position: 'absolute', top: 0, left: 16, right: 16, height: 1,
            background: 'rgba(244,205,99,0.60)',
          }} />
          <div style={{
            fontSize: 13, fontWeight: 600,
            color: 'var(--mlc-gold)', textAlign: 'center', marginBottom: 8,
          }}>
            OPEN SOURCE
          </div>
          <div style={{
            fontSize: 44, fontWeight: 700,
            color: 'var(--mlc-cream)', textAlign: 'center', marginBottom: 16,
            letterSpacing: '-0.02em',
          }}>
            Free
          </div>
          <hr style={{
            border: 'none', borderTop: '1px solid rgba(254,255,238,0.06)',
            margin: '0 0 16px',
          }} />
          <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
            {PRICING_FEATURES.map((f) => (
              <li key={f} style={{
                display: 'flex', alignItems: 'center', gap: 10,
                fontSize: 13, fontWeight: 400,
                color: 'rgba(254,255,238,0.65)',
                padding: '8px 0',
              }}>
                <Check /> {f}
              </li>
            ))}
          </ul>
          <div style={{ marginTop: 24 }}>
            <BtnPrimary
              onClick={(e) => { e.preventDefault(); onNavigate?.('download'); }}
              style={{ display: 'block', textAlign: 'center' }}
            >
              Download Free
            </BtnPrimary>
          </div>
        </div>
      </div>
      <style>{`
        @keyframes mlcPulseGlow {
          0%, 100% { box-shadow: 0 0 40px rgba(33,88,164,0.25); }
          50%      { box-shadow: 0 0 60px rgba(33,88,164,0.40); }
        }
      `}</style>
    </div>
  </section>
);

window.Pricing = Pricing;