// CoachesPage.jsx — The Club Tennis
const CoachesPage = ({ 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 coaches = [
    {
      name: 'Bo Hardt',
      title: 'Head Coach & Founder',
      hw: true,
      bio: 'Started tennis at 15, played for Santa Monica High. Trained under Federico Browne. Won SoCal Men\'s Open tournaments and played Pro Futures before turning his eye to coaching. Named Program Head of Boys Tennis at Harvard Westlake, where he served for 15 years and built one of the premier junior programs in the country. Specialty: mental game coaching, preparing players not just physically, but mentally for the grind of competition.',
      stats: [
        { num: '15', label: 'Yrs at\nHarvard Westlake' },
        { num: '3', label: 'CIF Titles' },
        { num: '15+', label: 'College\nPlacements' },
      ],
      photo: 'Bo Hardt, head coach & founder.',
      img: 'images/coaches/bo-hardt.png',
    },
    {
      name: 'Kelvin Kim',
      title: 'Co-Founder & Coach',
      hw: true,
      bio: 'Kelvin Kim arrived in the United States from Brazil at 15, already ranked in the top 10 of Brazilian junior tennis. He quickly earned a place in the top 10 of the Southern California junior rankings. He competed at the 2005 USTA National Spring Nationals in Mobile, Alabama, reaching the Round of 16 in singles, and finished third in doubles at the 2005 USTA Winter Nationals in Phoenix, Arizona. He also competed at the USTA Super National Hard Courts in Kalamazoo, Michigan and the Easter Bowl in Palm Springs before going on to play collegiately at UCLA. Kelvin is a member of the Harvard Westlake coaching staff and brings an elite competitive background and a deep understanding of what it takes to develop as a player at every level of the game.',
      stats: [
        { num: 'UCLA', label: 'College\nTennis' },
        { num: 'Top 10', label: 'SoCal Junior\nRankings' },
        { num: 'HW', label: 'Staff' },
      ],
      photo: 'Kelvin Kim, coach.',
      img: 'images/coaches/kevin-kim.png',
    },
    {
      name: 'Christopher Daniels',
      title: 'Fitness Coach',
      alias: '"CD"',
      hw: true,
      bio: 'CD is the team\'s fitness and high performance coach. He has worked in the boxing industry, training fighter Jared Wells on endurance, hand speed, and coordination, and brings the same approach to the courts: real conditioning, real movement work, and real accountability. With 15+ years of coaching experience, he serves on the Harvard Westlake High School staff.',
      stats: [
        { num: '15+', label: 'Years\nCoaching' },
        { num: 'HW', label: 'High School\nStaff' },
      ],
      photo: 'Christopher Daniels "CD", fitness coach.',
      img: 'images/coaches/christopher-daniels.png',
    },
    {
      name: 'Sahara Alexandria Knights',
      title: 'Girls Program Coach',
      hw: false,
      bio: 'Sahara competed at the highest levels of junior tennis in Southern California, earning a national ranking before going on to play collegiate tennis. She brings that competitive edge to The Club Tennis as a coach and currently serves as an assistant coach for girls high school tennis in Los Angeles. Focused, disciplined, and deeply invested in every player she works with.',
      stats: [
        { num: 'Natl', label: 'Junior\nRanking' },
        { num: 'College', label: 'Collegiate\nTennis' },
        { num: 'Girls HS', label: 'Asst\nCoach' },
      ],
      photo: 'Sahara Alexandria Knights, girls program coach.',
      img: 'images/coaches/sahara-knights.png',
    },
    {
      name: 'Kenny Kim',
      title: 'Younger Players Specialist',
      hw: true,
      bio: 'Kenny is the staff\'s younger players specialist. Younger brother of Kelvin Kim, Kenny grew up around competitive tennis his entire life. He focuses on building strong fundamentals and a love of competition early, getting kids ready for the level of play the rest of the program demands.',
      stats: [],
      photo: 'Kenny Kim, younger players specialist.',
      img: null,
    },
    {
      name: 'Simon Faray',
      title: 'Coach',
      hw: true,
      bio: 'Simon Faray brings an elite international training background to the Club Tennis staff. He has trained and competed at the highest levels of the game, developing his tennis across multiple countries before focusing on coaching the next generation. A member of the Harvard Westlake coaching staff, Simon works with players at every stage of development, with a sharp focus on technical execution and the mental discipline it takes to compete.',
      stats: [
        { num: 'Elite', label: 'Training\nBackground' },
        { num: 'Intl', label: 'Competition\nExperience' },
        { num: 'HW', label: 'Staff' },
      ],
      photo: 'Simon Faray, coach.',
      img: 'images/coaches/simon.png',
    },
  ];

  return (
    <div style={{ background: '#0A0A0A', fontFamily: "'Outfit',sans-serif", paddingTop: 72 }}>
      {/* Page Header */}
      <section style={{ padding: '80px 48px 72px', borderBottom: '1px solid #2A2A2A' }}>
        {label('The Coaching Staff')}
        <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' }}>
          THE <span style={{ color: '#FF2D8A' }}>COACHING</span> STAFF
        </h1>
        <p style={{ fontSize: 18, color: '#AAAAAA', lineHeight: 1.7, maxWidth: 600 }}>
          Every coach on this staff has competed at a high level. They know what it takes because they've lived it.
        </p>
      </section>

      {/* Coach Sections */}
      {coaches.map((coach, idx) => (
        <section key={coach.name} className="coach-section" style={{
          padding: '80px 48px',
          borderBottom: '1px solid #2A2A2A',
          background: idx % 2 === 1 ? '#111111' : '#0A0A0A',
        }}>
          <div className="coach-grid" style={{
            display: 'grid',
            gridTemplateColumns: '320px 1fr',
            gap: 64,
            alignItems: 'start',
          }}>
            {/* Photo side */}
            <div className="coach-photo">
              {coach.img ? (
                <div style={{ aspectRatio: '3/4', background: '#1A1A1A', border: '1px solid #2A2A2A', borderRadius: 8, overflow: 'hidden' }}>
                  <img src={coach.img} alt={coach.photo} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 25%', display: 'block' }} />
                </div>
              ) : (
                <Placeholder label={coach.photo} aspect="3/4" />
              )}
            </div>

            {/* Content side */}
            <div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
                {coach.hw && (
                  <span style={{ fontFamily: "'Space Mono',monospace", fontSize: 10, letterSpacing: '1.5px', textTransform: 'uppercase', background: 'rgba(255,45,138,0.12)', color: '#FF2D8A', border: '1px solid rgba(255,45,138,0.3)', padding: '4px 10px', borderRadius: 2 }}>
                    Harvard Westlake Staff
                  </span>
                )}
              </div>
              {label(coach.title)}
              <h2 className="coach-name" style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 900, fontSize: 48, letterSpacing: '-2px', textTransform: 'uppercase', color: '#F5F5F5', lineHeight: 1, margin: '0 0 8px' }}>
                {coach.name}
              </h2>
              {coach.alias && (
                <div style={{ fontFamily: "'Space Mono',monospace", fontSize: 12, letterSpacing: '2px', color: '#39FF14', marginBottom: 24 }}>{coach.alias}</div>
              )}
              <p style={{ fontSize: 16, color: '#AAAAAA', lineHeight: 1.8, maxWidth: 560, margin: '24px 0 36px' }}>
                {coach.bio}
              </p>
              {/* Stats */}
              {coach.stats.length > 0 && (
                <div className="coach-stats" style={{ display: 'flex', gap: 0, borderTop: '1px solid #2A2A2A', paddingTop: 32 }}>
                  {coach.stats.map((s, i) => (
                    <div key={i} style={{ paddingRight: 40, marginRight: 40, borderRight: i < coach.stats.length - 1 ? '1px solid #2A2A2A' : 'none' }}>
                      <div style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 900, fontSize: 36, letterSpacing: '-1.5px', color: '#F5F5F5', lineHeight: 1, marginBottom: 6 }}>{s.num}</div>
                      <div style={{ fontFamily: "'Space Mono',monospace", fontSize: 10, letterSpacing: '1.5px', textTransform: 'uppercase', color: '#888', lineHeight: 1.5, whiteSpace: 'pre-line' }}>{s.label}</div>
                    </div>
                  ))}
                </div>
              )}
            </div>

          </div>
        </section>
      ))}

      {/* Bottom CTA */}
      <section style={{ padding: '96px 48px', textAlign: 'center', background: '#111111' }}>
        <h2 style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 900, fontSize: 48, letterSpacing: '-2px', textTransform: 'uppercase', color: '#F5F5F5', margin: '0 0 16px' }}>
          READY TO TRAIN WITH US?
        </h2>
        <p style={{ fontSize: 16, color: '#AAAAAA', marginBottom: 36 }}>
          Come see what real coaching looks like.
        </p>
        <div className="cta-buttons" style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
          <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' }}>
            Join Now
          </button>
          <button onClick={() => onNavigate('programs')} style={{ fontFamily: "'Space Mono',monospace", fontSize: 11, letterSpacing: '2px', textTransform: 'uppercase', background: 'transparent', color: '#39FF14', border: '1px solid #39FF14', padding: '14px 28px', cursor: 'pointer' }}>
            View Programs
          </button>
        </div>
      </section>

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

Object.assign(window, { CoachesPage });