// AttackSurface.jsx — animated radial map of the 9 attack surfaces we cover,
// with a live ATT&CK-aligned tactic counter beneath.

const SURFACES = [
  { id: 'web',     label: 'Web Apps',     icon: 'globe',       cves: 47, vectors: 24 },
  { id: 'api',     label: 'APIs',         icon: 'code',        cves: 38, vectors: 18 },
  { id: 'mobile',  label: 'Mobile',       icon: 'fingerprint', cves: 22, vectors: 16 },
  { id: 'ext',     label: 'External net', icon: 'network',     cves: 56, vectors: 21 },
  { id: 'int',     label: 'Internal AD',  icon: 'server',      cves: 41, vectors: 28 },
  { id: 'cloud',   label: 'Cloud',        icon: 'cloud',       cves: 29, vectors: 19 },
  { id: 'iot',     label: 'IoT / OT',     icon: 'radar',       cves: 17, vectors: 14 },
  { id: 'redteam', label: 'Red Team',     icon: 'target',      cves: 8,  vectors: 32 },
  { id: 'ai',      label: 'AI · LLM',     icon: 'sparkle',     cves: 12, vectors: 11 },
];

const ATTCK_TACTICS = [
  { code: 'TA0043', name: 'Reconnaissance',     count: 247 },
  { code: 'TA0042', name: 'Resource Dev',       count:  84 },
  { code: 'TA0001', name: 'Initial Access',     count: 631 },
  { code: 'TA0002', name: 'Execution',          count: 902 },
  { code: 'TA0003', name: 'Persistence',        count: 458 },
  { code: 'TA0004', name: 'Privilege Esc.',     count: 712 },
  { code: 'TA0005', name: 'Defense Evasion',    count: 489 },
  { code: 'TA0006', name: 'Credential Access',  count: 814 },
  { code: 'TA0007', name: 'Discovery',          count: 1024 },
  { code: 'TA0008', name: 'Lateral Movement',   count: 396 },
  { code: 'TA0009', name: 'Collection',         count: 287 },
  { code: 'TA0010', name: 'Exfiltration',       count: 142 },
  { code: 'TA0040', name: 'Impact',             count: 173 },
  { code: 'TA0011', name: 'Command & Control',  count: 318 },
];

const AttackSurface = () => {
  return (
    <section style={{ maxWidth: 1280, margin: '0 auto', padding: '96px 32px' }}>
      <div style={{
        marginBottom: 48, display: 'grid', gridTemplateColumns: '1.4fr 1fr',
        gap: 48, alignItems: 'end',
      }}>
        <div>
          <p style={{
            fontSize: 13, fontWeight: 500, color: '#828fff',
            letterSpacing: '0.5px', textTransform: 'uppercase', marginBottom: 14,
          }}>Coverage</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',
          }}>Every part of your attack surface</h2>
        </div>
        <p style={{ fontSize: 16, color: '#8a8f98', lineHeight: 1.6, margin: 0 }}>
          We cover nine attack surfaces and all fourteen MITRE ATT&CK tactics. Every test is logged and every finding is reproducible.
        </p>
      </div>

      <div style={{
        display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 12,
      }}>
        {/* Radial surface map */}
        <div style={{
          background: '#0f1011', border: '1px solid #23252a', borderRadius: 16,
          padding: 24, position: 'relative', overflow: 'hidden',
          minHeight: 480,
        }}>
          <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: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
            <span style={{ fontSize: 11, color: '#62666d', textTransform: 'uppercase', letterSpacing: 0.5, fontWeight: 500 }}>Attack-surface map</span>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <div className="gs-pulse" style={{ width: 6, height: 6, borderRadius: '50%', background: '#27a644' }} />
              <span style={{ fontSize: 11, color: '#27a644', fontFamily: 'var(--font-mono)', textTransform: 'uppercase' }}>9 surfaces · live</span>
            </div>
          </div>
          <SurfaceRadial />
        </div>

        {/* ATT&CK tactic counter */}
        <div style={{
          background: '#0f1011', border: '1px solid #23252a', borderRadius: 16,
          padding: 0, position: 'relative', overflow: 'hidden',
          minHeight: 480, display: 'flex', flexDirection: 'column',
        }}>
          <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={{
            padding: '20px 24px 14px', borderBottom: '1px solid #1a1b1e',
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          }}>
            <div>
              <div style={{ fontSize: 13, color: '#f7f8f8', fontWeight: 500 }}>MITRE ATT&CK alignment</div>
              <div style={{ fontSize: 11.5, color: '#62666d', marginTop: 1 }}>Techniques used across 600+ engagements</div>
            </div>
            <span style={{
              fontSize: 10, padding: '2px 7px', borderRadius: 4,
              background: 'rgba(94,105,210,0.12)', color: '#828fff',
              fontFamily: 'var(--font-mono)',
            }}>v15</span>
          </div>
          <div style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 4, flex: 1 }}>
            {ATTCK_TACTICS.map(t => (
              <TacticRow key={t.code} t={t} />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const SurfaceRadial = () => {
  const [active, setActive] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setActive(a => (a + 1) % SURFACES.length), 2200);
    return () => clearInterval(id);
  }, []);

  const cx = 50, cy = 50;
  const radius = 36;
  const positions = SURFACES.map((_, i) => {
    const a = (i / SURFACES.length) * Math.PI * 2 - Math.PI / 2;
    return { x: cx + Math.cos(a) * radius, y: cy + Math.sin(a) * radius, angle: a };
  });

  return (
    <div style={{ position: 'relative', width: '100%', aspectRatio: '1.3', maxWidth: 560, margin: '0 auto' }}>
      <svg viewBox="-30 -8 160 116" style={{ width: '100%', height: '100%', display: 'block', overflow: 'visible' }}>
        {/* Concentric rings */}
        {[10, 18, 26, 34].map((r, i) => (
          <circle key={r} cx={cx} cy={cy} r={r}
            fill="none" stroke={`rgba(94,105,210,${0.05 + i * 0.04})`} strokeWidth="0.2" />
        ))}
        {/* Radial spokes */}
        {positions.map((p, i) => (
          <line key={`l-${i}`} x1={cx} y1={cy} x2={p.x} y2={p.y}
            stroke={i === active ? 'rgba(130,143,255,0.7)' : 'rgba(94,105,210,0.18)'}
            strokeWidth={i === active ? 0.35 : 0.2}
            style={{ transition: 'stroke 350ms' }}
          />
        ))}
        {/* Pulsing core */}
        <circle cx={cx} cy={cy} r="3.4" fill="#5e6ad2" />
        <circle cx={cx} cy={cy} r="5.4" fill="none" stroke="rgba(130,143,255,0.5)" strokeWidth="0.3">
          <animate attributeName="r" values="5.4;9;5.4" dur="2.4s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0.6;0;0.6" dur="2.4s" repeatCount="indefinite" />
        </circle>
        <circle cx={cx} cy={cy} r="7.5" fill="none" stroke="rgba(130,143,255,0.3)" strokeWidth="0.2">
          <animate attributeName="r" values="7.5;14;7.5" dur="3.2s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0.4;0;0.4" dur="3.2s" repeatCount="indefinite" />
        </circle>

        {/* Surface node circles */}
        {positions.map((p, i) => (
          <g key={i}>
            <circle cx={p.x} cy={p.y} r={i === active ? 2.6 : 2.0}
              fill={i === active ? '#828fff' : '#3a44a8'}
              style={{ transition: 'r 350ms, fill 350ms' }}
            />
            {i === active && (
              <circle cx={p.x} cy={p.y} r="2.6" fill="none" stroke="rgba(130,143,255,0.5)" strokeWidth="0.3">
                <animate attributeName="r" values="2.6;6;2.6" dur="1.6s" repeatCount="indefinite" />
                <animate attributeName="opacity" values="0.7;0;0.7" dur="1.6s" repeatCount="indefinite" />
              </circle>
            )}
          </g>
        ))}

        {/* Center label */}
        <text x={cx} y={cy + 6.5} textAnchor="middle" fontFamily="var(--font-mono)" fontSize="2.4" fill="#62666d" letterSpacing="0.3">CORE · OPS-2026</text>

        {/* Surface labels — SVG text with rect backing, anchored inside viewBox */}
        {SURFACES.map((s, i) => {
          const p = positions[i];
          const lx = cx + Math.cos(p.angle) * (radius + 5);
          const ly = cy + Math.sin(p.angle) * (radius + 5);
          const isLeft = lx < cx;
          const labelW = Math.max(20, s.label.length * 1.6 + 4);
          const tx = isLeft ? lx - labelW : lx;
          const ty = ly - 2.5;
          const isActive = i === active;
          return (
            <g key={s.id} onClick={() => setActive(i)} style={{ cursor: 'pointer' }}>
              <rect x={tx} y={ty} width={labelW} height={5} rx={1.2}
                fill={isActive ? '#141516' : 'transparent'}
                stroke={isActive ? '#34343a' : 'transparent'}
                strokeWidth="0.15"
                style={{ transition: 'all 200ms' }}
              />
              <text
                x={tx + labelW / 2} y={ty + 3.4}
                textAnchor="middle"
                fontFamily="var(--font-text)" fontSize="2.4" fontWeight="500"
                fill={isActive ? '#f7f8f8' : '#8a8f98'}
                style={{ transition: 'fill 200ms' }}
              >{s.label}</text>
            </g>
          );
        })}
      </svg>

      {/* Detail card for active surface */}
      <div style={{
        position: 'absolute', bottom: 8, left: '50%', transform: 'translateX(-50%)',
        background: '#141516', border: '1px solid #34343a', borderRadius: 10,
        padding: '8px 14px', display: 'flex', alignItems: 'center', gap: 14,
        minWidth: 240,
      }}>
        <Icon name={SURFACES[active].icon} size={13} color="#828fff" />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 12, fontWeight: 500, color: '#f7f8f8' }}>{SURFACES[active].label}</div>
          <div style={{ fontSize: 10, color: '#62666d', fontFamily: 'var(--font-mono)' }}>
            {SURFACES[active].vectors} vectors · {SURFACES[active].cves} CVEs on file
          </div>
        </div>
      </div>
    </div>
  );
};

const TacticRow = ({ t }) => {
  const max = 1024;
  const pct = (t.count / max) * 100;
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '64px 1fr 56px',
      gap: 10, alignItems: 'center',
      padding: '4px 10px',
    }}>
      <span style={{
        fontSize: 10, color: '#62666d', fontFamily: 'var(--font-mono)',
        letterSpacing: 0.3,
      }}>{t.code}</span>
      <div style={{ position: 'relative', minWidth: 0 }}>
        <div style={{
          position: 'absolute', inset: 0,
          background: '#1a1b1e', borderRadius: 3,
        }} />
        <div style={{
          position: 'absolute', top: 0, bottom: 0, left: 0,
          width: `${pct}%`,
          background: `linear-gradient(90deg, rgba(94,105,210,0.35), rgba(130,143,255,0.5))`,
          borderRadius: 3,
        }} />
        <div style={{
          position: 'relative', fontSize: 11.5, color: '#d0d6e0',
          padding: '4px 8px', whiteSpace: 'nowrap',
          overflow: 'hidden', textOverflow: 'ellipsis',
        }}>{t.name}</div>
      </div>
      <span style={{
        fontSize: 11, color: '#828fff', fontFamily: 'var(--font-mono)',
        textAlign: 'right',
      }}>{t.count}</span>
    </div>
  );
};

Object.assign(window, { AttackSurface });