/* CX Defense — Privacy Policy (representative; GDPR-aligned, full text in production) */
const { Nav, Rule, PageHero, CTA, Footer } = window;

const SECTIONS = [
  ['Who we are', 'CX Defense is a remote-first cybersecurity engineering practice. For enquiries and engagement data, CX Defense acts as data controller; within client engagements it typically acts as data processor under the client\u2019s instructions and a data processing agreement.'],
  ['What we collect', 'Enquiry data you provide (name, email, organisation, message). Engagement data strictly necessary to deliver the service, handled under contract. Minimal technical logs required to operate and secure our own systems. We do not run advertising or third-party tracking.'],
  ['Lawful basis', 'We process enquiry data on the basis of legitimate interest in responding to you and, where applicable, steps to enter a contract. Engagement data is processed to perform our contract with you and to meet legal obligations.'],
  ['Retention & deletion', 'We keep personal data only as long as necessary for the purpose collected, then delete it on a defined schedule. Deletion is engineered as a system behaviour — scheduled, verified, and provable — not a policy that lives only on paper.'],
  ['How we protect it', 'All data is encrypted in transit and at rest, access-controlled to least privilege, and logged. We apply the same zero-trust discipline to our own environment that we engineer for clients.'],
  ['Your rights', 'Under GDPR you may request access, rectification, erasure, restriction, portability, and objection. To exercise any right, contact us and we will respond within the statutory period.'],
  ['Contact', 'Privacy enquiries: privacy@cxdefense.com. We respond to good-faith requests with respect and urgency.'],
];

function App() {
  return (
    <div className="site">
      <Nav />
      <PageHero label="Legal" title="Privacy <em>Policy</em>">
        How CX Defense collects, uses, and protects personal data — aligned to GDPR. A representative summary; the binding policy is published with the production site.
      </PageHero>
      <Rule />
      <div className="prose">
        <p style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-faint)', letterSpacing: '0.05em', marginBottom: 8 }}>Last updated · June 2026</p>
        {SECTIONS.map(([h, p]) => (
          <div key={h}>
            <h2 style={{ fontSize: 24 }}>{h}</h2>
            <p>{p}</p>
          </div>
        ))}
        <div className="aside">This page is a brand-system representation. Before going live, insert the registered legal entity, supervisory authority, and full GDPR clause set (see the production codebase, privacy.html).</div>
      </div>
      <Rule />
      <CTA title="A privacy question we didn't <em>cover?</em>"
        actions={<a href="contact.html" className="btn btn-primary">Contact Us</a>}>
        Write to privacy@cxdefense.com and a person — not an autoresponder — will reply.
      </CTA>
      <Footer />
    </div>
  );
}

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