/* Team, Publications, Talks (with YouTube placeholders) */

function Team({ accentVar }) {
  const d = window.LB_DATA.team;
  const all = [...d.members, d.advisor];
  const card = (m) => {
    const tilt = useTilt(5);
    const isAdvisor = m === d.advisor;
    return (
      <a key={m.name} href={m.linkedin} target="_blank" rel="noopener noreferrer"
        ref={tilt.ref} onMouseMove={tilt.onMouseMove} onMouseLeave={tilt.onMouseLeave}
        style={{
          display:'flex', flexDirection:'column',
          background:'#fff', border:'1px solid var(--lb-gray-200)', borderRadius:14,
          padding:24, textDecoration:'none', color:'inherit',
          transition:'box-shadow 220ms, border-color 220ms, transform 220ms var(--ease-standard)',
          transformStyle:'preserve-3d', ...tilt.style,
          position:'relative',
        }}>
        {isAdvisor && (
          <div style={{ position:'absolute', top:14, right:14, fontFamily:'var(--font-display)', fontSize:10, fontWeight:700, letterSpacing:'.14em', color:'var(--lb-navy-400)', background:'var(--lb-surface-gray)', padding:'4px 8px', borderRadius:4 }}>ADVISOR</div>
        )}
        <Avatar m={m} accentVar={accentVar}/>
        <div style={{ fontFamily:'var(--font-display)', fontSize:11, fontWeight:700, letterSpacing:'.14em', textTransform:'uppercase', color: accentVar, marginTop:18 }}>{m.role}</div>
        <div style={{ fontFamily:'var(--font-display)', fontSize:19, fontWeight:700, color:'var(--lb-navy)', margin:'4px 0 10px', lineHeight:1.2 }}>{m.name}</div>
        <p style={{ fontSize:13, lineHeight:1.55, color:'var(--lb-navy-400)', margin:0, flex:1 }}>{m.bio}</p>
        <div style={{ display:'flex', alignItems:'center', gap:6, marginTop:16, fontFamily:'var(--font-display)', fontWeight:600, fontSize:12, color: accentVar }}>
          LinkedIn <span>→</span>
        </div>
      </a>
    );
  };
  return (
    <section id="team" style={{ background:'#fff', padding:'140px 0' }}>
      <div className="shell">
        <div style={{ maxWidth:860, marginBottom:56 }}>
          <div className="eyebrow" style={{ color: accentVar }}>{d.eyebrow}</div>
          <h2 className="section-title">{d.title}</h2>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:18 }}>
          {all.map(m => card(m))}
        </div>
      </div>
    </section>
  );
}

function Avatar({ m, accentVar }) {
  const [err, setErr] = React.useState(false);
  if (m.image && !err) {
    return (
      <div style={{ width: 84, height: 84, borderRadius:'50%', overflow:'hidden', boxShadow:'0 6px 18px rgba(0,34,68,0.18)', border:`2px solid #fff`, outline:`1px solid var(--lb-gray-200)` }}>
        <img src={m.image} alt={m.name} onError={() => setErr(true)} style={{ width:'100%', height:'100%', objectFit:'cover', display:'block' }}/>
      </div>
    );
  }
  return (
    <div style={{
      width: 84, height: 84, borderRadius:'50%',
      background:`linear-gradient(135deg, var(--lb-navy), ${accentVar})`,
      color:'#fff', display:'grid', placeItems:'center',
      fontFamily:'var(--font-display)', fontWeight:800, fontSize: 26,
      boxShadow:'0 6px 18px rgba(0,34,68,0.18)',
    }}>{m.initials}</div>
  );
}
window.Team = Team;

function Research({ accentVar }) {
  const pubs = window.LB_DATA.publications;
  const featured = pubs.filter(p => p.featured);
  const rest = pubs.filter(p => !p.featured);
  return (
    <section id="research" style={{ background:'var(--lb-surface-gray)', padding:'140px 0' }}>
      <div className="shell">
        <div style={{ marginBottom: 48 }}>
          <div style={{ maxWidth:720 }}>
            <div className="eyebrow" style={{ color: accentVar }}>PUBLICATIONS</div>
            <h2 className="section-title">50+ peer-reviewed publications, in production.</h2>
            <p className="section-lead">Selected work from the Krishnaswamy Lab and Latent Bio collaborators — the methods behind the platform.</p>
          </div>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(2,1fr)', gap:20, marginBottom:32 }}>
          {featured.map(p => (
            <a key={p.title} href={p.url} target="_blank" rel="noopener noreferrer" style={{
              display:'grid', gridTemplateColumns: p.cover ? '140px 1fr' : '1fr', gap: 24, alignItems:'stretch',
              padding: 24, background:'var(--lb-navy)', color:'#fff', borderRadius:14, textDecoration:'none',
              transition:'transform 220ms, box-shadow 220ms',
            }}
              onMouseEnter={e=>{ e.currentTarget.style.transform='translateY(-4px)'; e.currentTarget.style.boxShadow='0 20px 40px rgba(0,34,68,0.25)'; }}
              onMouseLeave={e=>{ e.currentTarget.style.transform=''; e.currentTarget.style.boxShadow=''; }}
            >
              {p.cover && (
                <div style={{ borderRadius: 6, overflow:'hidden', boxShadow:'0 10px 28px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.1)', aspectRatio: '3 / 4', background:'rgba(0,0,0,0.25)', display:'flex', alignItems:'center', justifyContent:'center' }}>
                  <img src={p.cover} alt={`${p.journal} cover`} style={{ width:'100%', height:'100%', objectFit:'contain', display:'block' }}/>
                </div>
              )}
              <div style={{ display:'flex', flexDirection:'column', justifyContent:'space-between', padding: p.cover ? '4px 0' : 0 }}>
                <div>
                  <div style={{ fontFamily:'var(--font-display)', fontSize:11, fontWeight:700, letterSpacing:'.14em', color:'#9BE4A9', textTransform:'uppercase' }}>{p.journal} · Cover</div>
                  <div style={{ fontFamily:'var(--font-display)', fontSize:20, fontWeight:700, margin:'10px 0 14px', lineHeight:1.3 }}>{p.title}</div>
                </div>
                <div style={{ fontFamily:'var(--font-display)', fontSize:13, fontWeight:600, color:'#9BE4A9' }}>Read paper →</div>
              </div>
            </a>
          ))}
        </div>
        <div style={{ border:'1px solid var(--lb-gray-200)', borderRadius:12, overflow:'hidden', background:'#fff' }}>
          {rest.map((p, i) => (
            <a key={p.title} href={p.url} target="_blank" rel="noopener noreferrer" style={{
              display:'grid', gridTemplateColumns:'200px 1fr auto', gap:24, alignItems:'center',
              padding:'18px 24px', borderBottom: i<rest.length-1?'1px solid var(--lb-gray-200)':'none',
              textDecoration:'none', color:'var(--lb-navy)', transition:'background 160ms',
            }}
              onMouseEnter={e=> e.currentTarget.style.background='var(--lb-gray-50)'}
              onMouseLeave={e=> e.currentTarget.style.background=''}
            >
              <div style={{ fontFamily:'var(--font-display)', fontSize:11, fontWeight:700, letterSpacing:'.12em', textTransform:'uppercase', color: accentVar }}>{p.journal}</div>
              <div style={{ fontFamily:'var(--font-sans)', fontSize:15, lineHeight:1.45 }}>{p.title}</div>
              <div style={{ fontFamily:'var(--font-display)', fontSize:13, fontWeight:600, color: accentVar }}>→</div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Research = Research;