const Footer = ({ setPage }) => (
  <footer style={{ background: 'var(--ink)', color: '#fff', paddingTop: 0 }}>
    <StripeRule height={6} />
    <div className="container" style={{ padding: '64px 28px 32px' }}>
      <div data-footer-grid style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr', gap: 40, marginBottom: 48 }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 18 }}>
            <img src="assets/logo.jpg" alt="" style={{ width: 56, height: 56, border: '2px solid #fff' }} />
            <div>
              <div className="display" style={{ fontSize: 28, lineHeight: 0.95 }}>BLACKPOOL<br />WREN ROVERS FC</div>
              <div className="mono" style={{ fontSize: 9.5, letterSpacing: '0.3em', color: 'var(--red)', marginTop: 6 }}>
                EST. 1936 · LANCASHIRE
              </div>
            </div>
          </div>
          <p style={{ fontSize: 13.5, lineHeight: 1.6, color: 'rgba(255,255,255,0.6)', maxWidth: 380 }}>
            A community football club playing out of Mill Farm and Bispham. Men's, women's and twelve junior teams. Fylde-born, Lancashire-proud.
          </p>
        </div>
        {[
          { h: 'CLUB', items: [['Home', 'home'], ['Fixtures', 'fixtures'], ['Match Centre', 'matchcentre'], ['Teams', 'teams']] },
          { h: 'GET INVOLVED', items: [['Join Us', 'community'], ['Sponsors', 'sponsors'], ['Volunteer', 'community'], ['Welfare', 'community']] },
          { h: 'CONTACT', items: [['info@blackpoolwrenroversfc.co.uk', null], ['Mill Farm, Wesham FY8', null], ['Reg. charity 2014/4421', null]] },
        ].map(col => (
          <div key={col.h}>
            <div className="mono" style={{ fontSize: 10, letterSpacing: '0.22em', color: 'var(--red)', fontWeight: 700, marginBottom: 16 }}>
              {col.h}
            </div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {col.items.map(([label, p], i) => (
                <li key={i}>
                  <a onClick={() => p && setPage(p)} style={{
                    fontSize: 13, color: 'rgba(255,255,255,0.75)', cursor: p ? 'pointer' : 'default',
                  }}>{label}</a>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>

      <div data-footer-bottom style={{
        paddingTop: 24, borderTop: '1px solid var(--ink-3)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12,
      }}>
        <div className="mono" style={{ fontSize: 10.5, letterSpacing: '0.18em', color: 'rgba(255,255,255,0.5)' }}>
          © 2026 BLACKPOOL WREN ROVERS FC · ALL RIGHTS RESERVED
        </div>
        <div className="mono" style={{ fontSize: 10.5, letterSpacing: '0.18em', color: 'rgba(255,255,255,0.5)' }}>
          FA-AFFILIATED · NWCFL · LANCASHIRE FA
        </div>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Footer });