// ============================================================
// TRUST CENTER · compliance + legal hub
// Static content. No data file — all sections defined inline.
// ============================================================

const TRUST_CERTS = [
  {
    name: 'ISO 27001',
    status: 'In voorbereiding',
    desc: 'Internationale standaard voor informatiebeveiliging. We bouwen ons ISMS in lijn met de norm en zijn dit jaar in voorbereiding op certificering.',
  },
  {
    name: 'GDPR (AVG)',
    status: 'Compliant',
    desc: 'Volledig in lijn met de Algemene Verordening Gegevensbescherming. Verwerkersovereenkomsten beschikbaar op aanvraag, DPIA bij elke nieuwe agent.',
  },
  {
    name: 'EU AI Act',
    status: 'Compliant',
    desc: 'Onze agents worden ontwikkeld in lijn met de risicocategorisering en transparantie-eisen van de EU AI Act. We helpen klanten met use-case classificatie.',
  },
];

const TRUST_DOCS = [
  {
    name: 'Algemene voorwaarden',
    desc: 'Onze juridische voorwaarden voor opdrachten, leveringen en samenwerking.',
    href: '/algemene-voorwaarden',
    fileLabel: 'Download (.pdf)',
  },
  {
    name: 'Verwerkersovereenkomst',
    desc: 'Standaard verwerkersovereenkomst voor klanten van wie wij persoonsgegevens verwerken namens hen — rollen, plichten en waarborgen onder de AVG.',
    href: '/verwerkersovereenkomst',
    fileLabel: 'Download (.pdf)',
  },
  {
    name: 'Subverwerkers',
    desc: 'Overzicht van de subverwerkers die we inschakelen bij de uitvoering van onze diensten — wie, waar, en waarvoor.',
    href: '/subverwerkers',
    fileLabel: 'Download (.pdf)',
  },
  {
    name: 'Fair use policy',
    desc: 'Hoe we omgaan met data en API-gebruik bij onze agents. Eerlijk, transparant, geen verrassingen.',
    href: '/fair-use-policy',
    fileLabel: 'Download (.pdf)',
  },
];

function TrustHero() {
  return (
    <section className="trust-hero">
      <div className="trust-hero-inner">
        <div className="chip">
          <span className="dot"></span>
          Security · Privacy · Compliance
        </div>
        <h1>
          <span className="grad">Trust</span> Center
        </h1>
        <p className="trust-hero-lede">
          Hoe wij omgaan met security, privacy en juridische voorwaarden.
          Geen black box · alles staat op deze pagina.
        </p>
      </div>
    </section>
  );
}

function TrustCertCard({ cert }) {
  const statusClass = 'trust-cert-status status-' + cert.status.toLowerCase().replace(/\s+/g, '-');
  return (
    <article className="trust-cert-card">
      <div className="trust-cert-head">
        <h3>{cert.name}</h3>
        <span className={statusClass}>{cert.status}</span>
      </div>
      <p>{cert.desc}</p>
    </article>
  );
}

function TrustDocCard({ doc }) {
  return (
    <article className="trust-doc-card">
      <div className="trust-doc-body">
        <h3>{doc.name}</h3>
        <p>{doc.desc}</p>
      </div>
      <a className="trust-doc-link" href={doc.href} download>
        {doc.fileLabel}
        <span className="arr" aria-hidden="true">↓</span>
      </a>
    </article>
  );
}

function TrustApp() {
  return (
    <React.Fragment>
      <HmTopribbon activeLabel="Trust Center" homePrefix="/" />
      <TrustHero />

      <section className="trust-section">
        <div className="trust-section-inner">
          <div className="eyebrow-big"><span className="bar"></span>Certificeringen &amp; standaarden</div>
          <h2>Hoe we omgaan met security en compliance.</h2>
          <div className="trust-cert-grid">
            {TRUST_CERTS.map(c => <TrustCertCard key={c.name} cert={c} />)}
          </div>
        </div>
      </section>

      <section className="trust-section trust-section-docs">
        <div className="trust-section-inner">
          <div className="eyebrow-big"><span className="bar"></span>Documenten</div>
          <h2>Juridische voorwaarden en policies.</h2>
          <div className="trust-doc-grid">
            {TRUST_DOCS.map(d => <TrustDocCard key={d.name} doc={d} />)}
          </div>
        </div>
      </section>

      <HmContact
        eyebrow="Vragen?"
        title="Mis je iets, of wil je meer weten?"
        subtitle="Plan een gesprek of mail het security team."
      />
      <HmFooter />
    </React.Fragment>
  );
}

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