// ServiceSignatureB.jsx — per-service signature sections (part 2) + dispatcher
// Relies on helpers from part A (useInView, useCountUp, SigSection, SigPanel, sevColor).

// ═══════════════ CLOUD — multi-cloud posture board + privesc chain ═══════════════
const CloudSignature = () => {
  const [ref, seen] = useInView();
  const clouds = [
    { n: 'AWS', icon: 'aws', score: 72, rows: [['IMDSv2 enforced', false], ['Root MFA', true], ['CloudTrail org-wide', true], ['Public S3 blocked', false], ['KMS key rotation', true]] },
    { n: 'Azure', icon: 'azure', score: 84, rows: [['Defender for Cloud', true], ['NSG egress filtered', true], ['Key Vault soft-delete', true], ['Storage public access', false], ['PIM for admins', true]] },
    { n: 'GCP', icon: 'gcp', score: 66, rows: [['Org policy: VM ext IP', false], ['CMEK on buckets', true], ['Audit logs sink', true], ['SA key expiry', false], ['VPC SC perimeter', false]] },
  ];
  return (
    <SigSection eyebrow="Posture board" title="Cloud breaches start with identity" sub="More than 80% of cloud incidents start with a permissions issue. We map trust relationships across every provider first, then demonstrate the attack chain.">
      <div ref={ref} style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, marginBottom: 12 }}>
        {clouds.map((c, ci) => (
          <SigPanel key={c.n} pad={20} accent="#828fff">
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
              <div style={{ width: 34, height: 34, borderRadius: 8, background: '#141516', border: '1px solid #23252a', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name={c.icon} size={17} color="#828fff" />
              </div>
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600, color: '#f7f8f8' }}>{c.n}</span>
              <span style={{ marginLeft: 'auto', fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 600, color: c.score >= 80 ? '#27a644' : c.score >= 70 ? '#d98326' : '#e8543a' }}>{c.score}</span>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
              {c.rows.map(([l, ok], i) => (
                <div key={l} style={{ display: 'flex', alignItems: 'center', gap: 9, opacity: seen ? 1 : 0, transform: seen ? 'translateX(0)' : 'translateX(-8px)', transition: `all 400ms ${ci * 120 + i * 80}ms` }}>
                  <div style={{ width: 16, height: 16, borderRadius: 4, background: ok ? 'rgba(39,166,68,0.15)' : 'rgba(232,84,58,0.15)', border: `1px solid ${ok ? 'rgba(39,166,68,0.4)' : 'rgba(232,84,58,0.4)'}`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <Icon name={ok ? 'check' : 'close'} size={10} color={ok ? '#27a644' : '#e8543a'} strokeWidth={2.5} />
                  </div>
                  <span style={{ fontSize: 12.5, color: ok ? '#a8aeb8' : '#d0d6e0', fontFamily: 'var(--font-mono)' }}>{l}</span>
                </div>
              ))}
            </div>
          </SigPanel>
        ))}
      </div>
      <SigPanel accent="#e8543a" pad={18}>
        <div style={{ fontSize: 12, color: '#62666d', textTransform: 'uppercase', letterSpacing: 0.4, marginBottom: 14 }}>IAM privilege-escalation chain · demonstrated</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
          {['user/dev', 'role/ReadTfState', 'role/cicd-runner', 'role/OrgAdmin'].map((h, i, arr) => (
            <React.Fragment key={h}>
              <div style={{ padding: '8px 12px', borderRadius: 8, background: i === arr.length - 1 ? 'rgba(232,84,58,0.12)' : '#141516', border: `1px solid ${i === arr.length - 1 ? 'rgba(232,84,58,0.4)' : '#23252a'}`, fontFamily: 'var(--font-mono)', fontSize: 12, color: i === arr.length - 1 ? '#e8543a' : '#d0d6e0', opacity: seen ? 1 : 0, transform: seen ? 'scale(1)' : 'scale(0.9)', transition: `all 400ms ${i * 200}ms` }}>{h}</div>
              {i < arr.length - 1 && <span style={{ color: '#62666d', fontFamily: 'var(--font-mono)', fontSize: 11, opacity: seen ? 1 : 0, transition: `opacity 300ms ${i * 200 + 150}ms` }}>sts:AssumeRole →</span>}
            </React.Fragment>
          ))}
        </div>
      </SigPanel>
    </SigSection>
  );
};

// ═══════════════ RED TEAM — MITRE ATT&CK kill-chain matrix ═══════════════
const RedTeamSignature = () => {
  const [ref, seen] = useInView();
  const [sweep, setSweep] = React.useState(-1);
  const tactics = [
    { t: 'Initial Access', cells: ['Spearphish', 'Valid Accts', 'OAuth'] },
    { t: 'Execution', cells: ['CmdLine', 'WMI', 'BOF'] },
    { t: 'Persistence', cells: ['Sched Task', 'Registry'] },
    { t: 'Priv Esc', cells: ['Kerberoast', 'ESC1', 'Token'] },
    { t: 'Lateral', cells: ['PtH', 'WinRM', 'RDP'] },
    { t: 'Exfil', cells: ['HTTPS C2', 'DNS'] },
  ];
  const lit = [[0, 0], [1, 2], [2, 0], [3, 1], [4, 0], [5, 0]]; // the path taken
  React.useEffect(() => { if (!seen) return; const t = setInterval(() => setSweep(s => (s + 1) % (tactics.length + 2)), 700); return () => clearInterval(t); }, [seen]);
  const ttps = useCountUp(18, seen);
  const isLit = (col, row) => lit.some(([c, r]) => c === col && r === row) && sweep >= col;
  return (
    <SigSection eyebrow="ATT&CK heatmap" title="A real adversary uses every route at once" sub="A red team operation tests your whole organization, from people to process to technology. This is one operation's path across the MITRE ATT&CK matrix.">
      <SigPanel ref={ref} accent="#e8543a">
        <div style={{ display: 'grid', gridTemplateColumns: `repeat(${tactics.length}, 1fr)`, gap: 8 }}>
          {tactics.map((col, ci) => (
            <div key={col.t}>
              <div style={{ fontSize: 11, color: sweep >= ci ? '#828fff' : '#62666d', textTransform: 'uppercase', letterSpacing: 0.3, fontWeight: 500, marginBottom: 8, textAlign: 'center', transition: 'color 300ms', minHeight: 28 }}>{col.t}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                {col.cells.map((cell, ri) => {
                  const on = isLit(ci, ri);
                  return (
                    <div key={cell} style={{
                      padding: '9px 6px', borderRadius: 6, textAlign: 'center',
                      fontSize: 10.5, fontFamily: 'var(--font-mono)',
                      background: on ? 'rgba(232,84,58,0.16)' : '#0a0a0b',
                      border: `1px solid ${on ? 'rgba(232,84,58,0.5)' : '#1e1f22'}`,
                      color: on ? '#f7f8f8' : '#62666d',
                      transition: 'all 350ms',
                      boxShadow: on ? '0 0 14px rgba(232,84,58,0.3)' : 'none',
                    }}>{cell}</div>
                  );
                })}
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 20, paddingTop: 16, borderTop: '1px solid #1a1b1e', display: 'flex', alignItems: 'center', gap: 24, flexWrap: 'wrap' }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
            <span style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 600, color: '#f7f8f8' }}>{Math.round(ttps)}</span>
            <span style={{ fontSize: 12.5, color: '#8a8f98' }}>techniques used this operation</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
            <span style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 600, color: '#828fff' }}>0</span>
            <span style={{ fontSize: 12.5, color: '#8a8f98' }}>alerts raised before the objective</span>
          </div>
          <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: '#62666d' }}>
            <span className="gs-pulse" style={{ width: 6, height: 6, borderRadius: '50%', background: '#e8543a' }} />
            every technique becomes a detection rule at readout
          </div>
        </div>
      </SigPanel>
    </SigSection>
  );
};

// ═══════════════ PENETRATION TESTING — severity burndown chart ═══════════════
const VaptSignature = () => {
  const [ref, seen] = useInView();
  // weeks of an engagement; open findings declining
  const weeks = ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8'];
  const series = [38, 41, 36, 28, 22, 14, 8, 3];
  const W = 620, H = 240, pad = 30;
  const maxV = 44;
  const x = (i) => pad + (i / (weeks.length - 1)) * (W - pad * 2);
  const y = (v) => H - pad - (v / maxV) * (H - pad * 2);
  const linePath = series.map((v, i) => `${i === 0 ? 'M' : 'L'} ${x(i)} ${y(v)}`).join(' ');
  const areaPath = `${linePath} L ${x(weeks.length - 1)} ${H - pad} L ${x(0)} ${H - pad} Z`;
  return (
    <SigSection eyebrow="Engagement burndown" title="Findings get closed, and we prove it" sub="A typical full-scope engagement: open findings rise during discovery, then fall as fixes land and we retest. The free retest verifies whatever is left.">
      <div ref={ref} style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 12 }}>
        <SigPanel>
          <svg viewBox={`0 0 ${W} ${H}`} style={{ width: '100%' }}>
            <defs>
              <linearGradient id="vaptArea" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="rgba(94,105,210,0.35)" />
                <stop offset="100%" stopColor="rgba(94,105,210,0)" />
              </linearGradient>
            </defs>
            {[0, 11, 22, 33, 44].map(v => (
              <g key={v}><line x1={pad} y1={y(v)} x2={W - pad} y2={y(v)} stroke="#1a1b1e" strokeDasharray="2 4" /><text x={pad - 8} y={y(v)} fill="#3e3e44" fontSize="9" fontFamily="var(--font-mono)" textAnchor="end" dominantBaseline="middle">{v}</text></g>
            ))}
            {weeks.map((w, i) => <text key={w} x={x(i)} y={H - pad + 16} fill="#62666d" fontSize="10" fontFamily="var(--font-mono)" textAnchor="middle">{w}</text>)}
            <path d={areaPath} fill="url(#vaptArea)" style={{ opacity: seen ? 1 : 0, transition: 'opacity 800ms 600ms' }} />
            <path d={linePath} fill="none" stroke="#828fff" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ strokeDasharray: 1200, strokeDashoffset: seen ? 0 : 1200, transition: 'stroke-dashoffset 1600ms cubic-bezier(.4,0,.2,1)' }} />
            {series.map((v, i) => <circle key={i} cx={x(i)} cy={y(v)} r="3.5" fill="#010102" stroke="#828fff" strokeWidth="2" style={{ opacity: seen ? 1 : 0, transition: `opacity 300ms ${800 + i * 120}ms` }} />)}
          </svg>
        </SigPanel>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {[
            { v: '38 → 3', l: 'Open findings, week 1 to week 8', c: '#828fff' },
            { v: '92%', l: 'Closed before final report', c: '#27a644' },
            { v: '90 days', l: 'Free retest window', c: '#d0d6e0' },
          ].map(s => (
            <SigPanel key={s.l} pad={20}>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 30, fontWeight: 600, color: s.c, letterSpacing: '-1px', lineHeight: 1 }}>{s.v}</div>
              <div style={{ fontSize: 13, color: '#8a8f98', marginTop: 6 }}>{s.l}</div>
            </SigPanel>
          ))}
        </div>
      </div>
    </SigSection>
  );
};

// ═══════════════ CONTINUOUS — testing cadence heatmap ═══════════════
const PtaasSignature = () => {
  const [ref, seen] = useInView();
  const weeks = 26, days = 5;
  // deterministic intensity pattern
  const intensity = (w, d) => { const n = (w * 7 + d * 13 + (w % 3) * 5) % 10; return n; };
  const color = (n) => n === 0 ? '#0e0f12' : n < 3 ? 'rgba(94,105,210,0.25)' : n < 5 ? 'rgba(94,105,210,0.45)' : n < 7 ? 'rgba(94,105,210,0.7)' : '#828fff';
  return (
    <SigSection eyebrow="Testing cadence" title="Testing that keeps up with your releases" sub="A dedicated team tests your surfaces on a rolling schedule, and findings land in your portal as soon as they are confirmed.">
      <SigPanel ref={ref} accent="#27a644">
        <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'flex-start' }}>
          <div style={{ flex: '1 1 420px' }}>
            <div style={{ fontSize: 12, color: '#62666d', textTransform: 'uppercase', letterSpacing: 0.4, marginBottom: 12 }}>Testing activity · last 26 weeks</div>
            <div style={{ display: 'grid', gridTemplateColumns: `repeat(${weeks}, 1fr)`, gap: 3 }}>
              {Array.from({ length: weeks }).map((_, w) => (
                <div key={w} style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
                  {Array.from({ length: days }).map((_, d) => {
                    const n = intensity(w, d);
                    return <div key={d} style={{ aspectRatio: '1', borderRadius: 2, background: seen ? color(n) : '#0e0f12', transition: `background 500ms ${(w * days + d) * 7}ms` }} title={`week ${w + 1}`} />;
                  })}
                </div>
              ))}
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 12, justifyContent: 'flex-end' }}>
              <span style={{ fontSize: 10.5, color: '#62666d' }}>less</span>
              {['#0e0f12', 'rgba(94,105,210,0.25)', 'rgba(94,105,210,0.45)', 'rgba(94,105,210,0.7)', '#828fff'].map((c, i) => <div key={i} style={{ width: 11, height: 11, borderRadius: 2, background: c }} />)}
              <span style={{ fontSize: 10.5, color: '#62666d' }}>more</span>
            </div>
          </div>
          <div style={{ flex: '1 1 220px', display: 'flex', flexDirection: 'column', gap: 10 }}>
            {[
              { v: '1 hour', l: 'Critical finding SLA', c: '#e8543a' },
              { v: '4', l: 'Surfaces under continuous test', c: '#f7f8f8' },
              { v: 'Always-on', l: 'Retest as fixes land', c: '#27a644' },
            ].map(s => (
              <div key={s.l} style={{ background: '#0a0a0b', border: '1px solid #1e1f22', borderRadius: 10, padding: '14px 16px' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 600, color: s.c, letterSpacing: '-0.6px', lineHeight: 1 }}>{s.v}</div>
                <div style={{ fontSize: 12, color: '#8a8f98', marginTop: 5 }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
      </SigPanel>
    </SigSection>
  );
};

// ── Dispatcher ──
const ServiceSignature = ({ slug }) => {
  const C = (window.SERVICE_SIGNATURES || {})[slug];
  return C ? <C /> : null;
};

Object.assign(window, {
  CloudSignature, RedTeamSignature, VaptSignature, PtaasSignature, ServiceSignature,
});
window.SERVICE_SIGNATURES['cloud'] = CloudSignature;
window.SERVICE_SIGNATURES['red-team'] = RedTeamSignature;
window.SERVICE_SIGNATURES['vapt'] = VaptSignature;
window.SERVICE_SIGNATURES['ptaas'] = PtaasSignature;