function Team() {
  const D = (window.SITE && window.SITE.team) || {};
  const team = D.members || [];

  return (
    <section id="equipe" style={{ background: 'var(--surface)' }}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">{D.eyebrow}</span>
          <h2>{D.title} <span style={{ fontStyle: 'italic', color: 'var(--ink-2)' }}>{D.titleAccent}</span></h2>
          <p style={{ fontSize: 17, maxWidth: 600 }}>
            {D.subtitle}
          </p>
        </div>

        <div className="team-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16,
        }}>
          {team.map((m) => (
            <article key={m.name} style={{
              background: 'var(--bg)',
              border: '1px solid var(--line)',
              borderRadius: 'var(--radius-lg)',
              overflow: 'hidden',
              display: 'flex', flexDirection: 'column',
              transition: 'transform .2s ease, box-shadow .2s ease',
            }}
            onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = 'var(--shadow-md)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = ''; }}>
              {/* Portrait — usa m.photo se existir, senão iniciais */}
              <div className="ph" style={{
                aspectRatio: '4 / 5',
                borderRadius: 0, border: 'none',
                background: m.photo ? `center/cover no-repeat url(${m.photo})` : (m.hue || 'var(--primary)'),
                color: 'rgba(255,255,255,.85)',
                position: 'relative',
              }}>
                {!m.photo && (
                  <div style={{
                    position: 'absolute', inset: 0,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontFamily: 'var(--serif)', fontSize: 56, fontWeight: 600,
                    letterSpacing: '-0.02em',
                    color: 'rgba(255,255,255,.92)',
                  }}>
                    {m.name.split(' ').map((n) => n[0]).slice(0, 2).join('')}
                  </div>
                )}
                <span style={{
                  position: 'absolute', bottom: 12, left: 14,
                  fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '.06em',
                  textTransform: 'uppercase',
                  color: 'rgba(255,255,255,.85)',
                  textShadow: m.photo ? '0 1px 2px rgba(0,0,0,.4)' : 'none',
                }}>{m.since}</span>
              </div>

              <div style={{ padding: 20, display: 'flex', flexDirection: 'column', gap: 10, flex: 1 }}>
                <div>
                  <h4 style={{ fontSize: 18, lineHeight: 1.25, marginBottom: 4 }}>{m.name}</h4>
                  <p style={{ fontSize: 12.5, color: 'var(--muted)', fontFamily: 'var(--mono)', letterSpacing: '.02em' }}>
                    {m.role}
                  </p>
                </div>
                <p style={{ fontSize: 13.5, lineHeight: 1.55, color: 'var(--ink-2)', flex: 1 }}>{m.bio}</p>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 4 }}>
                  {(m.specialties || []).map((s) => (
                    <span key={s} style={{
                      fontSize: 11, padding: '3px 8px',
                      background: 'var(--surface)', color: 'var(--ink-2)',
                      border: '1px solid var(--line)',
                      borderRadius: 999,
                      fontFamily: 'var(--mono)',
                    }}>{s}</span>
                  ))}
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 1100px) { .team-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 600px) { .team-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

window.Team = Team;