function TeamPage() {
  const { isPhone } = window.useIsMobile();
  // Amber accent for structural labels (Role:, Notable prior experience:)
  const L = ({ children }) => (
    <span style={{ color: 'var(--syn-amber)', fontWeight: 600 }}>{children}</span>
  );
  // Bright cream for inline emphasis within body copy
  const B = ({ children }) => (
    <span style={{ color: '#FBF7F1', fontWeight: 600 }}>{children}</span>
  );

  const people = [
    {
      tier: 'founder',
      name: 'Will Mansbridge',
      role: 'Founder',
      shots: [
        { src: '../assets/team-will-pro.jpeg', pos: '50% 32%', cap: 'Westminster, London' },
        { src: '../assets/team-will-candid-crop.png', cap: 'First pair of skates' },
      ],
      body: (
        <React.Fragment>
          <p style={pStyle}>Six years in sports and media content production, leading commercial, branded, and long-form storytelling for some of Canada's most recognizable brands — the NFL, NBA, PWHL, BMW, Holt Renfrew, CIBC, Scotiabank, Bell Media, SiriusXM, and more.</p>
          <p style={pStyle}><L>Notable prior experience:</L> UNINTERRUPTED Canada; The Good Karma Company.</p>
          <p style={{ ...pStyle, marginBottom: 0 }}><L>Role:</L> Editorial direction &amp; domain expertise.</p>
        </React.Fragment>
      ),
    },
    {
      tier: 'founder',
      name: 'Rudra Saha',
      role: 'Founding Engineer',
      shots: [{ cap: 'Professional' }, { cap: 'Candid' }],
      body: (
        <React.Fragment>
          <p style={pStyle}><B>PhD in Computer Science, University of British Columbia (2026).</B></p>
          <p style={pStyle}>Research on cross-paper claim verification (ACL 2024) — the same underlying problem Synth solves in sports content. Spent the past year building production multi-agent LLM pipelines as <B>Assistant ML Scientist</B> at Synthesis Health, with prior <B>ML at Oracle</B>. Joins Synth full-time as our models move into production.</p>
          <p style={{ ...pStyle, marginBottom: 0 }}><L>Role:</L> Agentic &amp; data engineering.</p>
        </React.Fragment>
      ),
    },
    {
      tier: 'advisor',
      name: 'Rayat Imtiaz Hossain',
      role: 'Founding Technical Advisor',
      body: (
        <React.Fragment>
          <p style={pStyle}><B>Postdoctoral Researcher, Computer Science, University of British Columbia;</B> PhD, UBC.</p>
          <p style={{ ...pStyle, marginBottom: 0 }}>Computer-vision developer at SportLogiq (Montreal); research internships at Facebook Reality Labs and RBC Borealis. At Synth: leads systems design and today's architecture.</p>
        </React.Fragment>
      ),
    },
    {
      tier: 'advisor',
      name: 'Amran Hossen Bhuiyan',
      role: 'Founding Technical Advisor',
      body: (
        <React.Fragment>
          <p style={pStyle}><B>Postdoctoral Fellow &amp; Adjunct Faculty, York University;</B> PhD, Università di Genova.</p>
          <p style={{ ...pStyle, marginBottom: 0 }}>4+ years at SportLogiq as an Industrial Postdoctoral Fellow, building AI-driven athlete-tracking models; publications and patents in computer vision.</p>
        </React.Fragment>
      ),
    },
  ];

  const founders = people.filter(p => p.tier === 'founder');
  const advisors = people.filter(p => p.tier === 'advisor');

  const Card = ({ p }) => (
    <div style={{
      background: 'rgba(251, 247, 241, 0.04)',
      border: '1px solid rgba(251, 247, 241, 0.13)',
      borderRadius: 20,
      padding: isPhone ? '24px 20px 28px' : '36px 36px 40px',
      display: 'flex', flexDirection: 'column',
    }}>
      {p.shots && (
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 28 }}>
          {p.shots.map((sh, i) => (
            <div key={i}>
              <div style={{
                aspectRatio: '4 / 5', borderRadius: 16, overflow: 'hidden',
                background: 'rgba(251,247,241,0.09)', border: '1px solid rgba(251,247,241,0.13)',
              }}>
                {sh.src && <img src={sh.src} alt={`${p.name} — ${sh.cap}`} style={{ width: '100%', height: '100%', objectFit: sh.fit || 'cover', objectPosition: sh.pos || '50% 50%', display: 'block' }} />}
              </div>
            </div>
          ))}
        </div>
      )}
      <h3 style={{
        fontFamily: 'var(--syn-font-display)',
        fontSize: 27, fontWeight: 600,
        letterSpacing: '-0.01em',
        color: '#FBF7F1', textAlign: 'center',
        margin: '0 0 8px',
      }}>{p.name}</h3>
      <div style={{
        fontFamily: 'var(--syn-font-display)',
        fontStyle: 'italic', fontSize: 17,
        color: 'var(--syn-navy-300)', textAlign: 'center',
        marginBottom: 24,
      }}>{p.role}</div>
      <div style={{ height: 1, background: 'rgba(251, 247, 241, 0.13)', marginBottom: 24 }} />
      <div>{p.body}</div>
    </div>
  );

  return (
    <main style={{ padding: isPhone ? '56px 20px 80px' : '80px 48px 112px' }}>
      <div style={{ maxWidth: 1120, margin: '0 auto' }}>
        <div style={{
          fontFamily: 'var(--syn-font-mono)', fontSize: 12,
          letterSpacing: '0.16em', textTransform: 'uppercase',
          color: 'var(--syn-navy-300)', fontWeight: 500, marginBottom: 20,
        }}>The team</div>
        <h1 style={{
          fontFamily: 'var(--syn-font-display)',
          fontSize: isPhone ? 38 : 64, fontWeight: 600,
          letterSpacing: '-0.03em', lineHeight: 1.04,
          color: '#FBF7F1', margin: '0 0 12px',
          textWrap: 'balance',
        }}>Deep domain expertise in sports, AI, and ML</h1>
        <p style={{
          fontFamily: 'var(--syn-font-display)', fontSize: isPhone ? 17 : 20,
          color: 'var(--syn-navy-300)', maxWidth: 640, lineHeight: 1.45,
          margin: '0 0 56px', fontWeight: 400,
        }}>A small team of operators and researchers building the context engine for sports.</p>

        <div style={{ display: 'grid', gridTemplateColumns: isPhone ? '1fr' : 'repeat(2, 1fr)', gap: 24, marginBottom: 56 }}>
          {founders.map(p => <Card key={p.name} p={p} />)}
        </div>

        <div style={{
          fontFamily: 'var(--syn-font-mono)', fontSize: 12,
          letterSpacing: '0.16em', textTransform: 'uppercase',
          color: 'var(--syn-navy-300)', fontWeight: 500, marginBottom: 24,
          paddingTop: 8,
        }}>Founding technical advisors</div>
        <div style={{ display: 'grid', gridTemplateColumns: isPhone ? '1fr' : 'repeat(2, 1fr)', gap: 24 }}>
          {advisors.map(p => <Card key={p.name} p={p} />)}
        </div>
        <div style={{
          marginTop: 72, paddingTop: 64, borderTop: '1px solid rgba(251, 247, 241, 0.13)', textAlign: 'center',
        }}>
          <div style={{
            fontFamily: 'var(--syn-font-mono)', fontSize: 12, letterSpacing: '0.16em',
            textTransform: 'uppercase', color: 'var(--syn-navy-300)', fontWeight: 500, marginBottom: 18,
          }}>Get in touch</div>
          <h2 style={{
            fontFamily: 'var(--syn-font-display)', fontSize: isPhone ? 34 : 56, fontWeight: 600,
            letterSpacing: '-0.035em', lineHeight: 1.06, color: '#FBF7F1', margin: '0 0 16px', textWrap: 'balance',
          }}>We'd love to hear from you.</h2>
          <p style={{
            fontFamily: 'var(--syn-font-display)', fontSize: isPhone ? 17 : 19, lineHeight: 1.45,
            color: 'var(--syn-navy-300)', margin: '0 auto 32px', maxWidth: 520, fontWeight: 400,
          }}>Fans, engineers, editorial minds, investors, or anyone who thinks about sports for a living — our door is always open.</p>
          <a href="mailto:will@thesynth.ca" style={{
            display: 'inline-block', background: 'var(--syn-orange)', color: '#FFFFFF',
            borderRadius: 12, padding: '15px 28px', textDecoration: 'none',
            fontFamily: 'var(--syn-font-body)', fontSize: 15, fontWeight: 500,
          }}>will@thesynth.ca</a>
        </div>
      </div>
    </main>
  );
}

const pStyle = {
  fontFamily: 'var(--syn-font-body)',
  fontSize: 15, lineHeight: 1.7,
  color: '#C8CFDC',
  margin: '0 0 18px',
};

window.TeamPage = TeamPage;