// ProgramsPage.jsx — The Club Tennis
const ProgramsPage = ({ onNavigate }) => {
  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 days = ['MON','TUE','WED','THU','FRI','SAT','SUN'];
  const sessions = {
    MON: { type: 'Regular', color: '#FF2D8A', note: '' },
    TUE: { type: 'L5 Group + Blast Fitness', color: '#39FF14', note: '' },
    WED: { type: 'Regular', color: '#FF2D8A', note: '' },
    THU: { type: 'L5 Group', color: '#39FF14', note: '' },
    FRI: { type: 'L5 Group', color: '#39FF14', note: '' },
    SAT: { type: 'Regular', color: '#FF2D8A', note: '' },
    SUN: { type: null, color: '#333', note: 'Rest Day' },
  };

  const checklist = ['Tennis racket','Court shoes (non marking soles)','Water bottle','Tennis balls (optional)','Positive attitude'];

  return (
    <div style={{ background: '#0A0A0A', fontFamily: "'Outfit',sans-serif", paddingTop: 72 }}>
      {/* Page Header */}
      <section style={{ padding: '80px 48px 72px', borderBottom: '1px solid #2A2A2A' }}>
        {label('Training')}
        <h1 className="page-heading" 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' }}>PROGRAMS</span> &<br/>SCHEDULE
        </h1>
        <p style={{ fontSize: 18, color: '#AAAAAA', lineHeight: 1.7, maxWidth: 560 }}>
          Two tracks. Six days a week. Every session is two hours of real work.
        </p>
      </section>

      {/* Program Cards */}
      <section className="prog-section" style={{ padding: '80px 48px', borderBottom: '1px solid #2A2A2A' }}>
        {label('The Tracks')}
        <div className="grid-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginTop: 8 }}>
          {/* Regular Group */}
          <div style={{ background: '#111111', border: '1px solid #2A2A2A', borderTop: '4px solid #FF2D8A', borderRadius: 8, padding: 40 }}>
            <span style={{ fontFamily: "'Space Mono',monospace", fontSize: 10, letterSpacing: '2px', textTransform: 'uppercase', color: '#FF2D8A', background: 'rgba(255,45,138,0.1)', border: '1px solid rgba(255,45,138,0.2)', padding: '4px 12px', borderRadius: 2, display: 'inline-block', marginBottom: 24 }}>All Levels Welcome</span>
            <h2 style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 900, fontSize: 36, letterSpacing: '-1.5px', textTransform: 'uppercase', color: '#F5F5F5', margin: '0 0 8px' }}>Regular Group</h2>
            <p style={{ fontSize: 15, color: '#AAAAAA', lineHeight: 1.7, margin: '0 0 32px' }}>
              Monday, Wednesday, and Saturday sessions. Open to all players looking to develop their game in a structured, high energy environment.
            </p>
            <div className="prog-card-details" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 16, borderTop: '1px solid #2A2A2A', paddingTop: 28 }}>
              {[['MON / WED / SAT','Days'],['5:30-7:30 PM','Time'],['7-10','Players/Session']].map(([val,key]) => (
                <div key={key}>
                  <div style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 800, fontSize: 16, color: '#F5F5F5', marginBottom: 4 }}>{val}</div>
                  <div style={{ fontFamily: "'Space Mono',monospace", fontSize: 10, letterSpacing: '1.5px', textTransform: 'uppercase', color: '#888' }}>{key}</div>
                </div>
              ))}
            </div>
          </div>

          {/* L5 Group */}
          <div style={{ background: '#111111', border: '1px solid #2A2A2A', borderTop: '4px solid #39FF14', borderRadius: 8, padding: 40 }}>
            <span style={{ fontFamily: "'Space Mono',monospace", fontSize: 10, letterSpacing: '2px', textTransform: 'uppercase', color: '#39FF14', background: 'rgba(57,255,20,0.08)', border: '1px solid rgba(57,255,20,0.2)', padding: '4px 12px', borderRadius: 2, display: 'inline-block', marginBottom: 24 }}>USTA Level 5</span>
            <h2 style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 900, fontSize: 36, letterSpacing: '-1.5px', textTransform: 'uppercase', color: '#F5F5F5', margin: '0 0 8px' }}>L5 USTA Group</h2>
            <p style={{ fontSize: 15, color: '#AAAAAA', lineHeight: 1.7, margin: '0 0 32px' }}>
              Tuesday, Thursday, and Friday sessions. For USTA Level 5 rated players with a competitive focus. Higher intensity, tournament-level preparation.
            </p>
            <div className="prog-card-details" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 16, borderTop: '1px solid #2A2A2A', paddingTop: 28 }}>
              {[['TUE / THU / FRI','Days'],['5:30-7:30 PM','Time'],['7-10','Players/Session']].map(([val,key]) => (
                <div key={key}>
                  <div style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 800, fontSize: 16, color: '#F5F5F5', marginBottom: 4 }}>{val}</div>
                  <div style={{ fontFamily: "'Space Mono',monospace", fontSize: 10, letterSpacing: '1.5px', textTransform: 'uppercase', color: '#888' }}>{key}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Blast Movement Callout */}
      <section style={{ padding: '48px', background: '#111111', borderBottom: '1px solid #2A2A2A' }}>
        <div className="blast-callout" style={{ display: 'flex', alignItems: 'center', gap: 32, background: '#1A1A1A', border: '1px solid #39FF14', borderRadius: 8, padding: '32px 40px' }}>
          <div style={{ flex: 1 }}>
            <span style={{ fontFamily: "'Space Mono',monospace", fontSize: 10, letterSpacing: '2px', textTransform: 'uppercase', color: '#39FF14', marginBottom: 10, display: 'block' }}>Tuesday Special</span>
            <h3 style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 900, fontSize: 28, letterSpacing: '-1px', textTransform: 'uppercase', color: '#F5F5F5', margin: '0 0 8px' }}>Blast Movement Training</h3>
            <p style={{ fontSize: 15, color: '#AAAAAA', lineHeight: 1.7, margin: '0 0 12px' }}>Athletic conditioning and movement training on Tuesdays. Speed, agility, and court coverage. The physical edge that separates good players from great ones.</p>
            <p style={{ fontFamily: "'Space Mono',monospace", fontSize: 12, color: '#39FF14', letterSpacing: '1.5px', textTransform: 'uppercase', margin: 0 }}>Every Tuesday — 5:30-7:30 PM</p>
          </div>
          <div className="blast-callout-right" style={{ textAlign: 'right', flexShrink: 0 }}>
            <div style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 900, fontSize: 22, color: '#39FF14' }}>TUE</div>
            <div style={{ fontFamily: "'Space Mono',monospace", fontSize: 11, color: '#888', letterSpacing: '1px' }}>5:30-7:30 PM</div>
          </div>
        </div>
      </section>

      {/* Full Weekly Calendar */}
      <section className="prog-section" style={{ padding: '80px 48px', borderBottom: '1px solid #2A2A2A' }}>
        {label('Weekly Calendar')}
        <h2 style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 900, fontSize: 40, letterSpacing: '-1.5px', textTransform: 'uppercase', color: '#F5F5F5', margin: '0 0 40px' }}>
          THE FULL <span style={{ color: '#FF2D8A' }}>WEEK</span>
        </h2>
        <div className="schedule-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', gap: 8 }}>
          {days.map(day => {
            const s = sessions[day];
            return (
              <div key={day} style={{
                background: s.type ? '#111111' : '#0D0D0D',
                border: `1px solid ${s.type ? '#2A2A2A' : '#1A1A1A'}`,
                borderTop: `3px solid ${s.color}`,
                borderRadius: 8, padding: '24px 16px',
                opacity: s.type ? 1 : 0.5,
              }}>
                <div style={{ fontFamily: "'Space Mono',monospace", fontSize: 12, letterSpacing: '2px', textTransform: 'uppercase', color: '#888', marginBottom: 14 }}>{day}</div>
                {s.type ? (
                  <>
                    <div style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 800, fontSize: 15, color: s.color, marginBottom: 8 }}>{s.type}</div>
                    <div style={{ fontFamily: "'Space Mono',monospace", fontSize: 10, color: '#666', letterSpacing: '0.5px', marginBottom: s.note ? 8 : 0 }}>5:30-7:30 PM</div>
                    {s.note && <div style={{ fontFamily: "'Space Mono',monospace", fontSize: 9, color: '#39FF14', letterSpacing: '1px', textTransform: 'uppercase', lineHeight: 1.4 }}>{s.note}</div>}
                  </>
                ) : (
                  <div style={{ fontFamily: "'Space Mono',monospace", fontSize: 11, color: '#555', letterSpacing: '1px', textTransform: 'uppercase' }}>Rest</div>
                )}
              </div>
            );
          })}
        </div>
        {/* Legend */}
        <div style={{ display: 'flex', gap: 32, marginTop: 24 }}>
          {[['#FF2D8A','Regular Group'],['#39FF14','L5 USTA Group']].map(([color, label]) => (
            <div key={label} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{ width: 12, height: 12, background: color, borderRadius: 2 }}></div>
              <span style={{ fontFamily: "'Space Mono',monospace", fontSize: 10, letterSpacing: '1.5px', textTransform: 'uppercase', color: '#888' }}>{label}</span>
            </div>
          ))}
        </div>
      </section>

      {/* Tournament Team */}
      <section className="prog-section" style={{ padding: '80px 48px', background: '#111111', borderBottom: '1px solid #2A2A2A' }}>
        {label('Add-On')}
        <div className="tournament-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'start' }}>
          <div>
            <h2 style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 900, fontSize: 40, letterSpacing: '-1.5px', textTransform: 'uppercase', color: '#F5F5F5', margin: '0 0 16px' }}>
              TOURNAMENT <span style={{ color: '#FF2D8A' }}>TEAM</span>
            </h2>
            <p style={{ fontSize: 15, color: '#AAAAAA', lineHeight: 1.75, margin: '0 0 32px' }}>
              Coaches take players to 2 USTA tournaments per season. Travel coaching, warmup, and match strategy included. Entry fees paid by family.
            </p>
            <div style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 900, fontSize: 40, color: '#FF2D8A', marginBottom: 4 }}>$500</div>
            <div style={{ fontFamily: "'Space Mono',monospace", fontSize: 11, color: '#888', letterSpacing: '1.5px', textTransform: 'uppercase', marginBottom: 28 }}>Per Season</div>
            <button onClick={() => onNavigate('pricing')} style={{ fontFamily: "'Space Mono',monospace", fontSize: 11, letterSpacing: '2px', textTransform: 'uppercase', background: '#FF2D8A', color: '#F5F5F5', border: 'none', padding: '14px 28px', cursor: 'pointer' }}>
              Sign Up →
            </button>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            {['2 USTA Tournaments','Travel Coaching','Pre-Match Warmup','Match Strategy','Coaching Sideline','Entry Fees Separate'].map((item, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, padding: '12px 0', borderBottom: '1px solid #2A2A2A' }}>
                <div style={{ width: 6, height: 6, background: i < 5 ? '#39FF14' : '#555', borderRadius: '50%', marginTop: 6, flexShrink: 0 }}></div>
                <span style={{ fontSize: 14, color: i < 5 ? '#AAAAAA' : '#666' }}>{item}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Session Details */}
      <section className="prog-section" style={{ padding: '80px 48px', borderBottom: '1px solid #2A2A2A' }}>
        {label('Session Details')}
        <div className="session-details-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 24, marginBottom: 48 }}>
          {[
            { num: '2 hrs', label: 'Session Duration' },
            { num: '7-10', label: 'Players Per Group' },
            { num: '8', label: 'Courts Available' },
            { num: 'LA Valley\nCollege', label: 'Location' },
          ].map((s, i) => (
            <div key={i} style={{ background: '#111111', border: '1px solid #2A2A2A', borderRadius: 8, padding: '28px 24px' }}>
              <div style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 900, fontSize: 32, letterSpacing: '-1px', color: '#F5F5F5', lineHeight: 1.1, marginBottom: 8, whiteSpace: 'pre-line' }}>{s.num}</div>
              <div style={{ fontFamily: "'Space Mono',monospace", fontSize: 10, letterSpacing: '1.5px', textTransform: 'uppercase', color: '#888' }}>{s.label}</div>
            </div>
          ))}
        </div>
        <div>
          <h3 style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 800, fontSize: 20, letterSpacing: '-0.5px', textTransform: 'uppercase', color: '#F5F5F5', margin: '0 0 20px' }}>What To Bring</h3>
          <div className="checklist-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 8 }}>
            {checklist.map((item, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, background: '#111111', border: '1px solid #2A2A2A', borderRadius: 8, padding: '14px 16px' }}>
                <div style={{ width: 6, height: 6, background: '#39FF14', borderRadius: '50%', flexShrink: 0 }}></div>
                <span style={{ fontSize: 13, color: '#AAAAAA' }}>{item}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ padding: '80px 48px', textAlign: 'center', background: '#111111' }}>
        <h2 style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 900, fontSize: 40, letterSpacing: '-1.5px', textTransform: 'uppercase', color: '#F5F5F5', margin: '0 0 32px' }}>
          READY TO GET <span style={{ color: '#FF2D8A' }}>STARTED?</span>
        </h2>
        <div className="cta-buttons" style={{ display: 'flex', justifyContent: 'center', gap: 12 }}>
          <button onClick={() => onNavigate('pricing')} 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' }}>
            View Pricing
          </button>
          <button onClick={() => onNavigate('contact')} style={{ fontFamily: "'Space Mono',monospace", fontSize: 11, letterSpacing: '2px', textTransform: 'uppercase', background: 'transparent', color: '#39FF14', border: '1px solid #39FF14', padding: '14px 28px', cursor: 'pointer' }}>
            Contact Us
          </button>
        </div>
      </section>

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

Object.assign(window, { ProgramsPage });