// 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: '—',
    name: 'Chief Information Security Officer',
    title: 'Co-Founder & Chief Information Security Officer',
    bio: null,
    tbd: true,
  },
];

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: '—',
    name: 'Chief Technology Officer',
    title: 'Chief Technology Officer',
    bio: null,
    tbd: true,
  },
  {
    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, driving product development from the ground up. Background spans quantum physics, data centre engineering, and IoT system architecture.",
  },
  {
    initials: 'IH',
    name: 'Imran Hussain',
    title: 'Chief Financial Officer',
    bio: '25+ years of financial leadership across deep-tech, private equity, banking, and high-growth ventures. Triple-qualified (CIMA, ACCA, ACA), Imran brings institutional-grade capital discipline to QDI — overseeing financial strategy, investor relations, and the structuring of our pre-seed SAFE instrument.',
  },
];

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: 'NA',
    name: 'Nazrul Alam',
    title: '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 TbdCard({ title }) {
  return (
    <div style={{
      display: 'flex',
      flexDirection: 'column',
      gap: 24,
      minHeight: 220,
      background: 'rgba(250, 247, 242, 0.8)',
      border: '1px dashed rgba(18,196,168,0.35)',
      borderRadius: 10,
      padding: 28,
    }}>
      {/* Top row */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{
          width: 52, height: 52, borderRadius: '50%',
          border: '1.5px dashed rgba(18,196,168,0.45)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 20, color: 'rgba(18,196,168,0.6)',
          fontWeight: 300,
        }}>—</div>
        <div style={{
          fontSize: 9,
          color: '#12c4a8',
          letterSpacing: '0.22em',
          textTransform: 'uppercase',
          padding: '4px 10px',
          border: '1px solid rgba(18,196,168,0.35)',
          borderRadius: 4,
          fontWeight: 500,
        }}>Recruiting</div>
      </div>

      {/* Title */}
      <div>
        <div style={{
          fontSize: 11,
          fontWeight: 500,
          color: '#12c4a8',
          letterSpacing: '0.14em',
          textTransform: 'uppercase',
          lineHeight: 1.5,
        }}>{title}</div>
      </div>

      {/* Divider */}
      <div style={{ height: 1, background: 'rgba(18,196,168,0.2)' }} />

      {/* Body */}
      <div style={{
        fontSize: 13,
        fontWeight: 400,
        color: 'var(--text-soft)',
        lineHeight: 1.75,
        fontStyle: 'italic',
      }}>
        This position is actively being recruited. We are engaging senior candidates with the expertise and network required to advance QDI's mission.
      </div>
    </div>
  );
}

function PersonCard({ p }) {
  if (p.tbd) return <TbdCard title={p.title} />;

  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>

        {/* Group 01 — Founding Leadership */}
        <div style={{ marginBottom: 80 }}>
          <GroupLabel num="01" label="Founding Leadership" count={FOUNDERS.length} />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24, alignItems: 'stretch' }}>
            {FOUNDERS.map((p) => <PersonCard key={p.name} p={p} />)}
          </div>
        </div>

        {/* Group 02 — Executive Leadership */}
        <div style={{ marginBottom: 80 }}>
          <GroupLabel num="02" label="Executive Leadership" count={EXECS.length} />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24, alignItems: 'stretch' }}>
            {EXECS.map((p) => <PersonCard key={p.name} p={p} />)}
          </div>
        </div>

        {/* Group 03 — Technical & Strategic Advisors */}
        <div style={{ marginBottom: 80 }}>
          <GroupLabel num="03" label="Technical & Strategic Advisors" count={ADVISORS_T.length} />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24, alignItems: 'stretch' }}>
            {ADVISORS_T.map((p) => <PersonCard key={p.name} p={p} />)}
          </div>
        </div>

        {/* Group 04 — Advisory Boards */}
        <div>
          <GroupLabel num="04" label="Advisory Boards" count={2} />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }}>
            {[
              {
                t: 'Scientific Advisory Board',
                b: 'Currently being constituted.',
              },
              {
                t: 'Industry Advisory Board',
                b: 'Currently being constituted.',
              },
            ].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 });