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: [
        { src: '../assets/team-rudra-university.jpg', cap: 'University' },
        { src: '../assets/team-rudra-school.jpeg', pos: '50% 30%', cap: 'School' },
      ],
      body: (
        <React.Fragment>
          <p style={pStyle}><B>PhD in Computer Science, University of British Columbia (2026).</B></p>
          <p style={pStyle}>Six years in machine learning research and production systems, working on multi-agent claim verification and cross-paper evidence synthesis — retrieving evidence across documents and adjudicating whether a claim holds. That is the same problem Synth solves, pointed at sports instead of scientific papers.</p>
          <p style={pStyle}><L>Notable prior experience:</L> Assistant ML Scientist, Synthesis Health; ML research at Oracle.</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: 'member',
      name: 'Amran Bhuiyan',
      role: 'Applied Scientist',
      shots: [
        { src: '../assets/team-amran.jpg', cap: 'Today' },
        { src: '../assets/team-amran-cricket.jpg', cap: 'First bat' },
      ],
      body: (
        <React.Fragment>
          <p style={pStyle}><B>PhD in Computer Vision and Machine Learning, University of Genova (2017).</B></p>
          <p style={pStyle}>Eight years in machine learning research and production systems, building models for NFL, NCAA, and NHL broadcast video at SPORTLOGiQ — systems that had to generalize across cameras, occlusions, and new venues, where a model that only worked on yesterday's data was worthless. That is the same discipline Synth's prediction stack demands: forecasts that hold up out-of-sample, against real market prices, week after week.</p>
          <p style={pStyle}>At Synth, leads predictive modeling and evaluation for the NFL forecasting pipeline — rating systems, learned tabular models, and probability calibration — under a pre-registered protocol of frozen models, walk-forward validation, and performance gated against true market breakevens rather than in-sample metrics. 25+ papers (CVPR, ECCV, NeurIPS, AAAI) and a US patent.</p>
          <p style={pStyle}><L>Notable prior experience:</L> Computer Vision Engineer, SumerSports; Mitacs Industrial Postdoc, SPORTLOGiQ.</p>
          <p style={{ ...pStyle, marginBottom: 0 }}><L>Role:</L> Predictive modeling &amp; model evaluation.</p>
        </React.Fragment>
      ),
    },
  ];

  // The top grid holds the core team (founders + members like Amran); advisors render below.
  const founders = people.filter(p => p.tier === 'founder' || p.tier === 'member');
  const advisors = people.filter(p => p.tier === 'advisor');

  const Card = ({ p }) => (
    <div style={{
      background: 'rgba(251, 247, 241, 0.04)',
      border: '2px solid rgba(251, 247, 241, 0.13)',
      borderRadius: 20,
      padding: isPhone ? '24px 20px 28px' : '36px 36px 40px',
      display: 'flex', flexDirection: 'column',
    }}>
      {p.shots && (
        // Two-up grid for a pair of shots; a single photo shows once, centered at ~62% width so it
        // doesn't leave an empty grid cell (Amran shared one photo).
        p.shots.length === 1 ? (
          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 28 }}>
            <div style={{
              width: '62%', aspectRatio: '4 / 5', borderRadius: 16, overflow: 'hidden',
              background: 'rgba(251,247,241,0.09)', border: '2px solid rgba(251,247,241,0.13)',
            }}>
              {p.shots[0].src && <img src={p.shots[0].src} alt={`${p.name} — ${p.shots[0].cap}`} style={{ width: '100%', height: '100%', objectFit: p.shots[0].fit || 'cover', objectPosition: p.shots[0].pos || '50% 50%', display: 'block' }} />}
            </div>
          </div>
        ) : (
        <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: '2px 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;