/* Pricing section for the Rep by Rep marketing site.
   Loaded as a separate JSX file so it stays modular. */

const TIERS = [
  {
    name: 'Training',
    price: 117,
    tagline: 'Custom programming, built around you.',
    bullets: [
      'Custom training program for your schedule, equipment, and history',
      'Adjusted every 8 weeks',
      'Form video review (up to 3/wk)',
      'Direct messaging with Coach Jason',
    ],
  },
  {
    name: 'Nutrition',
    price: 117,
    tagline: 'Macros that fit your life.',
    bullets: [
      'Custom macro targets',
      'Weekly bodyweight + photo trend review',
      'Refeed & diet break protocols',
      'Direct messaging with Coach Jason',
    ],
  },
  {
    name: 'Training + Nutrition',
    price: 217,
    tagline: 'Both, working as one system.',
    popular: true,
    bullets: [
      'All benefits of Training and Nutrition',
      'Coordinated programming (nutrition supports training phase)',
      'Weekly 15-minute check-in calls',
      'Priority response on messages',
      'Inside Rep by Rep — members-only newsletter',
    ],
  },
  {
    name: 'Contest Prep',
    price: 317,
    tagline: 'For men eyeing the stage.',
    application: true,
    bullets: [
      'All benefits of Training + Nutrition',
      '20–24 week competition timeline',
      'Posing & stage presence coaching',
      'Peak week protocol & rebound plan',
      'Federation-aware structure',
    ],
  },
];

const Pricing = () => (
  <section id="pricing" className="bg-wash">
    <div className="wrap">
      <div className="eyebrow">Pricing</div>
      <h2 className="h-section" style={{ marginTop: 12 }}>Honest pricing.<br/>3-month minimum.</h2>
      <div className="rule" />
      <p style={{ fontSize: 18, lineHeight: 1.55, color: 'var(--fg-2)', maxWidth: '58ch', marginTop: 28 }}>
        We work in 3-month minimum commitments, month-to-month after.
        We don't sell drop-in coaching. The work takes time.
      </p>

      {/* Founding member callout */}
      <div style={{
        marginTop: 36,
        padding: '18px 24px',
        background: 'var(--rxr-charcoal)',
        color: '#fff',
        borderRadius: 6,
        display: 'flex',
        alignItems: 'center',
        gap: 24,
        flexWrap: 'wrap',
      }}>
        <div style={{
          fontSize: 10,
          fontWeight: 600,
          letterSpacing: '0.22em',
          textTransform: 'uppercase',
          color: 'var(--rxr-sapphire-tint)',
          background: 'rgba(212,226,248,0.1)',
          padding: '6px 12px',
          borderRadius: 3,
        }}>
          Founding Member
        </div>
        <div style={{ fontSize: 14, lineHeight: 1.5, flex: 1, minWidth: 280, color: 'rgba(255,255,255,0.85)' }}>
          Lock in these rates while we build the roster. Pricing rises as we fill spots.
          Founding members keep their rate as long as they stay enrolled.
        </div>
      </div>

      {/* Tier grid */}
      <div className="m-2" style={{
        marginTop: 40,
        display: 'grid',
        gridTemplateColumns: 'repeat(4, 1fr)',
        gap: 16,
        alignItems: 'stretch',
      }}>
        {TIERS.map((t) => (
          <article key={t.name} style={{
            background: t.popular ? 'var(--rxr-charcoal)' : '#fff',
            color: t.popular ? '#fff' : 'var(--fg)',
            border: t.popular ? '1px solid var(--rxr-charcoal)' : '1px solid var(--border)',
            borderRadius: 6,
            padding: 28,
            display: 'flex',
            flexDirection: 'column',
            position: 'relative',
            transition: 'all 200ms cubic-bezier(.16,1,.3,1)',
          }}
            onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-3px)'; }}
            onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; }}>

            {t.popular && (
              <div style={{
                position: 'absolute',
                top: -10,
                left: 28,
                background: 'var(--accent)',
                color: '#fff',
                fontSize: 9,
                fontWeight: 600,
                letterSpacing: '0.22em',
                textTransform: 'uppercase',
                padding: '5px 10px',
                borderRadius: 3,
              }}>
                Most Popular
              </div>
            )}

            <div style={{
              fontSize: 10,
              fontWeight: 600,
              letterSpacing: '0.22em',
              textTransform: 'uppercase',
              color: t.popular ? 'var(--rxr-sapphire-tint)' : 'var(--accent)',
            }}>
              {t.application ? 'By Application' : 'Plan'}
            </div>

            <h3 style={{
              fontFamily: 'var(--font-headline)',
              fontWeight: 600,
              fontSize: 22,
              textTransform: 'uppercase',
              letterSpacing: '0.02em',
              margin: '10px 0 6px',
              lineHeight: 1.1,
            }}>
              {t.name}
            </h3>

            <div style={{
              fontSize: 13,
              color: t.popular ? 'rgba(255,255,255,0.65)' : 'var(--fg-3)',
              lineHeight: 1.5,
              marginBottom: 20,
            }}>
              {t.tagline}
            </div>

            <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginBottom: 4 }}>
              <span style={{ fontSize: 16, color: t.popular ? 'rgba(255,255,255,0.55)' : 'var(--fg-3)', fontWeight: 500 }}>$</span>
              <span className="mono" style={{
                fontSize: 44,
                fontWeight: 500,
                letterSpacing: '-0.02em',
                lineHeight: 1,
              }}>{t.price}</span>
              <span style={{ fontSize: 14, color: t.popular ? 'rgba(255,255,255,0.55)' : 'var(--fg-3)', marginLeft: 2 }}>/mo</span>
            </div>

            <div style={{
              fontSize: 10,
              color: t.popular ? 'rgba(255,255,255,0.5)' : 'var(--fg-3)',
              fontStyle: 'italic',
              marginBottom: 20,
            }}>
              3-month minimum · month-to-month after
            </div>

            <div style={{
              height: 1,
              background: t.popular ? 'rgba(255,255,255,0.15)' : 'var(--border)',
              margin: '4px 0 18px',
            }} />

            <ul style={{
              listStyle: 'none',
              padding: 0,
              margin: 0,
              display: 'flex',
              flexDirection: 'column',
              gap: 10,
              flex: 1,
            }}>
              {t.bullets.map(b => (
                <li key={b} style={{
                  fontSize: 13,
                  color: t.popular ? 'rgba(255,255,255,0.85)' : 'var(--fg-2)',
                  display: 'flex',
                  gap: 10,
                  alignItems: 'flex-start',
                  lineHeight: 1.5,
                }}>
                  <span style={{
                    color: t.popular ? 'var(--rxr-sapphire-tint)' : 'var(--accent)',
                    flexShrink: 0,
                    marginTop: 1,
                  }}>—</span>
                  {b}
                </li>
              ))}
            </ul>

            {t.application && (
              <div style={{
                fontSize: 10,
                fontWeight: 600,
                letterSpacing: '0.22em',
                textTransform: 'uppercase',
                color: t.popular ? 'var(--rxr-sapphire-tint)' : 'var(--accent)',
                marginTop: 18,
                paddingTop: 14,
                borderTop: t.popular ? '1px solid rgba(255,255,255,0.15)' : '1px solid var(--border)',
              }}>
                Limited to 12 active spots
              </div>
            )}

            <a href="#apply" style={{
              marginTop: 24,
              padding: '14px 18px',
              background: t.popular ? '#fff' : 'var(--accent)',
              color: t.popular ? 'var(--rxr-charcoal)' : '#fff',
              fontSize: 12,
              fontWeight: 600,
              letterSpacing: '0.1em',
              textTransform: 'uppercase',
              textAlign: 'center',
              borderRadius: 6,
              textDecoration: 'none',
              transition: 'background 200ms cubic-bezier(.16,1,.3,1)',
              whiteSpace: 'nowrap',
            }}
              onMouseEnter={e => {
                e.target.style.background = t.popular ? 'var(--rxr-haze)' : 'var(--accent-hover)';
              }}
              onMouseLeave={e => {
                e.target.style.background = t.popular ? '#fff' : 'var(--accent)';
              }}>
              {t.application ? 'Apply →' : 'Start →'}
            </a>
          </article>
        ))}
      </div>
    </div>
  </section>
);

Object.assign(window, { Pricing });