// Team.jsx — the leadership, not the whole company. For this audience the
// names carry weight, so they are the headline rather than a footnote.
//
// TODO before shipping: fill in `handle` (X username, without the @). Links are
// omitted entirely when handle is null — better no link than a link to the
// wrong account.
//
// Portraits are 4:5 crops at 880×1100, cut from the uncropped originals in
// assets/team/_src/, which is gitignored — everything committed in this repo is
// served publicly, and the full frames show more than the portraits do.
// Re-crop from those rather than from the shipped JPEGs.
const TEAM = [
  {
    name: 'Robert Reith',
    alias: 'r0bre',
    role: 'Security',
    handle: null,
    photo: 'assets/team/robert-reith-portrait.jpg',
    body: 'Security researcher and founder of Accretion, with four years auditing Solana programs. The security mind behind Hackhack: what the engine looks for, and how it decides a bug is real.',
  },
  {
    name: 'Henry Elder',
    alias: 'henryE',
    role: 'AI',
    handle: null,
    photo: 'assets/team/henry-elder-portrait.jpg',
    body: 'AI researcher with a PhD in deep learning, and an engineer first. Has built at Backpack, Anchor, MetaDAO and Marginfi. The brain behind the models and the evaluation engine.',
  },
];

function Team() {
  return (
    <section id="team" className="section section-rule">
      <div className="container">
        <div className="section-intro" style={{ maxWidth: 720 }}>
          <span className="eyebrow">leadership</span>
          <h2 className="h-section">
            An auditor and an AI researcher.<br />
            <span className="h-quiet">Leading the build.</span>
          </h2>
          <p className="lead">
            Hackhack is built by people who find bugs for a living, with a wider team of engineers
            and researchers behind them. The engine encodes how we audit Solana programs by hand,
            which is why it looks for the things that actually break protocols.
          </p>
        </div>

        {/* Two profiles over a shared hairline: a modest portrait beside the
            name, alias and role, with the bio under both. No card chrome. */}
        <div className="team-grid">
          {TEAM.map((member) => (
            <article key={member.alias} className="team-member">
              <div className="team-portrait">
                <img src={member.photo} alt={member.name} width="880" height="1100" loading="lazy" />
              </div>
              <div className="team-meta">
                <h3 className="team-name">{member.name}</h3>
                <div className="team-tags">
                  <span className="team-alias">{member.alias}</span>
                  <span className="team-role">{member.role}</span>
                  {member.handle && (
                    <a href={`https://x.com/${member.handle}`} target="_blank" rel="noopener noreferrer" className="team-handle">
                      @{member.handle}
                    </a>
                  )}
                </div>
              </div>
              <p className="team-bio">{member.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Team = Team;