/* CX Defense — Home page content. Uses shared chrome from window (chrome.jsx).
   In production these sections compose the DS primitives from
   window.CXDefenseDesignSystem_*. */

const { Nav, Rule, Footer } = window;

function Hero() {
  return (
    <div className="hero-wrap" id="top">
      <div className="hero-img"></div>
      <div className="hero">
        <div className="hero-label">Cybersecurity Engineering · Remote-First · Worldwide</div>
        <h1>Security that holds when everything else is <em>under pressure</em></h1>
        <p className="hero-sub">CX Defense designs, builds, and defends secure digital infrastructure — networks, data, applications, and the people who depend on them.</p>
        <p className="hero-detail">From network architecture and traffic analysis to data protection, compliance, and threat intelligence — we work where the depth matters. Quietly, precisely, and to a standard most never see.</p>
        <a href="contact.html" className="btn btn-primary">Request a Consultation</a>
        <div className="hero-meta">
          <span><b>Network</b> defense</span>
          <span><b>Data</b> protection</span>
          <span><b>Compliance</b> engineering</span>
          <span><b>Threat</b> intelligence</span>
        </div>
      </div>
    </div>
  );
}

const CAPS = [
  ['01', 'Network Security Engineering', 'Firewall architecture, segmentation, VPN and zero-trust access, encrypted transport, and deep traffic analysis. We design networks that assume hostility — and stay calm under it.'],
  ['02', 'Data & Application Protection', 'Web application hardening, encryption at rest and in transit, secure virtualization, and infrastructure built so a single failure never becomes a breach.'],
  ['03', 'Compliance & Threat Intelligence', 'GDPR and regulatory compliance engineering, digital risk assessment, and intelligence-led investigation of the threats that actually face your organisation.'],
];

function Disciplines() {
  return (
    <section className="section" id="disciplines">
      <div className="center" style={{ marginBottom: 8 }}>
        <div className="eyebrow brass">What We Do</div>
        <div className="s-title">Three disciplines. One <em>standard.</em></div>
      </div>
      <div className="svc-intro">
        <p><span className="accent">We engineered our practice so the layers never lose sight of each other.</span> Network defense, data protection, and intelligence are not separate problems — they are the same problem viewed from different depths.</p>
      </div>
      <div className="cap-grid">
        {CAPS.map(([n, title, body]) => (
          <div className="cap" key={n}>
            <div className="cap-n">{n}</div>
            <h3>{title}</h3>
            <p>{body}</p>
          </div>
        ))}
      </div>
      <div style={{ textAlign: 'center', marginTop: 48 }}>
        <a href="services.html" className="btn btn-secondary">Explore All Services</a>
      </div>
    </section>
  );
}

function Split({ id, img, flip, eyebrow, title, paras, cta, href }) {
  const image = <div className="img" style={{ backgroundImage: `url(${img})` }}></div>;
  const text = (
    <div className="col-text">
      <div className="eyebrow">{eyebrow}</div>
      <h2 dangerouslySetInnerHTML={{ __html: title }}></h2>
      {paras.map((p, i) => <p key={i}>{p}</p>)}
      <a href={href} className="btn btn-ghost">{cta} <span aria-hidden="true">→</span></a>
    </div>
  );
  return (
    <section className="section" id={id}>
      <div className="split">
        {flip ? <>{text}{image}</> : <>{image}{text}</>}
      </div>
    </section>
  );
}

const PROC = [
  ['I', 'Brief', 'Tell us what you run, what worries you, and what a good outcome looks like. One conversation is usually enough to scope it.'],
  ['II', 'Assess', 'We map your architecture, traffic, data flows, and exposure — and tell you plainly what we find, including what is already fine.'],
  ['III', 'Engineer', 'We design and implement the fix: architecture, configuration, hardening, controls. Documented so your team owns it afterwards.'],
  ['IV', 'Defend', 'Ongoing monitoring, intelligence, and advisory if you want it — or a clean handover if you do not. Either way, you are stronger.'],
];

function Process() {
  return (
    <section className="section" id="approach">
      <div className="center" style={{ marginBottom: 56 }}>
        <div className="eyebrow brass">Approach</div>
        <div className="s-title">How an engagement works</div>
        <div className="s-desc" style={{ textAlign: 'center' }}>No bloated discovery phases. No software you didn't ask for. No meetings without a purpose.</div>
      </div>
      <div className="process-row">
        {PROC.map(([n, title, body]) => (
          <div className="proc" key={n}>
            <div className="proc-n">{n}</div>
            <h3>{title}</h3>
            <p>{body}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

const FACTS = [
  ['Defense in depth', 'Network, data, application, and human layers engineered together'],
  ['Zero trust', 'Architecture principles applied to every engagement — including our own'],
  ['GDPR & beyond', 'Compliance engineered into infrastructure, not bolted on'],
  ['Remote-first', 'Senior engineering talent, delivered worldwide'],
];

function Why() {
  return (
    <section className="section" id="why">
      <div className="why">
        <div className="why-text">
          <div className="eyebrow brass" style={{ marginBottom: 22 }}>Why CX Defense</div>
          <h3>Engineers first, consultants second</h3>
          <p>We don't sell reports that describe problems — we build the systems that remove them. Every recommendation we make is one we're prepared to implement, configure, and stand behind in production.</p>
          <h3>Depth over breadth</h3>
          <p>We deliberately keep our practice narrow: networks, data protection, compliance, and intelligence. Within that territory, we go deeper than generalist firms can — because that's all we do.</p>
          <h3>Intelligence in the blood</h3>
          <p>Our roots are in digital investigation and OSINT. We've studied how attackers find their targets, so the defenses we build start from how you actually look from the outside.</p>
        </div>
        <div className="why-facts">
          {FACTS.map(([num, label]) => (
            <div className="why-fact" key={num}>
              <div className="num">{num}</div>
              <div className="label">{label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const POSTS = [
  ['Network Security · June 2026', 'Zero trust is an architecture, not a product you can buy', 'Trust isn\u2019t removed by a licence key — it\u2019s removed by design decisions: segmentation that assumes breach, identity at every boundary, access that expires.', '8 min read · Essay'],
  ['Compliance · May 2026', 'GDPR in production: retention policies that actually delete', 'Most retention policies live in a PDF while the data lives forever. Engineering deletion as a system behaviour is what regulators actually accept.', '6 min read · Field Note'],
  ['Intelligence · May 2026', 'Your attack surface is what the attacker sees', 'Asset registers describe the network you think you have. Reconnaissance reveals the one you actually expose — and the gap is where defense begins.', '7 min read · Field Note'],
];

function Insights() {
  return (
    <section className="section" id="insights">
      <div className="center" style={{ marginBottom: 8 }}>
        <div className="eyebrow brass">Insights</div>
        <div className="s-title">Notes from the <em>practice</em></div>
        <div className="s-desc" style={{ textAlign: 'center' }}>What we learn building and defending real infrastructure — written plainly, without vendor noise.</div>
      </div>
      <div className="post-grid" style={{ marginTop: 40 }}>
        {POSTS.map(([meta, title, body, foot]) => (
          <a className="post" href="insights.html" key={title}>
            <div className="post-meta">{meta}</div>
            <h3>{title}</h3>
            <p>{body}</p>
            <div className="post-foot">{foot}</div>
          </a>
        ))}
      </div>
      <div style={{ textAlign: 'center', marginTop: 48 }}>
        <a href="insights.html" className="btn btn-secondary">All Insights</a>
      </div>
    </section>
  );
}

function HomeCTA() {
  return (
    <div className="cta-block" id="contact">
      <div className="eyebrow brass">Start a conversation</div>
      <h2>The ocean is deep. <em>So are we.</em></h2>
      <p>Tell us what you're protecting and what keeps you up at night. Every conversation is confidential from the first message.</p>
      <a href="contact.html" className="btn btn-primary">Request a Consultation</a>
      <div className="cta-note">Secure contact · No obligation · Confidential</div>
    </div>
  );
}

function App() {
  return (
    <div className="site">
      <Nav active="index.html" />
      <Hero />
      <Rule />
      <Disciplines />
      <Rule />
      <Split id="network" img="assets/img/network-globe.png" href="services.html"
        eyebrow="Network Defense"
        title="The network is the <em>terrain.</em> We know it by heart."
        paras={[
          'Every attack travels across a network before it reaches anything you care about. That makes the network the first — and best — place to win. Our engineers design perimeter and internal architectures that contain compromise by construction.',
          'Segmented zones, least-privilege access, encrypted tunnels, and traffic visibility deep enough to see what others miss — reasoned about end to end, not installed as products.',
        ]}
        cta="Network Security Services" />
      <Rule />
      <Split id="ops" img="assets/img/ops-room.png" flip href="about.html"
        eyebrow="Operations"
        title="Built remote. Run with <em>discipline.</em>"
        paras={[
          'CX Defense operates as a distributed engineering team. That isn\u2019t a compromise — it\u2019s a design decision. Our own operations run on the same zero-trust principles we build for clients.',
          'You get senior engineers without geography deciding who works on your infrastructure. Engagements run on clear scopes, documented decisions, and communication that respects your time.',
        ]}
        cta="How We Work" />
      <Rule />
      <Process />
      <Rule />
      <Why />
      <Rule />
      <Insights />
      <Rule />
      <HomeCTA />
      <Footer />
    </div>
  );
}

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