/* TeamGrid.jsx — founders + advisors */
const { createElement: th } = React;

const FOUNDERS = [
  { name: 'Sunil Ravipati', role: 'Co-Founder & CEO', image: '/ysecure-landing-page/assets/teamHeadshots/sunil.png' },
  { name: 'Sunny "Dos" Dosanjh', role: 'Co-Founder & Chief Cyber Officer', image: '/ysecure-landing-page/assets/teamHeadshots/sunny.png' },
  { name: 'Yeshasvi Kamma', role: 'Co-Founder & CTO', image: '/ysecure-landing-page/assets/teamHeadshots/yesh.jpeg' },
];
const ADVISORS = [
  { name: 'David Sims', role: 'Advisor', image: '/ysecure-landing-page/assets/teamHeadshots/david.jpg' },
  { name: 'Rao Cherukuri', role: 'Advisor', image: '/ysecure-landing-page/assets/teamHeadshots/rao.jpg' },
  { name: 'Ekta Dang', role: 'Advisor', image: '/ysecure-landing-page/assets/teamHeadshots/ekta.jpg' },
  { name: 'Ken Ong', role: 'Advisor', image: '/ysecure-landing-page/assets/teamHeadshots/ken.png' },
];

function PersonCard({ name, role, image, size }) {
  return th('div', { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 16 } },
    th('img', { src: image, alt: name, style: { width: size, height: size, borderRadius: '50%', objectFit: 'cover', border: '1px solid var(--border-2)' } }),
    th('div', null,
      th('div', { style: { fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: size > 120 ? 19 : 16, letterSpacing: '-.01em', color: 'var(--fg-1)' } }, name),
      th('div', { style: { fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-3)', marginTop: 6 } }, role))
  );
}

function TeamGrid() {
  const { Container, Kicker, Reveal } = window;
  return th('section', { id: 'team', style: { padding: '104px 0', borderTop: '1px solid var(--border-1)' } },
    th(Container, null,
      th('div', { style: { maxWidth: 640, marginBottom: 56 } },
        th(Kicker, { style: { marginBottom: 18 } }, 'OUR TEAM'),
        th('h2', { style: { fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'clamp(30px,4vw,44px)', letterSpacing: '-.03em', lineHeight: 1.08, margin: '0 0 16px', color: 'var(--fg-1)' } }, 'The people driving the platform'),
        th('p', { style: { color: 'var(--fg-2)', fontSize: 17.5, lineHeight: 1.6, margin: 0 } }, 'Operators and researchers who have spent careers turning security noise into decisions.')
      ),
      th('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 32, marginBottom: 72, maxWidth: 760 } },
        FOUNDERS.map((p, i) => th(Reveal, { key: p.name, delay: i * 70 }, th(PersonCard, { ...p, size: 132 })))),
      th('div', { className: 'ys-kicker', style: { color: 'var(--fg-3)', marginBottom: 30 } }, 'ADVISORS'),
      th('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 28, maxWidth: 760 } },
        ADVISORS.map((p, i) => th(Reveal, { key: p.name, delay: i * 60 }, th(PersonCard, { ...p, size: 96 })))),
      th('p', { style: { fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--fg-4)', marginTop: 40 } })
    )
  );
}
Object.assign(window, { TeamGrid, PersonCard, FOUNDERS, ADVISORS });