// HomeExtra.jsx — Team Certifications + Hall of Fame sections for the homepage.

const CERTS = [
  { a: 'OSCP', n: 'Offensive Security Certified Professional' },
  { a: 'OSEP', n: 'Experienced Penetration Tester' },
  { a: 'OSWE', n: 'Web Expert' },
  { a: 'OSED', n: 'Exploit Developer' },
  { a: 'CRTO', n: 'Certified Red Team Operator' },
  { a: 'CRTL', n: 'Certified Red Team Lead' },
  { a: 'GXPN', n: 'GIAC Exploit Researcher' },
  { a: 'GWAPT', n: 'GIAC Web App Pen Tester' },
  { a: 'GMOB', n: 'GIAC Mobile Device Analyst' },
  { a: 'CCSP', n: 'Certified Cloud Security Pro' },
  { a: 'CREST CCT', n: 'CREST Certified Tester' },
  { a: 'CISSP', n: 'Information Systems Security Pro' },
];

const Certifications = () => (
  <section style={{ maxWidth: 1280, margin: '0 auto', padding: '96px 32px' }}>
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 48, alignItems: 'center' }}>
      <div>
        <p style={{ fontSize: 13, fontWeight: 500, color: '#828fff', letterSpacing: '0.5px', textTransform: 'uppercase', marginBottom: 14 }}>Team certifications</p>
        <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(32px, 3.8vw, 48px)', fontWeight: 600, lineHeight: 1.05, letterSpacing: '-1.6px', color: '#f7f8f8', margin: '0 0 16px' }}>Certifications you can verify</h2>
        <p style={{ fontSize: 16, color: '#8a8f98', lineHeight: 1.6, margin: '0 0 24px', maxWidth: 460 }}>
          Every member of our team holds recognized offensive security certifications, funded by us and kept current.
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 10 }}>
          {[{ v: String(CERTS.length), l: 'Certifications held' }, { v: '100%', l: 'OSCP or higher' }, { v: 'Quarterly', l: 'Refreshed' }].map(s => (
            <div key={s.l} style={{ background: '#0f1011', border: '1px solid #23252a', borderRadius: 10, padding: '12px 14px', minWidth: 0 }}>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(16px, 1.6vw, 20px)', fontWeight: 600, color: '#f7f8f8', letterSpacing: '-0.5px', whiteSpace: 'nowrap' }}>{s.v}</div>
              <div style={{ fontSize: 11, color: '#62666d', textTransform: 'uppercase', letterSpacing: 0.4, marginTop: 2, lineHeight: 1.3 }}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>

      <Stagger className="gs-grid-auto" step={60} style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gridAutoRows: '1fr', gap: 10, '--gs-min': '150px' }}>
        {CERTS.map(c => (
          <div key={c.a} className="gs-lift" style={{
            background: '#0f1011', border: '1px solid #23252a', borderRadius: 12,
            padding: '16px 16px', position: 'relative', overflow: 'hidden',
            display: 'flex', flexDirection: 'column', minHeight: 96,
            transition: 'border-color 160ms, background 160ms',
          }}
            onMouseEnter={e => { e.currentTarget.style.borderColor = '#34343a'; e.currentTarget.style.background = '#141516'; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = '#23252a'; e.currentTarget.style.background = '#0f1011'; }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
              <div style={{ width: 28, height: 28, borderRadius: 7, background: 'linear-gradient(180deg, rgba(94,105,210,0.18), rgba(94,105,210,0.04))', border: '1px solid rgba(94,105,210,0.28)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name="shield" size={14} color="#828fff" />
              </div>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: '#f7f8f8', fontWeight: 500, letterSpacing: 0.3 }}>{c.a}</span>
            </div>
            <div style={{ fontSize: 11, color: '#62666d', lineHeight: 1.4 }}>{c.n}</div>
          </div>
        ))}
      </Stagger>
    </div>
  </section>
);

const HALL = ['Google', 'Microsoft', 'Apple', 'Amazon', 'Meta', 'Adobe', 'Shopify', 'GitLab', 'Mozilla', 'Atlassian', 'PayPal', 'Spotify', 'Uber', 'Cloudflare', 'Netflix', 'Slack', 'Dropbox', 'Stripe'];

const HallOfFame = () => {
  const useVP = window.useIsMobile || (() => false);
  const narrow = useVP(600);
  const mid = useVP(1080);
  // 18 names divide evenly into 6, 3, or 2 columns, so the last row is always full
  const cols = narrow ? 2 : mid ? 3 : 6;
  return (
  <section style={{ background: '#0a0b0c', borderTop: '1px solid #1a1b1e', borderBottom: '1px solid #1a1b1e', padding: '96px 0' }}>
    <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 32px' }}>
      <div style={{ maxWidth: 680, margin: '0 auto 36px', textAlign: 'center' }}>
        <p style={{ fontSize: 13, fontWeight: 500, color: '#828fff', letterSpacing: '0.5px', textTransform: 'uppercase', marginBottom: 14 }}>Hall of fame</p>
        <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(32px, 3.8vw, 48px)', fontWeight: 600, lineHeight: 1.05, letterSpacing: '-1.6px', color: '#f7f8f8', margin: '0 0 14px' }}>Recognized by leading technology companies</h2>
        <p style={{ fontSize: 17, color: '#8a8f98', lineHeight: 1.55, margin: 0 }}>
          Members of our team have been recognized by the security programs of some of the largest technology companies for responsibly reporting vulnerabilities in their products.
        </p>
      </div>

      <Stagger step={40} style={{ display: 'grid', gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`, gridAutoRows: '1fr', gap: 1, background: '#1a1b1e', border: '1px solid #1a1b1e', borderRadius: 14, overflow: 'hidden' }}>
        {HALL.map(name => (
          <div key={name} style={{ background: '#0f1011', padding: '26px 12px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, minWidth: 0, transition: 'background 200ms' }}
            onMouseEnter={e => e.currentTarget.style.background = '#141516'} onMouseLeave={e => e.currentTarget.style.background = '#0f1011'}>
            <Icon name="check" size={12} color="#27a644" strokeWidth={2.5} />
            <span style={{ fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 600, color: '#8a8f98', letterSpacing: '-0.3px', transition: 'color 160ms', whiteSpace: 'nowrap' }}
              onMouseEnter={e => e.currentTarget.style.color = '#f7f8f8'} onMouseLeave={e => e.currentTarget.style.color = '#8a8f98'}>{name}</span>
          </div>
        ))}
      </Stagger>
      <p style={{ fontSize: 11.5, color: '#62666d', marginTop: 14, textAlign: 'center' }}>Recognition comes from our team's independent disclosure work and does not imply endorsement by or affiliation with the named companies.</p>
    </div>
  </section>
  );
};

Object.assign(window, { Certifications, HallOfFame });