/* global React */
// ============================================================================
// Chantier K.6 · Page Conformité publique (?compliance=1)
// ----------------------------------------------------------------------------
// Page accessible sans authentification qui consolide tous les engagements
// de conformité de MELR pour qu'on puisse donner UN SEUL lien à :
//   - un bailleur institutionnel qui veut voir la posture sécurité
//   - un auditeur RGPD / SOC 2
//   - un client final qui se renseigne avant d'ouvrir un compte
//
// Le contenu est en clair, multilingue FR/EN, et fait référence aux
// pages liées :
//   - Status (?status=1) — K.5
//   - Politique Backup/DR — K.4
//   - Pricing (?pricing=1)
//
// Pas de SQL, pas de RPC, pas de RLS — c'est du contenu statique.
// ============================================================================

const { useState: useStateCP } = React;

function CompliancePage({ lang: initialLang }) {
  const [lang, setLang] = useStateCP(initialLang || "fr");
  const T = (fr, en) => (lang === "fr" ? fr : en);

  // K.6 · Coordonnées éditables stockées en BD. Le hook fonctionne sans
  // auth grâce à la RLS SELECT public sur compliance_settings.
  const { data: cs } = window.melr.useComplianceSettings
    ? window.melr.useComplianceSettings()
    : { data: null };

  // Valeurs par défaut si la BD n'a pas encore été seedée (page reste
  // utilisable, juste avec des placeholders).
  const v = cs || {
    responsible_org_name: "REFT Africa",
    responsible_address: "",
    responsible_country: "Sénégal",
    responsible_legal_id: "",
    responsible_phone: "",
    responsible_website: "",
    dpo_name: "",
    dpo_email: "dpo@reft-africa.org",
    dpo_phone: "",
    dpo_address: "",
    security_email: "security@reft-africa.org",
    security_pgp_fingerprint: "",
    security_pgp_key: "",
  };

  return (
    <div style={{ minHeight: "100vh", background: "#f8fafc", color: "#0f172a" }}>
      {/* Header sombre */}
      <div style={{ background: "#0f172a", color: "white", padding: "20px 28px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <img src="/abas-group.png" alt="MELR" style={{ width: 36, height: 36, borderRadius: 6, background: "white", padding: 2, objectFit: "contain" }} />
          <div>
            <div style={{ fontSize: 18, fontWeight: 700 }}>MELR · {T("Conformité & sécurité", "Compliance & security")}</div>
            <div style={{ fontSize: 11.5, color: "#cbd5e1" }}>
              {T("REFT Africa · plateforme MELR", "REFT Africa · MELR platform")}
            </div>
          </div>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <select value={lang} onChange={(e) => setLang(e.target.value)}
            style={{ padding: "4px 8px", borderRadius: 6, border: "1px solid #334155", background: "#1e293b", color: "white", fontSize: 12 }}>
            <option value="fr">FR</option>
            <option value="en">EN</option>
          </select>
          <a href="/MELR" style={{ color: "#cbd5e1", fontSize: 12.5, textDecoration: "none" }}>
            ← {T("Retour à l'application", "Back to app")}
          </a>
        </div>
      </div>

      {/* Hero */}
      <div style={{ background: "linear-gradient(135deg, #1e3a8a, #312e81)", color: "white", padding: "48px 28px" }}>
        <div style={{ maxWidth: 880, margin: "0 auto" }}>
          <div style={{ fontSize: 13, color: "#a5b4fc", fontWeight: 600, marginBottom: 8, letterSpacing: 1 }}>
            {T("CONFORMITÉ · SÉCURITÉ · TRANSPARENCE", "COMPLIANCE · SECURITY · TRANSPARENCY")}
          </div>
          <h1 style={{ fontSize: 36, fontWeight: 800, margin: 0, marginBottom: 12, lineHeight: 1.2 }}>
            {T(
              "MELR respecte vos données et la souveraineté de votre organisation.",
              "MELR respects your data and your organization's sovereignty."
            )}
          </h1>
          <p style={{ fontSize: 16, color: "#c7d2fe", maxWidth: 720, lineHeight: 1.6 }}>
            {T(
              "Cette page consolide nos engagements RGPD, notre politique de sécurité, l'identité de nos sous-traitants techniques, et nos procédures de continuité d'activité. Elle est régulièrement mise à jour et opposable.",
              "This page consolidates our GDPR commitments, our security policy, our technical subprocessors, and our business continuity procedures. It is regularly updated and binding."
            )}
          </p>
          <div style={{ display: "flex", gap: 10, marginTop: 24, flexWrap: "wrap" }}>
            <a href="/MELR?status=1" target="_blank" rel="noopener" style={hero_btn_primary}>
              🟢 {T("Statut en temps réel", "Real-time status")}
            </a>
            <a href="#rgpd" style={hero_btn_secondary}>
              📋 {T("Voir nos engagements RGPD", "See our GDPR commitments")}
            </a>
          </div>
        </div>
      </div>

      <div style={{ maxWidth: 880, margin: "0 auto", padding: "40px 24px" }}>

        {/* SECTION 1 — RGPD */}
        <section id="rgpd" style={section}>
          <h2 style={section_h2}>
            <span style={section_emoji}>🛡️</span>
            {T("1. Conformité RGPD (Règlement Général sur la Protection des Données)",
               "1. GDPR compliance (General Data Protection Regulation)")}
          </h2>
          <p style={section_intro}>
            {T(
              "MELR est conforme aux exigences du RGPD européen et aux législations africaines équivalentes (loi sénégalaise sur la protection des données personnelles n° 2008-12, par exemple). Voici comment chacun des droits prévus par la réglementation est implémenté techniquement dans la plateforme.",
              "MELR complies with the European GDPR and equivalent African data protection laws (e.g., Senegal's Data Protection Act 2008-12). Below is how each statutory right is technically implemented in the platform."
            )}
          </p>

          <table style={tableStyle}>
            <thead>
              <tr style={{ background: "#f1f5f9", textAlign: "left" }}>
                <th style={thStyle}>{T("Droit RGPD", "GDPR Right")}</th>
                <th style={thStyle}>{T("Implémentation MELR", "MELR Implementation")}</th>
              </tr>
            </thead>
            <tbody>
              <tr style={trStyle}>
                <td style={tdStyle}><strong>{T("Art. 15 · Droit d'accès", "Art. 15 · Right of access")}</strong></td>
                <td style={tdStyle}>{T(
                  "Toutes les données personnelles sont visibles depuis le profil utilisateur (Mon profil → données personnelles).",
                  "All personal data is visible from the user profile (My profile → personal data)."
                )}</td>
              </tr>
              <tr style={trStyle}>
                <td style={tdStyle}><strong>{T("Art. 16 · Droit de rectification", "Art. 16 · Right to rectification")}</strong></td>
                <td style={tdStyle}>{T(
                  "L'utilisateur modifie ses informations directement depuis son profil (nom, langue, mot de passe). Pour les organisations, l'administrateur peut corriger les données de ses membres.",
                  "Users edit their information directly from their profile (name, language, password). For organizations, the administrator can update members' data."
                )}</td>
              </tr>
              <tr style={trStyle}>
                <td style={tdStyle}><strong>{T("Art. 17 · Droit à l'effacement (à l'oubli)", "Art. 17 · Right to erasure")}</strong></td>
                <td style={tdStyle}>{T(
                  "Bouton « Demander la suppression de mon compte » dans le profil. La demande est validée par un super-administrateur dans un délai de 30 jours maximum. L'anonymisation est irréversible : email + nom remplacés, accès révoqué, données métier conservées sans lien identifiant.",
                  "« Request account deletion » button in the profile. The request is validated by a super-administrator within 30 days. Anonymization is irreversible: email + name replaced, access revoked, business data preserved without identity link."
                )}</td>
              </tr>
              <tr style={trStyle}>
                <td style={tdStyle}><strong>{T("Art. 18 · Droit à la limitation du traitement", "Art. 18 · Right to restriction")}</strong></td>
                <td style={tdStyle}>{T(
                  "Possibilité de désactiver les notifications email, de retirer le consentement aux modules optionnels, et de demander un blocage temporaire via le DPO.",
                  "Possibility to disable email notifications, withdraw consent for optional modules, and request a temporary block via the DPO."
                )}</td>
              </tr>
              <tr style={trStyle}>
                <td style={tdStyle}><strong>{T("Art. 20 · Droit à la portabilité", "Art. 20 · Right to portability")}</strong></td>
                <td style={tdStyle}>{T(
                  "Bouton « Télécharger mes données personnelles » dans le profil. Génère un export JSON (machine-readable) ou XLSX (multi-onglets human-readable) contenant : profil, organisations, indicateurs saisis, activités, sites, documents, préférences, journal d'audit.",
                  "« Download my personal data » button in the profile. Generates a JSON (machine-readable) or XLSX (multi-tab human-readable) export containing: profile, organizations, indicator values, activities, sites, documents, preferences, audit log."
                )}</td>
              </tr>
              <tr style={trStyle}>
                <td style={tdStyle}><strong>{T("Art. 21 · Droit d'opposition", "Art. 21 · Right to object")}</strong></td>
                <td style={tdStyle}>{T(
                  "Aucun profilage automatisé ni décision exclusivement algorithmique. L'utilisateur peut s'opposer à toute communication marketing depuis ses préférences.",
                  "No automated profiling or solely algorithmic decision-making. Users can object to marketing communications from their preferences."
                )}</td>
              </tr>
              <tr style={trStyle}>
                <td style={tdStyle}><strong>{T("Art. 30 · Registre des traitements", "Art. 30 · Records of processing activities")}</strong></td>
                <td style={tdStyle}>{T(
                  "Journal d'audit complet (table audit_log) immuable, append-only via triggers SECURITY DEFINER. Trace toutes les opérations INSERT/UPDATE/DELETE sur les 15 tables sensibles, avec acteur, horodatage, et diff old/new.",
                  "Complete audit log (audit_log table), immutable, append-only via SECURITY DEFINER triggers. Tracks all INSERT/UPDATE/DELETE operations on 15 sensitive tables, with actor, timestamp, and old/new diff."
                )}</td>
              </tr>
              <tr style={trStyle}>
                <td style={tdStyle}><strong>{T("Art. 32 · Sécurité du traitement", "Art. 32 · Security of processing")}</strong></td>
                <td style={tdStyle}>{T(
                  "Chiffrement at-rest (Supabase) et in-transit (TLS 1.3), authentification multi-facteurs (2FA TOTP optionnelle, forçable AAL2), Row-Level Security PostgreSQL pour l'isolation multi-tenant, rotation annuelle des secrets.",
                  "Encryption at-rest (Supabase) and in-transit (TLS 1.3), multi-factor authentication (optional TOTP 2FA, AAL2 enforceable), PostgreSQL Row-Level Security for multi-tenant isolation, annual secret rotation."
                )}</td>
              </tr>
              <tr style={trStyle}>
                <td style={tdStyle}><strong>{T("Art. 33 · Notification de violation", "Art. 33 · Breach notification")}</strong></td>
                <td style={tdStyle}>{T(
                  "Procédure formalisée de notification CNIL sous 72 heures. Communication aux utilisateurs impactés si risque élevé. Détaillée dans la Politique Backup & DR.",
                  "Formalized 72-hour CNIL notification procedure. Communication to affected users in case of high risk. Detailed in the Backup & DR Policy."
                )}</td>
              </tr>
            </tbody>
          </table>
        </section>

        {/* SECTION 2 — Hébergement & sous-traitants */}
        <section style={section}>
          <h2 style={section_h2}>
            <span style={section_emoji}>🌍</span>
            {T("2. Hébergement & sous-traitants techniques", "2. Hosting & technical subprocessors")}
          </h2>
          <p style={section_intro}>
            {T(
              "MELR est hébergé sur des infrastructures cloud reconnues. Voici la liste exhaustive des sous-traitants techniques avec lesquels nous travaillons.",
              "MELR is hosted on recognized cloud infrastructures. Below is the full list of technical subprocessors we work with."
            )}
          </p>

          <table style={tableStyle}>
            <thead>
              <tr style={{ background: "#f1f5f9", textAlign: "left" }}>
                <th style={thStyle}>{T("Sous-traitant", "Subprocessor")}</th>
                <th style={thStyle}>{T("Rôle", "Role")}</th>
                <th style={thStyle}>{T("Localisation", "Location")}</th>
                <th style={thStyle}>{T("Conformité", "Compliance")}</th>
              </tr>
            </thead>
            <tbody>
              <tr style={trStyle}>
                <td style={tdStyle}><strong>Supabase</strong></td>
                <td style={tdStyle}>{T("Base PostgreSQL, Storage, Auth, Edge Functions", "PostgreSQL DB, Storage, Auth, Edge Functions")}</td>
                <td style={tdStyle}>{T("UE (Francfort) par défaut. Configurable.", "EU (Frankfurt) default. Configurable.")}</td>
                <td style={tdStyle}>SOC 2 Type II, GDPR DPA</td>
              </tr>
              <tr style={trStyle}>
                <td style={tdStyle}><strong>Cloudflare Pages</strong></td>
                <td style={tdStyle}>{T("Hébergement de l'application web, CDN, DNS", "Web app hosting, CDN, DNS")}</td>
                <td style={tdStyle}>{T("Global (CDN multi-régions)", "Global (multi-region CDN)")}</td>
                <td style={tdStyle}>SOC 2 Type II, GDPR DPA, ISO 27001</td>
              </tr>
              <tr style={trStyle}>
                <td style={tdStyle}><strong>Stripe</strong></td>
                <td style={tdStyle}>{T("Traitement des paiements en ligne (cartes bancaires)", "Online payment processing (credit cards)")}</td>
                <td style={tdStyle}>{T("UE + États-Unis", "EU + United States")}</td>
                <td style={tdStyle}>PCI DSS Level 1, SOC 2, GDPR DPA</td>
              </tr>
              <tr style={trStyle}>
                <td style={tdStyle}><strong>Resend</strong></td>
                <td style={tdStyle}>{T("Envoi des emails transactionnels (invitations, digest, factures)", "Transactional emails (invitations, digest, invoices)")}</td>
                <td style={tdStyle}>{T("États-Unis (DPA standard)", "United States (standard DPA)")}</td>
                <td style={tdStyle}>GDPR DPA, SOC 2</td>
              </tr>
              <tr style={trStyle}>
                <td style={tdStyle}><strong>GitHub</strong></td>
                <td style={tdStyle}>{T("Hébergement du code source", "Source code hosting")}</td>
                <td style={tdStyle}>{T("États-Unis", "United States")}</td>
                <td style={tdStyle}>SOC 2 Type II, ISO 27001, GDPR DPA</td>
              </tr>
            </tbody>
          </table>

          <div style={noteBox}>
            {T(
              "🌍 Souveraineté : pour les clients institutionnels (ministères, agences publiques) qui exigent une localisation 100 % nationale ou régionale, MELR peut être déployé sur une instance Supabase Enterprise dédiée dans une autre région ou en self-hosted sur l'infrastructure du client. Contactez-nous pour évaluer cette option.",
              "🌍 Sovereignty: for institutional clients (ministries, public agencies) requiring 100% national or regional hosting, MELR can be deployed on a dedicated Supabase Enterprise instance in another region or self-hosted on the client's infrastructure. Contact us to discuss this option."
            )}
          </div>
        </section>

        {/* SECTION 3 — Sécurité technique */}
        <section style={section}>
          <h2 style={section_h2}>
            <span style={section_emoji}>🔐</span>
            {T("3. Sécurité technique", "3. Technical security")}
          </h2>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
            <div style={card}>
              <div style={card_title}>{T("Chiffrement", "Encryption")}</div>
              <ul style={card_ul}>
                <li>{T("Données au repos : AES-256 (chiffrement Supabase Storage + PostgreSQL)", "At-rest: AES-256 (Supabase Storage + PostgreSQL)")}</li>
                <li>{T("Données en transit : TLS 1.3 obligatoire", "In-transit: TLS 1.3 mandatory")}</li>
                <li>{T("Mots de passe : Argon2id (Supabase Auth)", "Passwords: Argon2id (Supabase Auth)")}</li>
              </ul>
            </div>
            <div style={card}>
              <div style={card_title}>{T("Authentification", "Authentication")}</div>
              <ul style={card_ul}>
                <li>{T("2FA TOTP (Google Authenticator, Authy, 1Password) optionnelle", "TOTP 2FA (Google Authenticator, Authy, 1Password) optional")}</li>
                <li>{T("AAL2 forçable pour les comptes super-admin", "AAL2 enforceable for super-admin accounts")}</li>
                <li>{T("Sessions JWT, durée configurable", "JWT sessions, configurable duration")}</li>
              </ul>
            </div>
            <div style={card}>
              <div style={card_title}>{T("Isolation multi-tenant", "Multi-tenant isolation")}</div>
              <ul style={card_ul}>
                <li>{T("Row-Level Security PostgreSQL sur 100 % des tables sensibles", "PostgreSQL Row-Level Security on 100% of sensitive tables")}</li>
                <li>{T("Aucune donnée traversée entre organisations", "Zero data leakage between organizations")}</li>
                <li>{T("Tests automatisés des policies RLS", "Automated RLS policy tests")}</li>
              </ul>
            </div>
            <div style={card}>
              <div style={card_title}>{T("Traçabilité", "Traceability")}</div>
              <ul style={card_ul}>
                <li>{T("Audit log immuable (append-only) sur 15 tables sensibles", "Immutable audit log (append-only) on 15 sensitive tables")}</li>
                <li>{T("Diff old/new pour chaque opération UPDATE", "Old/new diff for every UPDATE operation")}</li>
                <li>{T("Rétention configurable", "Configurable retention")}</li>
              </ul>
            </div>
            <div style={card}>
              <div style={card_title}>{T("Sauvegardes & PITR", "Backups & PITR")}</div>
              <ul style={card_ul}>
                <li>{T("Sauvegardes quotidiennes automatiques", "Automated daily backups")}</li>
                <li>{T("Point-in-Time Recovery (PITR) sur 7-30 jours selon plan", "PITR over 7-30 days depending on plan")}</li>
                <li>{T("RPO ≤ 1 h, RTO ≤ 4 h (critique)", "RPO ≤ 1 h, RTO ≤ 4 h (critical)")}</li>
              </ul>
            </div>
            <div style={card}>
              <div style={card_title}>{T("Monitoring", "Monitoring")}</div>
              <ul style={card_ul}>
                <li>{T("Suivi des erreurs côté client (table client_errors)", "Client-side error tracking (client_errors table)")}</li>
                <li>{T("Status page publique en temps réel", "Public real-time status page")}</li>
                <li>{T("Notifications par email aux utilisateurs", "Email notifications to users")}</li>
              </ul>
            </div>
          </div>
        </section>

        {/* SECTION 4 — Continuité */}
        <section style={section}>
          <h2 style={section_h2}>
            <span style={section_emoji}>🔄</span>
            {T("4. Continuité d'activité & reprise après désastre",
               "4. Business continuity & disaster recovery")}
          </h2>
          <p style={section_intro}>
            {T(
              "Nous maintenons une politique formelle de continuité et de reprise après désastre, testée trimestriellement. Le document complet est disponible sur demande pour les clients institutionnels et les auditeurs.",
              "We maintain a formal business continuity and disaster recovery policy, tested quarterly. The full document is available on request to institutional clients and auditors."
            )}
          </p>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14, marginTop: 16 }}>
            <div style={kpi_card}>
              <div style={kpi_value}>≤ 1 h</div>
              <div style={kpi_label}>{T("RPO (perte max de données)", "RPO (max data loss)")}</div>
            </div>
            <div style={kpi_card}>
              <div style={kpi_value}>≤ 4 h</div>
              <div style={kpi_label}>{T("RTO incident critique", "RTO critical incident")}</div>
            </div>
            <div style={kpi_card}>
              <div style={kpi_value}>72 h</div>
              <div style={kpi_label}>{T("Notification CNIL max", "Max CNIL notification")}</div>
            </div>
          </div>
          <div style={{ ...noteBox, marginTop: 18 }}>
            {T("📄 La politique complète est consultable sur GitHub : ", "📄 Full policy available on GitHub: ")}
            <a href="https://github.com/baitirndoye/MERL-App/blob/main/docs/BACKUP-DR-POLICY.md"
               target="_blank" rel="noopener" style={inlineLink}>
              docs/BACKUP-DR-POLICY.md
            </a>
          </div>
        </section>

        {/* SECTION 5 — Statut en temps réel */}
        <section style={section}>
          <h2 style={section_h2}>
            <span style={section_emoji}>📡</span>
            {T("5. État du service en temps réel", "5. Real-time service status")}
          </h2>
          <p style={section_intro}>
            {T(
              "Nous publions en continu l'état de chaque composant de la plateforme (base de données, stockage, application web, fonctions edge) ainsi que l'historique des incidents sur 90 jours.",
              "We continuously publish the status of each platform component (database, storage, web app, edge functions) along with a 90-day incident history."
            )}
          </p>
          <a href="/MELR?status=1" target="_blank" rel="noopener" style={{ ...hero_btn_primary, background: "#16a34a", border: "1px solid #15803d", color: "white", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 8 }}>
            🟢 {T("Consulter la status page", "View the status page")}
          </a>
        </section>

        {/* SECTION 6 — Responsable de traitement + DPO + Sécurité */}
        <section style={section}>
          <h2 style={section_h2}>
            <span style={section_emoji}>📧</span>
            {T("6. Responsable de traitement, DPO & contacts",
               "6. Data controller, DPO & contacts")}
          </h2>
          <p style={section_intro}>
            {T(
              "Pour toute question relative à la protection de vos données, à l'exercice de vos droits ou à un incident de sécurité, voici les coordonnées officielles.",
              "For any question regarding data protection, exercising your rights, or a security incident, here are the official contact details."
            )}
          </p>

          {/* Responsable de traitement (RGPD Article 13) */}
          <div style={{ ...card, marginTop: 14, background: "#eff6ff", borderColor: "#bfdbfe" }}>
            <div style={card_title}>{T("Responsable de traitement (RGPD Art. 13)", "Data controller (GDPR Art. 13)")}</div>
            <div style={contact_field}><strong>{T("Organisation :", "Organization:")}</strong> {v.responsible_org_name || "—"}</div>
            {v.responsible_address && (
              <div style={contact_field}>
                <strong>{T("Adresse :", "Address:")}</strong>{" "}
                <span style={{ whiteSpace: "pre-line" }}>{v.responsible_address}</span>
                {v.responsible_country && <>, {v.responsible_country}</>}
              </div>
            )}
            {v.responsible_legal_id && (
              <div style={contact_field}>
                <strong>{T("Identifiants légaux :", "Legal IDs:")}</strong>
                <div style={{ whiteSpace: "pre-line", marginTop: 4, paddingLeft: 14, fontFamily: "ui-monospace, SFMono-Regular, monospace", fontSize: 12.5, color: "#334155" }}>
                  {v.responsible_legal_id}
                </div>
              </div>
            )}
            {v.responsible_phone && (
              <div style={contact_field}><strong>{T("Téléphone :", "Phone:")}</strong> {v.responsible_phone}</div>
            )}
            {v.responsible_website && (
              <div style={contact_field}>
                <strong>{T("Site web :", "Website:")}</strong>{" "}
                <a href={v.responsible_website} target="_blank" rel="noopener" style={inlineLink}>{v.responsible_website}</a>
              </div>
            )}
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginTop: 14 }}>
            <div style={card}>
              <div style={card_title}>{T("DPO (Délégué à la Protection des Données)", "DPO (Data Protection Officer)")}</div>
              <div style={contact_field}>
                <strong>{T("Nom :", "Name:")}</strong>{" "}
                {v.dpo_name
                  ? v.dpo_name
                  : <span style={{ color: "#94a3b8" }}>{T("(à compléter)", "(to be completed)")}</span>}
              </div>
              <div style={contact_field}>
                <strong>{T("Email :", "Email:")}</strong>{" "}
                <a href={`mailto:${v.dpo_email || "dpo@reft-africa.org"}`} style={inlineLink}>{v.dpo_email || "dpo@reft-africa.org"}</a>
              </div>
              {v.dpo_phone && (
                <div style={contact_field}>
                  <strong>{T("Téléphone / WhatsApp :", "Phone / WhatsApp:")}</strong>{" "}
                  <a href={`tel:${v.dpo_phone.replace(/\s/g, "")}`} style={inlineLink}>{v.dpo_phone}</a>
                </div>
              )}
              {v.dpo_address && (
                <div style={contact_field}>
                  <strong>{T("Adresse :", "Address:")}</strong>{" "}
                  <span style={{ whiteSpace: "pre-line" }}>{v.dpo_address}</span>
                </div>
              )}
              <div style={contact_field}>
                <strong>{T("Délai de réponse :", "Response time:")}</strong> {T("≤ 30 jours (engagement RGPD)", "≤ 30 days (GDPR commitment)")}
              </div>
            </div>
            <div style={card}>
              <div style={card_title}>{T("Équipe sécurité (incidents)", "Security team (incidents)")}</div>
              <div style={contact_field}>
                <strong>{T("Email :", "Email:")}</strong>{" "}
                <a href={`mailto:${v.security_email || "security@reft-africa.org"}`} style={inlineLink}>{v.security_email || "security@reft-africa.org"}</a>
              </div>
              {v.security_pgp_fingerprint && (
                <div style={contact_field}>
                  <strong>{T("Empreinte PGP :", "PGP fingerprint:")}</strong>{" "}
                  <code style={{ fontSize: 11, background: "#f1f5f9", padding: "1px 4px", borderRadius: 3 }}>
                    {v.security_pgp_fingerprint}
                  </code>
                </div>
              )}
              {v.security_pgp_key ? (
                <details style={{ marginTop: 6 }}>
                  <summary style={{ cursor: "pointer", fontSize: 12, color: "#2563eb" }}>
                    {T("Afficher la clé PGP publique", "Show public PGP key")}
                  </summary>
                  <pre style={{
                    background: "#0f172a", color: "#e2e8f0", padding: 10,
                    borderRadius: 4, marginTop: 6, fontSize: 10,
                    fontFamily: "ui-monospace, monospace",
                    overflow: "auto", maxHeight: 260, whiteSpace: "pre",
                  }}>{v.security_pgp_key}</pre>
                </details>
              ) : (
                <div style={contact_field}>
                  <strong>{T("PGP key :", "PGP key:")}</strong>{" "}
                  <span style={{ color: "#94a3b8" }}>{T("(à publier — disponible sur demande)", "(to publish — available on request)")}</span>
                </div>
              )}
              <div style={contact_field}>
                <strong>{T("Délai de réponse :", "Response time:")}</strong> {T("≤ 24 h (incidents)", "≤ 24 h (incidents)")}
              </div>
            </div>
          </div>

          <div style={{ ...noteBox, background: "#fef3c7", borderColor: "#fde68a", color: "#92400e", marginTop: 18 }}>
            <strong>{T("Bug bounty / divulgation responsable :", "Bug bounty / responsible disclosure:")}</strong>{" "}
            {T(
              "si vous avez identifié une vulnérabilité de sécurité, merci de la signaler à security@reft-africa.org plutôt que publiquement. Nous nous engageons à accuser réception sous 24h et à corriger les failles critiques dans les 7 jours.",
              "if you've identified a security vulnerability, please report it to security@reft-africa.org rather than publicly. We commit to acknowledging within 24h and patching critical issues within 7 days."
            )}
          </div>
        </section>

        {/* Footer */}
        <div style={{ textAlign: "center", padding: "32px 0 20px", color: "#94a3b8", fontSize: 12 }}>
          <div style={{ marginBottom: 8 }}>
            MELR · REFT Africa · {T("Plateforme de Monitoring, Évaluation, Reporting & Apprentissage",
                                     "Monitoring, Evaluation, Reporting & Learning platform")}
          </div>
          <div>
            {T("Dernière révision :", "Last revised:")} 26 mai 2026 ·{" "}
            <a href="/MELR" style={inlineLink}>{T("Accéder à l'application", "Go to app")}</a> ·{" "}
            <a href="/MELR?pricing=1" style={inlineLink}>{T("Tarifs", "Pricing")}</a> ·{" "}
            <a href="/MELR?status=1" style={inlineLink}>{T("Statut", "Status")}</a>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Styles inline (cohérents avec PricingPage et StatusPage)
// ─────────────────────────────────────────────────────────────────────────────
const section = { background: "white", borderRadius: 12, padding: 24, marginBottom: 24, boxShadow: "0 1px 3px rgba(0,0,0,0.06)" };
const section_h2 = { fontSize: 22, fontWeight: 700, color: "#0f172a", margin: 0, marginBottom: 8, display: "flex", alignItems: "center", gap: 10 };
const section_emoji = { fontSize: 22 };
const section_intro = { fontSize: 14, color: "#475569", lineHeight: 1.6, margin: "8px 0 18px" };

const tableStyle = { width: "100%", borderCollapse: "collapse", marginTop: 8, fontSize: 13.5 };
const thStyle = { padding: "10px 12px", fontSize: 12, fontWeight: 600, color: "#475569", borderBottom: "1px solid #e2e8f0" };
const tdStyle = { padding: "12px", fontSize: 13, color: "#334155", verticalAlign: "top", lineHeight: 1.5 };
const trStyle = { borderBottom: "1px solid #f1f5f9" };

const card = { background: "#f8fafc", border: "1px solid #e2e8f0", borderRadius: 8, padding: 16 };
const card_title = { fontWeight: 600, fontSize: 14, color: "#0f172a", marginBottom: 8 };
const card_ul = { paddingLeft: 18, margin: 0, fontSize: 12.5, color: "#475569", lineHeight: 1.6 };

const kpi_card = { background: "linear-gradient(135deg, #6366f1, #4338ca)", color: "white", padding: 20, borderRadius: 10, textAlign: "center" };
const kpi_value = { fontSize: 32, fontWeight: 800, marginBottom: 6 };
const kpi_label = { fontSize: 12, opacity: 0.85 };

const noteBox = { background: "#dbeafe", border: "1px solid #93c5fd", color: "#1e40af", padding: 14, borderRadius: 8, fontSize: 13, lineHeight: 1.6, marginTop: 12 };
const inlineLink = { color: "#2563eb", textDecoration: "underline" };

const contact_field = { fontSize: 13, color: "#334155", marginTop: 6, lineHeight: 1.5 };

const hero_btn_primary = { padding: "10px 18px", borderRadius: 8, border: "1px solid white", background: "white", color: "#1e3a8a", fontWeight: 600, fontSize: 14, textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 6 };
const hero_btn_secondary = { padding: "10px 18px", borderRadius: 8, border: "1px solid #a5b4fc", background: "transparent", color: "white", fontWeight: 600, fontSize: 14, textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 6 };

window.CompliancePage = CompliancePage;