// SitePages.jsx — About, Resources, Contact with page-unique layouts + animations

// ═══════════════════════════════ ABOUT ═══════════════════════════════
const AboutPage = () => (
  <>
    <AboutHero />

    {/* Mission manifesto — typewriter */}
    <section style={{ padding: '88px 32px', borderBottom: '1px solid #1a1b1e' }}>
      <div style={{ maxWidth: 980, margin: '0 auto' }}>
        <Manifesto />
      </div>
    </section>

    <HowWeWork />

    <SectionEdge />

    {/* Specialty distribution — UNIQUE to about */}
    <section style={{ maxWidth: 1280, margin: '0 auto', padding: '88px 32px' }}>
      <div style={{ marginBottom: 32, maxWidth: 720 }}>
        <p style={{ fontSize: 13, fontWeight: 500, color: '#828fff', letterSpacing: '0.5px', textTransform: 'uppercase', marginBottom: 14 }}>The team</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 }}>38 testers across six specialisms</h2>
      </div>
      <SpecialtyDistribution />
    </section>

    <SectionEdge />

    {/* Story timeline */}
    <section style={{ maxWidth: 1080, margin: '0 auto', padding: '88px 32px' }}>
      <div style={{ marginBottom: 40, maxWidth: 720 }}>
        <p style={{ fontSize: 13, fontWeight: 500, color: '#828fff', letterSpacing: '0.5px', textTransform: 'uppercase', marginBottom: 14 }}>Story</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 }}>Seven years of GreySurface</h2>
      </div>
      <Timeline items={[
        { y: '2019', t: 'GreySurface founded', d: 'Three penetration testers leave a large consultancy to start GreySurface: fixed-fee engagements with a free retest on every one.' },
        { y: '2020', t: 'First 100 engagements', d: 'Web, API, and internal network work. The methodology matures and the playbooks become a living document.' },
        { y: '2022', t: 'Cloud and red team practices', d: 'Dedicated cloud and adversary simulation teams added, to the same standard, with the same core team.' },
        { y: '2023', t: 'AI and LLM testing', d: 'The first test plans written for agentic tool use, retrieval poisoning, and indirect prompt injection.' },
        { y: '2024', t: '600th engagement delivered', d: '14,000+ vulnerabilities found across web, mobile, network, cloud, and identity surfaces.' },
        { y: '2026', t: 'Today', d: '38 testers, a median tenure of nine years, and a 94% re-engagement rate.' },
      ]} />
    </section>

    {/* Cert marquee with depth */}
    <section style={{ padding: '72px 0', background: '#0a0b0c', borderTop: '1px solid #1a1b1e', borderBottom: '1px solid #1a1b1e' }}>
      <div style={{ textAlign: 'center', marginBottom: 28 }}>
        <p style={{ fontSize: 12, color: '#62666d', textTransform: 'uppercase', letterSpacing: 0.6, fontWeight: 500 }}>Certifications held across the team, refreshed quarterly</p>
      </div>
      <CertMarquee />
    </section>

    <Commitments />

    {/* Reporting & compliance — anchored for nav/footer */}
    <div id="compliance"><Compliance /></div>

    <S2FAQ items={ABOUT_FAQ} />

    <SectionEdge />

    {/* Careers — join the team */}
    <Careers />

    <Cta />
  </>
);

// Careers pointer — the full role list lives on /careers/
const Careers = () => (
  <section id="careers" style={{ maxWidth: 1280, margin: '0 auto', padding: '88px 32px' }}>
    <div style={{ background: 'linear-gradient(155deg, rgba(94,105,210,0.10) 0%, rgba(94,105,210,0.02) 100%)', border: '1px solid rgba(94,105,210,0.22)', borderRadius: 20, padding: 40, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: -100, right: -80, width: 400, height: 280, background: 'radial-gradient(ellipse at center, rgba(94,105,210,0.18) 0%, transparent 70%)', pointerEvents: 'none' }} />
      <div style={{ position: 'relative', maxWidth: 580 }}>
        <p style={{ fontSize: 13, fontWeight: 500, color: '#828fff', letterSpacing: '0.5px', textTransform: 'uppercase', marginBottom: 14 }}>Careers</p>
        <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(28px, 3.4vw, 40px)', fontWeight: 600, lineHeight: 1.05, letterSpacing: '-1.4px', color: '#f7f8f8', margin: '0 0 10px' }}>Join the team.</h2>
        <p style={{ fontSize: 15, color: '#a8aeb8', lineHeight: 1.55, margin: 0 }}>We hire experienced testers only. Six roles are open across web, identity, cloud, red team, mobile, and reporting.</p>
      </div>
      <a href="/careers/" style={{ position: 'relative', fontSize: 14, fontWeight: 500, background: '#5e6ad2', color: '#fff', textDecoration: 'none', borderRadius: 8, padding: '11px 18px', display: 'inline-flex', alignItems: 'center', gap: 6 }}
        onMouseEnter={e => e.currentTarget.style.background = '#828fff'} onMouseLeave={e => e.currentTarget.style.background = '#5e6ad2'}>
        See open roles <Icon name="arrowRight" size={13} color="#fff" strokeWidth={2} />
      </a>
    </div>
  </section>
);

// How we work — three steps; every promise here is already made on the pricing/contact pages
const HowWeWork = () => (
  <section style={{ maxWidth: 1280, margin: '0 auto', padding: '88px 32px' }}>
    <S2SectionHead eyebrow="How we work" title="Scoped by a tester. Tested by hand. Retested until fixed." />
    <div className="gs-grid-auto" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, '--gs-min': '280px' }}>
      {[
        { n: '01', i: 'target',   t: 'Scope with the person who tests', d: 'A thirty-minute call with one of our testers, not a salesperson. You get a written scope and a fixed quote within 48 hours.' },
        { n: '02', i: 'terminal', t: 'Manual testing, tools second',     d: 'Scanners find the known. Our testers chain the findings scanners miss, disclose critical issues within one hour, and post daily updates.' },
        { n: '03', i: 'refresh',  t: 'Retest, then attest',              d: 'Every High and Critical finding is retested within 90 days at no charge, and your attestation letter is refreshed to match.' },
      ].map(s => (
        <div key={s.n} style={{ background: '#0f1011', border: '1px solid #23252a', borderRadius: 12, padding: 24, position: 'relative', overflow: 'hidden', transition: 'border-color 150ms ease-out' }}
          onMouseEnter={e => e.currentTarget.style.borderColor = '#34343a'} onMouseLeave={e => e.currentTarget.style.borderColor = '#23252a'}>
          <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 1, background: 'linear-gradient(90deg, transparent, rgba(94,105,210,0.3) 50%, transparent)' }} />
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
            <div style={{ width: 40, height: 40, borderRadius: 10, background: 'rgba(94,105,210,0.12)', border: '1px solid rgba(94,105,210,0.25)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name={s.i} size={18} color="#828fff" strokeWidth={1.8} />
            </div>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#62666d' }}>{s.n}</span>
          </div>
          <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 500, letterSpacing: '-0.3px', color: '#f7f8f8', margin: '0 0 8px' }}>{s.t}</h3>
          <p style={{ fontSize: 14, color: '#8a8f98', lineHeight: 1.55, margin: 0 }}>{s.d}</p>
        </div>
      ))}
    </div>
  </section>
);

// Forward commitments only — promises written into every statement of work, not past statistics
const Commitments = () => (
  <section style={{ maxWidth: 1280, margin: '0 auto', padding: '88px 32px' }}>
    <S2SectionHead eyebrow="Our commitments" title="What every client can hold us to." sub="Written into every statement of work, whatever the size of the engagement." />
    <div className="gs-grid-auto" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, '--gs-min': '220px' }}>
      {[
        { v: '1 business day', l: 'to reply to every enquiry' },
        { v: '48 hours',       l: 'from scoping call to fixed quote' },
        { v: '1 hour',         l: 'to disclose a critical finding' },
        { v: '90 days',        l: 'of free retesting after delivery' },
      ].map(c => (
        <div key={c.v} style={{ background: '#0f1011', border: '1px solid #23252a', borderRadius: 12, padding: 24, position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', top: 0, left: 0, bottom: 0, width: 3, background: '#5e6ad2' }} />
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 600, color: '#f7f8f8', letterSpacing: '-0.8px', fontVariantNumeric: 'tabular-nums' }}>{c.v}</div>
          <div style={{ fontSize: 13, color: '#8a8f98', marginTop: 6, lineHeight: 1.5 }}>{c.l}</div>
        </div>
      ))}
    </div>
  </section>
);

const ABOUT_FAQ = [
  { q: 'Who actually does the testing?', a: 'Our own team of 38 testers, with a median tenure of nine years across six specialisms. Every engagement is led by someone with years of hands-on experience, and the person who scopes your engagement is one of the people who tests it.' },
  { q: 'Can we speak to a tester before we commit?', a: 'Yes. Scoping is a free thirty-minute call with one of our testers. You receive a written scope and a fixed quote within 48 hours, with no obligation.' },
  { q: 'What does "we stay until it is fixed" mean in practice?', a: 'Every High and Critical finding is retested within 90 days of report delivery at no extra charge, your attestation letter is updated to match, and the engagement channel stays open through retest. You always have one accountable person to call.' },
  { q: 'How do you keep skills current?', a: 'Certifications across the team are refreshed quarterly, and testers publish research, advisories, and anonymized write-ups from engagements. Our first AI and LLM test plans were written in 2023, before most clients asked for them.' },
  { q: 'Will you work under NDA?', a: 'Yes. Send us yours or ask for ours on the first call. Nothing about your environment needs to be shared until it is signed.' },
];

const AboutHero = () => {
  const ref = React.useRef(null);
  const [pos, setPos] = React.useState({ x: 50, y: 30 });
  const onMove = e => { const r = ref.current.getBoundingClientRect(); setPos({ x: ((e.clientX - r.left) / r.width) * 100, y: ((e.clientY - r.top) / r.height) * 100 }); };

  return (
    <section ref={ref} onMouseMove={onMove} style={{ position: 'relative', overflow: 'hidden', borderBottom: '1px solid #1a1b1e' }}>
      <div className="gs-grid-bg" style={{ position: 'absolute', inset: 0, maskImage: 'radial-gradient(ellipse at 50% 30%, black 25%, transparent 75%)', WebkitMaskImage: 'radial-gradient(ellipse at 50% 30%, black 25%, transparent 75%)' }} />
      <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(circle 600px at ${pos.x}% ${pos.y}%, rgba(94,105,210,0.18), transparent 70%)`, transition: 'background 80ms linear', pointerEvents: 'none' }} />
      {/* Animated org-graph backdrop */}
      <div style={{ position: 'absolute', inset: 0, opacity: 0.55, pointerEvents: 'none', maskImage: 'radial-gradient(ellipse at 50% 50%, black 30%, transparent 75%)', WebkitMaskImage: 'radial-gradient(ellipse at 50% 50%, black 30%, transparent 75%)' }}>
        <NetworkGraph height={520} />
      </div>
      <div style={{ position: 'relative', maxWidth: 1080, margin: '0 auto', padding: '120px 32px 80px', textAlign: 'center' }}>
        <span style={{ display: 'inline-block', whiteSpace: 'nowrap', fontSize: 11, color: '#828fff', background: 'rgba(94,105,210,0.14)', padding: '4px 12px', borderRadius: 9999, fontFamily: 'var(--font-mono)', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 22, border: '1px solid rgba(94,105,210,0.25)' }}>About us</span>
        <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(40px, 5.4vw, 68px)', fontWeight: 600, lineHeight: 1.05, letterSpacing: '-2.6px', color: '#f7f8f8', margin: '0 0 18px', textWrap: 'balance' }}>A dedicated team of penetration testers</h1>
        <p style={{ fontSize: 18, color: '#8a8f98', lineHeight: 1.55, margin: '0 auto', maxWidth: 640 }}>GreySurface was founded in 2019 by three penetration testers who kept seeing assessments produce reports that nobody acted on. We built our engagement model around a single question: was the finding fixed?</p>

        {/* Quick stats strip below hero */}
        <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, maxWidth: 780, marginInline: 'auto' }}>
          {[
            { v: '38', l: 'Testers' },
            { v: '9 yr', l: 'Median tenure' },
            { v: '94%', l: 'Re-engagement rate' },
            { v: '120+', l: 'Active certifications' },
          ].map(s => (
            <div key={s.l} style={{ background: 'rgba(15,16,17,0.7)', border: '1px solid #23252a', borderRadius: 10, padding: '12px 14px' }}>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 600, color: '#f7f8f8', letterSpacing: '-0.6px', fontVariantNumeric: 'tabular-nums' }}>{s.v}</div>
              <div style={{ fontSize: 11, color: '#62666d', textTransform: 'uppercase', letterSpacing: 0.4, marginTop: 2 }}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Manifesto = () => {
  const lines = [
    'We only take engagements we can staff with experienced testers.',
    'Every engagement is led by someone with years of hands-on experience.',
    'We stay involved until your findings are fixed.',
    'You always have one accountable person to call.',
  ];
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 48, alignItems: 'center' }}>
      <div>
        <p style={{ fontSize: 13, fontWeight: 500, color: '#828fff', letterSpacing: '0.5px', textTransform: 'uppercase', marginBottom: 14 }}>Manifesto</p>
        <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(32px, 3.6vw, 44px)', fontWeight: 600, lineHeight: 1.1, letterSpacing: '-1.4px', color: '#f7f8f8', margin: 0 }}>What we will not do.</h2>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        {lines.map((l, i) => (
          <div key={i} style={{
            opacity: 0, animation: `gs-rise 480ms ${i * 120}ms ease-out forwards`,
            background: '#0f1011', border: '1px solid #23252a', borderRadius: 10,
            padding: '16px 18px', position: 'relative', overflow: 'hidden',
          }}>
            <div style={{ position: 'absolute', top: 0, left: 0, bottom: 0, width: 3, background: '#5e6ad2' }} />
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#62666d', marginRight: 12 }}>0{i + 1}</span>
            <span style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 500, color: '#f7f8f8', letterSpacing: '-0.3px' }}>{l}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

const SpecialtyDistribution = () => {
  const ref = React.useRef(null);
  const [shown, setShown] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setShown(true); obs.disconnect(); } }, { threshold: 0.3 });
    obs.observe(el); return () => obs.disconnect();
  }, []);
  const specs = [
    { l: 'Web & API security',      n: 12, p: 32, tools: ['Burp Pro','Caido','sqlmap','Nuclei'] },
    { l: 'Active Directory & ident.', n: 9,  p: 24, tools: ['BloodHound','Rubeus','Certipy','NetExec'] },
    { l: 'Cloud & Kubernetes',      n: 6,  p: 16, tools: ['Pacu','PMapper','CloudFox','peirates'] },
    { l: 'Mobile & reversing',      n: 5,  p: 13, tools: ['Frida','Objection','Ghidra','MobSF'] },
    { l: 'Red team & social',       n: 4,  p: 10, tools: ['Sliver','Mythic','Havoc','evilginx'] },
    { l: 'IoT, OT & embedded',      n: 2,  p: 5,  tools: ['Ghidra','binwalk','OpenOCD','SDR'] },
  ];
  return (
    <div ref={ref} style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
      {specs.map((s, i) => (
        <div key={s.l} style={{
          background: '#0f1011', border: '1px solid #23252a', borderRadius: 12,
          padding: 18, position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 8 }}>
            <span style={{ fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 500, color: '#f7f8f8', letterSpacing: '-0.3px' }}>{s.l}</span>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: '#828fff' }}>{s.n} testers · {s.p}%</span>
          </div>
          <div style={{ height: 6, background: '#1a1b1e', borderRadius: 3, overflow: 'hidden', marginBottom: 10 }}>
            <div style={{
              height: '100%', width: shown ? `${s.p * 3}%` : '0%',
              background: 'linear-gradient(90deg, #5e6ad2, #828fff)',
              transition: `width 900ms ${i * 100}ms cubic-bezier(.2,.8,.2,1)`,
              maxWidth: '100%',
            }} />
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5 }}>
            {s.tools.map(t => (
              <span key={t} style={{ fontSize: 10.5, padding: '2px 8px', borderRadius: 4, background: '#141516', border: '1px solid #23252a', color: '#a8aeb8', fontFamily: 'var(--font-mono)' }}>{t}</span>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
};

const Timeline = ({ items }) => (
  <div style={{ position: 'relative', paddingLeft: 32 }}>
    <div style={{ position: 'absolute', left: 12, top: 8, bottom: 8, width: 1, background: 'linear-gradient(180deg, rgba(94,105,210,0.4), rgba(94,105,210,0.05))' }} />
    {items.map((it, i) => (
      <div key={i} style={{ position: 'relative', paddingBottom: 28, opacity: 0, animation: `gs-rise 500ms ${i * 60}ms ease-out forwards` }}>
        <div style={{ position: 'absolute', left: -27, top: 4, width: 12, height: 12, borderRadius: '50%', background: '#5e6ad2', border: '2px solid #010102', boxShadow: '0 0 0 3px rgba(94,105,210,0.18)' }} />
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 6 }}>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#828fff' }}>{it.y}</span>
          <h4 style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 500, letterSpacing: '-0.3px', color: '#f7f8f8', margin: 0 }}>{it.t}</h4>
        </div>
        <p style={{ fontSize: 14, color: '#8a8f98', lineHeight: 1.55, margin: 0, maxWidth: 580 }}>{it.d}</p>
      </div>
    ))}
  </div>
);

const CertMarquee = () => {
  const certs = ['OSCP','OSEP','OSWE','OSED','OSCE3','OSWP','CRTO','CRTL','GPEN','GXPN','GWAPT','GMOB','GREM','GCFA','CRTM','eWPTX','BSCP','CISSP','CISM','CCSP','CREST CRT','CREST CCT-INF'];
  const tripled = [...certs, ...certs, ...certs];
  return (
    <div style={{ maxWidth: 1280, margin: '0 auto', overflow: 'hidden', maskImage: 'linear-gradient(to right, transparent, black 8%, black 92%, transparent)', WebkitMaskImage: 'linear-gradient(to right, transparent, black 8%, black 92%, transparent)' }}>
      <div style={{ display: 'flex', width: 'max-content', animation: 'gs-marquee 42s linear infinite', gap: 14 }}>
        {tripled.map((c, i) => (
          <span key={i} style={{ flexShrink: 0, fontFamily: 'var(--font-mono)', fontSize: 12, padding: '8px 14px', border: '1px solid #23252a', borderRadius: 8, background: '#0f1011', color: '#d0d6e0', letterSpacing: 0.4 }}>{c}</span>
        ))}
      </div>
    </div>
  );
};

// ═══════════════════════════════ RESOURCES ═══════════════════════════════
const ResourcesPage = () => (
  <>
    <ResourcesHero />

    {/* Live advisory feed — UNIQUE typewriter ticker */}
    <section style={{ maxWidth: 1280, margin: '0 auto', padding: '64px 32px 88px' }}>
      <LiveAdvisoryFeed />
    </section>

    <SectionEdge />

    <WhatWePublish />

    <SectionEdge />

    {/* Featured report */}
    <section id="report" style={{ maxWidth: 1280, margin: '0 auto', padding: '88px 32px' }}>
      <FeatureReport />
    </section>

    <SectionEdge />

    {/* Threat trend chart — UNIQUE animated bar/line chart */}
    <section style={{ maxWidth: 1280, margin: '0 auto', padding: '88px 32px' }}>
      <div style={{ marginBottom: 32, maxWidth: 720 }}>
        <p style={{ fontSize: 13, fontWeight: 500, color: '#828fff', letterSpacing: '0.5px', textTransform: 'uppercase', marginBottom: 14 }}>Findings trend</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 }}>What changed this year, across 600+ engagements</h2>
      </div>
      <ThreatTrendChart />
    </section>

    <SectionEdge />

    {/* Posts */}
    <section id="blog" style={{ maxWidth: 1280, margin: '0 auto', padding: '88px 32px' }}>
      <div style={{ marginBottom: 36, display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
        <div>
          <p style={{ fontSize: 13, fontWeight: 500, color: '#828fff', letterSpacing: '0.5px', textTransform: 'uppercase', marginBottom: 14 }}>From the blog</p>
          <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(32px, 3.8vw, 44px)', fontWeight: 600, lineHeight: 1.05, letterSpacing: '-1.6px', color: '#f7f8f8', margin: 0 }}>Write-ups from the team.</h2>
        </div>
        <a href="/blog/" style={{ fontSize: 13, fontWeight: 500, color: '#d0d6e0', textDecoration: 'none', border: '1px solid #23252a', borderRadius: 8, padding: '8px 14px', display: 'inline-flex', alignItems: 'center', gap: 6, transition: 'border-color 150ms ease-out' }}
          onMouseEnter={e => e.currentTarget.style.borderColor = '#34343a'} onMouseLeave={e => e.currentTarget.style.borderColor = '#23252a'}>
          All notes <Icon name="arrowRight" size={12} strokeWidth={2} />
        </a>
      </div>
      <div className="gs-grid-auto" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, '--gs-min': '280px' }}>
        {[
          { tag: 'API', t: 'GraphQL alias batching: one request, a thousand auth checks bypassed', date: 'May 18', read: '12 min', href: '/blog/graphql-alias-batching-auth-bypass/' },
          { tag: 'AD', t: 'ADCS ESC1 in the wild: eleven engagements, eight findings' },
          { tag: 'AI', t: 'Indirect prompt injection through a calendar invite' },
          { tag: 'Cloud', t: 'PMapper at scale: finding the role we should not be able to assume' },
          { tag: 'Mobile', t: 'Frida-based jailbreak detection bypass' },
          { tag: 'Web', t: 'HTTP/2 request smuggling: three gadgets from this quarter' },
        ].map(p => <PostCard key={p.t} {...p} />)}
      </div>
    </section>

    <SectionEdge />

    {/* CVE advisories */}
    <section id="cves" style={{ maxWidth: 1280, margin: '0 auto', padding: '88px 32px' }}>
      <div style={{ marginBottom: 36, maxWidth: 720 }}>
        <p style={{ fontSize: 13, fontWeight: 500, color: '#828fff', letterSpacing: '0.5px', textTransform: 'uppercase', marginBottom: 14 }}>CVE advisories</p>
        <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(32px, 3.8vw, 44px)', fontWeight: 600, lineHeight: 1.05, letterSpacing: '-1.6px', color: '#f7f8f8', margin: 0 }}>Vulnerabilities we have disclosed</h2>
      </div>
      <CveTable />
    </section>

    <SectionEdge />

    {/* Sample report */}
    <section id="sample" style={{ maxWidth: 1280, margin: '0 auto', padding: '88px 32px' }}>
      <SampleReport />
    </section>

    <Cta />
  </>
);

const ResourcesHero = () => (
  <section style={{ position: 'relative', overflow: 'hidden', borderBottom: '1px solid #1a1b1e', minHeight: 520 }}>
    <div className="gs-grid-bg" style={{ position: 'absolute', inset: 0, maskImage: 'radial-gradient(ellipse at 30% 30%, black 30%, transparent 70%)', WebkitMaskImage: 'radial-gradient(ellipse at 30% 30%, black 30%, transparent 70%)' }} />
    <CveRainBackdrop />
    <div style={{ position: 'absolute', top: -160, right: -100, width: 700, height: 400, background: 'radial-gradient(ellipse at center, rgba(94,105,210,0.16), transparent 70%)', pointerEvents: 'none' }} />
    <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto', padding: '120px 32px 80px' }}>
      <div style={{ maxWidth: 720 }}>
        <span style={{ display: 'inline-block', whiteSpace: 'nowrap', fontSize: 11, color: '#828fff', background: 'rgba(94,105,210,0.14)', padding: '4px 12px', borderRadius: 9999, fontFamily: 'var(--font-mono)', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 22, border: '1px solid rgba(94,105,210,0.25)' }}>Resources</span>
        <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(40px, 5.4vw, 68px)', fontWeight: 600, lineHeight: 1.05, letterSpacing: '-2.6px', color: '#f7f8f8', margin: '0 0 18px', textWrap: 'balance' }}>What we publish.<br />What we share.</h1>
        <p style={{ fontSize: 18, color: '#8a8f98', lineHeight: 1.55, margin: '0 0 28px', maxWidth: 560 }}>Research, advisories, anonymized engagement write-ups, and a sample of the report you would receive.</p>
        <div style={{ display: 'flex', gap: 8 }}>
          {[
            { l: '247', s: 'advisories shipped' },
            { l: '84', s: 'write-ups' },
            { l: '38', s: 'CVEs disclosed' },
          ].map(k => (
            <div key={k.s} style={{ background: 'rgba(15,16,17,0.7)', border: '1px solid #23252a', borderRadius: 10, padding: '10px 14px' }}>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 600, color: '#f7f8f8' }}>{k.l}</div>
              <div style={{ fontSize: 10.5, color: '#62666d', textTransform: 'uppercase', letterSpacing: 0.4 }}>{k.s}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

const CveRainBackdrop = () => {
  // 12 columns each cycling a CVE ID falling, very subtle
  const cols = 14;
  return (
    <div style={{ position: 'absolute', inset: 0, opacity: 0.22, pointerEvents: 'none', overflow: 'hidden', maskImage: 'radial-gradient(ellipse 42% 75% at 82% 45%, black 25%, transparent 70%)', WebkitMaskImage: 'radial-gradient(ellipse 42% 75% at 82% 45%, black 25%, transparent 70%)' }}>
      {Array.from({ length: cols }).map((_, i) => (
        <div key={i} style={{
          position: 'absolute', top: 0, bottom: 0,
          left: `${(i / cols) * 100}%`, width: `${100 / cols}%`,
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12,
          animation: `gs-cve-fall ${8 + (i % 5) * 2}s linear ${(i % 7) * -1.4}s infinite`,
          fontFamily: 'var(--font-mono)', fontSize: 10,
        }}>
          {Array.from({ length: 30 }).map((_, j) => {
            const c = i + j;
            return <span key={j} style={{ color: c % 7 === 0 ? '#e8543a' : c % 4 === 0 ? '#828fff' : '#3a44a8', opacity: 0.5 + ((c % 5) / 10) }}>{`CVE-${2020 + (c % 6)}-${(c * 137) % 9999}`}</span>;
          })}
        </div>
      ))}
    </div>
  );
};

const LiveAdvisoryFeed = () => {
  const items = [
    { sev: 'CRIT', id: 'GS-2026-091', t: 'GraphQL alias batch · auth bypass disclosed', vendor: 'Hasura' },
    { sev: 'HIGH', id: 'GS-2026-088', t: 'ADCS ESC1 misconfig allows DA cert forge', vendor: 'Internal AD' },
    { sev: 'CRIT', id: 'CVE-2026-1042', t: 'Race condition in ssh-agent privilege drop', vendor: 'OpenSSH' },
    { sev: 'MED',  id: 'GS-2026-078', t: 'Stored XSS in admin moderator notes panel', vendor: 'SaaS app' },
    { sev: 'HIGH', id: 'CVE-2025-3142', t: 'Realm-admin escalation via crafted SAML', vendor: 'Keycloak' },
    { sev: 'CRIT', id: 'CVE-2025-0118', t: 'Auth bypass via UTF-8 normalization', vendor: 'pgbouncer' },
  ];
  return (
    <div className="gs-scroll-x" style={{ background: '#0f1011', border: '1px solid #23252a', borderRadius: 16, padding: 0, overflow: 'hidden', position: 'relative' }}>
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 1, background: 'linear-gradient(90deg, transparent, rgba(232,84,58,0.4) 50%, transparent)' }} />
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 20px', borderBottom: '1px solid #1a1b1e' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span className="gs-pulse" style={{ width: 6, height: 6, borderRadius: '50%', background: '#e8543a' }} />
          <span style={{ fontSize: 11, color: '#e8543a', textTransform: 'uppercase', letterSpacing: 0.5, fontFamily: 'var(--font-mono)', fontWeight: 500 }}>Live advisory feed</span>
        </div>
        <span style={{ fontSize: 11, color: '#62666d', fontFamily: 'var(--font-mono)' }}>last 30 days · 247 total</span>
      </div>
      <div style={{ height: 280, overflow: 'hidden', position: 'relative' }}>
        <div style={{ position: 'absolute', inset: 0, animation: 'gs-ticker 22s linear infinite' }}>
          {[...items, ...items].map((a, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '80px 140px 130px 1fr',
              gap: 14, padding: '14px 20px', borderBottom: '1px solid #1a1b1e', alignItems: 'center',
            }}>
              <span style={{ fontSize: 10, padding: '2px 8px', borderRadius: 4, fontFamily: 'var(--font-mono)', background: a.sev === 'CRIT' ? 'rgba(232,84,58,0.15)' : a.sev === 'HIGH' ? 'rgba(217,131,38,0.15)' : 'rgba(94,105,210,0.15)', color: a.sev === 'CRIT' ? '#e8543a' : a.sev === 'HIGH' ? '#d98326' : '#5e6ad2', textAlign: 'center' }}>{a.sev}</span>
              <span style={{ fontSize: 12, color: '#828fff', fontFamily: 'var(--font-mono)' }}>{a.id}</span>
              <span style={{ fontSize: 12, color: '#d0d6e0' }}>{a.vendor}</span>
              <span style={{ fontSize: 13, color: '#f7f8f8' }}>{a.t}</span>
            </div>
          ))}
        </div>
        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 40, background: 'linear-gradient(180deg, #0f1011, transparent)', pointerEvents: 'none' }} />
        <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 40, background: 'linear-gradient(0deg, #0f1011, transparent)', pointerEvents: 'none' }} />
      </div>
    </div>
  );
};

const ThreatTrendChart = () => {
  const ref = React.useRef(null);
  const [shown, setShown] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setShown(true); obs.disconnect(); } }, { threshold: 0.3 });
    obs.observe(el); return () => obs.disconnect();
  }, []);
  const cats = [
    { l: 'API', a: 41, b: 58, d: '+41%', up: true },
    { l: 'AI/LLM', a: 12, b: 38, d: '+217%', up: true },
    { l: 'Cloud', a: 28, b: 34, d: '+21%', up: true },
    { l: 'Mobile', a: 22, b: 19, d: '−14%', up: false },
    { l: 'Web', a: 47, b: 38, d: '−19%', up: false },
    { l: 'AD/Identity', a: 36, b: 44, d: '+22%', up: true },
  ];
  return (
    <div ref={ref} style={{ background: '#0f1011', border: '1px solid #23252a', borderRadius: 16, padding: 28, position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 1, background: 'linear-gradient(90deg, transparent, rgba(94,105,210,0.4) 50%, transparent)' }} />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 16 }}>
        {cats.map((c, i) => (
          <div key={c.l} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
            <div style={{ height: 200, width: '100%', display: 'flex', alignItems: 'flex-end', justifyContent: 'center', gap: 8 }}>
              <div style={{ width: 24, height: shown ? `${c.a * 2.2}%` : 0, background: '#34343a', borderRadius: '4px 4px 0 0', transition: `height 900ms ${i * 80}ms cubic-bezier(.2,.8,.2,1)` }} title={`2024: ${c.a}%`} />
              <div style={{ width: 24, height: shown ? `${c.b * 2.2}%` : 0, background: c.up ? 'linear-gradient(180deg, #e8543a, #d98326)' : 'linear-gradient(180deg, #27a644, #4abf5f)', borderRadius: '4px 4px 0 0', transition: `height 900ms ${i * 80 + 120}ms cubic-bezier(.2,.8,.2,1)`, boxShadow: c.up ? '0 0 16px rgba(232,84,58,0.35)' : '0 0 16px rgba(39,166,68,0.3)' }} title={`2026: ${c.b}%`} />
            </div>
            <div style={{ marginTop: 14, fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600, color: c.up ? '#e8543a' : '#27a644' }}>{c.d}</div>
            <div style={{ fontSize: 12, color: '#d0d6e0', marginTop: 2 }}>{c.l}</div>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 20, paddingTop: 16, borderTop: '1px solid #1a1b1e', display: 'flex', gap: 18 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}><div style={{ width: 10, height: 10, background: '#34343a', borderRadius: 2 }} /><span style={{ fontSize: 11, color: '#8a8f98' }}>2024 baseline</span></div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}><div style={{ width: 10, height: 10, background: 'linear-gradient(180deg, #e8543a, #d98326)', borderRadius: 2 }} /><span style={{ fontSize: 11, color: '#8a8f98' }}>2026 · rising surfaces</span></div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}><div style={{ width: 10, height: 10, background: 'linear-gradient(180deg, #27a644, #4abf5f)', borderRadius: 2 }} /><span style={{ fontSize: 11, color: '#8a8f98' }}>2026 · receding</span></div>
      </div>
    </div>
  );
};

const FeatureReport = () => (
  <div style={{ background: 'linear-gradient(155deg, rgba(94,105,210,0.10), rgba(94,105,210,0.02))', border: '1px solid rgba(94,105,210,0.25)', borderRadius: 20, padding: 48, display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 48, alignItems: 'center', position: 'relative', overflow: 'hidden' }}>
    <div style={{ position: 'absolute', top: -100, right: -80, width: 400, height: 280, background: 'radial-gradient(ellipse at center, rgba(94,105,210,0.18) 0%, transparent 70%)', pointerEvents: 'none' }} />
    <div style={{ position: 'relative' }}>
      <span style={{ fontSize: 11, color: '#828fff', background: 'rgba(94,105,210,0.18)', padding: '3px 10px', borderRadius: 9999, textTransform: 'uppercase', letterSpacing: 0.5, fontFamily: 'var(--font-mono)' }}>2026 · pentest trends</span>
      <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(28px, 3vw, 36px)', fontWeight: 600, letterSpacing: '-1.2px', color: '#f7f8f8', margin: '14px 0 12px' }}>What 600+ engagements told us this year</h3>
      <p style={{ fontSize: 15, color: '#a8aeb8', lineHeight: 1.55, margin: '0 0 22px', maxWidth: 480 }}>The findings that shifted, the surfaces that broke, and the controls that held. 38 pages of anonymized, aggregated data.</p>
      <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
        <a href="/contact/#form" style={{ fontSize: 14, fontWeight: 500, background: '#5e6ad2', color: '#fff', textDecoration: 'none', borderRadius: 8, padding: '11px 18px', display: 'inline-flex', alignItems: 'center', gap: 6 }}
          onMouseEnter={e => e.currentTarget.style.background = '#828fff'} onMouseLeave={e => e.currentTarget.style.background = '#5e6ad2'}>
          Request the report
          <Icon name="arrowRight" size={13} color="#fff" strokeWidth={2} />
        </a>
        <a href="#cves" style={{ fontSize: 14, fontWeight: 500, background: 'transparent', color: '#f7f8f8', textDecoration: 'none', border: '1px solid #34343a', borderRadius: 8, padding: '11px 18px', display: 'inline-flex', alignItems: 'center' }}
          onMouseEnter={e => e.currentTarget.style.background = '#141516'} onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>See the advisories</a>
      </div>
    </div>
    <div style={{ background: '#0f1011', border: '1px solid #34343a', borderRadius: 14, padding: 22, position: 'relative' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        {[
          { v: '↑ 217%', l: 'LLM-related findings', c: '#e8543a' },
          { v: '↑ 41%',  l: 'API criticals, year over year', c: '#e8543a' },
          { v: '↓ 19%',  l: 'Web criticals, year over year', c: '#27a644' },
          { v: '4 hr',   l: 'Median time to Domain Admin', c: '#828fff' },
        ].map(s => (
          <div key={s.l} style={{ background: '#0a0a0b', border: '1px solid #1e1f22', borderRadius: 10, padding: 16 }}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 600, color: s.c, letterSpacing: '-0.5px' }}>{s.v}</div>
            <div style={{ fontSize: 11, color: '#8a8f98', marginTop: 4 }}>{s.l}</div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

const PostCard = ({ tag, t, date, read, href }) => {
  const [h, setH] = React.useState(false);
  const live = !!href;
  return (
    <a href={href || '/blog/'} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)} style={{
      display: 'block', textDecoration: 'none',
      background: h ? '#141516' : '#0f1011',
      border: `1px solid ${h ? '#34343a' : '#23252a'}`,
      borderRadius: 12, padding: 22, position: 'relative', overflow: 'hidden',
      transition: 'all 220ms', transform: h ? 'translateY(-2px)' : 'translateY(0)',
    }}>
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 1, background: `linear-gradient(90deg, transparent, rgba(94,105,210,${h ? 0.45 : 0.1}) 50%, transparent)` }} />
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
        <span style={{ fontSize: 10, color: '#828fff', background: 'rgba(94,105,210,0.14)', padding: '2px 8px', borderRadius: 9999, fontFamily: 'var(--font-mono)' }}>{tag}</span>
        {live
          ? <span style={{ fontSize: 11, color: '#62666d' }}>{date} · {read}</span>
          : <span style={{ fontSize: 10, color: '#8a8f98', background: '#141516', border: '1px solid #23252a', padding: '2px 8px', borderRadius: 9999, fontFamily: 'var(--font-mono)', textTransform: 'uppercase', letterSpacing: 0.4 }}>Coming soon</span>}
      </div>
      <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 17, fontWeight: 500, letterSpacing: '-0.3px', color: live ? '#f7f8f8' : '#d0d6e0', margin: 0, lineHeight: 1.3 }}>{t}</h3>
      <div style={{ marginTop: 14, fontSize: 12, color: '#828fff', display: 'inline-flex', alignItems: 'center', gap: 5, transform: h ? 'translateX(2px)' : 'translateX(0)', transition: 'transform 220ms' }}>
        {live ? 'Read note' : 'Browse the blog'} <Icon name="arrowRight" size={11} color="#828fff" strokeWidth={2.2} />
      </div>
    </a>
  );
};

// What we publish — in-page index; every card jumps to a section further down this page
const WhatWePublish = () => (
  <section style={{ maxWidth: 1280, margin: '0 auto', padding: '88px 32px' }}>
    <S2SectionHead eyebrow="What we publish" title="Four things, all from real engagements." sub="Everything on this page comes out of testing work, anonymized and aggregated wherever a client is involved." />
    <div className="gs-grid-auto" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, '--gs-min': '240px' }}>
      {[
        { i: 'flame',  t: 'Pentest Trends 2026', d: 'What 600+ engagements told us this year: the surfaces that broke and the controls that held.', href: '#report', cta: 'Read the summary' },
        { i: 'code',   t: 'Technical write-ups', d: 'Anonymized findings from the field, with the reproduction steps and the fix.', href: '#blog', cta: 'Browse write-ups' },
        { i: 'bug',    t: 'CVE advisories',      d: 'Vulnerabilities our testers found in third-party software, disclosed to the vendor first.', href: '#cves', cta: 'See advisories' },
        { i: 'layers', t: 'Sample report',       d: 'A redacted report from a real engagement, so you know exactly what you receive.', href: '#sample', cta: 'Request a copy' },
      ].map(c => (
        <a key={c.href} href={c.href} style={{ display: 'flex', flexDirection: 'column', textDecoration: 'none', background: '#0f1011', border: '1px solid #23252a', borderRadius: 12, padding: 24, transition: 'border-color 150ms ease-out, background 150ms ease-out' }}
          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={{ width: 40, height: 40, borderRadius: 10, background: 'rgba(94,105,210,0.12)', border: '1px solid rgba(94,105,210,0.25)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18 }}>
            <Icon name={c.i} size={18} color="#828fff" strokeWidth={1.8} />
          </div>
          <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 500, letterSpacing: '-0.3px', color: '#f7f8f8', margin: '0 0 8px' }}>{c.t}</h3>
          <p style={{ fontSize: 14, color: '#8a8f98', lineHeight: 1.55, margin: '0 0 16px', flex: 1 }}>{c.d}</p>
          <span style={{ fontSize: 12, color: '#828fff', display: 'inline-flex', alignItems: 'center', gap: 5 }}>{c.cta} <Icon name="arrowRight" size={11} color="#828fff" strokeWidth={2.2} /></span>
        </a>
      ))}
    </div>
  </section>
);

// Sample report — what a client receives, section by section
const SampleReport = () => (
  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 48, alignItems: 'center' }}>
    <div>
      <p style={{ fontSize: 13, fontWeight: 500, color: '#828fff', letterSpacing: '0.5px', textTransform: 'uppercase', marginBottom: 14 }}>Sample report</p>
      <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(32px, 3.8vw, 44px)', fontWeight: 600, lineHeight: 1.05, letterSpacing: '-1.6px', color: '#f7f8f8', margin: '0 0 16px' }}>See exactly what you receive.</h2>
      <p style={{ fontSize: 16, color: '#8a8f98', lineHeight: 1.6, margin: '0 0 24px', maxWidth: 460 }}>
        A redacted report from a real engagement: the executive summary, three full findings with reproduction steps, and the retest delta. Sent on request, under NDA if you prefer.
      </p>
      <a href="/contact/#form" style={{ fontSize: 14, fontWeight: 500, background: '#5e6ad2', color: '#fff', textDecoration: 'none', borderRadius: 8, padding: '11px 18px', display: 'inline-flex', alignItems: 'center', gap: 6 }}
        onMouseEnter={e => e.currentTarget.style.background = '#828fff'} onMouseLeave={e => e.currentTarget.style.background = '#5e6ad2'}>
        Request the sample report <Icon name="arrowRight" size={13} color="#fff" strokeWidth={2} />
      </a>
    </div>
    <div style={{ background: '#0f1011', border: '1px solid #23252a', borderRadius: 16, padding: 24, position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 1, background: 'linear-gradient(90deg, transparent, rgba(94,105,210,0.4) 50%, transparent)' }} />
      <div style={{ fontSize: 11, color: '#62666d', textTransform: 'uppercase', letterSpacing: 0.4, marginBottom: 14 }}>Contents</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {[
          ['01', 'Executive summary', '4 pages'],
          ['02', 'Scope and methodology', '3 pages'],
          ['03', 'Findings, by severity', '96 pages'],
          ['04', 'Attack narrative', '8 pages'],
          ['05', 'Remediation plan', '11 pages'],
          ['06', 'Retest delta', '5 pages'],
        ].map(([n, l, p]) => (
          <div key={n} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 12px', background: '#0a0a0b', border: '1px solid #1e1f22', borderRadius: 8 }}>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#62666d' }}>{n}</span>
            <span style={{ fontSize: 13.5, color: '#d0d6e0', flex: 1 }}>{l}</span>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#62666d' }}>{p}</span>
          </div>
        ))}
      </div>
    </div>
  </div>
);

const CveTable = () => {
  const rows = [
    { id: 'CVE-2024-23897', vendor: 'Jenkins',  finding: 'CLI arbitrary file read', cvss: 9.8 },
    { id: 'CVE-2024-21626', vendor: 'runc',     finding: 'WORKDIR overwrite · host fd leak', cvss: 8.6 },
    { id: 'CVE-2023-46604', vendor: 'ActiveMQ', finding: 'OpenWire deserialization → RCE', cvss: 10.0 },
    { id: 'CVE-2025-0118',  vendor: 'pgbouncer', finding: 'Auth bypass via UTF-8 normalization', cvss: 8.8 },
    { id: 'CVE-2025-3142',  vendor: 'Keycloak', finding: 'Realm-admin escalation via SAML', cvss: 9.1 },
    { id: 'CVE-2026-1042',  vendor: 'OpenSSH',  finding: 'Race in ssh-agent privilege drop', cvss: 7.4 },
  ];
  return (
    <div className="gs-scroll-x" style={{ background: '#0f1011', border: '1px solid #23252a', borderRadius: 14, overflow: 'hidden' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '160px 140px 1fr 80px', padding: '14px 20px', borderBottom: '1px solid #1a1b1e', fontFamily: 'var(--font-mono)', fontSize: 10.5, color: '#62666d', textTransform: 'uppercase', letterSpacing: 0.4 }}>
        <span>CVE</span><span>Vendor</span><span>Finding</span><span style={{ textAlign: 'right' }}>CVSS</span>
      </div>
      {rows.map((r, i) => (
        <div key={r.id} style={{ display: 'grid', gridTemplateColumns: '160px 140px 1fr 80px', padding: '14px 20px', borderBottom: i < rows.length - 1 ? '1px solid #1a1b1e' : 'none', alignItems: 'center', transition: 'background 160ms' }}
          onMouseEnter={e => e.currentTarget.style.background = '#141516'} onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
          <span style={{ fontSize: 12, color: '#828fff', fontFamily: 'var(--font-mono)' }}>{r.id}</span>
          <span style={{ fontSize: 12, color: '#d0d6e0' }}>{r.vendor}</span>
          <span style={{ fontSize: 13, color: '#f7f8f8' }}>{r.finding}</span>
          <span style={{ fontSize: 12, color: r.cvss >= 9 ? '#e8543a' : r.cvss >= 7 ? '#d98326' : '#5e6ad2', fontFamily: 'var(--font-mono)', textAlign: 'right', fontWeight: 500 }}>{r.cvss.toFixed(1)}</span>
        </div>
      ))}
    </div>
  );
};

// ═══════════════════════════════ CONTACT ═══════════════════════════════
const ContactPage = () => (
  <>
    <ContactHero />

    {/* Engagement flow — animated 4-step intake */}
    <section style={{ maxWidth: 1280, margin: '0 auto', padding: '88px 32px' }}>
      <div style={{ marginBottom: 36, maxWidth: 720 }}>
        <p style={{ fontSize: 13, fontWeight: 500, color: '#828fff', letterSpacing: '0.5px', textTransform: 'uppercase', marginBottom: 14 }}>Intake flow</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 }}>From first email to testing in four business days</h2>
      </div>
      <EngagementFlow />
    </section>

    <SectionEdge />

    {/* Steps + form — #form is the deep-link target used site-wide (/contact/#form) */}
    <section id="form" style={{ maxWidth: 1280, margin: '0 auto', padding: '88px 32px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start' }}>
        <ContactSteps />
        <ContactForm />
      </div>
    </section>

    <SectionEdge />

    <OtherWays />

    <SectionEdge />

    <S2FAQ items={CONTACT_FAQ} />
  </>
);

const CONTACT_INBOX = 'info@greysurface.com';
const CONTACT_SUBJECT = 'Contact form — greysurface.com';

// Other ways to reach us — carries the #disclose anchor (Nav + Footer link to /contact/#disclose)
const OtherWays = () => (
  <section style={{ maxWidth: 1280, margin: '0 auto', padding: '88px 32px' }}>
    <S2SectionHead eyebrow="Other ways to reach us" title="Prefer email? That works too." sub={`Every form on this site and every direct email lands in the same inbox, ${CONTACT_INBOX}, and is read by a tester.`} />
    <div className="gs-grid-auto" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, '--gs-min': '280px' }}>
      {[
        { i: 'mail',   t: 'Email us directly', d: 'For scoping, pricing, timing, or an MSA and NDA before we talk detail. One of our testers replies within one business day.', l: CONTACT_INBOX, href: `mailto:${CONTACT_INBOX}` },
        { id: 'disclose', i: 'shield', t: 'Responsible disclosure', d: 'Found a vulnerability in one of our own systems? Email us with "Disclosure" in the subject line. We acknowledge every report within one business day and keep you informed until it is fixed.', l: 'Report a vulnerability', href: `mailto:${CONTACT_INBOX}?subject=${encodeURIComponent('Responsible disclosure — greysurface.com')}` },
        { i: 'lock',   t: 'PGP on request', d: 'Need to send something sensitive before an NDA is in place? Ask for our PGP key and we will reply with it from the same address.', l: 'Request our PGP key', href: `mailto:${CONTACT_INBOX}?subject=${encodeURIComponent('PGP key request — greysurface.com')}` },
      ].map(c => (
        <div key={c.t} id={c.id} style={{ background: '#0f1011', border: '1px solid #23252a', borderRadius: 12, padding: 24, display: 'flex', flexDirection: 'column', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 1, background: 'linear-gradient(90deg, transparent, rgba(94,105,210,0.3) 50%, transparent)' }} />
          <div style={{ width: 40, height: 40, borderRadius: 10, background: 'rgba(94,105,210,0.12)', border: '1px solid rgba(94,105,210,0.25)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18 }}>
            <Icon name={c.i} size={18} color="#828fff" strokeWidth={1.8} />
          </div>
          <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 500, letterSpacing: '-0.3px', color: '#f7f8f8', margin: '0 0 8px' }}>{c.t}</h3>
          <p style={{ fontSize: 14, color: '#8a8f98', lineHeight: 1.55, margin: '0 0 16px', flex: 1 }}>{c.d}</p>
          <a href={c.href} style={{ fontSize: 13, fontWeight: 500, color: '#d0d6e0', textDecoration: 'none', border: '1px solid #23252a', borderRadius: 8, padding: '8px 14px', display: 'inline-flex', alignItems: 'center', gap: 6, alignSelf: 'flex-start', transition: 'border-color 150ms ease-out' }}
            onMouseEnter={e => e.currentTarget.style.borderColor = '#34343a'} onMouseLeave={e => e.currentTarget.style.borderColor = '#23252a'}>
            {c.l} <Icon name="arrowUpRight" size={12} strokeWidth={2} />
          </a>
        </div>
      ))}
    </div>
  </section>
);

const CONTACT_FAQ = [
  { q: 'How quickly will you reply?', a: 'Within one business day, from a tester who can talk scope rather than a sales queue. If the need is urgent, say so in the subject line and we will prioritise it.' },
  { q: 'Will you sign an NDA before scoping?', a: 'Yes. Send us yours or ask for ours on the first call. Nothing about your environment needs to be shared until it is signed.' },
  { q: 'Do you work with startups?', a: 'Yes. Every engagement is a fixed fee against a defined scope, so a single application or API is a small, well-bounded engagement rather than a minimum retainer. The same senior testers do the work regardless of size.' },
  { q: 'What do you need from us to quote?', a: 'A list of what is in scope (URLs, applications, IP ranges, cloud accounts), how many roles and tenants are involved, whether testing is authenticated, and your target dates. With that, you receive a written scope and a fixed quote within 48 hours of the scoping call.' },
  { q: 'Can you work with our procurement process?', a: 'Yes. We work with purchase orders, vendor onboarding questionnaires, and enterprise MSAs. Standard engagements are invoiced on delivery of the final report.' },
];

const ContactHero = () => (
  <section style={{ position: 'relative', overflow: 'hidden', borderBottom: '1px solid #1a1b1e' }}>
    <div className="gs-grid-bg" style={{ position: 'absolute', inset: 0, maskImage: 'radial-gradient(ellipse at 50% 40%, black 20%, transparent 70%)', WebkitMaskImage: 'radial-gradient(ellipse at 50% 40%, black 20%, transparent 70%)' }} />
    <div style={{ position: 'absolute', top: -220, left: '50%', transform: 'translateX(-50%)', width: 760, height: 440, background: 'radial-gradient(ellipse at center, rgba(94,105,210,0.16), transparent 70%)', pointerEvents: 'none' }} />
    <div style={{ position: 'absolute', bottom: 0, left: '50%', transform: 'translateX(-50%)', width: 520, height: 1, background: 'linear-gradient(90deg, transparent, rgba(94,105,210,0.5) 50%, transparent)' }} />
    <div style={{ position: 'relative', maxWidth: 880, margin: '0 auto', padding: '84px 32px 60px', textAlign: 'center' }}>
      <span style={{ display: 'inline-block', whiteSpace: 'nowrap', fontSize: 11, color: '#828fff', background: 'rgba(94,105,210,0.14)', padding: '4px 12px', borderRadius: 9999, fontFamily: 'var(--font-mono)', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 18, border: '1px solid rgba(94,105,210,0.25)' }}>Contact</span>
      <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(34px, 4.2vw, 52px)', fontWeight: 600, lineHeight: 1.06, letterSpacing: '-1.8px', color: '#f7f8f8', margin: '0 0 14px', textWrap: 'balance' }}>Get in touch</h1>
      <p style={{ fontSize: 16, color: '#8a8f98', lineHeight: 1.55, margin: '0 auto', maxWidth: 520, textWrap: 'pretty' }}>Tell us what you need tested. One of our testers replies within one business day to set up a scoping call.</p>
    </div>
  </section>
);

const EngagementFlow = () => {
  const [phase, setPhase] = React.useState(0);
  React.useEffect(() => { const id = setInterval(() => setPhase(p => (p + 1) % 4), 2200); return () => clearInterval(id); }, []);
  const steps = [
    { n: '01', t: 'First call', d: 'Thirty minutes with one of our testers to agree on scope, threat model, and timing.', dur: 'Day 1' },
    { n: '02', t: 'Scope and rules of engagement', d: 'A statement of work with explicit in-scope assets, out-of-scope boundaries, and rules of engagement, signed by both sides.', dur: 'Day 2' },
    { n: '03', t: 'Kickoff and access',  d: 'Your engagement manager joins your channel. Test accounts, allowlisting, and emergency contacts are arranged before testing starts.', dur: 'Day 3' },
    { n: '04', t: 'Testing begins',   d: 'Daily updates during testing, critical findings disclosed within one hour, and a channel that stays open through retest.', dur: 'Day 4+' },
  ];
  return (
    <div style={{ position: 'relative' }}>
      {/* Connector line */}
      <div style={{ position: 'absolute', top: 28, left: '12.5%', right: '12.5%', height: 2, background: '#1a1b1e' }} />
      <div style={{ position: 'absolute', top: 28, left: '12.5%', height: 2, width: `${phase * 25 + 12.5}%`, maxWidth: '75%', background: 'linear-gradient(90deg, #5e6ad2, #828fff)', transition: 'width 700ms cubic-bezier(.2,.8,.2,1)' }} />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, position: 'relative', alignItems: 'stretch' }}>
        {steps.map((s, i) => {
          const active = i === phase;
          const done = i < phase;
          return (
            <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', cursor: 'pointer' }} onClick={() => setPhase(i)}>
              <div style={{
                width: 56, height: 56, borderRadius: '50%', flexShrink: 0,
                background: done ? '#1f2026' : active ? '#5e6ad2' : '#0f1011',
                border: `2px solid ${active ? '#828fff' : done ? '#34343a' : '#23252a'}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'var(--font-mono)', fontSize: 14, fontWeight: 600,
                color: active ? '#fff' : done ? '#828fff' : '#62666d',
                boxShadow: active ? '0 0 0 6px rgba(94,105,210,0.18)' : 'none',
                transition: 'all 350ms cubic-bezier(.2,.8,.2,1)',
                position: 'relative', zIndex: 2,
              }}>{done ? '✓' : s.n}</div>
              <div style={{
                marginTop: 18, flex: 1, background: active ? '#141516' : '#0f1011',
                border: `1px solid ${active ? '#34343a' : '#23252a'}`,
                borderRadius: 12, padding: 18, width: '100%', textAlign: 'center',
                transition: 'all 350ms', transform: active ? 'translateY(-2px)' : 'translateY(0)',
              }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: active ? '#828fff' : '#62666d', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 6 }}>{s.dur}</div>
                <h4 style={{ fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 500, color: '#f7f8f8', letterSpacing: '-0.3px', margin: '0 0 8px' }}>{s.t}</h4>
                <p style={{ fontSize: 12.5, color: '#8a8f98', lineHeight: 1.5, margin: 0 }}>{s.d}</p>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

const ContactSteps = () => (
  <div>
    <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(30px, 3.4vw, 42px)', fontWeight: 600, lineHeight: 1.1, letterSpacing: '-1.4px', color: '#f7f8f8', margin: '0 0 56px' }}>See GreySurface in action</h2>
    <div style={{ display: 'flex', flexDirection: 'column', gap: 44 }}>
      {[
        { i: 'radar',   t: 'Discover', d: 'We identify the most critical vulnerabilities in your applications before real attackers do.' },
        { i: 'shield',  t: 'Mitigate', d: 'Remediate the findings and request a fix verification from the same team.' },
        { i: 'refresh', t: 'Repeat',   d: 'Repeating the process with every release keeps your security posture improving.' },
      ].map(s => (
        <div key={s.t} style={{ display: 'flex', alignItems: 'center', gap: 32 }}>
          <div style={{ width: 96, height: 96, flexShrink: 0, borderRadius: 18, background: '#0f1011', border: '1px solid #23252a', boxShadow: '0 0 40px rgba(255,255,255,0.05)', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 1, background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.18) 50%, transparent)' }} />
            <Icon name={s.i} size={44} color="#f7f8f8" strokeWidth={1.6} />
          </div>
          <div>
            <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 600, letterSpacing: '-0.7px', color: '#f7f8f8', margin: '0 0 10px' }}>{s.t}</h3>
            <p style={{ fontSize: 15, color: '#8a8f98', lineHeight: 1.55, margin: 0, maxWidth: 420 }}>{s.d}</p>
          </div>
        </div>
      ))}
    </div>
  </div>
);

// Delivers to info@greysurface.com through Forms.jsx (loaded on /contact/, the only page that renders this)
const ContactForm = () => {
  const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error
  const onSubmit = async (e) => {
    e.preventDefault();
    const form = e.currentTarget;
    setStatus('sending');
    try {
      await submitToInbox(formToObject(form), { subject: CONTACT_SUBJECT });
      setStatus('sent');
    } catch (_) {
      setStatus('error');
    }
  };
  if (status === 'sent') {
    return (
      <div style={{ background: '#0f1011', border: '1px solid #23252a', borderRadius: 16, padding: 60, textAlign: 'center', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 1, background: 'linear-gradient(90deg, transparent, rgba(39,166,68,0.4) 50%, transparent)' }} />
        <div style={{ width: 56, height: 56, borderRadius: '50%', background: 'rgba(39,166,68,0.15)', border: '1px solid rgba(39,166,68,0.3)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 20px' }}>
          <Icon name="check" size={26} color="#27a644" strokeWidth={2.5} />
        </div>
        <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 600, letterSpacing: '-0.6px', color: '#f7f8f8', margin: '0 0 8px' }}>Message received</h3>
        <p style={{ fontSize: 14, color: '#8a8f98' }}>One of our testers will reply within one business day.</p>
      </div>
    );
  }
  return (
    <form onSubmit={onSubmit} style={{ background: '#0f1011', border: '1px solid #23252a', borderRadius: 20, padding: 36, display: 'flex', flexDirection: 'column', gap: 18, position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 1, background: 'linear-gradient(90deg, transparent, rgba(94,105,210,0.4) 50%, transparent)' }} />
      <Honeypot />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14 }}>
        <Field name="first_name" label="First name" placeholder="Jane" required />
        <Field name="last_name" label="Last name" placeholder="Doe" required />
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14 }}>
        <Field name="email" label="Work email" placeholder="jane.doe@example.com" type="email" required />
        <Field name="title" label="Title" placeholder="CTO" required />
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14 }}>
        <Field name="company" label="Company name" placeholder="Acme Inc." required />
        <Field name="employees" label="Number of employees" placeholder="150" type="number" required />
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14 }}>
        <Field name="phone" label="Phone number" placeholder="(Optional)" type="tel" />
      </div>
      <Field name="message" label="How can we help?" placeholder="Tell us about your project, timeline, and goals. We reply within one business day." textarea required />
      <button type="submit" disabled={status === 'sending'} style={{ fontFamily: 'var(--font-text)', fontSize: 14, fontWeight: 500, background: '#5e6ad2', color: '#fff', border: 'none', borderRadius: 8, padding: '12px 18px', cursor: status === 'sending' ? 'wait' : 'pointer', opacity: status === 'sending' ? 0.7 : 1, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6, marginTop: 6 }}
        onMouseEnter={e => e.currentTarget.style.background = '#828fff'} onMouseLeave={e => e.currentTarget.style.background = '#5e6ad2'}
      >
        {status === 'sending' ? 'Sending…' : 'Send request'}
        {status !== 'sending' && <Icon name="arrowRight" size={13} color="#fff" strokeWidth={2} />}
      </button>
      {status === 'error' && (
        <p role="alert" style={{ fontSize: 13, color: '#e8543a', lineHeight: 1.5, margin: 0 }}>
          Your message could not be sent. Please email us directly at{' '}
          <a href={`mailto:${CONTACT_INBOX}?subject=${encodeURIComponent(CONTACT_SUBJECT)}`} style={{ color: '#f7f8f8', textDecoration: 'underline' }}>{CONTACT_INBOX}</a>.
        </p>
      )}
      <p style={{ fontSize: 12, color: '#62666d', lineHeight: 1.5, margin: 0 }}>Submissions go to {CONTACT_INBOX}. One of our testers replies within one business day.</p>
    </form>
  );
};

// ═══════════════════════════════ SHARED ═══════════════════════════════
const Field = ({ name, label, placeholder, type = 'text', textarea, required }) => {
  const Tag = textarea ? 'textarea' : 'input';
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 6, minWidth: 0 }}>
      <span style={{ fontSize: 12, color: '#8a8f98', fontWeight: 500 }}>{label}{required ? <span style={{ color: '#828fff' }}> *</span> : null}</span>
      <Tag name={name} type={type} placeholder={placeholder} required={required} rows={textarea ? 3 : undefined}
        style={{ fontFamily: 'var(--font-text)', fontSize: 14, width: '100%', minWidth: 0, background: '#0a0a0b', color: '#f7f8f8', border: '1px solid #23252a', borderRadius: 8, padding: '10px 12px', outline: 'none', resize: textarea ? 'vertical' : 'none' }}
        onFocus={e => { e.target.style.borderColor = '#5e6ad2'; e.target.style.boxShadow = '0 0 0 3px rgba(94,105,210,0.15)'; }}
        onBlur={e => { e.target.style.borderColor = '#23252a'; e.target.style.boxShadow = 'none'; }}
      />
    </label>
  );
};

const SelectField = ({ name, label, options }) => (
  <label style={{ display: 'flex', flexDirection: 'column', gap: 6, minWidth: 0 }}>
    <span style={{ fontSize: 12, color: '#8a8f98', fontWeight: 500 }}>{label}</span>
    <select name={name} style={{ fontFamily: 'var(--font-text)', fontSize: 14, width: '100%', minWidth: 0, background: '#0a0a0b', color: '#f7f8f8', border: '1px solid #23252a', borderRadius: 8, padding: '10px 12px', outline: 'none', cursor: 'pointer', appearance: 'none', backgroundImage: 'url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'12\' height=\'12\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'%238a8f98\' stroke-width=\'2\'><path d=\'M6 9l6 6 6-6\'/></svg>")', backgroundRepeat: 'no-repeat', backgroundPosition: 'right 12px center', paddingRight: 32 }}>
      {options.map(o => <option key={o} style={{ background: '#0a0a0b' }}>{o}</option>)}
    </select>
  </label>
);

const SectionEdge = () => <div style={{ maxWidth: 1280, margin: '0 auto', height: 1, background: '#1a1b1e' }} />;

const PageApp = ({ which }) => (
  <div style={{ background: '#010102', minHeight: '100vh' }}>
    <Nav />
    <main style={{ paddingTop: 56 }}>
      {which === 'about' && <AboutPage />}
      {which === 'resources' && <ResourcesPage />}
      {which === 'contact' && <ContactPage />}
    </main>
    <Footer />
  </div>
);

Object.assign(window, {
  AboutPage, AboutHero, Manifesto, SpecialtyDistribution, Timeline, CertMarquee, Careers, HowWeWork, Commitments,
  ResourcesPage, ResourcesHero, CveRainBackdrop, LiveAdvisoryFeed, ThreatTrendChart, FeatureReport, SampleReport, PostCard, CveTable, WhatWePublish,
  ContactPage, ContactHero, EngagementFlow, ContactSteps, ContactForm, OtherWays,
  Field, SelectField, SectionEdge, PageApp,
});