const Team = () => {
  const ref = React.useRef(null);
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setVisible(true); }, { threshold: 0.1 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  const members = [
    { name: 'Ekwigbedi G. Ewomazino', role: 'Founder & CEO', bio: 'Software engineer and Founder of Ziverse Technologies, with a BSc in Computer Science, building scalable software, AI solutions, and digital systems for modern businesses.', initials: 'EE', color: '#1d4ed8', skills: ['Product Strategy', 'Enterprise Sales', 'AI Systems'] },
    { name: 'Lena Hoffmann', role: 'Co-founder & CTO', bio: 'PhD in ML from TU Berlin. Built production AI systems processing 50M+ events/day. Open-source contributor.', initials: 'LH', color: '#7c3aed', skills: ['Machine Learning', 'System Architecture', 'Cloud'] },
    { name: 'Raj Patel', role: 'Head of Engineering', bio: '8 years shipping SaaS products. Loves clean architecture and developer experience. Ex-Stripe, ex-Notion.', initials: 'RP', color: '#059669', skills: ['Full-Stack', 'SaaS', 'DevOps'] },
    { name: 'Amina Diallo', role: 'Lead Designer', bio: 'Design systems expert who\'s shipped interfaces used by millions. Believes great UX drives business outcomes.', initials: 'AD', color: '#dc2626', skills: ['UX Design', 'Design Systems', 'Prototyping'] },
    { name: 'Chen Wei', role: 'Blockchain Lead', bio: 'Smart contract auditor and Web3 architect. Deployed protocols with $50M+ TVL. Security-first mindset.', initials: 'CW', color: '#0891b2', skills: ['Solidity', 'DeFi', 'Security'] },
    { name: 'Fatima Al-Rashid', role: 'Data Science Lead', bio: 'Predictive modeling specialist with domain expertise in logistics, retail, and healthcare analytics.', initials: 'FA', color: '#d97706', skills: ['ML Models', 'Analytics', 'Python'] },
  ];

  return (
    <section id="team" data-screen-label="Team" ref={ref} style={{ padding: '100px 0', background: 'var(--bg2, #f8fafc)' }}>
      <div className="inner-wrap" style={{ maxWidth: 1200, margin: '0 auto', padding: '0 32px' }}>
        <div style={{ textAlign: 'center', maxWidth: 520, margin: '0 auto 56px', opacity: visible ? 1 : 0, transition: 'all 0.6s ease' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '5px 14px', borderRadius: 100, background: 'var(--accentbg)', border: '1px solid rgba(37,99,235,0.18)', marginBottom: 18 }}>
            <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 12, fontWeight: 600, color: 'var(--accent, #1d4ed8)', letterSpacing: '0.07em' }}>THE TEAM</span>
          </div>
          <h2 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 'clamp(28px, 4vw, 44px)', fontWeight: 700, color: 'var(--text, #0f172a)', letterSpacing: '-0.03em', lineHeight: 1.1, margin: '0 0 14px' }}>
            The people behind your product
          </h2>
          <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 16, color: 'var(--text2, #64748b)', lineHeight: 1.7, margin: 0 }}>
            Senior engineers, designers, and scientists who've built at scale — all working directly on your project.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 20 }}>
          {members.map((m, i) => (
            <div key={i} className="dm-card" style={{
              borderRadius: 16, overflow: 'hidden', background: 'var(--bg3, #fff)',
              border: '1.5px solid var(--border)', boxShadow: 'var(--shadow)',
              opacity: visible ? 1 : 0, transform: visible ? 'translateY(0)' : 'translateY(24px)',
              transition: `all 0.6s ease ${i * 0.07}s`,
            }}
            onMouseEnter={e => { e.currentTarget.style.borderColor = m.color; e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = `0 12px 36px ${m.color}22`; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'var(--shadow)'; }}>
              {/* Color bar */}
              <div style={{ height: 4, background: `linear-gradient(to right, ${m.color}, ${m.color}88)` }}/>
              <div style={{ padding: '24px' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 16 }}>
                  <div style={{ width: 52, height: 52, borderRadius: '50%', background: `${m.color}18`, border: `2px solid ${m.color}33`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: "'Space Grotesk', sans-serif", fontSize: 16, fontWeight: 700, color: m.color, flexShrink: 0 }}>{m.initials}</div>
                  <div>
                    <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 15, fontWeight: 600, color: 'var(--text, #0f172a)', marginBottom: 2 }}>{m.name}</div>
                    <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 12.5, color: 'var(--accent, #1d4ed8)', fontWeight: 500 }}>{m.role}</div>
                  </div>
                </div>
                <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13.5, color: 'var(--text2, #64748b)', lineHeight: 1.65, margin: '0 0 16px' }}>{m.bio}</p>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                  {m.skills.map(s => (
                    <span key={s} style={{ padding: '3px 9px', borderRadius: 100, background: `${m.color}0f`, border: `1px solid ${m.color}25`, fontFamily: "'DM Sans', sans-serif", fontSize: 11.5, color: m.color, fontWeight: 500 }}>{s}</span>
                  ))}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Team });