/* Get Involved — membership, benefits, scholarships, newsletter. Exports window.Pages.involved */
const invDS = window.WKYHBHutchinsonBellDesignSystem_7985db || {};

function NewsletterForm({ size = 'lg', onDark = false }) {
  const { Button } = invDS; const U = window.U; const data = window.WKYHB;
  const style = onDark ? { background: '#fff', color: 'var(--bell-crimson)', borderColor: '#fff' } : {};
  return (
    <Button size={size} style={style} iconRight={<U.IconExternal />} onClick={() => window.open(data.links.newsletter, '_blank')}>
      Subscribe on Kit
    </Button>
  );
}

function InvolvedPage() {
  const { Button, Badge } = invDS; const U = window.U; const data = window.WKYHB;
  const s = data.scholarship;
  return (
    <React.Fragment>
      <U.PageHeader eyebrow="Get Involved" title="There's a place for you here" lead="Join the Bell, lend a hand, support a student, or simply stay in touch. Every bit of involvement keeps the chapter strong." />

      {/* Membership + benefits */}
      <U.Section bg="surface">
        <U.Container>
          <div className="wk-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-8)', alignItems: 'start' }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <U.Eyebrow>Membership</U.Eyebrow>
              <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'var(--text-2xl)', color: 'var(--text-strong)', margin: 0, letterSpacing: '-0.025em', lineHeight: 1.1 }}>Become part of the Bell</h2>
              <p style={{ fontFamily: 'var(--font-serif)', fontSize: 'var(--text-md)', lineHeight: 1.6, color: 'var(--text-body)', margin: 0 }}>
                Membership in The Hutchinson Bell connects you to the wider Florida College alumni family — and your involvement here at home impacts students from Western Kentucky.
              </p>
              <div style={{ display: 'grid', gap: 12 }}>
                {data.benefits.map((b) => (
                  <div key={b.t} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                    <span style={{ flex: 'none', width: 28, height: 28, borderRadius: '50%', background: 'rgba(196,18,46,0.10)', color: 'var(--bell-crimson)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: 14, marginTop: 2 }}>✓</span>
                    <div>
                      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--text-base)', color: 'var(--text-strong)' }}>{b.t}</div>
                      <div style={{ fontFamily: 'var(--font-body)', fontSize: 14.5, lineHeight: 1.55, color: 'var(--text-body)' }}>{b.d}</div>
                    </div>
                  </div>
                ))}
              </div>
              <Button size="lg" onClick={() => window.open(data.links.join, '_blank')} iconRight={<U.IconExternal />} style={{ alignSelf: 'flex-start', marginTop: 4 }}>Join the Hutchinson Bell</Button>
            </div>

            <div style={{ background: 'linear-gradient(135deg, #7E1626 0%, #C4122E 60%, #9E1B2F 100%)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-lg)', padding: 'var(--space-7)', color: '#fff', position: 'relative', overflow: 'hidden', display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 14 }}>
              <div style={{ position: 'absolute', inset: 0, backgroundImage: `url(${U.texSrc})`, backgroundSize: 'cover', backgroundPosition: 'center', opacity: 0.2, mixBlendMode: 'overlay', pointerEvents: 'none' }} />
              <img src={U.bellSrc} alt="WKYHB bell mark" style={{ position: 'relative', width: 72, height: 72, borderRadius: '50%', boxShadow: '0 0 0 3px rgba(255,255,255,0.9)' }} />
              <span style={{ position: 'relative', fontFamily: 'var(--font-condensed)', textTransform: 'uppercase', letterSpacing: '0.16em', fontSize: 12, fontWeight: 600, color: 'rgba(255,255,255,0.9)' }}>Ready when you are</span>
              <h3 style={{ position: 'relative', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'var(--text-xl)', margin: 0, letterSpacing: '-0.02em', lineHeight: 1.15 }}>Become a member today</h3>
              <p style={{ position: 'relative', fontFamily: 'var(--font-serif)', fontSize: 'var(--text-md)', lineHeight: 1.6, color: 'rgba(255,255,255,0.92)', margin: 0 }}>
                Membership is handled by The Hutchinson Bell. Choose a level, complete your registration, and you're officially part of the family.
              </p>
              <Button size="lg" style={{ position: 'relative', background: '#fff', color: 'var(--bell-crimson)', borderColor: '#fff', marginTop: 4 }} onClick={() => window.open(data.links.join, '_blank')} iconLeft={<U.IconExternal style={{ visibility: 'hidden' }} />} iconRight={<U.IconExternal />}>Choose a membership level</Button>
              <span style={{ position: 'relative', fontFamily: 'var(--font-body)', fontSize: 13, color: 'rgba(255,255,255,0.82)' }}>Questions first? <a href={`mailto:${data.org.email}`} style={{ color: '#fff', fontWeight: 600 }}>{data.org.email}</a></span>
            </div>
          </div>
        </U.Container>
      </U.Section>

      {/* Scholarships */}
      <U.Section bg="ink" pad="72px 0">
        <U.Container>
          <div className="wk-2col" style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 'var(--space-8)', alignItems: 'center' }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <U.Eyebrow onDark>Scholarships</U.Eyebrow>
              <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'var(--text-2xl)', color: '#fff', margin: 0, letterSpacing: '-0.025em', lineHeight: 1.1 }}>Support for students headed to Florida College</h2>
              <p style={{ fontFamily: 'var(--font-serif)', fontSize: 'var(--text-md)', lineHeight: 1.6, color: 'var(--gray-300)', margin: 0 }}>
                {s.open
                  ? `Accepted to Florida College from Western Kentucky? Our chapter awards scholarships to local students each year. Applications for the ${s.year} school year are open${s.deadline ? ` through ${s.deadline}` : ''}.`
                  : "Accepted to Florida College from Western Kentucky? Our chapter awards scholarships to local students each year. Applications for this year have closed — but a new application opens annually. Subscribe to the chapter newsletter and we'll let you know the moment next year's application is available."}
              </p>
              <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 4 }}>
                {s.open
                  ? <Button size="lg" onClick={() => window.open(s.applyUrl, '_blank')} iconRight={<U.IconExternal />}>Apply for a scholarship</Button>
                  : <Button size="lg" onClick={() => window.open(data.links.newsletter, '_blank')} iconRight={<U.IconExternal />}>Get notified next year</Button>}
                <Button size="lg" {...U.darkOutlineBtn({ border: 'rgba(255,255,255,0.5)' })} onClick={() => U.goTo('give')}>Fund a scholarship</Button>
              </div>
            </div>
            <div style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid var(--border-on-dark)', borderRadius: 'var(--radius-lg)', padding: 'var(--space-7)', display: 'flex', flexDirection: 'column', gap: 14 }}>
              {[['Who', 'Students accepted to FC from our area'], ['When', s.open ? `Apply by ${s.deadline}` : "This year's application has closed"], ['How', s.open ? 'Complete the online application form' : 'Watch the newsletter for next year']].map(([k, v]) => (
                <div key={k} style={{ display: 'flex', gap: 16, alignItems: 'baseline', borderBottom: '1px solid var(--border-on-dark)', paddingBottom: 12 }}>
                  <span style={{ fontFamily: 'var(--font-condensed)', textTransform: 'uppercase', letterSpacing: '0.12em', fontSize: 12, color: 'var(--falcon-red)', width: 56, flex: 'none' }}>{k}</span>
                  <span style={{ fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--gray-100)' }}>{v}</span>
                </div>
              ))}
            </div>
          </div>
        </U.Container>
      </U.Section>

      {/* Newsletter */}
      <U.Section bg="paper">
        <U.Container narrow style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14 }}>
          <U.Eyebrow>Chapter Newsletter</U.Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'var(--text-2xl)', color: 'var(--text-strong)', margin: 0, letterSpacing: '-0.025em', lineHeight: 1.1 }}>News, events, and milestones — in your inbox</h2>
          <p style={{ fontFamily: 'var(--font-serif)', fontSize: 'var(--text-md)', lineHeight: 1.6, color: 'var(--text-muted)', margin: 0, maxWidth: 540 }}>
            Subscribe for chapter updates, new event dates, and ways to support our Florida College family. No spam — just the good stuff.
          </p>
          <div style={{ marginTop: 6 }}><NewsletterForm /></div>
          <span style={{ fontFamily: 'var(--font-condensed)', textTransform: 'uppercase', letterSpacing: '0.12em', fontSize: 11, color: 'var(--text-muted)' }}>Powered by Kit</span>
        </U.Container>
      </U.Section>
    </React.Fragment>
  );
}

window.NewsletterForm = NewsletterForm;
window.Pages = window.Pages || {};
window.Pages.involved = InvolvedPage;