/* CX Defense — Technology page · product lineup */
const { Nav, Rule, PageHero, Banner, CTA, Footer } = window;

const PRODUCTS = [
  {
    flip: false, img: 'assets/img/network-globe.png', kind: 'Digital Investigation', status: ['live', 'Live'],
    h: 'Specter Intel', tag: 'Show how you know what you know.',
    p: 'An investigation platform for OSINT and financial-crime work. Specter brings reconnaissance, entity mapping, evidence management, and reporting into one case-centred workspace — so analysts aren\u2019t juggling browser tabs, spreadsheets, and disconnected tools.',
    feats: [
      'Domain and IP intelligence, scam tracing, and blockchain analysis in one workspace',
      'A relationship graph that holds the full picture of a case',
      'Evidence filed with integrity; reports structured to withstand real scrutiny',
      'For fraud investigators, compliance teams, and independent analysts — serious capability without enterprise complexity',
    ],
  },
  {
    flip: true, img: 'assets/img/sphere-defense.png', kind: 'LLM & SQL Security', status: ['dev', 'In Development'],
    h: 'CXGuard', tag: 'Detection is advisory. Control is the guarantee.',
    p: 'An evidence-first security layer for applications that connect language models to real authority — tools, databases, documents, and outbound channels. Rather than trying to recognise every malicious prompt, CXGuard puts the real guarantee in deterministic control over where untrusted data is allowed to flow.',
    feats: [
      'PromptGuard — provenance / taint tracking, trust boundaries, tool-call controls, and DLP / egress checks',
      'SQLGuard — parser-based SQL policy enforcement and SQLi detection, correlated across LLM and database',
      'Evidence layer — hash-chained audit logs with external anchors and optional RFC-3161 timestamping',
      'Untrusted data cannot silently become trusted, reach a privileged action, or leave without a deterministic check',
    ],
  },
  {
    flip: false, img: 'assets/img/horizon-beam.png', kind: 'Threat & News Intelligence', status: ['avail', 'Built in the UK'],
    h: 'CyberProof', tag: 'What you read. What you acted on. What you can prove.',
    p: 'A local-first cyber threat and news-intelligence platform. CyberProof continuously collects external sources, ranks what actually matters by what\u2019s being exploited in the real world, and produces an auditable record of every decision your team makes along the way.',
    feats: [
      'Collects continuously — 200+ sources, the full CISA KEV catalogue, and European CERT advisories, hashed at capture',
      'Ranks by what\u2019s exploited, not just what\u2019s severe — a deterministic, reproducible score, no black box',
      'Proves it — an append-only, hash-signed evidence chain (SHA-256 + HMAC), verifiable offline by a third party',
      'Self-hosted with zero data egress; sealed mode runs against a local model only — nothing leaves the machine',
    ],
  },
  {
    flip: true, img: 'assets/img/ledger-archive.png', kind: 'Website Compliance', status: ['live', 'Live'],
    h: 'CXComply', tag: 'See your site through the eyes of a regulator.',
    p: 'Website compliance audited from the outside in. CXComply launches a real browser to observe exactly what a visitor — or a regulator — would encounter, then turns what it finds into a clear, actionable report.',
    feats: [
      'Goes beyond code — checks whether your cookie banner\u2019s \u201creject\u201d button actually works',
      'Traces data flows across borders as they happen',
      'Scrutinises your privacy policy against UK & EU GDPR, India\u2019s DPDP Act, Australia, and US state law',
      'Every issue backed by evidence and a practical fix — from compliance confusion to clarity, and proof',
    ],
  },
];

const CREDS = [
  ['§', 'Privacy by Design', 'Data protection principles engineered into every system from the first line of architecture — not appended afterwards.'],
  ['◆', 'Human Oversight', 'Automation does the mechanical work; engineers make the judgements. Every finding that matters is reviewed by a person who signs their name to it.'],
  ['✓', 'Evidence Chain', 'Findings hashed, timestamped, and tamper-evident from the moment of collection — so every conclusion can be traced back to its source.'],
];

function Product({ p }) {
  const img = <div className="p-img" style={{ backgroundImage: `url(${p.img})` }}></div>;
  const body = (
    <div className="p-body">
      <div className="p-head">
        <div className="p-kind">{p.kind}</div>
        <span className={'p-status ' + p.status[0]}>{p.status[1]}</span>
      </div>
      <h3>{p.h}</h3>
      {p.tag && <div className="p-tag">{p.tag}</div>}
      <p>{p.p}</p>
      <ul className="p-feats">{p.feats.map((f, i) => <li key={i}>{f}</li>)}</ul>
    </div>
  );
  return (
    <div className={'product' + (p.flip ? ' flip' : '')}>
      {p.flip ? <>{body}{img}</> : <>{img}{body}</>}
    </div>
  );
}

function App() {
  return (
    <div className="site">
      <Nav active="technology.html" />
      <PageHero label="Technology" title="Where investigation meets <em>engineering</em>">
        CX Defense is two crafts in one practice — digital investigation and security engineering — and our software carries both. From OSINT and financial-crime investigation to LLM security, threat intelligence, and website compliance, every platform below is built and used by the people who run our engagements.
      </PageHero>
      <Banner img="assets/img/layers-stack.png" caption="Layered by design · the CX Defense platform" />
      <div style={{ marginTop: 64 }}><Rule /></div>
      <section className="section">
        <div className="center" style={{ marginBottom: 56 }}>
          <div className="eyebrow brass">Our Products</div>
          <div className="s-title">Four platforms. Built in-house. <em>Evidence-first.</em></div>
          <div className="s-desc" style={{ textAlign: 'center' }}>These aren't products on a shelf — they're the working instruments of our practice, engineered and proven on real engagements by our cyber-security and network-protection specialists.</div>
        </div>
        <div className="products">
          {PRODUCTS.map(p => <Product key={p.h} p={p} />)}
        </div>
      </section>
      <Rule />
      <section className="section">
        <div className="split">
          <div className="img" style={{ backgroundImage: 'url(assets/img/monolith.png)' }}></div>
          <div className="col-text">
            <div className="eyebrow">Engineering Principles</div>
            <h2>Built the way we'd want it <em>built for us</em></h2>
            <p>Our team works across cyber security, network protection, and digital investigation — and every system we ship follows the same principles we apply to client infrastructure. Least privilege by default. Encryption everywhere. Evidence over assertion. No telemetry leaving your environment without your knowledge — because we read other vendors' data-sharing clauses too.</p>
            <p>Our platforms run with human review at every stage that matters. Automation does the mechanical work; engineers make the judgements — and sign their names to them. Where a product is still maturing, we say so plainly, including what it does not yet do.</p>
          </div>
        </div>
      </section>
      <Rule />
      <section className="section" style={{ paddingBottom: 48 }}>
        <div className="center" style={{ marginBottom: 48 }}>
          <div className="eyebrow brass">Standards</div>
          <div className="s-title">Governed, documented, <em>accountable</em></div>
        </div>
        <div className="credentials">
          {CREDS.map(([icon, h, p]) => (
            <div className="cred" key={h}><div className="icon">{icon}</div><h4>{h}</h4><p>{p}</p></div>
          ))}
        </div>
      </section>
      <Rule />
      <CTA title="See the technology <em>working</em>"
        actions={<a href="contact.html" className="btn btn-primary">Request a Demonstration</a>}
        note="Confidential from first contact · No obligation">
        Our platforms are deployed as part of CX Defense engagements. Tell us about your environment, and we'll show you what they reveal.
      </CTA>
      <Footer />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);