// Community / Join Us — players, parents, coaches, volunteers, sponsors
const PathwayCard = ({ tag, title, body, action, color }) => (
  <div style={{
    background: '#fff', border: '1px solid var(--line-soft)',
    padding: 0, display: 'flex', flexDirection: 'column',
  }}>
    <div style={{ background: color, color: '#fff', padding: '20px 24px' }}>
      <div className="mono" style={{ fontSize: 10, letterSpacing: '0.22em', opacity: 0.85, fontWeight: 700 }}>{tag}</div>
      <div className="display" style={{ fontSize: 32, marginTop: 6, lineHeight: 1, textTransform: 'uppercase' }}>{title}</div>
    </div>
    <div style={{ padding: '24px', flex: 1, display: 'flex', flexDirection: 'column' }}>
      <p style={{ fontSize: 13.5, lineHeight: 1.6, color: 'var(--ink-2)', margin: 0 }}>{body}</p>
      <div style={{ marginTop: 'auto', paddingTop: 20 }}>
        <Btn variant="dark" size="sm">{action}</Btn>
      </div>
    </div>
  </div>
);

const CommunitySection = () => {
  const [form, setForm] = React.useState({ name: '', email: '', role: 'player', age: '', message: '' });
  const [sent, setSent] = React.useState(false);

  return (
    <section style={{ background: 'var(--paper)', padding: '96px 0' }} id="community">
      <div className="container">
        <SectionHead
          kicker="Join Us"
          title="Pull on the red shirt."
          right={
            <p style={{ maxWidth: 380, margin: 0, color: 'var(--muted)', fontSize: 14, lineHeight: 1.55 }}>
              We're always looking for players, coaches, volunteers and sponsors. Whichever door you walk through, you're family by full-time.
            </p>
          }
        />

        <div data-grid="pathways" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 48 }}>
          <PathwayCard tag="01 · PLAYERS" title="Trial with us" color="var(--red)"
            body="Open trials for the men's and women's first teams every August. Junior trials run through April–May."
            action="Book a Trial" />
          <PathwayCard tag="02 · PARENTS" title="Junior section" color="var(--ink)"
            body="From U7 through U18, boys and girls — twelve squads, FA-accredited coaches, kit included from day one."
            action="Find an Age Group" />
          <PathwayCard tag="03 · COACHES" title="Coach with us" color="var(--red-deep)"
            body="We pay for your FA badges. Looking for level 1 and 2 coaches across the junior section, especially girls' football."
            action="Coaching Roles" />
          <PathwayCard tag="04 · VOLUNTEERS" title="Behind the scenes" color="var(--ink-3)"
            body="Matchday stewards, tea bar, social media, groundskeeping. Two hours a week makes a difference."
            action="Get Involved" />
        </div>

        {/* Form + contact */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 32 }}>
          <div style={{ background: 'var(--ink)', color: '#fff', padding: '40px 40px' }}>
            <div className="mono" style={{ fontSize: 10, letterSpacing: '0.22em', color: 'var(--red)', fontWeight: 700 }}>
              ▸ ENQUIRE NOW
            </div>
            <div className="display" style={{ fontSize: 44, marginTop: 8, lineHeight: 0.95 }}>
              Tell us a bit about you.
            </div>
            <p style={{ fontSize: 13.5, color: 'rgba(255,255,255,0.7)', marginTop: 12, marginBottom: 24 }}>
              Karen or Steve will get back to you within 48 hours — usually faster.
            </p>

            {!sent ? (
              <div data-form-grid style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                {[
                  { k: 'name', label: 'FULL NAME', span: 2 },
                  { k: 'email', label: 'EMAIL', span: 1 },
                  { k: 'age', label: 'AGE (IF PLAYER)', span: 1 },
                ].map(f => (
                  <label key={f.k} style={{ gridColumn: `span ${f.span}` }}>
                    <div className="mono" style={{ fontSize: 9.5, letterSpacing: '0.22em', color: 'rgba(255,255,255,0.55)', marginBottom: 6, fontWeight: 700 }}>
                      {f.label}
                    </div>
                    <input value={form[f.k]} onChange={e => setForm({ ...form, [f.k]: e.target.value })}
                      style={{
                        width: '100%', background: 'transparent', border: 'none',
                        borderBottom: '1.5px solid rgba(255,255,255,0.3)', color: '#fff',
                        padding: '8px 0', fontSize: 15, fontFamily: 'inherit', outline: 'none',
                      }} />
                  </label>
                ))}
                <label style={{ gridColumn: 'span 2' }}>
                  <div className="mono" style={{ fontSize: 9.5, letterSpacing: '0.22em', color: 'rgba(255,255,255,0.55)', marginBottom: 8, fontWeight: 700 }}>
                    I'M INTERESTED IN
                  </div>
                  <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                    {['player', 'parent', 'coach', 'volunteer', 'sponsor'].map(r => (
                      <button key={r} onClick={() => setForm({ ...form, role: r })} style={{
                        padding: '8px 14px', border: '1.5px solid rgba(255,255,255,0.3)',
                        background: form.role === r ? 'var(--red)' : 'transparent',
                        borderColor: form.role === r ? 'var(--red)' : 'rgba(255,255,255,0.3)',
                        color: '#fff', fontSize: 11, fontWeight: 700, letterSpacing: '0.16em',
                        textTransform: 'uppercase', cursor: 'pointer',
                      }}>{r}</button>
                    ))}
                  </div>
                </label>
                <label style={{ gridColumn: 'span 2' }}>
                  <div className="mono" style={{ fontSize: 9.5, letterSpacing: '0.22em', color: 'rgba(255,255,255,0.55)', marginBottom: 6, fontWeight: 700 }}>
                    A FEW WORDS (OPTIONAL)
                  </div>
                  <textarea value={form.message} onChange={e => setForm({ ...form, message: e.target.value })} rows={3}
                    style={{
                      width: '100%', background: 'transparent', border: '1.5px solid rgba(255,255,255,0.2)',
                      color: '#fff', padding: '12px', fontSize: 14, fontFamily: 'inherit', outline: 'none', resize: 'vertical',
                    }} />
                </label>
                <div style={{ gridColumn: 'span 2', marginTop: 8 }}>
                  <Btn variant="primary" size="lg" onClick={() => setSent(true)}>Send Enquiry</Btn>
                </div>
              </div>
            ) : (
              <div style={{ padding: '40px 0' }}>
                <div className="display" style={{ fontSize: 56, color: 'var(--red)' }}>SENT.</div>
                <p style={{ fontSize: 14, color: 'rgba(255,255,255,0.8)' }}>Cheers, {form.name || 'mate'} — we'll be in touch within 48 hours.</p>
              </div>
            )}
          </div>

          {/* Contact info */}
          <div style={{ background: '#fff', border: '1px solid var(--line-soft)', padding: '32px 32px' }}>
            <div className="mono" style={{ fontSize: 10, letterSpacing: '0.22em', color: 'var(--red)', fontWeight: 700 }}>
              ▸ FIND US
            </div>
            <div className="display" style={{ fontSize: 32, marginTop: 8, lineHeight: 1 }}>
              The Mill, FY7
            </div>
            <p style={{ fontSize: 13, color: 'var(--muted)', lineHeight: 1.6 }}>
              We groundshare with AFC Fylde at Mill Farm. Junior training at Bispham High School playing fields.
            </p>

            <div style={{ marginTop: 24, paddingTop: 24, borderTop: '1px solid var(--line-soft)' }}>
              {[
                { k: 'GENERAL', v: 'info@blackpoolwrenroversfc.co.uk' },
                { k: 'WELFARE', v: 'welfare@blackpoolwrenroversfc.co.uk' },
                { k: 'SPONSORSHIP', v: 'sponsors@blackpoolwrenroversfc.co.uk' },
                { k: 'JUNIOR SECTION', v: 'juniors@blackpoolwrenroversfc.co.uk' },
              ].map(c => (
                <div key={c.k} style={{ marginBottom: 16 }}>
                  <div className="mono" style={{ fontSize: 9.5, letterSpacing: '0.2em', color: 'var(--muted)', fontWeight: 700 }}>{c.k}</div>
                  <div style={{ fontSize: 13.5, fontWeight: 500, marginTop: 2, wordBreak: 'break-all' }}>{c.v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// Photo gallery / Facebook strip
const GallerySection = () => {
  const photos = [
    { tag: 'MATCHDAY · 25 APR', title: 'Doyle nets the third' },
    { tag: 'JUNIORS · 23 APR', title: 'U10s — county cup win' },
    { tag: "WOMEN'S · 20 APR", title: 'Pemberton scores again' },
    { tag: 'CLUB · 18 APR', title: 'Volunteer awards night' },
    { tag: 'TRAINING · 15 APR', title: 'Tuesday under the lights' },
    { tag: 'SPONSORS · 12 APR', title: "Questa renew principal" },
  ];
  return (
    <section style={{ background: 'var(--paper-2)', padding: '96px 0' }}>
      <div className="container">
        <SectionHead
          kicker="From the Touchline · Facebook"
          title="Latest from the club."
          right={
            <a href="#" onClick={e => e.preventDefault()} style={{
              display: 'inline-flex', alignItems: 'center', gap: 10, fontSize: 12,
              fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase',
            }}>
              <span style={{
                display: 'inline-block', width: 18, height: 18, background: '#1877F2',
                color: '#fff', fontSize: 12, fontWeight: 800, textAlign: 'center', lineHeight: '18px',
              }}>f</span>
              Follow on Facebook →
            </a>
          }
        />

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {photos.map((p, i) => (
            <div key={i} style={{
              aspectRatio: '4/3', position: 'relative',
              background: i === 0
                ? `url(assets/team-hero.png) center/cover`
                : `repeating-linear-gradient(${45 + i * 30}deg, rgba(14,15,18,0.85) 0 14px, rgba(14,15,18,0.7) 14px 28px)`,
              cursor: 'pointer', overflow: 'hidden',
            }}>
              <div style={{
                position: 'absolute', inset: 0,
                background: 'linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.85) 100%)',
              }} />
              <div style={{
                position: 'absolute', bottom: 16, left: 18, right: 18, color: '#fff',
              }}>
                <div className="mono" style={{ fontSize: 9.5, letterSpacing: '0.22em', color: 'var(--red)', fontWeight: 700 }}>{p.tag}</div>
                <div className="display" style={{ fontSize: 24, marginTop: 4, lineHeight: 1, textTransform: 'uppercase' }}>{p.title}</div>
              </div>
              {i !== 0 && (
                <div className="mono" style={{
                  position: 'absolute', top: 16, right: 18, color: 'rgba(255,255,255,0.5)',
                  fontSize: 10, letterSpacing: '0.18em',
                }}>[ PHOTO ]</div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { CommunitySection, GallerySection });