function Pricing() {
  const keyFeatures = [
  'Access the Eivi app',
  '2 CGMs (glucose monitors) each month for 24/7 metabolism tracking',
  'Individual feedback on all meals and workouts'];

  const extras = [
  'Private member space, with educational courses',
  'Live training sessions',
  'Q&A sessions to learn your metabolism',
  'Direct access to Tony Martin'];


  const Check = ({ accent }) =>
  <span style={{
    flexShrink: 0, width: 24, height: 24, borderRadius: 999,
    background: accent, color: '#fff',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    fontSize: 20, fontWeight: 500, marginTop: 4
  }} className="t-body-sm">✓</span>;


  return (
    <section id="pricing" className="section-pad" style={{ background: '#fff' }}>
      <div className="container">
        <div style={{ textAlign: 'center', maxWidth: 820, margin: '0 auto clamp(48px, 7vw, 80px)' }}>
          <h2 className="t-h2" style={{ margin: 0, color: '#000' }}>An all-inclusive programme that will put you in charge of your metabolism</h2>
        </div>

        <article style={{
          background: '#0B1F24', color: '#fff',
          borderRadius: 'clamp(24px, 3vw, 32px)',
          padding: 'clamp(32px, 5vw, 72px)',
          maxWidth: 960, margin: '0 auto',
          display: 'grid', gap: 'clamp(32px, 5vw, 56px)'
        }}>
          {/* Header: price + CTA */}
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            gap: 24, flexWrap: 'wrap'
          }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, flexWrap: 'wrap' }}>
              <span className="t-h1" style={{ color: '#fff' }}>€599</span>
              <span style={{ fontSize: 20, opacity: 0.7, fontWeight: 500 }}>/ 3 months</span>
            </div>
            <a href="#join" className="btn btn-lg pricing-cta" style={{
              background: '#1BBBBB', color: '#fff', textAlign: 'center'
            }}>Apply to join</a>
          </div>

          {/* Divider */}
          <div style={{ height: 1, background: 'rgba(255,255,255,0.12)' }} />

          {/* Features: two columns */}
          <div style={{
            display: 'grid', gap: 'clamp(32px, 5vw, 56px)'
          }} className="pricing-features">
            <div>
              <div style={{
                fontSize: 20, fontWeight: 500, letterSpacing: '0.08em',
                textTransform: 'uppercase', color: '#1BBBBB', marginBottom: 20
              }} className="t-body-sm">Key features</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 16 }}>
                {keyFeatures.map((item) =>
                <li key={item} className="t-body" style={{
                  display: 'flex', gap: 14, color: 'rgba(255,255,255,0.95)'
                }}>
                    <Check accent="#1BBBBB" />
                    <span>{item}</span>
                  </li>
                )}
              </ul>
            </div>
            <div>
              <div style={{
                fontSize: 20, fontWeight: 500, letterSpacing: '0.08em',
                textTransform: 'uppercase', color: 'rgba(255,255,255,0.6)', marginBottom: 20
              }} className="t-body-sm">ALSO INCLUDES</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 16 }}>
                {extras.map((item) =>
                <li key={item} className="t-body" style={{
                  display: 'flex', gap: 14, color: 'rgba(255,255,255,0.85)'
                }}>
                    <Check accent="rgba(255,255,255,0.18)" />
                    <span>{item}</span>
                  </li>
                )}
              </ul>
            </div>
          </div>
        </article>
      </div>

      <style>{`
        #pricing .pricing-features { grid-template-columns: 1fr; }
        @media (min-width: 640px) {
          #pricing .pricing-features { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 480px) {
          #pricing .pricing-cta { width: 100%; }
        }
      `}</style>
    </section>);

}
window.Pricing = Pricing;