// Comparison.jsx — VAPT firm vs typical pentest vendors
const Comparison = () => {
  const rows = [
    { trait: 'Experienced tester on every engagement', us: true, mssp: false, boutique: 'partial' },
    { trait: 'Every finding manually exploited and confirmed', us: true, mssp: false, boutique: true },
    { trait: 'Documented coverage of every test case', us: true, mssp: false, boutique: 'partial' },
    { trait: 'Reproducible proofs of concept with payloads and screenshots', us: true, mssp: 'partial', boutique: true },
    { trait: 'Two reports: executive and technical', us: true, mssp: false, boutique: 'partial' },
    { trait: 'Free retest within 90 days', us: true, mssp: false, boutique: 'partial' },
    { trait: 'Shared channel through remediation', us: true, mssp: false, boutique: false },
    { trait: 'Single accountable contact throughout', us: true, mssp: false, boutique: true },
    { trait: 'OWASP, OSSTMM, NIST, and MITRE alignment', us: true, mssp: 'partial', boutique: true },
    { trait: 'Fixed-fee, transparent scoping', us: true, mssp: false, boutique: 'partial' },
  ];

  const Cell = ({ v }) => {
    if (v === true) return <Icon name="check" size={16} color="#27a644" strokeWidth={2.5} />;
    if (v === 'partial') return <span style={{ fontSize: 13, color: '#d98326', fontFamily: 'var(--font-mono)' }}>partial</span>;
    return <span style={{ fontSize: 14, color: '#3e3e44' }}>—</span>;
  };

  return (
    <section style={{ maxWidth: 1280, margin: '0 auto', padding: '96px 32px' }}>
      <div style={{ marginBottom: 40, maxWidth: 760 }}>
        <p style={{
          fontSize: 13, fontWeight: 500, color: '#828fff',
          letterSpacing: '0.5px', textTransform: 'uppercase', marginBottom: 14,
        }}>Comparison</p>
        <h2 style={{
          fontFamily: 'var(--font-display)', fontSize: 'clamp(36px, 4.4vw, 56px)',
          fontWeight: 600, lineHeight: 1.05, letterSpacing: '-2px',
          color: '#f7f8f8', margin: '0 0 16px',
        }}>How we compare</h2>
        <p style={{ fontSize: 17, color: '#8a8f98', lineHeight: 1.55, margin: 0, maxWidth: 620 }}>
          A pentest is only as good as the people doing it. This is what you can expect from us compared with other common options.
        </p>
      </div>

      <div style={{
        background: '#0f1011', border: '1px solid #23252a', borderRadius: 16,
        overflow: 'hidden', position: 'relative',
      }}>
        <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)',
        }} />
        {/* Header */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr',
          padding: '20px 24px', borderBottom: '1px solid #1e1f22',
          alignItems: 'center', gap: 12,
        }}>
          <div></div>
          <div style={{
            background: 'linear-gradient(180deg, rgba(94,105,210,0.18), rgba(94,105,210,0.04))',
            border: '1px solid rgba(94,105,210,0.3)', borderRadius: 10,
            padding: '12px 14px', textAlign: 'center',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, marginBottom: 4 }}>
              <GsMark size={14} />
              <span style={{ fontSize: 13, fontWeight: 500, color: '#f7f8f8' }}>GreySurface</span>
            </div>
            <div style={{ fontSize: 11, color: '#828fff', fontFamily: 'var(--font-mono)', textTransform: 'uppercase' }}>Operator-led</div>
          </div>
          <div style={{ textAlign: 'center', padding: '8px 14px' }}>
            <div style={{ fontSize: 13, color: '#a8aeb8', marginBottom: 4 }}>Large consultancies</div>
            <div style={{ fontSize: 11, color: '#62666d', fontFamily: 'var(--font-mono)', textTransform: 'uppercase' }}>Volume-led</div>
          </div>
          <div style={{ textAlign: 'center', padding: '8px 14px' }}>
            <div style={{ fontSize: 13, color: '#a8aeb8', marginBottom: 4 }}>Boutique firms</div>
            <div style={{ fontSize: 11, color: '#62666d', fontFamily: 'var(--font-mono)', textTransform: 'uppercase' }}>Project-led</div>
          </div>
        </div>

        {/* Rows */}
        {rows.map((r, i) => (
          <ComparisonRow key={r.trait} r={r} i={i} last={i === rows.length - 1} Cell={Cell} />
        ))}
      </div>
    </section>
  );
};

function ComparisonRow({ r, i, last, Cell }) {
  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) { setTimeout(() => setShown(true), i * 60); obs.disconnect(); } }, { threshold: 0.4 });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return (
    <div ref={ref} style={{
      display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr',
      padding: '14px 24px',
      borderBottom: last ? 'none' : '1px solid #1a1b1e',
      alignItems: 'center', gap: 12,
      opacity: shown ? 1 : 0,
      transform: shown ? 'translateY(0)' : 'translateY(6px)',
      transition: 'opacity 360ms ease-out, transform 360ms ease-out, background 180ms',
    }}
    onMouseEnter={e => e.currentTarget.style.background = 'linear-gradient(90deg, rgba(94,105,210,0.10), rgba(94,105,210,0.02) 60%)'}
    onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
    >
      <div style={{ fontSize: 14, color: '#d0d6e0' }}>{r.trait}</div>
      <div style={{ display: 'flex', justifyContent: 'center' }}><Cell v={r.us} /></div>
      <div style={{ display: 'flex', justifyContent: 'center' }}><Cell v={r.mssp} /></div>
      <div style={{ display: 'flex', justifyContent: 'center' }}><Cell v={r.boutique} /></div>
    </div>
  );
}

Object.assign(window, { Comparison, ComparisonRow });