/* Footer with CTA band + chapter info. Exports window.Footer */
const footDS = window.WKYHBHutchinsonBellDesignSystem_7985db || {};

function Footer() {
  const { Button } = footDS;
  const U = window.U; const data = window.WKYHB;
  const col = { display: 'flex', flexDirection: 'column', gap: 10 };
  const head = { fontFamily: 'var(--font-condensed)', textTransform: 'uppercase', letterSpacing: '0.14em', fontSize: 12, color: 'var(--falcon-red)', fontWeight: 600, marginBottom: 2 };
  const lnk = { fontFamily: 'var(--font-body)', fontSize: 14.5, color: 'var(--gray-300)', background: 'none', border: 'none', textAlign: 'left', padding: 0, cursor: 'pointer', textDecoration: 'none' };

  return (
    <React.Fragment>
      {/* CTA band */}
      <U.Section bg="ink" pad="68px 0">
        <U.Container style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 18 }}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(28px,4vw,44px)', letterSpacing: '-0.02em', color: '#fff', margin: 0, lineHeight: 1.1, maxWidth: 720 }}>
            Keep the spirit of Florida College alive and <span style={{ fontFamily: 'var(--font-script)', fontWeight: 400, color: 'var(--falcon-red)' }}>growing</span>
          </h2>
          <p style={{ fontFamily: 'var(--font-serif)', fontSize: 18, lineHeight: 1.6, color: 'var(--gray-300)', margin: 0, maxWidth: 620 }}>
            Become part of a community that connects, communicates, and cultivates lasting relationships. Membership is open to all alumni and friends.
          </p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', justifyContent: 'center', marginTop: 4 }}>
            <Button size="lg" onClick={() => window.open(data.links.join, '_blank')}>Become a Member</Button>
            <Button size="lg" {...U.darkOutlineBtn({ border: 'rgba(255,255,255,0.5)' })} onClick={() => U.goTo('give')}>Give Now</Button>
          </div>
        </U.Container>
      </U.Section>

      {/* Footer */}
      <footer style={{ background: 'var(--gray-900)', color: 'var(--gray-400)', padding: '56px 0 40px' }}>
        <U.Container>
          <div style={{ display: 'grid', gridTemplateColumns: 'minmax(220px,1.4fr) repeat(3, 1fr)', gap: 40, alignItems: 'start' }} className="wk-foot-grid">
            <div style={{ ...col, gap: 14 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 13 }}>
                <div style={{ flex: 'none', width: 46, height: 46, borderRadius: '50%', overflow: 'hidden', lineHeight: 0 }}>
                  <img src={U.bellSrc} alt="WKYHB" style={{ width: '112%', height: '112%', objectFit: 'cover', transform: 'translate(-5.4%, -5.4%)' }} />
                </div>
                <div>
                  <div style={{ fontFamily: 'var(--font-condensed)', textTransform: 'uppercase', letterSpacing: '0.12em', fontSize: 11, color: 'var(--falcon-red)' }}>Western Kentucky Chapter</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, color: '#fff', fontSize: 16 }}>The Hutchinson Bell</div>
                </div>
              </div>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.6, color: 'var(--gray-400)', margin: 0, maxWidth: 320 }}>{data.org.tagline}.</p>
              <div style={{ display: 'flex', gap: 10, marginTop: 2 }}>
                <a href={data.links.facebook} target="_blank" rel="noopener" aria-label="Facebook" style={{ ...lnk, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 36, height: 36, borderRadius: '50%', border: '1px solid var(--border-on-dark)', color: 'var(--gray-300)' }}><U.IconFacebook size={17} /></a>
                <a href={data.links.instagram} target="_blank" rel="noopener" aria-label="Instagram" style={{ ...lnk, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 36, height: 36, borderRadius: '50%', border: '1px solid var(--border-on-dark)', color: 'var(--gray-300)' }}><U.IconInstagram size={17} /></a>
              </div>
            </div>

            <div style={col}>
              <div style={head}>Explore</div>
              {data.nav.filter((n) => n.key !== 'home').map((n) => (
                <button key={n.key} style={lnk} onClick={() => U.goTo(n.key)}>{n.label}</button>
              ))}
            </div>

            <div style={col}>
              <div style={head}>Get Involved</div>
              <a style={lnk} href={data.links.join} target="_blank" rel="noopener">Join the Bell <U.IconExternal /></a>
              <a style={lnk} href={data.links.donate} target="_blank" rel="noopener">Donate <U.IconExternal /></a>
              <button style={lnk} onClick={() => U.goTo('involved')}>Scholarships</button>
              <a style={lnk} href={data.links.newsletter} target="_blank" rel="noopener">Newsletter <U.IconExternal /></a>
            </div>

            <div style={col}>
              <div style={head}>Chapter</div>
              <span style={{ ...lnk, cursor: 'default' }}>{data.org.address}</span>
              <a style={lnk} href={data.links.parent} target="_blank" rel="noopener">The Hutchinson Bell <U.IconExternal /></a>
              <a style={lnk} href={data.links.college} target="_blank" rel="noopener">Florida College <U.IconExternal /></a>
            </div>
          </div>

          <div style={{ borderTop: '1px solid var(--gray-800)', marginTop: 40, paddingTop: 22, display: 'flex', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap' }}>
            <span style={{ fontSize: 12.5, color: 'var(--gray-500)', fontFamily: 'var(--font-body)', maxWidth: 560, lineHeight: 1.5 }}>{data.org.legal}</span>
            <span style={{ fontSize: 12.5, color: 'var(--gray-500)', fontFamily: 'var(--font-body)' }}>© 2026 WKYHB · wkyhb.com</span>
          </div>
        </U.Container>
      </footer>
    </React.Fragment>
  );
}

window.Footer = Footer;