// Dedupe Engine + Noise Reduction: the differentiator
const { useEffect: useEffectE, useState: useStateE } = React;

// Animated funnel: 247 raw → 84 deduped → 31 noise-filtered → 12 validated
function FunnelViz() {
  const [phase, setPhase] = useStateE(0);
  useEffectE(() => {
    const id = setInterval(() => setPhase(p => (p + 1) % 4), 1400);
    return () => clearInterval(id);
  }, []);
  const stages = [
    { label: 'Raw AI findings',       n: 247, w: 100, color: 'rgba(154,163,188,0.45)' },
    { label: 'After dedupe',          n: 84,  w: 60,  color: 'rgba(94,230,255,0.55)' },
    { label: 'After noise filter',    n: 31,  w: 40,  color: 'rgba(111,168,255,0.70)' },
    { label: 'Human-validated · sent',n: 12,  w: 22,  color: 'rgba(61,122,255,0.95)' },
  ];
  return (
    <div className="funnel">
      {stages.map((s, i) => (
        <div key={i} className={`funnel__row${phase >= i ? ' funnel__row--in' : ''}`}>
          <div className="funnel__bar-wrap">
            <div className="funnel__bar" style={{ width: `${s.w}%`, background: s.color }}>
              <span className="funnel__bar-n">{s.n}</span>
            </div>
          </div>
          <div className="funnel__label">{s.label}</div>
        </div>
      ))}
    </div>
  );
}

function DedupeCluster() {
  return (
    <div className="cluster">
      <div className="cluster__head">
        <span className="chip chip--cyan">CLUSTER · 94% similarity</span>
        <span style={{ marginLeft: 'auto', fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: 'var(--text-3)' }}>
          21 raw → 1 finding
        </span>
      </div>
      <div className="cluster__title">Reflected XSS · search parameter</div>
      <div className="cluster__meta">
        <div><strong>7</strong> endpoints affected</div>
        <div><strong>3</strong> payload variations</div>
        <div><strong>1</strong> root cause</div>
      </div>
      <div className="cluster__list">
        {[
          '/search?q={payload}',
          '/api/v1/search?term={payload}',
          '/products/find?name={payload}',
          '/help/articles?q={payload}',
          '+ 17 deduped duplicates',
        ].map((e, i) => (
          <div key={i} className={`cluster__row${i === 4 ? ' cluster__row--muted' : ''}`}>
            <span className="cluster__row-dot"></span>
            <span>{e}</span>
            {i < 4 && <span className="cluster__row-tag">unique</span>}
          </div>
        ))}
      </div>
    </div>
  );
}

function NoiseFilter() {
  const items = [
    { label: 'High confidence',     conf: 96, action: 'Sent to human review', kind: 'ok' },
    { label: 'High confidence',     conf: 91, action: 'Sent to human review', kind: 'ok' },
    { label: 'Needs human review',  conf: 64, action: 'Tester escalation',    kind: 'warn' },
    { label: 'Likely noise',        conf: 34, action: 'Filtered · sandbox replay failed', kind: 'mute' },
    { label: 'Environmental',       conf: 21, action: 'Filtered · staging-only artifact', kind: 'mute' },
    { label: 'Previously fixed',    conf: 88, action: 'Suppressed · CIP-7421 closed',     kind: 'mute' },
  ];
  return (
    <div className="noise">
      {items.map((it, i) => (
        <div key={i} className={`noise__row noise__row--${it.kind}`}>
          <div className="noise__bar">
            <div className="noise__bar-fill" style={{ width: `${it.conf}%` }}></div>
          </div>
          <div className="noise__conf">{it.conf}<span style={{ color: 'var(--text-3)' }}>%</span></div>
          <div className="noise__label">{it.label}</div>
          <div className="noise__action">{it.action}</div>
        </div>
      ))}
    </div>
  );
}

function DedupeNoise() {
  return (
    <section className="section" id="engine">
      <div className="container">
        <div className="section-head">
          <div className="section-head__title">
            <span className="eyebrow">06 · The Engine</span>
            <h2 style={{ marginTop: 18 }}>Dedupe and noise reduction,<br/>before a human ever sees the queue.</h2>
            <p style={{ marginTop: 14, maxWidth: 580 }}>
              Most platforms ship scanner output and call it a day. We don't. Every AI-discovered finding passes a clustering engine and a confidence-scored noise filter. Only what's real and ranked reaches a pentester.
            </p>
          </div>
        </div>

        <div className="engine">
          <div className="engine__hero">
            <div className="engine__hero-k">FUNNEL · last 24 hours</div>
            <FunnelViz />
            <div className="engine__hero-result">
              <div>
                <div className="engine__hero-num">95%</div>
                <div className="engine__hero-lbl">reduction · raw → final</div>
              </div>
              <div>
                <div className="engine__hero-num">12</div>
                <div className="engine__hero-lbl">findings reached your team</div>
              </div>
            </div>
          </div>

          <div className="engine__split">
            <div className="engine__col">
              <div className="engine__col-head">
                <div className="engine__col-num">A</div>
                <div>
                  <div className="engine__col-title">Dedupe Engine</div>
                  <div className="engine__col-sub">Groups similar findings · detects duplicates · matches root causes</div>
                </div>
              </div>
              <DedupeCluster />
              <div className="engine__bullets">
                <div>Similarity scoring across payloads, endpoints, and stack traces</div>
                <div>Root-cause clustering · one fix → many resolved</div>
                <div>Cross-scan matching · prevents repeat noise</div>
                <div>Regression detection on previously closed findings</div>
              </div>
            </div>

            <div className="engine__col">
              <div className="engine__col-head">
                <div className="engine__col-num">B</div>
                <div>
                  <div className="engine__col-title">Noise Filter</div>
                  <div className="engine__col-sub">Confidence-scored · evidence-weighted · sandbox-validated</div>
                </div>
              </div>
              <NoiseFilter />
              <div className="engine__bullets">
                <div>AI confidence score per finding · transparent reasoning</div>
                <div>Sandbox replay required for "exploitable" claims</div>
                <div>Environmental artifact + low-value detection</div>
                <div>Human override · any finding can be promoted</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { DedupeNoise });