// SpainCampPage.jsx The Club Tennis
const SpainCampPage = ({ onNavigate }) => {
  const [form, setForm] = React.useState({ player: '', age: '', parent: '', email: '', phone: '', usta: '' });
  const [submitted, setSubmitted] = React.useState(false);
  const [openFaq, setOpenFaq] = React.useState(null);

  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 inputStyle = {
    width: '100%', fontFamily: "'Outfit',sans-serif", fontSize: 14, padding: '13px 16px',
    background: '#1A1A1A', border: '1px solid #2A2A2A', color: '#F5F5F5', outline: 'none',
    borderRadius: 0, transition: 'border-color 120ms',
  };

  const details = [
    { num: '2 Weeks', label: 'Duration', sub: 'Intensive on-court training' },
    { num: 'Barcelona', label: 'Location', sub: 'Pro Tennis Coaching BCN, Castelldefels' },
    { num: '6 Players', label: 'Group Max', sub: 'Truly limited serious players only' },
    { num: 'Club + BCN', label: 'Coaching', sub: 'Club Tennis staff + local BCN pros' },
  ];

  const included = ['Daily coaching sessions (morning + afternoon)','Facility access clay courts at Pro Tennis Coaching BCN','Programming and structured practice plan','Club Tennis coaching staff on-site for full 2 weeks','Video analysis sessions','Match play and drills'];
  const notIncluded = ['Flights (LAX → Barcelona)','Accommodation (hotel or rental)','Meals and personal expenses','Tournament entry fees'];

  const faqs = [
    { q: 'What age range?', a: 'Competitive juniors, typically 10 to 16. Players should be actively competing in USTA events.' },
    { q: 'What level is required?', a: 'Tournament-level players are strongly recommended. This is an intensive training camp, not a beginner experience.' },
    { q: 'Who supervises the kids?', a: 'Club Tennis coaching staff travels with the group for the full 2 weeks. Your kid will be in good hands.' },
    { q: 'When do we need to commit?', a: 'Spots fill fast. A deposit is required to hold your spot dates TBD. Email us early to get on the list.' },
  ];

  const itinerary = [
    { time: 'Morning', items: ['On-court technique work','Groundstroke drills','Serve & return sessions'] },
    { time: 'Afternoon', items: ['Match play & competition','Athletic fitness','Video analysis'] },
    { time: 'Evenings', items: ['Free time in Castelldefels','Cultural activities in Barcelona','Team dinners & recovery'] },
    { time: 'Weekends', items: ['Optional city excursions','Beach recovery sessions','Doubles tournaments on-site'] },
  ];

  return (
    <div style={{ background: '#0A0A0A', fontFamily: "'Outfit',sans-serif", paddingTop: 72 }}>
      {/* Hero */}
      <section style={{ padding: '80px 48px', borderBottom: '1px solid #2A2A2A' }}>
        <div className="spain-hero-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'flex-start' }}>
          <div className="spain-hero-text">
            {label('Summer 2026')}
            <h1 style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 900, fontSize: 64, letterSpacing: '-3px', textTransform: 'uppercase', color: '#F5F5F5', lineHeight: 1, margin: '0 0 20px' }}>
              TRAIN IN<br/><span style={{ color: '#FF2D8A' }}>BARCELONA.</span>
            </h1>
            <p style={{ fontSize: 18, color: '#AAAAAA', lineHeight: 1.7, maxWidth: 480, margin: '0 0 32px' }}>
              2 weeks of intensive training at Pro Tennis Coaching BCN in Castelldefels, Spain. 6 spots. World-class coaching. An experience they'll never forget.
            </p>
            <div style={{ display: 'flex', gap: 12 }}>
              <button onClick={() => document.getElementById('reserve').scrollIntoView({ behavior: 'smooth' })} 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' }}>
                Reserve Your Spot
              </button>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <div style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 900, fontSize: 28, color: '#F5F5F5' }}>$4,500</div>
                <div style={{ fontFamily: "'Space Mono',monospace", fontSize: 10, color: '#888', letterSpacing: '1px', textTransform: 'uppercase' }}>Per Player</div>
              </div>
            </div>
          </div>
          <div className="spain-hero-image" style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: '-40px' }}>
            {['spain-01.png'].map((img, i) => (
              <div key={i} style={{ borderRadius: 6, overflow: 'hidden', border: '1px solid #2A2A2A', background: '#1A1A1A' }}>
                <img src={`images/spain/${img}`} alt="Training in Barcelona" style={{ width: '100%', height: 'auto', display: 'block' }} />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Details Grid */}
      <section style={{ padding: '80px 48px', background: '#111111', borderBottom: '1px solid #2A2A2A' }}>
        <div className="spain-details-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 1, background: '#2A2A2A' }}>
          {details.map((d, i) => (
            <div key={i} style={{ background: '#111111', padding: '36px 28px', borderTop: '3px solid #39FF14' }}>
              <div style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 900, fontSize: 28, letterSpacing: '-1px', color: '#F5F5F5', margin: '0 0 6px' }}>{d.num}</div>
              <div style={{ fontFamily: "'Space Mono',monospace", fontSize: 10, letterSpacing: '2px', textTransform: 'uppercase', color: '#39FF14', marginBottom: 10 }}>{d.label}</div>
              <div style={{ fontSize: 13, color: '#888', lineHeight: 1.5 }}>{d.sub}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Included / Not Included */}
      <section style={{ padding: '80px 48px', borderBottom: '1px solid #2A2A2A' }}>
        {label("What's Covered")}
        <h2 style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 900, fontSize: 40, letterSpacing: '-1.5px', textTransform: 'uppercase', color: '#F5F5F5', margin: '0 0 40px' }}>
          WHAT'S INCLUDED
        </h2>
        <div className="grid-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48 }}>
          <div>
            <div style={{ fontFamily: "'Space Mono',monospace", fontSize: 10, letterSpacing: '2px', textTransform: 'uppercase', color: '#39FF14', marginBottom: 20 }}>Included in $4,500</div>
            {included.map((item, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12, padding: '12px 0', borderBottom: '1px solid #1A1A1A' }}>
                <div style={{ width: 6, height: 6, background: '#39FF14', borderRadius: '50%', marginTop: 7, flexShrink: 0 }}></div>
                <span style={{ fontSize: 15, color: '#AAAAAA', lineHeight: 1.6 }}>{item}</span>
              </div>
            ))}
          </div>
          <div>
            <div style={{ fontFamily: "'Space Mono',monospace", fontSize: 10, letterSpacing: '2px', textTransform: 'uppercase', color: '#888', marginBottom: 20 }}>Not Included</div>
            {notIncluded.map((item, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12, padding: '12px 0', borderBottom: '1px solid #1A1A1A' }}>
                <div style={{ width: 6, height: 6, background: '#555', borderRadius: '50%', marginTop: 7, flexShrink: 0 }}></div>
                <span style={{ fontSize: 15, color: '#666', lineHeight: 1.6 }}>{item}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Itinerary */}
      <section style={{ padding: '80px 48px', background: '#111111', borderBottom: '1px solid #2A2A2A' }}>
        {label('Sample Itinerary')}
        <h2 style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 900, fontSize: 40, letterSpacing: '-1.5px', textTransform: 'uppercase', color: '#F5F5F5', margin: '0 0 40px' }}>
          A TYPICAL <span style={{ color: '#FF2D8A' }}>DAY</span>
        </h2>
        <div className="spain-itinerary" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16 }}>
          {itinerary.map((block, i) => (
            <div key={i} style={{ background: '#0A0A0A', border: '1px solid #2A2A2A', borderRadius: 8, padding: 28 }}>
              <div style={{ fontFamily: "'Space Mono',monospace", fontSize: 10, letterSpacing: '2px', textTransform: 'uppercase', color: '#39FF14', marginBottom: 16 }}>{block.time}</div>
              {block.items.map((item, j) => (
                <div key={j} style={{ display: 'flex', gap: 10, marginBottom: 10 }}>
                  <div style={{ width: 4, height: 4, background: '#FF2D8A', borderRadius: '50%', marginTop: 8, flexShrink: 0 }}></div>
                  <span style={{ fontSize: 14, color: '#AAAAAA', lineHeight: 1.5 }}>{item}</span>
                </div>
              ))}
            </div>
          ))}
        </div>
      </section>

      {/* Interest Form */}
      <section id="reserve" 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' }}>Reserve Your Spot</span>
          </div>
          <h2 style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 900, fontSize: 40, letterSpacing: '-1.5px', textTransform: 'uppercase', color: '#F5F5F5', margin: '0 0 8px' }}>
            SECURE YOUR <span style={{ color: '#FF2D8A' }}>SPOT</span>
          </h2>
          <p style={{ fontSize: 15, color: '#888', margin: 0 }}>Limited to 6 players. Deposit required to hold your spot.</p>
        </div>

        {submitted ? (
          <div style={{ background: '#111111', border: '1px solid #39FF14', borderRadius: 8, padding: 40, maxWidth: 480, margin: '0 auto', textAlign: 'center' }}>
            <div style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 900, fontSize: 28, color: '#F5F5F5', marginBottom: 8 }}>We got you. ✓</div>
            <p style={{ fontSize: 15, color: '#AAAAAA', lineHeight: 1.7 }}>We'll be in touch shortly at the email you provided. Bo will reach out with next steps and deposit info.</p>
          </div>
        ) : (
          <form className="spain-form-grid" onSubmit={e => { e.preventDefault(); setSubmitted(true); }} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, maxWidth: 680, margin: '0 auto' }}>
            {[
              { key: 'player', label: 'Player Name', full: false },
              { key: 'age', label: 'Player Age', full: false },
              { key: 'parent', label: 'Parent / Guardian Name', full: false },
              { key: 'email', label: 'Email Address', full: false },
              { key: 'phone', label: 'Phone Number', full: false },
              { key: 'usta', label: 'USTA Rating (optional)', full: false },
            ].map(field => (
              <div key={field.key} style={{ gridColumn: field.full ? '1 / -1' : undefined }}>
                <label style={{ fontFamily: "'Space Mono',monospace", fontSize: 10, letterSpacing: '1.5px', textTransform: 'uppercase', color: '#888', display: 'block', marginBottom: 8 }}>{field.label}</label>
                <input
                  value={form[field.key]}
                  onChange={e => setForm({ ...form, [field.key]: e.target.value })}
                  style={inputStyle}
                  onFocus={e => e.target.style.borderColor = '#FF2D8A'}
                  onBlur={e => e.target.style.borderColor = '#2A2A2A'}
                />
              </div>
            ))}
            <div style={{ gridColumn: '1 / -1', textAlign: 'center' }}>
              <button type="submit" style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 700, fontSize: 14, textTransform: 'uppercase', letterSpacing: '0.5px', background: '#FF2D8A', color: '#F5F5F5', border: 'none', padding: '14px 36px', cursor: 'pointer' }}>
                Submit Interest →
              </button>
            </div>
          </form>
        )}
      </section>

      {/* FAQ */}
      <section style={{ padding: '80px 48px', background: '#111111', 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: 680, 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: 22, lineHeight: 1, marginLeft: 16, flexShrink: 0 }}>{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>

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

Object.assign(window, { SpainCampPage });