/* CX Defense — Services page */
const { Nav, Rule, PageHero, Banner, CTA, Footer } = window;

const SERVICES = [
  {
    id: 'network', h: 'Network Security Architecture',
    p: [
      'The network carries everything — which means it can lose everything. We design and implement network architectures where compromise is contained by construction: perimeter defense, internal segmentation, and access models that never assume trust.',
      "That covers next-generation firewall design and policy engineering, site-to-site and remote-access VPN topologies, zero-trust network access, secure routing and switching, and wireless security. Whether we're hardening an existing estate or designing greenfield, the goal is the same: an attacker who gets in finds walls, not corridors.",
    ],
    highlight: 'Designed and implemented by senior network engineers with enterprise carrier-grade experience. We work vendor-neutral — the architecture comes first, the products second.',
    tags: ['Firewalls', 'Segmentation', 'VPN', 'Zero Trust', 'Routing', 'NAC'],
    metrics: [['Enterprise-grade', 'Carrier-level network engineering expertise'], ['Vendor-neutral', 'Architecture first, products second'], ['Contained', 'Compromise limited by design, not luck']],
  },
  {
    id: 'traffic', h: 'Traffic Analysis & Network Monitoring',
    p: [
      'You cannot defend what you cannot see. We build deep visibility into network traffic — flow analysis, protocol inspection, anomaly detection, and the instrumentation that turns raw packets into operational awareness.',
      "Our engineers deploy and tune monitoring infrastructure that distinguishes signal from noise: lateral movement attempts, data exfiltration patterns, command-and-control beacons, and the quiet misconfigurations that attackers find before you do. The output isn't a dashboard nobody reads — it's visibility your team actually uses.",
    ],
    highlight: 'Particularly valuable after an incident, before an audit, or whenever the honest answer to "what is moving through our network right now?" is "we\u2019re not sure."',
    tags: ['Flow Analysis', 'IDS / IPS', 'Anomaly Detection', 'Packet Inspection', 'Telemetry'],
    metrics: [['Full visibility', 'North-south and east-west traffic coverage'], ['Tuned', 'Alerts your team will actually act on'], ['Forensic-ready', 'Evidence-quality capture when it matters']],
  },
  {
    id: 'data', h: 'Web & Data Protection',
    p: [
      'Your web presence is your most exposed surface, and your data is the reason anyone attacks you at all. We harden both. Web application firewalls, TLS done properly, security headers, input handling, and the configuration discipline that closes the gaps automated scanners feast on.',
      'Beneath the application layer, we engineer data protection that survives mistakes: encryption at rest and in transit, key management, backup integrity, access controls scoped to actual need, and data loss prevention that respects how people really work.',
    ],
    highlight: "We approach web protection from the attacker's side first — reconnaissance, exposure mapping, and the external view of your infrastructure — because that's the view that matters.",
    tags: ['WAF', 'TLS', 'Encryption', 'DLP', 'Hardening', 'Key Management'],
    metrics: [['Outside-in', 'Hardening driven by external exposure mapping'], ['At rest & in transit', 'Encryption engineered across the full data path'], ['Survivable', 'Backup and recovery designed for the bad day']],
  },
  {
    id: 'virtualization', h: 'Secure Virtualization & Infrastructure',
    p: [
      'Modern infrastructure is layers of abstraction — hypervisors, containers, virtual networks, cloud tenancy. Each layer is an opportunity for isolation done well, or a blast radius waiting to happen. We design virtualized environments where the isolation is real.',
      'That includes hypervisor and host hardening, virtual network segmentation, secure image and template pipelines, identity and access design across hybrid estates, and resilience engineering — so a failure in one tenant, workload, or zone stays exactly there.',
    ],
    highlight: 'Especially relevant for teams consolidating infrastructure, moving workloads between on-premise and cloud, or inheriting environments nobody fully documented.',
    tags: ['Hypervisor', 'Containers', 'Cloud', 'IAM', 'Isolation', 'Resilience'],
    metrics: [['Real isolation', 'Tenancy and workload boundaries that hold'], ['Hybrid', 'On-premise, cloud, and everything between'], ['Documented', 'Your team owns the architecture afterwards']],
  },
  {
    id: 'compliance', h: 'Compliance & Digital Risk Engineering',
    p: [
      "Regulation is not paperwork — it's a security architecture requirement with legal consequences. We engineer GDPR compliance into infrastructure: data mapping, lawful-basis-driven access design, retention and deletion that actually executes, breach detection and notification readiness, and processor relationships you can defend.",
      'Beyond GDPR, we align environments to ISO 27001 control families and prepare organisations for audits where the evidence is real, not staged. Our compliance work is built on the same intelligence discipline as the rest of our practice — we verify, document, and make it defensible.',
    ],
    highlight: 'Designed for organisations that need compliance to stand up to a regulator, an auditor, or a courtroom — not just a checkbox exercise before the deadline.',
    tags: ['GDPR', 'ISO 27001', 'Data Mapping', 'DPIA', 'Audit-Ready'],
    metrics: [['Engineered', 'Compliance built into infrastructure, not bolted on'], ['Defensible', 'Evidence and documentation that stand up to scrutiny'], ['Continuous', 'Designed to stay compliant, not pass once']],
  },
  {
    id: 'intelligence', h: 'Threat Intelligence & Digital Investigation',
    p: [
      'Defense without intelligence is guesswork. Our practice grew out of professional open-source intelligence and digital investigation — and that heritage runs through everything. We map how your organisation looks from the attacker\u2019s side: exposed infrastructure, leaked credentials, domain and certificate footprints, and the connections you didn\u2019t know were public.',
      'When something has already happened — a suspicious counterparty, a fraud attempt, an infrastructure anomaly — we investigate. Domain and infrastructure attribution, entity verification, and evidence packages built to a standard that survives scrutiny.',
    ],
    highlight: 'Every finding is source-cited and verified across independent datasets. We distinguish confirmed facts from indicators from open questions — so you know what weight to give each piece.',
    tags: ['OSINT', 'Attack Surface', 'Attribution', 'DNS / WHOIS', 'Evidence Chain'],
    metrics: [["Attacker's view", 'Your exposure mapped from the outside in'], ['50+', 'Intelligence sources cross-referenced per investigation'], ['Defensible', 'Source-cited, verified, tamper-evident findings']],
  },
];

const MODELS = [
  ['ASSESSMENT', 'Security Assessment', 'A fixed-scope, fixed-price review of your network, infrastructure, exposure, or compliance posture. You receive findings, priorities, and a plan — written for decision-makers, backed by evidence.'],
  ['PROJECT', 'Engineering Project', 'Defined outcome, defined timeline. Architecture design, implementation, migration, or hardening — delivered, documented, and handed over so your team owns it.'],
  ['RETAINED', 'Retained Defense', 'Ongoing partnership: monitoring, advisory, intelligence, and an engineering team that already knows your environment when something happens. Priority response included.'],
];

function ServiceCard({ s }) {
  return (
    <div className="svc-card" id={s.id}>
      <div className="svc-body">
        <h3>{s.h}</h3>
        {s.p.map((para, i) => <p key={i}>{para}</p>)}
        <div className="highlight">{s.highlight}</div>
      </div>
      <div className="svc-side">
        <div className="svc-tag-group">
          {s.tags.map(t => <span className="svc-tag" key={t}>{t}</span>)}
        </div>
        {s.metrics.map(([num, label]) => (
          <div className="metric" key={num}><div className="num">{num}</div><div className="label">{label}</div></div>
        ))}
      </div>
    </div>
  );
}

function App() {
  return (
    <div className="site">
      <Nav active="services.html" />
      <PageHero label="Services" title="Engineered defense, <em>end to end</em>">
        Five practice areas, one engineering discipline. Every service below is delivered by people who build and operate these systems — not just write about them.
      </PageHero>
      <div className="banner" style={{ maxWidth: 1080 }}>
        <div className="img" style={{ height: 'auto', aspectRatio: '16 / 9', backgroundImage: 'url(assets/img/cx-globe.jpg)' }}></div>
      </div>
      <div style={{ marginTop: 64 }}><Rule /></div>
      <section className="section">
        <div className="svc-list">
          {SERVICES.map(s => <ServiceCard key={s.id} s={s} />)}
        </div>
      </section>
      <Rule />
      <section className="section">
        <div className="center" style={{ marginBottom: 48 }}>
          <div className="eyebrow brass">Engagement Models</div>
          <div className="s-title">Work with us the way that fits</div>
          <div className="s-desc" style={{ textAlign: 'center' }}>Every organisation is at a different depth. We meet you where you are.</div>
        </div>
        <div className="cap-grid">
          {MODELS.map(([n, h, p]) => (
            <div className="cap" key={n}><div className="cap-n">{n}</div><h3>{h}</h3><p>{p}</p></div>
          ))}
        </div>
      </section>
      <Rule />
      <CTA title="Not sure where to <em>start?</em>"
        actions={<a href="contact.html" className="btn btn-primary">Request a Consultation</a>}
        note="Confidential from first contact · No obligation">
        Most clients begin with an assessment. One conversation, and we'll tell you honestly what's worth doing — and what isn't.
      </CTA>
      <Footer />
    </div>
  );
}

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