function Team({ t }) {
  const m = t.teamMembers[0]; // single founder
  return (
    <section id="team" style={{ padding:'clamp(60px,8vw,120px) 0', background:'var(--cream)' }}>
      <div className="wrap">
        <div className="section-head" style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom: 50, flexWrap:'wrap', gap: 20 }}>
          <div>
            <div className="mono-tiny" style={{ color:'var(--gray-400)', marginBottom: 14 }}>
              {t.teamKicker}
            </div>
            <h2 className="display" style={{ fontSize:'clamp(44px, 6vw, 80px)' }}>
              {t.teamTitle1} <span className="display-italic" style={{color:'var(--pink-500)'}}>{t.teamTitle2}</span>
            </h2>
          </div>
          <div className="mono-tiny" style={{ color:'var(--gray-400)' }}>
            01 — fondatrice
          </div>
        </div>

        <FounderSpotlight m={m} t={t} />
      </div>
    </section>
  );
}

function FounderSpotlight({ m, t }) {
  const [hover, setHover] = React.useState(false);

  return (
    <div className="founder-grid" style={{
      display:'grid',
      gridTemplateColumns:'minmax(280px, 1fr) minmax(280px, 1.3fr)',
      gap: 'clamp(24px, 4vw, 60px)',
      alignItems:'stretch',
    }}>
      {/* Left: portrait card */}
      <div
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        style={{
          borderRadius: 18, overflow:'hidden', position:'relative',
          background:'linear-gradient(155deg, #ffe8f0 0%, #f7a8c4 50%, #d14a85 100%)',
          minHeight: 480,
          padding: 24,
          display:'flex', flexDirection:'column', justifyContent:'space-between',
          cursor:'pointer',
        }}>
        {/* top badges */}
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', position:'relative', zIndex: 2 }}>
          <span className="mono-tiny" style={{ color:'white', background:'rgba(0,0,0,0.18)', padding:'5px 12px', borderRadius: 999 }}>
            01 / 01
          </span>
          <span className="mono-tiny" style={{ color:'white', background:'rgba(255,255,255,0.22)', padding:'5px 12px', borderRadius: 999, backdropFilter:'blur(4px)' }}>
            Braga · PT
          </span>
        </div>

        {/* portrait photo - circular */}
        <div style={{
          position:'absolute', top: '50%', left: '50%',
          transform: `translate(-50%, -50%) scale(${hover ? 1.04 : 1})`,
          transition: 'transform .5s cubic-bezier(.2,.7,.2,1)',
          width: 'min(62%, 240px)',
          aspectRatio: '1/1',
          borderRadius: '50%',
          overflow: 'hidden',
          border: '6px solid rgba(255,255,255,0.92)',
          boxShadow: '0 24px 50px rgba(0,0,0,0.22)',
        }}>
          <img
            src="assets/jessica.jpeg"
            alt="Jessica"
            style={{
              width:'100%', height:'100%', objectFit:'cover', objectPosition:'center 68%',
              display:'block',
            }}
          />
        </div>

        {/* signature bottom */}
        <div style={{ position:'relative', zIndex: 2, color:'white' }}>
          <div style={{ fontFamily:'Instrument Serif', fontStyle:'italic', fontSize:'clamp(56px, 8vw, 96px)', lineHeight: 0.95 }}>
            {m.name}
          </div>
          <div style={{ fontSize: 14, opacity: 0.92, marginTop: 8, letterSpacing: '0.02em' }}>
            {m.role}
          </div>
        </div>
      </div>

      {/* Right: bio + specialties */}
      <div style={{
        display:'flex', flexDirection:'column', justifyContent:'center',
        gap: 28, padding: '8px 4px',
      }}>
        <p style={{ fontSize: 'clamp(15px, 1.4vw, 18px)', lineHeight: 1.6, color:'var(--ink-soft)', maxWidth: 520 }}>
          {t.teamBio}
        </p>

        <div>
          <div className="mono-tiny" style={{ color:'var(--gray-400)', marginBottom: 14 }}>
            Spécialités
          </div>
          <div style={{ display:'flex', flexWrap:'wrap', gap: 8 }}>
            {t.teamSpecialties.map(s => (
              <span key={s} style={{
                display:'inline-flex',
                padding:'8px 14px',
                background:'var(--white)',
                border:'1px solid var(--gray-200)',
                borderRadius: 999,
                fontSize: 13,
                color:'var(--ink)',
              }}>{s}</span>
            ))}
          </div>
        </div>

        <a href="#contact" className="pill-btn" style={{ alignSelf:'flex-start', marginTop: 8 }}>
          {{fr:'Prendre rendez-vous',en:'Book an appointment',pt:'Marcar uma sessão'}[t.lang || 'fr'] || 'Réserver'}
          <span className="arrow">→</span>
        </a>
      </div>
    </div>
  );
}

window.Team = Team;