// WhyUs.jsx — differentiators with cursor-tilt bento + mouse-tracking glow
const WhyUs = () => {
  const useVP = window.useIsMobile || (() => false);
  const isMobile = useVP(900);
  return (
    <section style={{ maxWidth: 1280, margin: '0 auto', padding: '96px 32px' }}>
      <div style={{ marginBottom: 48, maxWidth: 760 }}>
        <p style={{
          fontSize: 13, fontWeight: 500, color: '#828fff',
          letterSpacing: '0.5px', textTransform: 'uppercase', marginBottom: 14,
        }}>Why GreySurface</p>
        <h2 style={{
          fontFamily: 'var(--font-display)', fontSize: 'clamp(36px, 4.4vw, 56px)',
          fontWeight: 600, lineHeight: 1.05, letterSpacing: '-2px',
          color: '#f7f8f8', margin: 0,
        }}>Why teams choose GreySurface</h2>
      </div>

      <div style={{
        display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(6, 1fr)',
        gridAutoRows: isMobile ? 'auto' : 'minmax(180px, auto)', gap: 12,
        perspective: '1200px',
      }}>
        <TiltCard span="span 4" rows="span 2">
          <div style={{ display: 'flex', flexDirection: 'column', height: '100%', justifyContent: 'space-between', gap: 24 }}>
            <div>
              <Eyebrow icon="user" label="Accountability" />
              <h3 style={{
                fontFamily: 'var(--font-display)', fontSize: 30, fontWeight: 600,
                letterSpacing: '-1px', color: '#f7f8f8', margin: '14px 0 10px', maxWidth: 520,
              }}>A tester with a nine-year median tenure leads your engagement from scoping to retest.</h3>
              <p style={{ fontSize: 14.5, color: '#8a8f98', lineHeight: 1.55, margin: 0, maxWidth: 480 }}>
                The tester named in your statement of work does the testing, writes the report, and presents it to your team. The same person stays with you for the whole engagement.
              </p>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              <div style={{ display: 'flex' }}>
                {['#5e6ad2','#828fff','#7a7fad','#3a44a8','#27a644'].map((c, i) => (
                  <div key={i} style={{
                    width: 32, height: 32, borderRadius: '50%',
                    background: c, marginLeft: i === 0 ? 0 : -8,
                    border: '2px solid #0f1011',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 11, fontWeight: 600, color: '#fff',
                  }}>{['MR','SK','AT','PD','LH'][i]}</div>
                ))}
              </div>
              <div>
                <div style={{ fontSize: 12.5, color: '#d0d6e0', fontWeight: 500 }}>OSCP · OSEP · OSWE · OSED · CRTO · GXPN</div>
                <div style={{ fontSize: 11.5, color: '#62666d' }}>Certifications held across the team, refreshed quarterly</div>
              </div>
            </div>
          </div>
        </TiltCard>

        <TiltCard span="span 2" rows="span 2">
          <div style={{ display: 'flex', flexDirection: 'column', height: '100%', justifyContent: 'space-between' }}>
            <Eyebrow icon="refresh" label="Free retest, included" />
            <div>
              <div style={{
                fontFamily: 'var(--font-display)', fontSize: 56, fontWeight: 600,
                color: '#f7f8f8', letterSpacing: '-2px', lineHeight: 1, marginBottom: 8,
              }}>90 days</div>
              <p style={{ fontSize: 13.5, color: '#8a8f98', lineHeight: 1.5, margin: 0 }}>
                We retest every High and Critical finding once you have fixed it, at no charge, and your tester signs off on the result.
              </p>
            </div>
          </div>
        </TiltCard>

        <TiltCard span="span 2">
          <Eyebrow icon="terminal" label="Reproducible" />
          <h4 style={{
            fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 500,
            letterSpacing: '-0.4px', color: '#f7f8f8', margin: '12px 0 8px',
          }}>Every finding comes with a working reproduction</h4>
          <p style={{ fontSize: 13, color: '#8a8f98', lineHeight: 1.5, margin: 0 }}>
            Your engineers can reproduce the exploit themselves before they fix it.
          </p>
        </TiltCard>

        <TiltCard span="span 2">
          <Eyebrow icon="chat" label="Shared channel from day one" />
          <h4 style={{
            fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 500,
            letterSpacing: '-0.4px', color: '#f7f8f8', margin: '12px 0 8px',
          }}>Critical findings disclosed within one hour</h4>
          <p style={{ fontSize: 13, color: '#8a8f98', lineHeight: 1.5, margin: 0 }}>
            Daily updates during testing, a call when something is urgent, and a channel that stays open through retest.
          </p>
        </TiltCard>

        <TiltCard span="span 2">
          <Eyebrow icon="layers" label="Standards-aligned" />
          <h4 style={{
            fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 500,
            letterSpacing: '-0.4px', color: '#f7f8f8', margin: '12px 0 8px',
          }}>OWASP · OSSTMM · NIST · PTES · MITRE ATT&CK</h4>
          <p style={{ fontSize: 13, color: '#8a8f98', lineHeight: 1.5, margin: 0 }}>
            Findings are mapped to the frameworks your auditor uses, so you can hand over the report as it is.
          </p>
        </TiltCard>

        <TiltCard span="span 3">
          <div style={{ display: 'flex', alignItems: 'center', gap: 24, height: '100%' }}>
            <div style={{ flex: 1 }}>
              <Eyebrow icon="code" label="In-house tooling" />
              <h4 style={{
                fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 500,
                letterSpacing: '-0.4px', color: '#f7f8f8', margin: '12px 0 8px',
              }}>We build our own tooling</h4>
              <p style={{ fontSize: 13, color: '#8a8f98', lineHeight: 1.5, margin: 0 }}>
                When existing tools do not fit your environment, we write what is needed.
              </p>
            </div>
            <ImplantBuildBox />
          </div>
        </TiltCard>

        <TiltCard span="span 3">
          <Eyebrow icon="shield" label="Auditor-ready" />
          <h4 style={{
            fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 500,
            letterSpacing: '-0.4px', color: '#f7f8f8', margin: '12px 0 8px',
          }}>One report covering every framework your customers and regulators ask about</h4>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 10 }}>
            {['ISO 27001','SOC 2','PCI DSS','HIPAA','GDPR','DORA','RBI','NIS2','CMMC'].map(c => (
              <span key={c} style={{
                fontSize: 11, color: '#d0d6e0', padding: '3px 9px',
                background: '#141516', border: '1px solid #23252a', borderRadius: 9999,
              }}>{c}</span>
            ))}
          </div>
        </TiltCard>
      </div>
    </section>
  );
};

// Tilt-on-cursor card with mouse-tracked accent glow
const TiltCard = ({ children, span = 'span 2', rows = 'span 1' }) => {
  const ref = React.useRef(null);
  const useVP = window.useIsMobile || (() => false);
  const isMobile = useVP(900);
  const [t, setT] = React.useState({ rx: 0, ry: 0, mx: 50, my: 50, hover: false });

  const onMove = (e) => {
    if (isMobile) return;
    const r = ref.current.getBoundingClientRect();
    const x = (e.clientX - r.left) / r.width;
    const y = (e.clientY - r.top) / r.height;
    setT({
      rx: (0.5 - y) * 6,    // tilt up/down
      ry: (x - 0.5) * 6,    // tilt left/right
      mx: x * 100, my: y * 100,
      hover: true,
    });
  };
  const onLeave = () => setT(s => ({ ...s, rx: 0, ry: 0, hover: false }));

  return (
    <div
      ref={ref}
      onMouseMove={onMove}
      onMouseLeave={onLeave}
      style={{
        gridColumn: isMobile ? 'auto' : span, gridRow: isMobile ? 'auto' : rows,
        background: '#0f1011',
        border: `1px solid ${t.hover ? '#34343a' : '#23252a'}`,
        borderRadius: 12, padding: 22,
        position: 'relative', overflow: 'hidden',
        transform: `perspective(1200px) rotateX(${t.rx}deg) rotateY(${t.ry}deg)`,
        transformStyle: 'preserve-3d',
        transition: 'transform 260ms cubic-bezier(.2,.7,.3,1), border-color 220ms',
        willChange: 'transform',
      }}
    >
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 1,
        background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.05) 50%, transparent)',
      }} />
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: `radial-gradient(circle 280px at ${t.mx}% ${t.my}%, rgba(94,105,210,0.14) 0%, transparent 65%)`,
        opacity: t.hover ? 1 : 0,
        transition: 'opacity 180ms',
      }} />
      <div style={{ position: 'relative', transform: 'translateZ(20px)' }}>{children}</div>
    </div>
  );
};

const Eyebrow = ({ icon, label }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
    <Icon name={icon} size={13} color="#828fff" />
    <span style={{
      fontSize: 11, fontWeight: 500, color: '#828fff',
      letterSpacing: '0.4px', textTransform: 'uppercase', whiteSpace: 'nowrap',
    }}>{label}</span>
  </div>
);

// Live build-pulse implant box
const ImplantBuildBox = () => {
  const [phase, setPhase] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setPhase(p => (p + 1) % 4), 1100);
    return () => clearInterval(id);
  }, []);
  const lines = [
    { c: '#828fff', t: '$ gs-implant build' },
    { c: '#62666d', t: '→ compiling stage-0' },
    { c: '#62666d', t: '→ stripping symbols' },
    { c: '#27a644', t: '✓ implant.bin · ready' },
  ];
  return (
    <div style={{
      flexShrink: 0, width: 160, minHeight: 100,
      background: '#0a0a0b', border: '1px solid #1e1f22', borderRadius: 8,
      padding: 10, fontFamily: 'var(--font-mono)', fontSize: 10.5, lineHeight: 1.6,
      color: '#8a8f98', position: 'relative',
    }}>
      {lines.map((l, i) => (
        <div key={i} style={{
          color: l.c, whiteSpace: 'nowrap',
          opacity: i <= phase ? 1 : 0.25,
          transition: 'opacity 200ms',
        }}>{l.t}</div>
      ))}
    </div>
  );
};

Object.assign(window, { WhyUs, TiltCard });