// team.jsx — 7 team cards
function Team({ t }) {
  return (
    <section id="studio" style={{
      paddingTop: 120, paddingBottom: 120,
      borderTop: '1.5px solid var(--ink)',
      background: 'var(--paper)'
    }}>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 80, alignItems: 'end', marginBottom: 80 }}>
          <div>
            <div className="kicker reveal" style={{ marginBottom: 28 }}>
              <span className="dot"></span>{t.team_eye}
            </div>
            <h2 className="display reveal" style={{ fontSize: 'clamp(56px, 8vw, 128px)' }}>
              <div>{t.team_title_1}</div>
              <div style={{ fontStyle: 'italic' }}>{t.team_title_2}</div>
            </h2>
          </div>
          <p className="reveal" style={{ fontSize: 20, color: 'var(--ink)', maxWidth: 380, alignSelf: 'end' }}>
            {t.team_sub}
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
          {t.team.map((m, i) => (
            <TeamCard key={i} member={m} index={i} />
          ))}
        </div>
      </div>
    </section>
  );
}

function TeamCard({ member, index }) {
  return (
    <div className="reveal clickable" data-hover style={{
      borderRadius: 18, overflow: 'hidden',
      border: '1.5px solid var(--ink)',
      boxShadow: '4px 4px 0 var(--ink)',
      transition: 'transform 0.5s var(--ease-snap), box-shadow 0.5s',
      background: 'var(--paper)'
    }}
    onMouseEnter={e => {
      e.currentTarget.style.transform = 'translate(-3px, -3px)';
      e.currentTarget.style.boxShadow = '8px 8px 0 var(--ink)';
    }}
    onMouseLeave={e => {
      e.currentTarget.style.transform = '';
      e.currentTarget.style.boxShadow = '4px 4px 0 var(--ink)';
    }}>
      <div style={{
        aspectRatio: '4/5',
        background: `var(--${member.color})`,
        position: 'relative', overflow: 'hidden',
        borderBottom: '1.5px solid var(--ink)'
      }}>
        {/* Chrome orb as portrait placeholder */}
        <div style={{
          position: 'absolute', left: '50%', top: '52%',
          transform: 'translate(-50%, -50%)'
        }}>
          <div style={{
            width: 110, height: 110, borderRadius: '50%',
            background: 'var(--chrome)',
            backgroundSize: '200% 200%',
            animation: `chromeShift ${5 + index}s linear infinite`,
            border: '1.5px solid var(--ink)',
            boxShadow: 'inset 0 -15px 30px rgba(0,0,0,0.4), inset 0 10px 25px rgba(255,255,255,0.5)'
          }} />
        </div>
        <div style={{
          position: 'absolute', bottom: 10, left: 12,
          fontFamily: 'var(--font-mono)', fontSize: 9, fontWeight: 600,
          letterSpacing: '0.16em', color: 'var(--ink)', textTransform: 'uppercase'
        }}>
          0{index + 1} · retrato
        </div>
        <Star size={20} color="var(--ink)" style={{
          position: 'absolute', top: 12, right: 12
        }} />
      </div>
      <div style={{ padding: 18 }}>
        <div style={{ fontSize: 15, fontWeight: 600, marginBottom: 4 }}>{member.n}</div>
        <div style={{ fontSize: 11.5, color: 'var(--ink-mute)', fontFamily: 'var(--font-mono)', letterSpacing: '0.04em' }}>
          {member.r}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Team, TeamCard });