// PricingPage.jsx , The Club Tennis
const PricingPage = ({ onNavigate }) => {
  const [openFaq, setOpenFaq] = React.useState(null);

  const goToSignup = (tierKey) => {
    try { sessionStorage.setItem('tct_signup_tier', tierKey); } catch {}
    onNavigate('signup');
  };

  const label = (text) => (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
      <div style={{ width: 24, height: 1, background: '#39FF14' }}></div>
      <span style={{ fontFamily: "'Space Mono',monospace", fontSize: 11, letterSpacing: '2.5px', textTransform: 'uppercase', color: '#39FF14' }}>{text}</span>
    </div>
  );

  const plans = [
    {
      key: 'dropin',
      name: 'Drop In',
      price: '$100',
      per: '/ session',
      featured: false,
      accent: '#AAAAAA',
      badge: null,
      features: ['No commitment','Pay as you go','2 hour session','All programs accessible'],
      cta: 'Book a Session',
    },
    {
      key: 'monthly',
      name: 'Monthly',
      price: '$720',
      per: '/ month',
      featured: true,
      accent: '#FF2D8A',
      badge: 'MOST POPULAR',
      sub: '8 sessions · $90/session · 10% savings',
      features: ['8 sessions per month','10% savings vs drop in','Priority booking','Rain reschedule guarantee'],
      cta: 'Start Monthly',
    },
    {
      key: 'unlimited',
      name: 'Unlimited',
      price: '$1,120',
      per: '/ month',
      featured: false,
      accent: '#39FF14',
      badge: 'BEST VALUE',
      sub: 'Unlimited sessions · ~$70/session',
      features: ['Unlimited sessions','All programs + L5 access','Priority booking & scheduling','Priority everything'],
      cta: 'Go Unlimited',
    },
  ];

  const addons = [
    {
      key: 'tournament',
      name: 'Tournament Team',
      price: '$500',
      per: 'per season',
      desc: 'Coaches travel with players to 2 USTA tournaments. Includes travel coaching, pre match warmup, and match strategy. Entry fees paid by family.',
      items: ['2 USTA Tournaments','Travel Coaching','Match Strategy','Warmup Session'],
    },
    {
      key: 'spain',
      name: 'Spain Summer Camp',
      price: '$4,500',
      per: 'per player',
      desc: '2 weeks of intensive training at Pro Tennis Coaching BCN in Castelldefels, Barcelona. Flights and accommodation not included. Limited to 6 players.',
      items: ['2 Weeks in Barcelona','Daily Coaching Sessions','Club Tennis Staff On-Site','Limited to 6 Players'],
    },
  ];

  const faqs = [
    { q: 'How does billing work?', a: 'Monthly and Unlimited plans auto renew through Stripe each month. Drop In is a one time charge. Receipts are emailed after every charge.' },
    { q: 'Can I cancel?', a: 'Yes, anytime from your account portal. Your access continues through the end of the month you paid for. No partial refunds.' },
    { q: 'Can I switch tiers?', a: 'Yes. Upgrades take effect immediately and are prorated. Downgrades take effect at the start of your next billing cycle.' },
    { q: 'What about rain cancellations?', a: 'We email all families as soon as a session is called off. Monthly and Unlimited members reschedule automatically. Drop-ins get account credit.' },
    { q: 'Is there a trial?', a: 'Drop-in is your trial. $100, one session, no obligation.' },
    { q: 'Is a waiver required?', a: 'Yes. You sign it digitally during checkout. Waivers renew annually.' },
  ];

  return (
    <div style={{ background: '#0A0A0A', fontFamily: "'Outfit',sans-serif", paddingTop: 72 }}>
      {/* Header */}
      <section className="pricing-header" style={{ padding: '80px 48px 72px', borderBottom: '1px solid #2A2A2A' }}>
        {label('Membership')}
        <h1 style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 900, fontSize: 64, letterSpacing: '-3px', textTransform: 'uppercase', color: '#F5F5F5', lineHeight: 1, margin: '0 0 20px' }}>
          <span style={{ color: '#FF2D8A' }}>PRICING</span>
        </h1>
        <p style={{ fontSize: 18, color: '#AAAAAA', lineHeight: 1.7, maxWidth: 480 }}>
          Three ways in. Pick what fits.
        </p>
      </section>

      {/* Pricing Cards */}
      <section className="pricing-section" style={{ padding: '80px 48px', borderBottom: '1px solid #2A2A2A' }}>
        <div className="grid-3col pricing-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 16, alignItems: 'stretch' }}>
          {plans.map((plan, idx) => (
            <div key={plan.name} style={{
              background: plan.featured ? '#130007' : '#111111',
              border: `1px solid ${plan.featured ? 'rgba(255,45,138,0.4)' : '#2A2A2A'}`,
              borderTop: `4px solid ${plan.accent}`,
              borderRadius: 8,
              padding: 48,
              position: 'relative',
              display: 'flex',
              flexDirection: 'column',
            }}>
              {plan.badge && (
                <div style={{ position: 'absolute', top: -1, right: 24, transform: 'translateY(-100%)', background: plan.accent, color: plan.featured ? '#F5F5F5' : '#0A0A0A', fontFamily: "'Space Mono',monospace", fontSize: 9, letterSpacing: '2px', textTransform: 'uppercase', padding: '5px 12px' }}>
                  {plan.badge}
                </div>
              )}
              <div style={{ fontFamily: "'Space Mono',monospace", fontSize: 11, letterSpacing: '2px', textTransform: 'uppercase', color: plan.accent, marginBottom: 20 }}>{plan.name}</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginBottom: 6 }}>
                <span className="pricing-price" style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 900, fontSize: 56, letterSpacing: '-2px', color: '#F5F5F5', lineHeight: 1 }}>{plan.price}</span>
                <span style={{ fontFamily: "'Space Mono',monospace", fontSize: 12, color: '#888' }}>{plan.per}</span>
              </div>
              {plan.sub && <div style={{ fontFamily: "'Space Mono',monospace", fontSize: 10, color: '#888', letterSpacing: '1px', marginBottom: 28, borderBottom: '1px solid #2A2A2A', paddingBottom: 28 }}>{plan.sub}</div>}
              {!plan.sub && <div style={{ height: 28, borderBottom: '1px solid #2A2A2A', marginBottom: 28 }}></div>}
              <div style={{ marginBottom: 32, flex: 1 }}>
                {plan.features.map((f, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 0', borderBottom: '1px solid #1A1A1A' }}>
                    <div style={{ width: 5, height: 5, background: plan.accent, borderRadius: '50%', flexShrink: 0 }}></div>
                    <span style={{ fontSize: 14, color: '#AAAAAA' }}>{f}</span>
                  </div>
                ))}
              </div>
              <button onClick={() => goToSignup(plan.key)} style={{
                width: '100%',
                fontFamily: "'Outfit',sans-serif", fontWeight: 700, fontSize: 14, textTransform: 'uppercase', letterSpacing: '0.5px',
                background: plan.featured ? '#FF2D8A' : 'transparent',
                color: plan.featured ? '#F5F5F5' : plan.accent,
                border: `1px solid ${plan.featured ? '#FF2D8A' : plan.accent}`,
                padding: '14px', cursor: 'pointer', transition: 'transform 120ms, background 120ms',
              }}
                onMouseEnter={e => e.target.style.transform = 'translateY(-1px)'}
                onMouseLeave={e => e.target.style.transform = 'translateY(0)'}>
                {plan.cta}
              </button>
            </div>
          ))}
        </div>
      </section>

      {/* Add-ons */}
      <section className="pricing-section" style={{ padding: '80px 48px', background: '#111111', borderBottom: '1px solid #2A2A2A' }}>
        {label('Add-On Packages')}
        <h2 style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 900, fontSize: 40, letterSpacing: '-1.5px', textTransform: 'uppercase', color: '#F5F5F5', margin: '0 0 40px' }}>
          LEVEL UP YOUR <span style={{ color: '#FF2D8A' }}>TRAINING</span>
        </h2>
        <div className="grid-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          {addons.map((a, i) => (
            <div key={i} style={{ background: '#0A0A0A', border: '1px solid #2A2A2A', borderRadius: 8, padding: 36, display: 'flex', flexDirection: 'column' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 20 }}>
                <div>
                  <h3 style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 900, fontSize: 24, letterSpacing: '-0.5px', textTransform: 'uppercase', color: '#F5F5F5', margin: '0 0 4px' }}>{a.name}</h3>
                  <div style={{ fontFamily: "'Space Mono',monospace", fontSize: 10, color: '#888', letterSpacing: '1.5px', textTransform: 'uppercase' }}>{a.per}</div>
                </div>
                <div style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 900, fontSize: 36, color: '#FF2D8A', letterSpacing: '-1px', lineHeight: 1 }}>{a.price}</div>
              </div>
              <p style={{ fontSize: 14, color: '#AAAAAA', lineHeight: 1.75, margin: '0 0 24px' }}>{a.desc}</p>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginBottom: 24 }}>
                {a.items.map((item, j) => (
                  <span key={j} style={{ fontFamily: "'Space Mono',monospace", fontSize: 9, letterSpacing: '1.5px', textTransform: 'uppercase', color: '#39FF14', border: '1px solid rgba(57,255,20,0.25)', padding: '8px 10px', borderRadius: 2, textAlign: 'center', lineHeight: 1.4 }}>{item}</span>
                ))}
              </div>
              <button onClick={() => goToSignup(a.key)} style={{
                marginTop: 'auto',
                fontFamily: "'Outfit',sans-serif", fontWeight: 700, fontSize: 13, textTransform: 'uppercase', letterSpacing: '0.5px',
                background: 'transparent', color: '#39FF14', border: '1px solid #39FF14',
                padding: '12px', cursor: 'pointer', transition: 'all 120ms',
              }}
                onMouseEnter={e => e.target.style.background = 'rgba(57,255,20,0.1)'}
                onMouseLeave={e => e.target.style.background = 'transparent'}>
                {a.key === 'spain' ? 'Reserve Spot ($1,500 deposit)' : 'Sign Up'}
              </button>
            </div>
          ))}
        </div>
      </section>

      {/* FAQ */}
      <section className="pricing-section" style={{ padding: '80px 48px', borderBottom: '1px solid #2A2A2A' }}>
        <div style={{ textAlign: 'center', marginBottom: 40 }}>
          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 10, marginBottom: 16 }}>
            <div style={{ width: 24, height: 1, background: '#39FF14' }}></div>
            <span style={{ fontFamily: "'Space Mono',monospace", fontSize: 11, letterSpacing: '2.5px', textTransform: 'uppercase', color: '#39FF14' }}>FAQ</span>
          </div>
          <h2 style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 900, fontSize: 40, letterSpacing: '-1.5px', textTransform: 'uppercase', color: '#F5F5F5', margin: 0 }}>
            COMMON <span style={{ color: '#FF2D8A' }}>QUESTIONS</span>
          </h2>
        </div>
        <div style={{ maxWidth: 720, margin: '0 auto' }}>
          {faqs.map((faq, i) => (
            <div key={i} style={{ borderBottom: '1px solid #2A2A2A' }}>
              <button onClick={() => setOpenFaq(openFaq === i ? null : i)} style={{
                width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                padding: '22px 0', background: 'none', border: 'none', cursor: 'pointer',
                fontFamily: "'Outfit',sans-serif", fontWeight: 700, fontSize: 16, color: '#F5F5F5', textAlign: 'left',
              }}>
                {faq.q}
                <span style={{ color: '#39FF14', fontSize: 24, lineHeight: 1, flexShrink: 0, marginLeft: 16 }}>{openFaq === i ? '−' : '+'}</span>
              </button>
              {openFaq === i && (
                <p style={{ fontSize: 15, color: '#AAAAAA', lineHeight: 1.75, margin: '0 0 22px', paddingRight: 40 }}>{faq.a}</p>
              )}
            </div>
          ))}
        </div>
      </section>

      {/* Bottom CTA */}
      <section style={{ padding: '80px 48px', background: '#111111', textAlign: 'center' }}>
        <h2 style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 900, fontSize: 40, letterSpacing: '-1.5px', textTransform: 'uppercase', color: '#F5F5F5', margin: '0 0 12px' }}>
          QUESTIONS? REACH OUT.
        </h2>
        <a href="mailto:rhardt@hw.com" style={{ fontFamily: "'Space Mono',monospace", fontSize: 13, color: '#39FF14', textDecoration: 'none', display: 'block', marginBottom: 32 }}>rhardt@hw.com</a>
        <button onClick={() => goToSignup('monthly')} style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 700, fontSize: 14, textTransform: 'uppercase', letterSpacing: '0.5px', background: '#FF2D8A', color: '#F5F5F5', border: 'none', padding: '14px 32px', cursor: 'pointer' }}>
          Join Now
        </button>
      </section>

      <Footer onNavigate={onNavigate} />
    </div>
  );
};

Object.assign(window, { PricingPage });