// SuccessPage.jsx — The Club Tennis
const SuccessPage = ({ 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 stats = [
    { num: '3', label: 'CIF Titles' },
    { num: '15+', label: 'College Placements' },
    { num: '50+', label: 'Active Players' },
  ];

  const photoPositions = { 6: 'center top', 12: 'center 20%' };
  const photos = Array.from({ length: 23 }, (_, i) => i + 1)
    .filter(n => n !== 23 && n !== 22 && n !== 21)
    .map(n => ({
      src: `images/success/photo-${String(n).padStart(2, '0')}.png`,
      alt: `Club Tennis player moment ${n}`,
      pos: photoPositions[n] || 'center 50%',
    }));

  const colleges = [
    'Dartmouth','UCLA','UChicago','Colgate','Boston University','Middlebury','Tufts','Pomona-Pitzer','Harvard',
  ];

  const testimonials = [
    {
      quote: "My son is currently a 7th grader at Harvard Westlake. He started training with The Club tennis clinic in the spring of 2024. I have noticed a sharp increase in both his mental game and physical strength in just the past 6 months. Since he started attending the club clinics, he has won USTA tournaments and has gained incredible confidence that we haven't seen before. He consistently attributes that to the high level of coaching and top players who come from all over southern California to play at The Club. I have witnessed firsthand how Bo Hardt has created one of the top tennis clinics in Southern California...",
      name: 'AJ',
      role: 'Parent',
    },
    {
      quote: "We love Club Tennis! Ben (15) plays on his highschool team but was looking for a program to keep up his game between seasons. We tried several programs around Los Angeles and often found them to be disorganized and inconsistent. Many were too \"easy\" without much actual teaching, and others were too \"intense\" without much fun! With Club Tennis, we finally found the right mix of instruction, playing, rigor and fun and having available classes 5 days a week makes it easy to work around busy highschool schedules. Ben can't wait to get to every practice and comes home exhausted but ready to do it again the next day. It's a great group of coaches and a great group of kids. Ben's game has improved immensely since starting with Coach Bo and his team and he continues to get better with every practice.",
      name: 'Jay Galston',
      role: 'Parent',
    },
    {
      quote: "The atmosphere at the Club is positive and encouraging. The training is intense but also fun. As a result, our son feels challenged to improve and motivated to stretch himself. Since he began training at the Club last year, our son has increased his stability and strength. He has also improved his ball control. Practicing at the Club has enhanced our son's confidence in match play as instruction at the Club focuses on defensive work and mental toughness. Head Coach Bo has an holistic approach to training – he lays emphasis on the mental aspect of the game and the power of affirmations. We are very grateful to have discovered this Club and believe it will be a key aspect of our son's tennis journey.",
      name: 'Antara Jaitly',
      role: 'Parent',
    },
    {
      quote: "The Club is LA's premier tennis training program and, until now, its best kept secret. Bo Hardt and his dedicated coaching staff excel not only at teaching and refining the fundamentals, they motivate discipline, enthusiasm, and the drive to work hard and compete in athletes of all levels. The secret sauce is this — inspired athletes inspiring athletes. The more my son trains at The Club, the more he wants to train. This is a community and a mindset — coaches and athletes elevating each other and pressing towards their personal best on and off the court. This is for tennis lovers only.",
      name: 'Hannah Yuen',
      role: 'Parent',
    },
    {
      quote: "Bo runs an incredible program that offers high quality coaching and training. The coaches truly want to see you grow on your tennis journey by pushing us through a combination of fitness and technical instruction, while still making it fun.",
      name: 'Luca Moreno',
      role: 'Player',
    },
    {
      quote: "What an amazing experience Club Tennis has been for my daughter! The coaches are wonderful. They clearly know and love tennis, and they truly care about developing her game. My daughter's skills have improved, and, more importantly, she is having so much fun during the process. She has also made so many awesome tennis friends at Club Tennis. I highly recommend this program!",
      name: 'Judy',
      role: 'Parent',
    },
  ];

  return (
    <div style={{ background: '#0A0A0A', fontFamily: "'Outfit',sans-serif", paddingTop: 72 }}>
      {/* Header */}
      <section style={{ padding: '80px 48px 72px', borderBottom: '1px solid #2A2A2A' }}>
        {label('Track Record')}
        <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' }}>RESULTS</span> SPEAK
        </h1>
        <p style={{ fontSize: 18, color: '#AAAAAA', lineHeight: 1.7, maxWidth: 560 }}>
          Trophies. Rankings. College commits. This is what happens when the work gets done.
        </p>
      </section>

      {/* Stats Banner */}
      <section style={{ borderBottom: '1px solid #2A2A2A' }}>
        <div className="success-stats" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', background: '#111111' }}>
          {stats.map((s, i) => (
            <div key={i} style={{ padding: '48px 32px', borderRight: i < stats.length - 1 ? '1px solid #2A2A2A' : 'none', textAlign: 'center' }}>
              <div style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 900, fontSize: 52, letterSpacing: '-2px', color: '#FF2D8A', lineHeight: 1, marginBottom: 8 }}>{s.num}</div>
              <div style={{ fontFamily: "'Space Mono',monospace", fontSize: 10, letterSpacing: '2px', textTransform: 'uppercase', color: '#888' }}>{s.label}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Photo Gallery */}
      <section style={{ padding: '80px 48px', borderBottom: '1px solid #2A2A2A' }}>
        {label('Gallery')}
        <h2 style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 900, fontSize: 40, letterSpacing: '-1.5px', textTransform: 'uppercase', color: '#F5F5F5', margin: '0 0 40px' }}>
          THE <span style={{ color: '#FF2D8A' }}>MOMENTS</span>
        </h2>
        {/* Uniform grid — flat bottom edge. Last 2 span double to fill the final row. */}
        <div className="gallery-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
          {photos.map((p, i) => {
            const remainder = photos.length % 4;
            const isLastRowFiller = remainder !== 0 && i >= photos.length - remainder;
            const span = isLastRowFiller ? Math.floor(4 / remainder) : 1;
            return (
              <div key={i} className="gallery-item" style={{ gridColumn: `span ${span}`, borderRadius: 8, overflow: 'hidden', border: '1px solid #2A2A2A', background: '#1A1A1A', aspectRatio: `${span} / 1` }}>
                <img src={p.src} alt={p.alt} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: p.pos, display: 'block' }} />
              </div>
            );
          })}
        </div>
      </section>

      {/* College Placements */}
      <section style={{ padding: '80px 48px', background: '#111111', borderBottom: '1px solid #2A2A2A' }}>
        {label('College Placements')}
        <h2 style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 900, fontSize: 40, letterSpacing: '-1.5px', textTransform: 'uppercase', color: '#F5F5F5', margin: '0 0 12px' }}>
          WHERE OUR PLAYERS <span style={{ color: '#FF2D8A' }}>HAVE GONE</span>
        </h2>
        <p style={{ fontSize: 15, color: '#888', marginBottom: 40 }}>15+ players placed at top college programs across the country.</p>
        <div className="college-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
          {colleges.map((c, i) => (
            <div key={i} style={{
              fontFamily: "'Outfit',sans-serif", fontWeight: 700, fontSize: 15,
              color: '#F5F5F5', border: '1px solid #2A2A2A', borderRadius: 4,
              padding: '14px 16px', background: '#0A0A0A',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              textAlign: 'center', minHeight: 52,
            }}>
              {c}
            </div>
          ))}
        </div>
      </section>

      {/* Testimonials */}
      <section style={{ padding: '80px 48px', borderBottom: '1px solid #2A2A2A' }}>
        {label('Testimonials')}
        <h2 style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 900, fontSize: 40, letterSpacing: '-1.5px', textTransform: 'uppercase', color: '#F5F5F5', margin: '0 0 40px' }}>
          WHAT PARENTS <span style={{ color: '#FF2D8A' }}>SAY</span>
        </h2>
        <div className="testimonials-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16 }}>
          {testimonials.map((t, i) => (
            <div key={i} style={{ background: '#111111', border: '1px solid #2A2A2A', borderLeft: '3px solid #FF2D8A', borderRadius: 8, padding: '32px 36px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
              <p style={{ fontFamily: "'Outfit',sans-serif", fontSize: 15, fontStyle: 'italic', color: '#F5F5F5', lineHeight: 1.75, margin: '0 0 28px' }}>"{t.quote}"</p>
              <div>
                <div style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 700, fontSize: 14, color: '#F5F5F5' }}>{t.name}</div>
                <div style={{ fontFamily: "'Space Mono',monospace", fontSize: 10, letterSpacing: '1.5px', textTransform: 'uppercase', color: '#888' }}>{t.role}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Bottom CTA */}
      <section style={{ padding: '96px 48px', background: '#111111', textAlign: 'center' }}>
        <div style={{ fontFamily: "'Space Mono',monospace", fontSize: 11, letterSpacing: '2.5px', textTransform: 'uppercase', color: '#39FF14', marginBottom: 16 }}>Your Turn</div>
        <h2 style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 900, fontSize: 56, letterSpacing: '-2.5px', textTransform: 'uppercase', color: '#F5F5F5', margin: '0 0 32px', lineHeight: 1 }}>
          YOUR KID COULD<br/>BE <span style={{ color: '#FF2D8A' }}>NEXT.</span>
        </h2>
        <button onClick={() => onNavigate('pricing')} style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 700, fontSize: 15, textTransform: 'uppercase', letterSpacing: '0.5px', background: '#FF2D8A', color: '#F5F5F5', border: 'none', padding: '16px 40px', cursor: 'pointer' }}>
          Join Now
        </button>
      </section>

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

Object.assign(window, { SuccessPage });