// ServiceSignatureA.jsx — shared helpers + signature sections for Web and Mobile (part 1)
// Each "signature" is a unique, domain-specific animated module that makes its
// service page visually distinct from the others. Registered on
// window.SERVICE_SIGNATURES keyed by slug; dispatcher lives in part B.

window.SERVICE_SIGNATURES = window.SERVICE_SIGNATURES || {};

// ── Inject keyframes once ──
(function injectSigStyles() {
  if (document.getElementById('gs-sig-styles')) return;
  const s = document.createElement('style');
  s.id = 'gs-sig-styles';
  s.textContent = `
    @keyframes gs-sweep { to { transform: rotate(360deg); } }
    @keyframes gs-blip { 0% { opacity: 0; transform: scale(0.2); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.6); } }
    @keyframes gs-draw { to { stroke-dashoffset: 0; } }
    @keyframes gs-flow { from { offset-distance: 0%; } to { offset-distance: 100%; } }
    @keyframes gs-flowx { from { transform: translateX(-120%); } to { transform: translateX(420%); } }
    @keyframes gs-fadeup { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes gs-trace { 0% { opacity: 0.2; } 50% { opacity: 1; } 100% { opacity: 0.2; } }
    @keyframes gs-glowpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(94,105,210,0.0); } 50% { box-shadow: 0 0 18px 2px rgba(94,105,210,0.35); } }
  `;
  document.head.appendChild(s);
})();

// ── Shared hooks/components ──
const useInView = (threshold = 0.25) => {
  const ref = React.useRef(null);
  const [seen, setSeen] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setSeen(true); obs.disconnect(); } }, { threshold });
    obs.observe(el); return () => obs.disconnect();
  }, []);
  return [ref, seen];
};

const useCountUp = (target, active, dur = 1400) => {
  const [v, setV] = React.useState(0);
  React.useEffect(() => {
    if (!active) return;
    let raf, start;
    const tick = (t) => {
      if (!start) start = t;
      const p = Math.min(1, (t - start) / dur);
      const eased = 1 - Math.pow(1 - p, 3);
      setV(target * eased);
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [active, target]);
  return v;
};

const SigSection = ({ eyebrow, title, sub, children, max = 1280 }) => (
  <section style={{ maxWidth: max, margin: '0 auto', padding: '88px 32px' }}>
    <div style={{ marginBottom: 36, maxWidth: 760 }}>
      <p style={{ fontSize: 13, fontWeight: 500, color: '#828fff', letterSpacing: '0.5px', textTransform: 'uppercase', marginBottom: 14 }}>{eyebrow}</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 }}>{title}</h2>
      {sub && <p style={{ fontSize: 16, color: '#8a8f98', lineHeight: 1.55, margin: '14px 0 0' }}>{sub}</p>}
    </div>
    {children}
  </section>
);

const SigPanel = React.forwardRef(({ children, accent = '#5e6ad2', pad = 24, style = {} }, ref) => (
  <div ref={ref} style={{ background: '#0f1011', border: '1px solid #23252a', borderRadius: 16, padding: pad, position: 'relative', overflow: 'hidden', ...style }}>
    <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 1, background: `linear-gradient(90deg, transparent, ${accent}66 50%, transparent)` }} />
    {children}
  </div>
));

const sevColor = (s) => s === 'critical' || s === 'C' ? '#e8543a' : s === 'high' || s === 'H' ? '#d98326' : s === 'medium' || s === 'M' ? '#5e6ad2' : s === 'low' || s === 'L' ? '#7a7fad' : '#27a644';

// ═══════════════ WEB — OWASP Top 10 coverage board ═══════════════
const WebSignature = () => {
  const cats = [
    { id: 'A01', n: 'Broken Access Control', cov: 96, f: 142, d: 'IDOR cascades, privilege escalation, and tenant breakouts. The most common critical we report.' },
    { id: 'A02', n: 'Cryptographic Failures', cov: 88, f: 61, d: 'Weak token signing, predictable secrets, plaintext at rest, and TLS downgrade paths.' },
    { id: 'A03', n: 'Injection', cov: 94, f: 88, d: 'SQL, NoSQL, template, and command injection, each confirmed by manual reproduction.' },
    { id: 'A04', n: 'Insecure Design', cov: 82, f: 47, d: 'Business-logic flaws, race conditions, and workflow skipping.' },
    { id: 'A05', n: 'Security Misconfiguration', cov: 91, f: 73, d: 'Debug endpoints, default credentials, verbose errors, and permissive CORS.' },
    { id: 'A06', n: 'Vulnerable Components', cov: 86, f: 55, d: 'Outdated libraries where the vulnerable code is reachable and exploitable.' },
    { id: 'A07', n: 'Auth & Identity Failures', cov: 93, f: 79, d: 'MFA bypass, session fixation, JWT tampering, and credential-stuffing resilience.' },
    { id: 'A08', n: 'Integrity Failures', cov: 79, f: 31, d: 'Insecure deserialization, unsigned updates, and CI/CD supply-chain trust gaps.' },
    { id: 'A09', n: 'Logging & Monitoring', cov: 74, f: 24, d: 'Whether your own telemetry would have detected the activity, tested against your real logging pipeline.' },
    { id: 'A10', n: 'Server-Side Request Forgery', cov: 90, f: 42, d: 'Cloud-metadata reachability, internal service pivoting, and blind-SSRF confirmation.' },
  ];
  const [ref, seen] = useInView();
  const [active, setActive] = React.useState(0);
  React.useEffect(() => { if (!seen) return; const t = setInterval(() => setActive(a => (a + 1) % cats.length), 2600); return () => clearInterval(t); }, [seen]);
  const cur = cats[active];
  return (
    <SigSection eyebrow="Coverage map" title="The OWASP Top 10, tested in depth" sub="Every engagement starts from ASVS Level 2 or 3. This is how our manual coverage maps across the 2021 Top 10, aggregated over 600+ web engagements.">
      <div ref={ref} style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 12 }}>
        <SigPanel pad={10}>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {cats.map((c, i) => (
              <button key={c.id} onClick={() => setActive(i)} style={{
                display: 'grid', gridTemplateColumns: '46px 1fr 120px 44px', gap: 12, alignItems: 'center',
                padding: '11px 12px', borderRadius: 9, cursor: 'pointer', textAlign: 'left',
                background: active === i ? '#141516' : 'transparent', border: `1px solid ${active === i ? '#34343a' : 'transparent'}`,
                transition: 'all 200ms',
              }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: active === i ? '#828fff' : '#62666d' }}>{c.id}</span>
                <span style={{ fontSize: 13.5, color: active === i ? '#f7f8f8' : '#a8aeb8', fontWeight: active === i ? 500 : 400, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.n}</span>
                <div style={{ height: 5, background: '#1a1b1e', borderRadius: 3, overflow: 'hidden' }}>
                  <div style={{ height: '100%', width: seen ? `${c.cov}%` : '0%', background: 'linear-gradient(90deg, #5e6ad2, #828fff)', transition: `width 900ms ${i * 60}ms cubic-bezier(.2,.8,.2,1)` }} />
                </div>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, color: '#62666d', textAlign: 'right' }}>{c.cov}%</span>
              </button>
            ))}
          </div>
        </SigPanel>
        <SigPanel accent="#e8543a" style={{ display: 'flex', flexDirection: 'column' }}>
          <div key={active} style={{ animation: 'gs-fadeup 360ms ease-out', display: 'flex', flexDirection: 'column', height: '100%' }}>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: '#828fff' }}>{cur.id} · OWASP 2021</span>
            <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 600, letterSpacing: '-0.6px', color: '#f7f8f8', margin: '10px 0 12px' }}>{cur.n}</h3>
            <p style={{ fontSize: 14.5, color: '#8a8f98', lineHeight: 1.6, margin: 0, flex: 1 }}>{cur.d}</p>
            <div style={{ marginTop: 20, paddingTop: 18, borderTop: '1px solid #1a1b1e', display: 'flex', justifyContent: 'space-between' }}>
              <div><div style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 600, color: '#f7f8f8', letterSpacing: '-0.8px' }}>{cur.f}</div><div style={{ fontSize: 11, color: '#62666d', textTransform: 'uppercase', letterSpacing: 0.4 }}>findings reported</div></div>
              <div style={{ textAlign: 'right' }}><div style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 600, color: '#828fff', letterSpacing: '-0.8px' }}>{cur.cov}%</div><div style={{ fontSize: 11, color: '#62666d', textTransform: 'uppercase', letterSpacing: 0.4 }}>manual coverage</div></div>
            </div>
          </div>
        </SigPanel>
      </div>
    </SigSection>
  );
};

// ═══════════════ MOBILE — MASVS radar chart ═══════════════
const MobileSignature = () => {
  const [ref, seen] = useInView();
  const axes = [
    { l: 'Storage', v: 0.82 }, { l: 'Crypto', v: 0.74 }, { l: 'Auth', v: 0.9 },
    { l: 'Network', v: 0.86 }, { l: 'Platform', v: 0.7 }, { l: 'Resilience', v: 0.64 },
  ];
  const cx = 150, cy = 150, R = 110;
  const pt = (i, r) => { const a = (Math.PI * 2 * i) / axes.length - Math.PI / 2; return [cx + Math.cos(a) * R * r, cy + Math.sin(a) * R * r]; };
  const poly = (vals) => vals.map((v, i) => pt(i, v).join(',')).join(' ');
  return (
    <SigSection eyebrow="MASVS profile" title="Three surfaces in one engagement: device, channel, and backend" sub="We test against the OWASP MASVS standard on both platforms. The radar shows the depth we test to, against the baseline we typically find on a first engagement.">
      <div ref={ref} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        <SigPanel style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <svg viewBox="0 0 300 300" style={{ width: '100%', maxWidth: 320 }}>
            {[0.25, 0.5, 0.75, 1].map((r, i) => (
              <polygon key={i} points={poly(axes.map(() => r))} fill="none" stroke="#1e1f22" strokeWidth="1" />
            ))}
            {axes.map((a, i) => { const [x, y] = pt(i, 1); return <line key={i} x1={cx} y1={cy} x2={x} y2={y} stroke="#1e1f22" strokeWidth="1" />; })}
            {/* baseline */}
            <polygon points={poly(axes.map(() => 0.42))} fill="rgba(98,102,109,0.12)" stroke="#3e3e44" strokeWidth="1.5" style={{ opacity: seen ? 1 : 0, transition: 'opacity 800ms 200ms' }} />
            {/* tested */}
            <polygon points={poly(axes.map(a => a.v))} fill="rgba(94,105,210,0.18)" stroke="#828fff" strokeWidth="2" style={{ opacity: seen ? 1 : 0, transform: seen ? 'scale(1)' : 'scale(0.3)', transformOrigin: '150px 150px', transition: 'opacity 700ms 400ms, transform 800ms 400ms cubic-bezier(.2,.8,.2,1)' }} />
            {axes.map((a, i) => { const [x, y] = pt(i, 1.2); return <text key={i} x={x} y={y} fill="#8a8f98" fontSize="11" fontFamily="var(--font-mono)" textAnchor="middle" dominantBaseline="middle">{a.l}</text>; })}
            {seen && axes.map((a, i) => { const [x, y] = pt(i, a.v); return <circle key={i} cx={x} cy={y} r="3.5" fill="#828fff" style={{ animation: `gs-fadeup 400ms ${500 + i * 80}ms both` }} />; })}
          </svg>
        </SigPanel>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            {[{ p: 'iOS', d: 'iPhone 12+ · iOS 16/17', sub: 'jailbroken & stock', icon: 'lock' }, { p: 'Android', d: 'AOSP 11–14', sub: 'rooted & user builds', icon: 'fingerprint' }].map(d => (
              <SigPanel key={d.p} pad={18}>
                <Icon name={d.icon} size={18} color="#828fff" />
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600, color: '#f7f8f8', marginTop: 10 }}>{d.p}</div>
                <div style={{ fontSize: 12, color: '#d0d6e0', marginTop: 4 }}>{d.d}</div>
                <div style={{ fontSize: 11, color: '#62666d', marginTop: 2 }}>{d.sub}</div>
              </SigPanel>
            ))}
          </div>
          <SigPanel accent="#e8543a" pad={18}>
            <div style={{ fontSize: 12, color: '#62666d', textTransform: 'uppercase', letterSpacing: 0.4, marginBottom: 10 }}>Runtime instrumentation</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
              {['Frida', 'Objection', 'SSL-kill-switch', 'MobSF', 'Ghidra', 'Hopper', 'jadx', 'r2'].map(t => (
                <span key={t} style={{ fontSize: 11, padding: '3px 9px', borderRadius: 4, background: '#141516', border: '1px solid #23252a', color: '#a8aeb8', fontFamily: 'var(--font-mono)' }}>{t}</span>
              ))}
            </div>
            <p style={{ fontSize: 13, color: '#8a8f98', lineHeight: 1.55, margin: '14px 0 0' }}>Jailbreak and root-detection bypass, SSL-pinning circumvention, and IPC fuzzing on real devices, then the backend API in the same engagement.</p>
          </SigPanel>
        </div>
      </div>
    </SigSection>
  );
};

Object.assign(window, {
  useInView, useCountUp, SigSection, SigPanel, sevColor,
  WebSignature, MobileSignature,
});
window.SERVICE_SIGNATURES['web'] = WebSignature;
window.SERVICE_SIGNATURES['mobile'] = MobileSignature;