function HumanLayer() {
  const people = [
    {
      name: 'Fabian Rauch',
      role: 'Ad Specialist · 15+ yrs',
      stat: 'AI FOUNDER · CRQLAR.COM',
      photo: '/team/fabian-rauch.jpg',
      link: 'https://crqlar.com'
    },
    {
      name: 'Hannah Erdmann',
      role: 'Ad Specialist · 5+ yrs',
      stat: 'AI RESEARCHER · UIBK',
      photo: '/team/hannah-erdmann.jpg'
    },
    {
      name: 'Daniel Steiner',
      role: 'Ad Specialist · 8+ yrs',
      stat: 'AI FOUNDER · DOC2ME',
      photo: '/team/daniel-steiner.jpg'
    }
  ];
  return (
    <section id="team" className="team-section">
      <div className="section-inner">
        <div className="section-head">
          <div className="eyebrow">THE HUMAN LAYER</div>
          <h2 className="section-title">The specialists who sign off.<br/><span className="muted">Real people. Real names.</span></h2>
        </div>
        <div className="team-grid team-grid-3">
          {people.map((p, i) => {
            const Wrap = p.link ? 'a' : 'div';
            const wrapProps = p.link ? { href: p.link, target: '_blank', rel: 'noopener' } : {};
            return (
              <Wrap key={i} {...wrapProps} className="glass-card team-card">
                <div className="team-portrait tall" aria-hidden="true">
                  <img src={p.photo} alt="" className="team-photo"/>
                  <div className="portrait-duotone"/>
                </div>
                <div className="team-meta">
                  <div className="team-name">{p.name}</div>
                  <div className="team-role">{p.role}</div>
                  <div className="team-stat mono">{p.stat}</div>
                </div>
              </Wrap>
            );
          })}
        </div>
      </div>
    </section>
  );
}

window.HumanLayer = HumanLayer;