// Team page
const FOUNDERS = [
  { initials: 'AG', name: 'Abrar Galib', title: 'Founder & Chief Executive Officer', bio: "Architect of QDI's core quantum technology and commercial strategy. Combines deep technical expertise in quantum-safe architecture with long-term strategic vision to redefine global cybersecurity infrastructure. Leads the Company from pre-seed through Series A, overseeing product strategy, investor relations, and organisational build-out." },
  { initials: 'FA', name: 'Faisal Al Maamari', title: 'Co-Founder & Chief Information Officer', bio: "Former Managing Director at SAS Advanced Enterprises with 5+ years aligning cutting-edge IT strategies with complex enterprise objectives. Drives QDI's global information systems strategy and technology partnerships. Enterprise architecture experience at MD level provides credibility with C-suite stakeholders at critical infrastructure clients and sovereign governments." },
  { initials: 'IK', name: 'Imad Khan', title: 'Co-Founder, Lead Engineer & Operations Manager', bio: "Bridges quantum physics and cybersecurity engineering to deliver production-grade quantum-safe solutions at commercial scale. Leads QDI's technical execution and day-to-day operations, overseeing the engineering team across Belgium, Estonia, and Portugal. Background spans quantum physics, data centre engineering, and IoT system architecture." },
];
const EXECS = [
  { initials: 'GJ', name: 'Grant R. Jay', title: 'Chief Revenue Officer', bio: "15+ years driving enterprise revenue across SaaS, AI, and cybersecurity verticals. Leads QDI's go-to-market strategy, enterprise pipeline development, and government contract acquisition across North America and MENA. Senior procurement network spanning NATO-affiliated defence agencies and critical infrastructure operators." },
  { initials: 'MD', name: 'Dr. Marco Di Gennaro', title: 'Interim Chief Technology Officer', bio: 'Ph.D. in Solid State Physics, University of Liège. Former CTO-AI at DTSC and founder of ATOM consultancy. 15+ years in AI/ML, digital twins, explainable AI, and quantum computing R&D, including applied research at Toyota Motor Europe.' },
  { initials: 'MA', name: 'Monawar Ahmed', title: 'Strategic Financial Advisor', bio: 'Former Senior Finance Executive at ADWEA (Abu Dhabi Water and Electricity Authority). Extensive experience in high-level financial management, capital allocation, investor relations, and strategic corporate growth planning for deep-tech ventures. Leads MENA regional investor engagement.' },
];
const ADVISORS_T = [
  { initials: 'FD', name: 'Dr. Fritz Diorico', title: 'Strategic Tech & Entrepreneur Advisor', bio: 'Physicist with 4 patents and government grant and spin-off experience. Ph.D. in Physics from TU Wien (Austria), awarded with highest distinction. Advises on deep-tech commercialisation, IP strategy, and academic-industry translation.' },
  { initials: 'TH', name: 'Tahmeed Hossain', title: 'Senior Software & Security Advisor', bio: 'UBC Computer Science graduate and OSEP-certified penetration tester. Expert in automation engineering, full-stack development, computer vision ML deployment, and enterprise-grade security testing at Global Relay and Block 9 Consultancy.' },
  { initials: 'NA', name: 'Nazrul Alam', title: 'IT Infrastructure & Cloud Advisor', bio: 'Microsoft Azure Administrator and Data Centre Engineer at HCLTech (Equinor ASA). Specialist in enterprise IT infrastructure, IoT systems, cloud operations, and large-scale data centre management across Norway and Europe.' },
];

function PersonCard({ p }) {
  return (
    <Card style={{ display: 'flex', flexDirection: 'column', gap: 24, minHeight: 320 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{
          width: 52, height: 52, borderRadius: '50%',
          background: 'linear-gradient(135deg, var(--accent-bright), var(--accent))',
          color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 14, fontWeight: 600, letterSpacing: '0.08em',
          boxShadow: '0 4px 16px rgba(14,158,136,0.3)',
        }}>{p.initials}</div>
        <div style={{ fontSize: 10, color: 'var(--text-muted)', letterSpacing: '0.2em', textTransform: 'uppercase' }}>QDI</div>
      </div>
      <div>
        <div style={{ fontSize: 18, fontWeight: 600, color: 'var(--text)', marginBottom: 6, letterSpacing: '-0.01em' }}>{p.name}</div>
        <div style={{ fontSize: 11, fontWeight: 500, color: 'var(--accent-bright)', letterSpacing: '0.14em', textTransform: 'uppercase', lineHeight: 1.5 }}>{p.title}</div>
      </div>
      <Rule />
      <div style={{ fontSize: 13, fontWeight: 400, color: 'var(--text-dim)', lineHeight: 1.75 }}>{p.bio}</div>
    </Card>
  );
}

function GroupLabel({ num, label, count }) {
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 20, marginBottom: 28 }}>
      <span style={{ fontSize: 11, fontWeight: 500, color: 'var(--accent-bright)', letterSpacing: '0.22em', textTransform: 'uppercase' }}>
        {num} — {label}
      </span>
      <span style={{ flex: 1, height: 1, background: 'var(--border-soft)' }} />
      <span style={{ fontSize: 11, color: 'var(--text-muted)', letterSpacing: '0.12em', fontVariantNumeric: 'tabular-nums' }}>
        {String(count).padStart(2, '0')}
      </span>
    </div>
  );
}

function TeamPage() {
  return (
    <div style={{ position: 'relative', zIndex: 2, padding: '140px 40px 120px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 100, maxWidth: 820, marginLeft: 'auto', marginRight: 'auto' }}>
          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 24 }}>
            <Eyebrow>Leadership & Advisors</Eyebrow>
          </div>
          <h1 style={{ fontSize: 'clamp(48px, 6vw, 80px)', fontWeight: 600, margin: 0, marginBottom: 24, lineHeight: 1.02, letterSpacing: '-0.035em', color: 'var(--text)' }}>
            The <em style={{ fontWeight: 400, fontStyle: 'italic', color: 'var(--text-soft)' }}>Team</em>.
          </h1>
          <p style={{ fontSize: 17, fontWeight: 400, color: 'var(--text-soft)', lineHeight: 1.6, margin: 0 }}>
            A founding team combining quantum physics expertise, enterprise cybersecurity architecture, defence-sector commercial execution, and deep-tech financial management.
          </p>
        </div>

        {[
          { num: '01', label: 'Founding Leadership', people: FOUNDERS },
          { num: '02', label: 'Executive Leadership', people: EXECS },
          { num: '03', label: 'Technical & Strategic Advisors', people: ADVISORS_T },
        ].map((g) => (
          <div key={g.num} style={{ marginBottom: 80 }}>
            <GroupLabel num={g.num} label={g.label} count={g.people.length} />
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, alignItems: 'stretch' }}>
              {g.people.map((p) => <PersonCard key={p.name} p={p} />)}
            </div>
          </div>
        ))}

        <div>
          <GroupLabel num="04" label="Advisory Boards" count={2} />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }}>
            {[
              { t: 'Scientific Advisory Board', b: 'Former White House and NATO Officials with direct government procurement relationships. Leading academics with 19+ combined patents in quantum cryptography and network security. NIST and Bell Labs veterans with direct involvement in PQC standardisation processes.' },
              { t: 'Industry Advisory Board', b: 'Cloud advisors from IBM and Microsoft with enterprise integration expertise. Investment banking advisors (North America) with deep-tech and defence-sector transaction experience. Former defence advisors from DRDC and DND with sovereign procurement insight.' },
            ].map((x) => (
              <Card key={x.t} style={{ padding: 36 }}>
                <div style={{ fontSize: 11, color: 'var(--accent-bright)', letterSpacing: '0.2em', textTransform: 'uppercase', marginBottom: 16, fontWeight: 500 }}>Board</div>
                <h3 style={{ fontSize: 24, fontWeight: 600, margin: 0, marginBottom: 20, letterSpacing: '-0.015em', color: 'var(--text)' }}>{x.t}</h3>
                <Rule style={{ marginBottom: 20 }} />
                <p style={{ fontSize: 14, fontWeight: 400, color: 'var(--text-soft)', lineHeight: 1.75, margin: 0 }}>{x.b}</p>
              </Card>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TeamPage });