/* About page — story, mission, leadership. Exports window.Pages.about */
const aboutDS = window.WKYHBHutchinsonBellDesignSystem_7985db || {};

function PersonCard({ name, role, onContact }) {
  const U = window.U;
  const initials = name.split(' ').map((w) => w[0]).slice(0, 2).join('');
  return (
    <div style={{ background: 'var(--surface)', borderRadius: 'var(--radius-lg)', border: '1px solid var(--border)', boxShadow: 'var(--shadow-sm)', padding: 'var(--space-5)', display: 'flex', alignItems: 'center', gap: 16 }}>
      <div style={{ flex: 'none', width: 56, height: 56, borderRadius: '50%', background: 'linear-gradient(135deg, #9E1B2F, #C4122E)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 18, letterSpacing: '0.02em' }}>{initials}</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'var(--text-md)', color: 'var(--text-strong)', letterSpacing: '-0.01em' }}>{name}</div>
        {role && <div style={{ fontFamily: 'var(--font-condensed)', textTransform: 'uppercase', letterSpacing: '0.1em', fontSize: 12, color: 'var(--bell-crimson)', fontWeight: 600, marginTop: 2 }}>{role}</div>}
      </div>
      {onContact && <button onClick={onContact} style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 13.5, color: 'var(--text-muted)', background: 'none', border: 'none', cursor: 'pointer', whiteSpace: 'nowrap' }}>Contact →</button>}
    </div>
  );
}

function AboutPage() {
  const { SectionHeading, Button } = aboutDS; const U = window.U; const data = window.WKYHB;
  const goContact = (name) => { U.navTo(`/contact?to=${encodeURIComponent(name)}`); };

  return (
    <React.Fragment>
      <U.PageHeader eyebrow="About the Chapter" title="A Florida College family in Western Kentucky" lead="We are alumni and friends of Florida College who gather, serve, and support students from our area — keeping the spirit of the college alive close to home." />

      {/* Story */}
      <U.Section bg="surface">
        <U.Container>
          <div className="wk-2col" style={{ display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 'var(--space-8)', alignItems: 'center' }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
              <U.Eyebrow>Our Story</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 }}>Connection, close to home</h2>
              <p style={{ fontFamily: 'var(--font-serif)', fontSize: 'var(--text-lg)', lineHeight: 1.6, color: 'var(--text-body)', margin: 0 }}>
                The Western Kentucky Chapter of the Hutchinson Bell exists to connect alumni and friends of Florida College across our region — and to make a real difference for young people from Western Kentucky who hope to attend.
              </p>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-base)', lineHeight: 1.7, color: 'var(--text-body)', margin: 0 }}>
                Through fellowship dinners, watch parties, service days, and fundraisers, we stay close to one another and to the college we love. Your involvement — whether you join, give, or simply show up — directly impacts students from our area. We operate as an associated organization under The Hutchinson Bell, a 501(c)(3) nonprofit.
              </p>
              <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 4 }}>
                <Button onClick={() => window.open(data.links.join, '_blank')} iconRight={<U.IconExternal />}>Join the Bell</Button>
                <Button variant="outline" onClick={() => U.goTo('involved')}>Get involved</Button>
              </div>
            </div>
            <U.Placeholder label="chapter gathering photo" height={380} />
          </div>
        </U.Container>
      </U.Section>

      {/* Mission triad */}
      <U.Section bg="paper">
        <U.Container>
          <SectionHeading align="center" eyebrow="Our Mission" title="Connect · Communicate · Cultivate" lead="A vibrant community advancing the mission of Florida College and fostering lasting connections among members." />
          <div className="wk-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-5)', marginTop: 'var(--space-7)' }}>
            {data.pillars.map((p) => (
              <article key={p.t} style={{ background: 'var(--surface)', borderRadius: 'var(--radius-lg)', border: '1px solid var(--border)', boxShadow: 'var(--shadow-md)', padding: 'var(--space-6)', borderTop: '4px solid var(--bell-crimson)' }}>
                <div style={{ fontFamily: 'var(--font-condensed)', fontSize: 13, fontWeight: 600, letterSpacing: '0.14em', color: 'var(--bell-crimson)', textTransform: 'uppercase' }}>{p.n}</div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'var(--text-xl)', color: 'var(--text-strong)', margin: '8px 0 10px', letterSpacing: '-0.02em' }}>{p.t}</h3>
                <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-base)', lineHeight: 1.6, color: 'var(--text-body)', margin: 0 }}>{p.d}</p>
              </article>
            ))}
          </div>
        </U.Container>
      </U.Section>

      {/* Leadership */}
      <U.Section bg="surface">
        <U.Container>
          <SectionHeading eyebrow="Our Team" title="Officers" lead="The volunteers who keep the chapter running, plan our gatherings, and steward your support." />
          <div className="wk-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-4)', marginTop: 'var(--space-6)' }}>
            {data.officers.map((o) => <PersonCard key={o.name} name={o.name} role={o.role} onContact={() => goContact(o.name)} />)}
          </div>

          <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'var(--text-lg)', color: 'var(--text-strong)', margin: 'var(--space-7) 0 var(--space-5)', letterSpacing: '-0.01em' }}>Board of Directors</h3>
          <div className="wk-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-4)' }}>
            {data.board.map((b) => <PersonCard key={b.name} name={b.name} onContact={() => goContact(b.name)} />)}
          </div>
        </U.Container>
      </U.Section>
    </React.Fragment>
  );
}

window.PersonCard = PersonCard;
window.Pages = window.Pages || {};
window.Pages.about = AboutPage;