// HomePage.jsx — The Club Tennis
const Placeholder = ({ label, aspect = '16/9', height }) => (
  <div style={{
    background: '#1A1A1A', border: '1px solid #2A2A2A', borderRadius: 8,
    aspectRatio: height ? undefined : aspect,
    height: height || undefined,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    padding: 24, textAlign: 'center',
  }}>
    <span style={{ fontFamily: "'Space Mono',monospace", fontSize: 11, color: '#555', letterSpacing: '1px', textTransform: 'uppercase', lineHeight: 1.6 }}>{label}</span>
  </div>
);

const HomePage = ({ onNavigate }) => {
  const stats = [
    { num: '8', label: 'Courts' },
    { num: '50+', label: 'Active Players' },
    { num: '15+', label: 'College Commits' },
  ];

  const valueProps = [
    {
      title: 'REAL COACHES',
      body: 'Our staff has competed at the professional level on the ATP Tour and built Harvard Westlake\'s tennis dynasty into a national power.',
    },
    {
      title: 'REAL COMPETITION',
      body: '8 courts. USTA-rated groups. Tournament team that travels. This isn\'t rec tennis. This is where competitors are made.',
    },
    {
      title: 'REAL RESULTS',
      body: '3 CIF titles. 15+ players placed at top college programs. The results speak.',
    },
  ];

  const schedule = [
    { day: 'MON', type: 'Regular', color: '#FF2D8A' },
    { day: 'TUE', type: 'L5 Group + Blast Fitness', color: '#39FF14' },
    { day: 'WED', type: 'Regular', color: '#FF2D8A' },
    { day: 'THU', type: 'L5 Group', color: '#39FF14' },
    { day: 'FRI', type: 'L5 Group', color: '#39FF14' },
    { day: 'SAT', type: 'Regular', color: '#FF2D8A' },
    { day: 'SUN', type: 'Rest', color: '#333' },
  ];

  const coaches = [
    { name: 'Bo Hardt', title: 'Head Coach & Founder', creds: ['15 Yrs HW', '3 CIF Titles', 'Founder'], img: 'images/coaches/bo-hardt.png' },
    { name: 'Kevin Kim', title: 'Coach', creds: ['UCLA Player', 'HW Staff'], img: 'images/coaches/kevin-kim.png' },
    { name: 'Christopher Daniels', title: 'Fitness Coach', creds: ['15+ Yrs', 'HW Staff'], img: 'images/coaches/christopher-daniels.png' },
    { name: 'Simon Faray', title: 'Coach', creds: ['HW Staff'], img: 'images/coaches/simon.png' },
  ];

  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 sectionTitle = (parts) => (
    <h2 style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 900, fontSize: 48, letterSpacing: '-2px', color: '#F5F5F5', textTransform: 'uppercase', margin: '0 0 48px', lineHeight: 1.05 }}>
      {parts.map((p, i) => p.pink
        ? <span key={i} style={{ color: '#FF2D8A' }}>{p.text}</span>
        : <span key={i}>{p.text}</span>)}
    </h2>
  );

  return (
    <div style={{ background: '#0A0A0A', fontFamily: "'Outfit',sans-serif" }}>

      {/* HERO */}
      <section className="hero-section" style={{ height: '100vh', display: 'grid', gridTemplateColumns: '1fr 1fr', alignItems: 'center', padding: '100px 48px 40px', gap: 48, overflow: 'hidden' }}>
        <div className="hero-content">
          {label('Los Angeles Tennis Academy')}
          <h1 className="hero-heading" style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 900, fontSize: 72, letterSpacing: '-3px', textTransform: 'uppercase', color: '#F5F5F5', lineHeight: 1, margin: '0 0 28px' }}>
            WHERE <span style={{ color: '#FF2D8A' }}>PLAYERS</span><br/>ARE BUILT.
          </h1>
          <p className="hero-sub" style={{ fontSize: 18, color: '#AAAAAA', lineHeight: 1.7, maxWidth: 480, margin: '0 0 40px' }}>
            Real coaching from real competitors. No shortcuts. No fluff. Your kid shows up, puts in the work, and leaves a better player.
          </p>
          <div className="hero-buttons" style={{ display: 'flex', gap: 12 }}>
            <button onClick={() => onNavigate('pricing')} style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 700, fontSize: 14, letterSpacing: '0.5px', textTransform: 'uppercase', background: '#FF2D8A', color: '#F5F5F5', border: 'none', padding: '14px 28px', cursor: 'pointer', transition: 'transform 120ms' }}
              onMouseEnter={e => e.target.style.transform = 'translateY(-2px)'}
              onMouseLeave={e => e.target.style.transform = 'translateY(0)'}>
              Join Now
            </button>
            <button onClick={() => onNavigate('programs')} style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 600, fontSize: 14, letterSpacing: '0.5px', textTransform: 'uppercase', background: 'transparent', color: '#39FF14', border: '1px solid #39FF14', padding: '14px 28px', cursor: 'pointer', transition: 'background 120ms' }}
              onMouseEnter={e => e.target.style.background = 'rgba(57,255,20,0.06)'}
              onMouseLeave={e => e.target.style.background = 'transparent'}>
              View Programs
            </button>
          </div>
          {/* Stats bar */}
          <div className="stats-bar" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 0, marginTop: 64, paddingTop: 40, borderTop: '1px solid #2A2A2A' }}>
            {stats.map((s, i) => (
              <div key={i} style={{ paddingRight: 24 }}>
                <div style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 900, fontSize: 36, letterSpacing: '-1.5px', color: '#F5F5F5', lineHeight: 1 }}>{s.num}</div>
                <div style={{ fontFamily: "'Space Mono',monospace", fontSize: 10, letterSpacing: '1.5px', textTransform: 'uppercase', color: '#888', marginTop: 6 }}>{s.label}</div>
              </div>
            ))}
          </div>
        </div>
        <div className="hero-image-bg" style={{ borderRadius: 8, overflow: 'hidden', border: '1px solid #2A2A2A', background: '#1A1A1A', height: '80vh', maxHeight: 700 }}>
          <img src="images/success/photo-08.png" alt="Club Tennis player celebrating win on blue court" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', display: 'block' }} />
        </div>
      </section>

      {/* VALUE PROPS */}
      <section className="section-padded" style={{ padding: '96px 48px', borderTop: '1px solid #2A2A2A' }}>
        {label('Why The Club')}
        {sectionTitle([{ text: 'NO SHORTCUTS.\n' }, { text: 'NO EXCUSES.', pink: true }])}
        <div className="grid-3col" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 1, background: '#2A2A2A' }}>
          {valueProps.map((v, i) => (
            <div key={i} style={{ background: '#0A0A0A', padding: '40px 36px', borderTop: '3px solid #39FF14' }}>
              <h3 style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 900, fontSize: 22, letterSpacing: '-0.5px', color: '#F5F5F5', textTransform: 'uppercase', margin: '0 0 16px' }}>{v.title}</h3>
              <p style={{ fontSize: 17, color: '#AAAAAA', lineHeight: 1.75 }}>{v.body}</p>
            </div>
          ))}
        </div>
      </section>

      {/* SCHEDULE SNAPSHOT */}
      <section className="section-padded" style={{ padding: '96px 48px', background: '#111111' }}>
        {label('Weekly Schedule')}
        {sectionTitle([{ text: 'SIX DAYS A ' }, { text: 'WEEK.', pink: true }])}
        <div className="schedule-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', gap: 8, marginBottom: 24 }}>
          {schedule.map((s, i) => (
            <div key={i} style={{
              background: s.type === 'Rest' ? '#0D0D0D' : '#111111',
              border: `1px solid ${s.type === 'Rest' ? '#1A1A1A' : '#2A2A2A'}`,
              borderTop: s.type !== 'Rest' ? `3px solid ${s.color}` : '3px solid #2A2A2A',
              borderRadius: 8, padding: '24px 16px',
              opacity: s.type === 'Rest' ? 0.5 : 1,
            }}>
              <div style={{ fontFamily: "'Space Mono',monospace", fontSize: 12, letterSpacing: '2px', textTransform: 'uppercase', color: '#888', marginBottom: 14 }}>{s.day}</div>
              <div style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 800, fontSize: 15, color: s.color, marginBottom: 8 }}>{s.type}</div>
              {s.type !== 'Rest' && <div style={{ fontFamily: "'Space Mono',monospace", fontSize: 10, color: '#666', letterSpacing: '0.5px' }}>5:30-7:30 PM</div>}
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 32, marginBottom: 40 }}>
          {[['#FF2D8A','Regular Group'],['#39FF14','L5 USTA Group']].map(([color, lbl]) => (
            <div key={lbl} 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' }}>{lbl}</span>
            </div>
          ))}
        </div>
        <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 Full Programs →
        </button>
      </section>

      {/* COACHES PREVIEW */}
      <section className="section-padded" style={{ padding: '96px 48px', borderTop: '1px solid #2A2A2A' }}>
        {label('The Coaching Staff')}
        {sectionTitle([{ text: 'COACHES WHO\n' }, { text: 'COMPETED.', pink: true }])}
        <div className="grid-4col" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16, marginBottom: 40 }}>
          {coaches.map((c, i) => (
            <div key={i} style={{ cursor: 'pointer' }} onClick={() => onNavigate('coaches')}>
              {c.img ? (
                <div style={{ aspectRatio: '3/4', background: '#1A1A1A', border: '1px solid #2A2A2A', borderRadius: 8, overflow: 'hidden' }}>
                  <img src={c.img} alt={c.name} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 25%', display: 'block' }} />
                </div>
              ) : (
                <Placeholder label={`Photo coming soon. ${c.name}`} aspect="3/4" />
              )}
              <div style={{ paddingTop: 16 }}>
                <div style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 800, fontSize: 22, color: '#F5F5F5', marginBottom: 5 }}>{c.name}</div>
                <div style={{ fontFamily: "'Space Mono',monospace", fontSize: 12, letterSpacing: '1.5px', textTransform: 'uppercase', color: '#39FF14', marginBottom: 12 }}>{c.title}</div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 0 }}>
                  {c.creds.map((tag, j) => (
                    <span key={j} style={{
                      fontFamily: "'Space Mono',monospace", fontSize: 11, letterSpacing: '1px', textTransform: 'uppercase',
                      color: '#888', border: '1px solid #2A2A2A',
                      borderLeft: j === 0 ? '1px solid #2A2A2A' : 'none',
                      padding: '6px 10px', lineHeight: 1.5,
                    }}>{tag}</span>
                  ))}
                </div>
              </div>
            </div>
          ))}
        </div>
        <button onClick={() => onNavigate('coaches')} style={{ fontFamily: "'Space Mono',monospace", fontSize: 11, letterSpacing: '2px', textTransform: 'uppercase', background: 'transparent', color: '#39FF14', border: '1px solid #39FF14', padding: '14px 28px', cursor: 'pointer' }}>
          Meet The Coaches →
        </button>
      </section>

      {/* SUCCESS PREVIEW */}
      <section className="section-padded" style={{ padding: '96px 48px', background: '#111111' }}>
        {label('Results')}
        {sectionTitle([{ text: 'THE PROOF IS\n' }, { text: 'IN THE RESULTS.', pink: true }])}
        <div className="grid-3col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16, marginBottom: 48 }}>
          {[
            { file: 'photo-01.png', pos: 'center 30%' },
            { file: 'photo-03.png', pos: 'center 20%' },
            { file: 'photo-14.png', pos: 'center 15%' },
          ].map(({ file, pos }, i) => (
            <div key={i} style={{ borderRadius: 8, overflow: 'hidden', border: '1px solid #2A2A2A', background: '#1A1A1A', aspectRatio: '1/1' }}>
              <img src={`images/success/${file}`} alt={`Club Tennis tournament champion ${i + 1}`} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: pos, display: 'block' }} />
            </div>
          ))}
        </div>
        <div style={{ background: '#1A1A1A', border: '1px solid #2A2A2A', borderLeft: '3px solid #FF2D8A', padding: '32px 36px', marginBottom: 40 }}>
          <p style={{ fontFamily: "'Outfit',sans-serif", fontSize: 20, fontStyle: 'italic', color: '#F5F5F5', lineHeight: 1.6, margin: '0 0 16px' }}>
            "Bo doesn't just coach tennis. He coaches kids to be competitors. My daughter came in ranked #800 in SoCal. She left the year ranked #120. The results are undeniable."
          </p>
          <div style={{ fontFamily: "'Space Mono',monospace", fontSize: 11, color: '#888', letterSpacing: '1.5px', textTransform: 'uppercase' }}>Club Tennis Parent, Since 2022</div>
        </div>
        <button onClick={() => onNavigate('success')} style={{ fontFamily: "'Space Mono',monospace", fontSize: 11, letterSpacing: '2px', textTransform: 'uppercase', background: 'transparent', color: '#39FF14', border: '1px solid #39FF14', padding: '14px 28px', cursor: 'pointer' }}>
          See All Success Stories →
        </button>
      </section>

      {/* SPAIN CAMP BANNER */}
      <section className="section-padded" style={{ padding: '96px 48px', background: '#0A0A0A', borderTop: '1px solid #FF2D8A' }}>
        <div className="spain-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
          <div>
            {label('Summer 2026')}
            <h2 className="spain-heading" style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 900, fontSize: 56, letterSpacing: '-2.5px', textTransform: 'uppercase', color: '#F5F5F5', lineHeight: 1, margin: '0 0 20px' }}>
              COME TRAIN<br/>WITH BO IN<br/><span style={{ color: '#FF2D8A' }}>BARCELONA.</span>
            </h2>
            <p style={{ fontSize: 16, color: '#AAAAAA', lineHeight: 1.7, maxWidth: 420, margin: '0 0 32px' }}>
              2 weeks. 6 players. Pro Tennis Coaching BCN. Limited spots.
            </p>
            <button onClick={() => onNavigate('spain')} style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 700, fontSize: 14, letterSpacing: '0.5px', textTransform: 'uppercase', background: '#FF2D8A', color: '#F5F5F5', border: 'none', padding: '14px 28px', cursor: 'pointer' }}>
              Learn More
            </button>
          </div>
          <div className="spain-image" style={{ borderRadius: 8, overflow: 'hidden', border: '1px solid #2A2A2A', background: '#1A1A1A', aspectRatio: '4/3' }}>
            <img src="images/spain/spain-home.png" alt="Training in Barcelona" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          </div>
        </div>
      </section>

      {/* NEWSLETTER */}
      <section className="newsletter-section" style={{ padding: '80px 48px', background: '#111111', borderTop: '1px solid #2A2A2A', textAlign: 'center' }}>
        <div style={{ fontFamily: "'Space Mono',monospace", fontSize: 11, letterSpacing: '2.5px', textTransform: 'uppercase', color: '#39FF14', marginBottom: 16 }}>Stay In The Loop</div>
        <h2 style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 900, fontSize: 40, letterSpacing: '-1.5px', textTransform: 'uppercase', color: '#F5F5F5', margin: '0 0 12px' }}>STAY IN THE LOOP</h2>
        <p style={{ fontSize: 15, color: '#888', marginBottom: 32 }}>Rain cancellations, schedule updates, tournament results, straight to your inbox.</p>
        <div className="newsletter-form" style={{ display: 'flex', justifyContent: 'center', gap: 0, maxWidth: 420, margin: '0 auto' }}>
          <input placeholder="your@email.com" style={{ flex: 1, fontFamily: "'Outfit',sans-serif", fontSize: 14, padding: '14px 18px', background: '#1A1A1A', border: '1px solid #2A2A2A', borderRight: 'none', color: '#F5F5F5', outline: 'none' }} />
          <button style={{ fontFamily: "'Space Mono',monospace", fontSize: 11, letterSpacing: '1.5px', textTransform: 'uppercase', padding: '14px 22px', background: 'transparent', border: '1px solid #39FF14', color: '#39FF14', cursor: 'pointer' }}>
            Subscribe
          </button>
        </div>
      </section>

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

Object.assign(window, { HomePage, Placeholder });