// Team page — team + values, single viewport
function AboutPage({ setPage }) {
  const team = window.PV_DATA.team;
  const values = [
    { n: "Prepared", p: "We show up and do the work. Every decision we make is grounded in deep research, technical understanding, and clear thinking." },
    { n: "Deliberate", p: "We stay focused by design. We don't chase trends or just broaden our scope to close more deals. We go deep on what we know to create real world impact." },
    { n: "Concrete", p: "We measure our value by what we deliver: introductions, contracts, outcomes. It's about setting concrete goals and delivering on them. Our promises are not empty promises." },
    { n: "Curious", p: "The world we invest in is constantly developing and so are we. We engage at the technical level, not just the business model. That's how we earn trust with founders." },
  ];
  return (
    <div className="tm shell">
      <div className="hero-meta">
        <span className="dot"></span>
        <span>THE TEAM — BERLIN BASED, GLOBALLY SHAPED</span>
        <span style={{ flex: 1 }}></span>
        <span>EST. 2021</span>
      </div>
      <div className="tm-grid">
        {team.map((p, i) => (
          <div className="team-card" key={p.name}>
            <a className="team-portrait" href={p.linkedin} target="_blank" rel="noreferrer" aria-label={p.name + " on LinkedIn"}><img src={p.photo} alt={p.name} data-person={p.name.split(' ')[0].toLowerCase()} /></a>
            <div className="badge">0{i + 1}</div>
            <div className="info">
              <div>
                <div className="name"><a href={p.linkedin} target="_blank" rel="noreferrer">{p.name}</a></div>
                <div className="role">{p.role}</div>
              </div>
              <a className="tc-in" href={p.linkedin} target="_blank" rel="noreferrer" aria-label={p.name + " on LinkedIn"}><Arrow size={16} /></a>
            </div>
          </div>
        ))}
      </div>
      <div className="hero-meta" style={{ marginTop: 14, marginBottom: 0 }}>
        <span className="dot"></span>
        <span>OUR VALUES</span>
      </div>
      <div className="tm-vals">
        {values.map(v => (
          <div className="tm-val" key={v.n}>
            <div className="vn">{v.n}</div>
            <p>{v.p}</p>
          </div>
        ))}
      </div>
      <div className="footer-tag tm-tag">On <em>Pace</em> to make History.</div>
      <div className="tm-foot">
        <span>© 2026 Pace Ventures</span>
        <span style={{display:'flex',gap:22}}>
          <a className="ft-legal" onClick={() => setPage('legal')} style={{cursor:'pointer'}}>Privacy &amp; Imprint</a>
          <a href="https://www.linkedin.com/company/paceventures/" target="_blank" rel="noreferrer">LinkedIn</a>
          <ThemeToggle />
        </span>
      </div>
    </div>
  );
}
window.AboutPage = AboutPage;