/* global React, NA_DATA, NASite, naSupabase */
const { useState } = React;

// ============== SHOP PAGE ==============
function ShopPage() {
  const { Photo, Pill } = NASite;
  return (
    <main>
      <div className="page-head">
        <div className="wrap">
          <div className="crumb">Club / Shop</div>
          <h1>Club shop.</h1>
          <p className="lede">Match jerseys, training kit and club merch are on the way. We're finalising stock — nothing's listed yet so we don't promise anything we can't deliver.</p>
        </div>
      </div>

      <section className="section">
        <div className="wrap" style={{ maxWidth: 720 }}>
          <div className="shop-pending">
            <span className="shop-pending-badge">Coming soon</span>
            <h2 className="shop-pending-h">The shop is being stocked.</h2>
            <p className="shop-pending-p">
              We're putting together the full range — home and away jerseys, training tops, hoodies and accessories. Once stock is confirmed, everything will be available to order here with club sizing and custom names.
            </p>
            <p className="shop-pending-p">
              In the meantime, for kit enquiries email <a href="mailto:admin@nottinghamathletic.com">admin@nottinghamathletic.com</a> or ask your coach.
            </p>
            <a className="btn btn-accent btn-lg" href="https://chat.whatsapp.com/CuKz661tLVK4o3QVJLaReY" target="_blank" rel="noopener noreferrer" style={{ marginTop: 8 }}>
              Get notified in the club WhatsApp →
            </a>
          </div>
        </div>
      </section>
    </main>
  );
}

// ============== CONTACT PAGE ==============
function ContactPage() {
  const { VENUES } = NA_DATA;
  const [status, setStatus] = useState('idle'); // 'idle' | 'sending' | 'sent' | 'error'
  const [errMsg, setErrMsg] = useState('');
  const [form, setForm] = useState({ name: '', email: '', reason: 'Trial / join the club', message: '' });
  const [hp, setHp] = useState(''); // honeypot — must stay empty
  const startedAt = React.useRef(Date.now());
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  // Map the human-readable dropdown label to a stable enum value for storage.
  const reasonMap = {
    'Trial / join the club':              'trial',
    'Schools partnership (Academy CIC)':  'schools',
    'Travel teams':                       'travel',
    'Sponsorship enquiry':                'sponsorship',
    'Press / media':                      'press',
    'Parent question':                    'parent',
    'General':                            'general',
  };

  const submit = async (e) => {
    e.preventDefault();
    setStatus('sending');
    setErrMsg('');
    // Spam guard: silently "succeed" without writing if it trips.
    if (naSupabase.looksLikeSpam({ honeypot: hp, startedAt: startedAt.current })) {
      setStatus('sent');
      return;
    }
    const parts = form.name.trim().split(/\s+/);
    const first_name = parts[0] || '';
    const last_name = parts.length > 1 ? parts.slice(1).join(' ') : '';
    try {
      await naSupabase.submitEnquiry({
        source: 'general_contact',
        first_name,
        last_name,
        email: form.email.trim(),
        reason: reasonMap[form.reason] || 'general',
        message: form.message.trim(),
      });
      setStatus('sent');
    } catch (err) {
      console.warn('submitEnquiry failed:', err);
      setErrMsg(err.message || 'Could not send. Try again or email admin@nottinghamathletic.com.');
      setStatus('error');
    }
  };

  const sent = status === 'sent';
  const sending = status === 'sending';
  const reset = () => {
    setStatus('idle');
    setForm({ name: '', email: '', reason: 'Trial / join the club', message: '' });
  };

  return (
    <main>
      <div className="page-head">
        <div className="wrap">
          <div className="crumb">Club / Join &amp; Contact</div>
          <h1>Get in touch.</h1>
          <p className="lede">Trials, schools partnerships, sponsorship, press, parents' questions — use the form below or email us direct. Matt Parker, our founder, reads everything that comes in.</p>
        </div>
      </div>

      <section className="section">
        <div className="wrap">
          <div className="grid" style={{ gridTemplateColumns: '1.1fr 1fr', gap: 48 }}>
            <div>
              <div className="eyebrow mb-4">Where we play</div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                {VENUES.map((v, i) => (
                  <div className="venue-card" key={i}>
                    <div className="venue-tag">Venue 0{i + 1}</div>
                    <h3>{v.name}</h3>
                    <div className="venue-addr">{v.area}<br />{v.addr}</div>
                    <div style={{ marginTop: 'auto', paddingTop: 12, borderTop: '1px solid var(--line)', fontSize: 13, color: 'var(--ink)', fontWeight: 500 }}>{v.use}</div>
                  </div>
                ))}
              </div>
              <div className="card card-pad" style={{ marginTop: 16 }}>
                <div className="eyebrow eyebrow-orange">Direct</div>
                <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 24, marginTop: 12 }}>
                  <div>
                    <div className="ink-mute" style={{ fontSize: 12, letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 600 }}>All enquiries</div>
                    <div style={{ fontFamily: 'var(--font-serif)', fontSize: 18, fontWeight: 600, letterSpacing: '-0.01em', marginTop: 4 }}>admin@nottinghamathletic.com</div>
                  </div>
                  <div>
                    <div className="ink-mute" style={{ fontSize: 12, letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 600 }}>Founder &amp; Director</div>
                    <div style={{ fontFamily: 'var(--font-serif)', fontSize: 18, fontWeight: 600, letterSpacing: '-0.01em', marginTop: 4 }}>Matt Parker</div>
                  </div>
                </div>
              </div>

              {/* WhatsApp groups — official club announcements + international tours */}
              <a
                className="wa-card"
                href="https://chat.whatsapp.com/CuKz661tLVK4o3QVJLaReY"
                target="_blank"
                rel="noopener noreferrer"
                style={{ marginTop: 16 }}
              >
                <div className="wa-card-icon" aria-hidden="true">
                  <svg viewBox="0 0 32 32" width="22" height="22" fill="currentColor">
                    <path d="M16 3C8.82 3 3 8.82 3 16c0 2.3.6 4.46 1.65 6.34L3 29l6.84-1.79A12.94 12.94 0 0 0 16 29c7.18 0 13-5.82 13-13S23.18 3 16 3zm0 23.4c-2 0-3.9-.54-5.55-1.5l-.4-.24-4.06 1.06 1.08-3.95-.26-.4A10.4 10.4 0 1 1 26.4 16 10.42 10.42 0 0 1 16 26.4zm5.7-7.78c-.31-.16-1.84-.91-2.13-1.01-.28-.1-.49-.16-.7.16-.2.31-.8 1.01-.98 1.22-.18.2-.36.23-.67.08-.31-.16-1.32-.49-2.51-1.55-.93-.83-1.55-1.86-1.73-2.17-.18-.31-.02-.48.14-.63.14-.14.31-.36.47-.55.16-.2.21-.31.31-.52.1-.21.05-.39-.03-.55-.08-.16-.7-1.69-.96-2.31-.25-.6-.51-.52-.7-.53l-.6-.01c-.2 0-.55.08-.83.39-.28.31-1.09 1.06-1.09 2.59 0 1.53 1.11 3 1.27 3.21.16.2 2.19 3.34 5.31 4.68.74.32 1.32.51 1.78.65.75.24 1.43.21 1.97.13.6-.09 1.84-.75 2.1-1.48.26-.73.26-1.35.18-1.48-.07-.13-.27-.21-.58-.36z"/>
                  </svg>
                </div>
                <div className="wa-card-body">
                  <div className="ink-mute" style={{ fontSize: 12, letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 600 }}>Club community · WhatsApp group</div>
                  <div style={{ fontFamily: 'var(--font-serif)', fontSize: 20, fontWeight: 600, letterSpacing: '-0.01em', marginTop: 4 }}>Official Nottingham Athletic announcements.</div>
                  <p className="ink-soft" style={{ fontSize: 13.5, lineHeight: 1.5, margin: '8px 0 0' }}>
                    The official club community group. Match-day reminders, training updates, club news — straight from the coaches.
                  </p>
                </div>
                <div className="wa-card-arrow" aria-hidden="true">→</div>
              </a>

              {/* International announcements WhatsApp group — early bird news on tours, sign-up forms, exclusive rates */}
              <a
                className="wa-card"
                href="https://chat.whatsapp.com/K3vReMuglKrItv6I0MjeV7"
                target="_blank"
                rel="noopener noreferrer"
                style={{ marginTop: 12 }}
              >
                <div className="wa-card-icon" aria-hidden="true">
                  <svg viewBox="0 0 32 32" width="22" height="22" fill="currentColor">
                    <path d="M16 3C8.82 3 3 8.82 3 16c0 2.3.6 4.46 1.65 6.34L3 29l6.84-1.79A12.94 12.94 0 0 0 16 29c7.18 0 13-5.82 13-13S23.18 3 16 3zm0 23.4c-2 0-3.9-.54-5.55-1.5l-.4-.24-4.06 1.06 1.08-3.95-.26-.4A10.4 10.4 0 1 1 26.4 16 10.42 10.42 0 0 1 16 26.4zm5.7-7.78c-.31-.16-1.84-.91-2.13-1.01-.28-.1-.49-.16-.7.16-.2.31-.8 1.01-.98 1.22-.18.2-.36.23-.67.08-.31-.16-1.32-.49-2.51-1.55-.93-.83-1.55-1.86-1.73-2.17-.18-.31-.02-.48.14-.63.14-.14.31-.36.47-.55.16-.2.21-.31.31-.52.1-.21.05-.39-.03-.55-.08-.16-.7-1.69-.96-2.31-.25-.6-.51-.52-.7-.53l-.6-.01c-.2 0-.55.08-.83.39-.28.31-1.09 1.06-1.09 2.59 0 1.53 1.11 3 1.27 3.21.16.2 2.19 3.34 5.31 4.68.74.32 1.32.51 1.78.65.75.24 1.43.21 1.97.13.6-.09 1.84-.75 2.1-1.48.26-.73.26-1.35.18-1.48-.07-.13-.27-.21-.58-.36z"/>
                  </svg>
                </div>
                <div className="wa-card-body">
                  <div className="ink-mute" style={{ fontSize: 12, letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 600 }}>International announcements · WhatsApp group</div>
                  <div style={{ fontFamily: 'var(--font-serif)', fontSize: 20, fontWeight: 600, letterSpacing: '-0.01em', marginTop: 4 }}>Join the tours announcements list.</div>
                  <p className="ink-soft" style={{ fontSize: 13.5, lineHeight: 1.5, margin: '8px 0 0' }}>
                    Further information on upcoming trips abroad — be the first to know, receive sign-up forms and letters, and unlock exclusive early-bird rates.
                  </p>
                </div>
                <div className="wa-card-arrow" aria-hidden="true">→</div>
              </a>
            </div>

            <form className="card card-pad" onSubmit={submit}>
              <div className="eyebrow mb-4">Send a message</div>
              {sent ? (
                <div style={{ padding: '32px 0', textAlign: 'center' }}>
                  <h3 style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 28, letterSpacing: '-0.01em', margin: '0 0 12px' }}>Thanks. Got it.</h3>
                  <p className="ink-soft" style={{ fontSize: 15 }}>Matt or one of the coaches will come back to you within a few days.</p>
                  <button type="button" className="btn btn-soft" onClick={reset} style={{ marginTop: 16 }}>Send another →</button>
                </div>
              ) : (
                <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                  {/* Honeypot — hidden from humans, bots fill it. Leave empty. */}
                  <div aria-hidden="true" style={{ position: 'absolute', left: '-9999px', top: 'auto', width: 1, height: 1, overflow: 'hidden' }}>
                    <label>Company<input type="text" tabIndex="-1" autoComplete="off" value={hp} onChange={e => setHp(e.target.value)} /></label>
                  </div>
                  <div className="field"><label>Name</label><input required value={form.name} onChange={e => set('name', e.target.value)} disabled={sending} /></div>
                  <div className="field"><label>Email</label><input type="email" required value={form.email} onChange={e => set('email', e.target.value)} disabled={sending} /></div>
                  <div className="field">
                    <label>Reason for contact</label>
                    <select value={form.reason} onChange={e => set('reason', e.target.value)} disabled={sending}>
                      {Object.keys(reasonMap).map(r => <option key={r}>{r}</option>)}
                    </select>
                  </div>
                  <div className="field"><label>Message</label><textarea rows="5" value={form.message} onChange={e => set('message', e.target.value)} disabled={sending} /></div>
                  {status === 'error' && (
                    <div role="alert" style={{ fontSize: 13, color: 'var(--na-red-700)', background: 'var(--na-red-100)', padding: '10px 12px', borderRadius: 'var(--radius-sm)', border: '1px solid var(--na-red-200)' }}>
                      {errMsg}
                    </div>
                  )}
                  <button type="submit" className="btn btn-accent btn-lg" disabled={sending} style={{ alignSelf: 'flex-start', marginTop: 4 }}>
                    {sending ? 'Sending…' : 'Send message'}
                  </button>
                </div>
              )}
            </form>
          </div>
        </div>
      </section>
    </main>
  );
}

window.ShopPage = ShopPage;
window.ContactPage = ContactPage;