// FounderCard - photo (or initials) avatar + italic gold name + role mono + bio + optional education + 4-col stat grid.
const FounderCard = ({ initials, name, role, bio, education, photo, stats }) => (
  <article style={fcStyles.card}>
    <header style={fcStyles.head}>
      {photo
        ? <img src={photo} alt={name} style={fcStyles.avatarImg} />
        : <div style={fcStyles.avatar}>{initials}</div>}
      <div>
        <div style={fcStyles.name}>{name}</div>
        <div style={fcStyles.role}>{role}</div>
      </div>
    </header>
    <p style={fcStyles.bio}>{bio}</p>
    {education ? <div style={fcStyles.education}>{education}</div> : null}
    <div style={fcStyles.statGrid}>
      {stats.map(([n, l]) => (
        <div key={l}>
          <div style={fcStyles.statNum}>{n}</div>
          <div style={fcStyles.statLabel}>{l}</div>
        </div>
      ))}
    </div>
  </article>
);

const fcStyles = {
  card: {
    background: 'var(--bg-elev-1)',
    border: '1px solid var(--border-soft)',
    borderRadius: 4, padding: '36px 34px',
    display: 'flex', flexDirection: 'column', gap: 24,
  },
  head: { display: 'flex', alignItems: 'center', gap: 22 },
  avatar: {
    width: 76, height: 76, borderRadius: '50%',
    background: 'linear-gradient(135deg,#3a3a4a,#1c1c28)',
    border: '1px solid var(--border-gold)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    fontFamily: 'var(--font-display)', fontSize: 26, color: 'var(--fg-accent)',
    flexShrink: 0,
  },
  avatarImg: {
    width: 76, height: 76, borderRadius: '50%',
    objectFit: 'cover',
    border: '1px solid var(--border-gold)',
    flexShrink: 0,
    display: 'block',
  },
  name: {
    fontFamily: 'var(--font-display)', fontStyle: 'italic',
    fontSize: 36, lineHeight: 1, color: 'var(--fg-accent)', fontWeight: 500,
  },
  role: {
    fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.22em',
    textTransform: 'uppercase', color: 'var(--fg-2)', marginTop: 8,
  },
  bio: { fontSize: 16, lineHeight: 1.65, color: 'var(--fg-1)', opacity: 0.84, margin: 0 },
  education: {
    fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em',
    textTransform: 'uppercase', color: 'var(--fg-2)', marginTop: -6,
  },
  statGrid: {
    display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0,1fr))', gap: 18,
    paddingTop: 20, borderTop: '1px solid var(--border-soft)',
    marginTop: 'auto',
  },
  statNum: {
    fontFamily: 'var(--font-display)', fontSize: 26, lineHeight: 1,
    color: 'var(--fg-accent)', fontWeight: 500,
  },
  statLabel: {
    fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.22em',
    textTransform: 'uppercase', color: 'var(--fg-2)', marginTop: 8,
  },
};

Object.assign(window, { FounderCard });