// Membership tiers — lead-gen focused, no public pricing
const TIERS = [
  {
    name: 'TRIAL CLASS',
    sub: 'Try us out',
    badge: 'FREE',
    badgeNote: 'On the house',
    perks: [
      'One full kickboxing class',
      'Gloves provided',
      'Free strategy session',
      'No commitment',
    ],
    cta: 'CLAIM FREE CLASS',
    flag: null,
    free: true,
  },
  {
    name: 'KICKBOXING',
    sub: 'Group classes',
    badge: null,
    badgeNote: 'Membership',
    perks: [
      'Unlimited group classes',
      'All fitness levels',
      'Authentic technique coaching',
      'Locker access',
      'InBody body composition scan',
    ],
    cta: 'REQUEST PRICING',
    flag: 'MOST POPULAR',
  },
  {
    name: 'TRANSFORM',
    sub: '6-week challenge',
    badge: null,
    badgeNote: 'Coaching package',
    perks: [
      'Everything in KICKBOXING',
      'Personal accountability coach',
      'Custom meal program',
      'Weekly InBody body comp',
      'Optional meal prep delivery',
      'Body composition analysis',
    ],
    cta: 'GET A QUOTE',
    flag: null,
  },
];

function Pricing({ accent }) {
  return (
    <section className="ko-section ko-section-light" id="pricing">
      <div className="ko-container">
        <div className="ko-section-head">
          <div className="ko-mono ko-eyebrow">
            <span className="ko-eyebrow-bar" style={{ background: accent }} />
            §04 · MEMBERSHIP
          </div>
          <h2 className="ko-h2">
            PICK YOUR <span style={{ color: accent, fontStyle: 'italic' }}>PROGRAM</span>.
          </h2>
          <p className="ko-section-lead">
            Memberships are tailored to your goals, schedule, and starting point.
            Ask about our exclusive offer — no two members pay for what they don't need.
          </p>
        </div>

        <div className="ko-pricing-grid">
          {TIERS.map((t) => {
            const popular = t.flag === 'MOST POPULAR';
            return (
              <article
                key={t.name}
                className={`ko-tier ${popular ? 'is-popular' : ''}`}
                style={popular ? { borderColor: accent, background: '#0a0a0a', color: '#f5f3ee' } : {}}
              >
                {t.flag && (
                  <div className="ko-tier-flag ko-mono" style={{ background: accent }}>
                    {t.flag}
                  </div>
                )}
                <div className="ko-tier-head">
                  <h3 className="ko-tier-name">{t.name}</h3>
                  <p className="ko-tier-sub">{t.sub}</p>
                </div>

                <div className="ko-tier-quote">
                  <div className="ko-mono ko-tier-quote-h" style={{ color: accent }}>
                    {t.badgeNote}
                  </div>
                  {t.badge ? (
                    <div className="ko-tier-quote-badge" style={{ color: accent }}>
                      {t.badge}
                    </div>
                  ) : (
                    <div className="ko-tier-quote-line">
                      <span className="ko-tier-quote-mark">$</span>
                      <span className="ko-tier-quote-rule" />
                      <span className="ko-tier-quote-mark">$</span>
                    </div>
                  )}
                  <div className="ko-mono ko-tier-quote-sub">
                    {t.free ? 'No card required' : 'Custom pricing · Talk to us'}
                  </div>
                </div>

                <ul className="ko-tier-perks">
                  {t.perks.map((p) => (
                    <li key={p}>
                      <span className="ko-tier-check" style={{ color: accent }}>✕</span>
                      {p}
                    </li>
                  ))}
                </ul>
                <button
                  className={`ko-btn ${popular ? 'ko-btn-primary' : 'ko-btn-outline'}`}
                  style={popular ? { background: accent, borderColor: accent } : {}}
                >
                  {t.cta} →
                </button>
              </article>
            );
          })}
        </div>

        <div className="ko-pricing-note ko-mono">
          ASK ABOUT OUR EXCLUSIVE OFFER · CALL (407) 322-1434 · NO LONG-TERM CONTRACTS
        </div>
      </div>
    </section>
  );
}

window.Pricing = Pricing;