// ContactPage.jsx — The Club Tennis
const ContactPage = ({ onNavigate }) => {
  const [form, setForm] = React.useState({ name: '', email: '', phone: '', subject: '', message: '' });
  const [submitted, setSubmitted] = React.useState(false);

  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',
    transition: 'border-color 120ms',
  };

  const fields = [
    { key: 'name', label: 'Your Name', full: false },
    { key: 'email', label: 'Email Address', full: false },
    { key: 'phone', label: 'Phone Number (optional)', full: false },
    { key: 'subject', label: 'Subject', full: false },
    { key: 'message', label: 'Message', full: true, textarea: true },
  ];

  return (
    <div style={{ background: '#0A0A0A', fontFamily: "'Outfit',sans-serif", paddingTop: 72 }}>
      <section className="contact-header" style={{ padding: '80px 48px 72px', borderBottom: '1px solid #2A2A2A' }}>
        {label('Get In Touch')}
        <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' }}>
          LET'S <span style={{ color: '#FF2D8A' }}>TALK.</span>
        </h1>
        <p style={{ fontSize: 18, color: '#AAAAAA', lineHeight: 1.7, maxWidth: 520 }}>
          Questions about programs, pricing, or the Spain camp? Bo reads every email personally.
        </p>
      </section>

      <section className="contact-section" style={{ padding: '80px 48px' }}>
        <div className="contact-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.5fr', gap: 80 }}>
          {/* Contact Info */}
          <div>
            <div style={{ marginBottom: 48 }}>
              {[
                { label: 'Email', value: 'rhardt@hw.com', href: 'mailto:rhardt@hw.com' },
                { label: 'Instagram', value: '@theclubtennis', href: 'https://instagram.com/theclubtennis' },
                { label: 'Shop', value: 'theclubtennishq.myshopify.com', href: 'https://theclubtennishq.myshopify.com' },
              ].map((item, i) => (
                <div key={i} style={{ marginBottom: 32 }}>
                  <div style={{ fontFamily: "'Space Mono',monospace", fontSize: 10, letterSpacing: '2px', textTransform: 'uppercase', color: '#39FF14', marginBottom: 8 }}>{item.label}</div>
                  <a href={item.href} target="_blank" rel="noopener noreferrer" style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 600, fontSize: 18, color: '#F5F5F5', textDecoration: 'none', transition: 'color 120ms' }}
                    onMouseEnter={e => e.target.style.color = '#FF2D8A'}
                    onMouseLeave={e => e.target.style.color = '#F5F5F5'}>
                    {item.value}
                  </a>
                </div>
              ))}
            </div>
            <div style={{ borderTop: '1px solid #2A2A2A', paddingTop: 32 }}>
              <div style={{ fontFamily: "'Space Mono',monospace", fontSize: 10, letterSpacing: '2px', textTransform: 'uppercase', color: '#39FF14', marginBottom: 8 }}>Location</div>
              <div style={{ fontFamily: "'Outfit',sans-serif", fontSize: 16, color: '#AAAAAA', lineHeight: 1.7 }}>
                LA Valley College<br />
                Los Angeles, CA<br />
                8 courts
              </div>
            </div>
          </div>

          {/* Form */}
          {submitted ? (
            <div style={{ display: 'flex', alignItems: 'flex-start' }}>
              <div style={{ background: '#111111', border: '1px solid #39FF14', borderRadius: 8, padding: 48 }}>
                <div style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 900, fontSize: 32, color: '#F5F5F5', marginBottom: 12 }}>Message sent. ✓</div>
                <p style={{ fontSize: 15, color: '#AAAAAA', lineHeight: 1.7 }}>Bo will get back to you personally. Usually within 24 hours.</p>
              </div>
            </div>
          ) : (
            <form onSubmit={e => { e.preventDefault(); setSubmitted(true); }}>
              <div className="contact-form-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                {fields.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>
                    {field.textarea ? (
                      <textarea
                        rows={5}
                        value={form[field.key]}
                        onChange={e => setForm({ ...form, [field.key]: e.target.value })}
                        style={{ ...inputStyle, resize: 'vertical', display: 'block' }}
                        onFocus={e => e.target.style.borderColor = '#FF2D8A'}
                        onBlur={e => e.target.style.borderColor = '#2A2A2A'}
                      />
                    ) : (
                      <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' }}>
                  <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' }}>
                    Send Message →
                  </button>
                </div>
              </div>
            </form>
          )}
        </div>
      </section>

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

Object.assign(window, { ContactPage });