/* Pages légales du site Naboo — Mentions légales, Confidentialité (RGPD),
   Conditions générales (CGU/CGV) et Cookies. Une seule vue partagée : la page
   affichée est choisie par window.__legalPage (défini dans chaque .html).
   Les informations réglementaires encore en attente (ORIAS, statut, médiateur)
   sont signalées « à compléter » et centralisées dans LEGAL (site-common.jsx). */
const { Button, Card, Badge, Icon } = window.NabooDesignSystem_955dca;
const S = window.NabooSite;
const HOME = "Accueil.html";
const L = S.LEGAL;
const UPDATED = "10 juillet 2026";
const CONTACT = S.ADVISOR.email;

function Todo({ label }) {
  return <span className="mk-todo mk-todo-inline" title="À compléter">{label}</span>;
}

/* ---------- Sections communes réutilisées ---------- */
function editeur() {
  return (
    <React.Fragment>
      <p>Le présent site est édité par&nbsp;:</p>
      <dl className="mk-legal-def">
        <dt>Dénomination</dt><dd>{L.company}</dd>
        <dt>Forme juridique</dt><dd><Todo label="à compléter (ex. SASU, EURL)" /></dd>
        <dt>SIREN</dt><dd>{L.siren}</dd>
        <dt>Capital social</dt><dd><Todo label="montant à compléter" /></dd>
        <dt>Siège social</dt><dd><Todo label="adresse à compléter" /></dd>
        <dt>Directeur de la publication</dt><dd>{S.ADVISOR.name}</dd>
        <dt>Contact</dt><dd><a href={"mailto:" + CONTACT} style={{ color: "var(--brand-blue-600)", fontWeight: 700 }}>{CONTACT}</a></dd>
      </dl>
      <p>« Naboo » est le nom commercial du service exploité par {L.company}.</p>
    </React.Fragment>
  );
}

/* ---------- Contenu par page ---------- */
const PAGES = {
  mentions: {
    slug: "mentions",
    title: "Mentions légales",
    overline: "Informations légales",
    lead: "Éditeur du site, immatriculation, hébergement et médiation. Certaines informations réglementaires sont en cours d’obtention et seront complétées.",
    sections: [
      { id: "editeur", h: "Éditeur du site", body: editeur() },
      {
        id: "immatriculation", h: "Immatriculation & statut réglementaire",
        body: (
          <React.Fragment>
            <p>Dans le cadre de son activité de conseil et de gestion, l’éditeur est immatriculé et soumis aux obligations suivantes&nbsp;:</p>
            <dl className="mk-legal-def">
              <dt>Numéro ORIAS</dt><dd><Todo label="8 chiffres — à compléter" /></dd>
              <dt>Statut(s)</dt><dd><Todo label="à préciser (CIF, COA/IAS…)" /></dd>
              <dt>Association agréée / chambre</dt><dd><Todo label="ex. CNCGP, ANACOFI…" /></dd>
              <dt>Autorité de contrôle</dt><dd>Autorité des marchés financiers (AMF) et/ou ACPR selon le statut</dd>
              <dt>RC professionnelle</dt><dd><Todo label="assureur & n° de contrat à compléter" /></dd>
            </dl>
            <p>Ces mentions seront mises à jour dès la finalisation de l’immatriculation. Le vérificateur du registre unique des intermédiaires est consultable sur <span style={{ fontWeight: 700, color: "var(--text-strong)" }}>orias.fr</span>.</p>
          </React.Fragment>
        ),
      },
      {
        id: "hebergement", h: "Hébergement",
        body: (
          <React.Fragment>
            <p>Les données du service sont hébergées en <strong>{L.hosting}</strong>.</p>
            <dl className="mk-legal-def">
              <dt>Hébergeur</dt><dd><Todo label="raison sociale à compléter" /></dd>
              <dt>Adresse</dt><dd><Todo label="adresse de l’hébergeur à compléter" /></dd>
            </dl>
          </React.Fragment>
        ),
      },
      {
        id: "propriete", h: "Propriété intellectuelle",
        body: (
          <React.Fragment>
            <p>La marque Naboo, le logo, la charte graphique, les textes, visuels et éléments d’interface présentés sur ce site sont protégés. Toute reproduction ou représentation, totale ou partielle, sans autorisation écrite préalable est interdite.</p>
          </React.Fragment>
        ),
      },
      {
        id: "mediation", h: "Médiation de la consommation",
        body: (
          <React.Fragment>
            <p>Conformément au Code de la consommation, en cas de litige non résolu directement, le client peut recourir gratuitement à un médiateur de la consommation&nbsp;:</p>
            <dl className="mk-legal-def">
              <dt>Médiateur compétent</dt><dd><Todo label="nom du médiateur à compléter" /></dd>
              <dt>Coordonnées</dt><dd><Todo label="adresse / site du médiateur à compléter" /></dd>
            </dl>
            <p>Une plateforme européenne de règlement en ligne des litiges est également disponible&nbsp;: <span style={{ fontWeight: 700, color: "var(--text-strong)" }}>ec.europa.eu/consumers/odr</span>.</p>
          </React.Fragment>
        ),
      },
    ],
  },

  confidentialite: {
    slug: "confidentialite",
    title: "Politique de confidentialité",
    overline: "Données personnelles · RGPD",
    lead: "Comment nous collectons, utilisons et protégeons vos données. Vos comptes sont agrégés en lecture seule, hébergés en France, jamais revendus.",
    sections: [
      {
        id: "responsable", h: "Responsable du traitement",
        body: (
          <React.Fragment>
            <p>Le responsable du traitement de vos données est {L.company} (SIREN {L.siren}). Pour toute question relative à vos données, écrivez à <a href={"mailto:" + CONTACT} style={{ color: "var(--brand-blue-600)", fontWeight: 700 }}>{CONTACT}</a>.</p>
            <dl className="mk-legal-def">
              <dt>Délégué à la protection (DPO)</dt><dd><Todo label="nom / contact si désigné" /></dd>
            </dl>
          </React.Fragment>
        ),
      },
      {
        id: "donnees", h: "Données collectées",
        body: (
          <React.Fragment>
            <p>Nous collectons uniquement les données nécessaires au service&nbsp;:</p>
            <ul>
              <li><strong>Identité et contact</strong>&nbsp;: nom, prénom, adresse e-mail.</li>
              <li><strong>Données de comptes agrégés</strong>&nbsp;: soldes, positions et opérations, récupérés <strong>en lecture seule</strong> auprès de vos établissements. Aucune opération ne peut être passée depuis Naboo.</li>
              <li><strong>Données de gestion</strong> (clients en mandat)&nbsp;: informations du profil investisseur et de la lettre de mission.</li>
              <li><strong>Données techniques</strong>&nbsp;: journaux de connexion et données strictement nécessaires au fonctionnement.</li>
            </ul>
          </React.Fragment>
        ),
      },
      {
        id: "finalites", h: "Finalités & bases légales",
        body: (
          <React.Fragment>
            <dl className="mk-legal-def">
              <dt>Fournir le service</dt><dd>Agrégation, suivi de performance, rapports — exécution du contrat.</dd>
              <dt>Gérer votre portefeuille</dt><dd>Pour les clients en mandat — exécution du contrat / lettre de mission.</dd>
              <dt>Sécurité & obligations légales</dt><dd>Lutte contre la fraude, obligations comptables et réglementaires — obligation légale.</dd>
              <dt>Amélioration & contact</dt><dd>Assistance et information — intérêt légitime ou consentement.</dd>
            </dl>
          </React.Fragment>
        ),
      },
      {
        id: "destinataires", h: "Destinataires & sous-traitants",
        body: (
          <React.Fragment>
            <p>Vos données ne sont <strong>ni vendues, ni louées, ni partagées</strong> à des fins commerciales. Elles peuvent être traitées par des sous-traitants techniques (hébergement, agrégation bancaire) agissant sur instruction et encadrés par contrat.</p>
            <dl className="mk-legal-def">
              <dt>Agrégateur bancaire</dt><dd><Todo label="prestataire à compléter (ex. Powens)" /></dd>
              <dt>Hébergement</dt><dd>En {L.hosting} — <Todo label="hébergeur à compléter" /></dd>
            </dl>
          </React.Fragment>
        ),
      },
      {
        id: "conservation", h: "Durée de conservation",
        body: (
          <React.Fragment>
            <p>Vos données sont conservées le temps de la relation contractuelle, puis archivées pour la durée requise par les obligations légales (notamment comptables et réglementaires), avant suppression. Vous pouvez exporter vos données à tout moment depuis votre espace client.</p>
          </React.Fragment>
        ),
      },
      {
        id: "droits", h: "Vos droits",
        body: (
          <React.Fragment>
            <p>Conformément au RGPD, vous disposez des droits d’<strong>accès</strong>, de <strong>rectification</strong>, d’<strong>effacement</strong>, de <strong>limitation</strong>, d’<strong>opposition</strong> et de <strong>portabilité</strong>. Vous pouvez les exercer en écrivant à <a href={"mailto:" + CONTACT} style={{ color: "var(--brand-blue-600)", fontWeight: 700 }}>{CONTACT}</a>.</p>
            <p>En cas de désaccord, vous pouvez introduire une réclamation auprès de la <strong>CNIL</strong> (cnil.fr).</p>
          </React.Fragment>
        ),
      },
    ],
  },

  cgu: {
    slug: "cgu",
    title: "Conditions générales",
    overline: "CGU & CGV",
    lead: "Les règles d’utilisation du service, l’abonnement, la gestion rémunérée au résultat et vos droits. À lire avant de souscrire.",
    sections: [
      {
        id: "objet", h: "Objet",
        body: <p>Les présentes conditions régissent l’accès et l’utilisation de l’application Naboo et de l’espace client, ainsi que, le cas échéant, le service de gestion de portefeuille sous mandat. En créant un compte, vous les acceptez.</p>,
      },
      {
        id: "service", h: "Description du service",
        body: (
          <React.Fragment>
            <p>Naboo propose deux prestations distinctes&nbsp;:</p>
            <ul>
              <li><strong>L’app (5 €/mois)</strong>&nbsp;: agrégation de vos comptes en lecture seule, suivi de performance, répartition, rapports et export. Le premier mois est offert. Sans engagement.</li>
              <li><strong>La gestion de portefeuille</strong>&nbsp;: gestion sous mandat de vos comptes (CTO, PEA), encadrée par une <strong>lettre de mission</strong>, rémunérée uniquement au résultat.</li>
            </ul>
          </React.Fragment>
        ),
      },
      {
        id: "inscription", h: "Inscription & compte",
        body: <p>Vous vous engagez à fournir des informations exactes et à préserver la confidentialité de vos identifiants. Le service est réservé aux personnes majeures capables de contracter.</p>,
      },
      {
        id: "prix", h: "Prix, paiement & résiliation",
        body: (
          <React.Fragment>
            <p>L’abonnement à l’app est de <strong>5 € par mois</strong> (ou 55 € par an), premier mois offert, payable par carte bancaire, <strong>sans engagement</strong> et résiliable à tout moment en un clic depuis l’espace client. La résiliation prend effet à la fin de la période en cours.</p>
            <p>Compte tenu de la fourniture immédiate d’un service numérique, le droit de rétractation peut ne pas s’appliquer une fois l’accès ouvert&nbsp;; l’absence d’engagement vous permet toutefois de résilier librement.</p>
          </React.Fragment>
        ),
      },
      {
        id: "remuneration", h: "Rémunération au résultat (gestion)",
        body: (
          <React.Fragment>
            <p>Pour la gestion de portefeuille, <strong>aucun frais fixe</strong> n’est facturé. La commission s’applique <strong>uniquement aux plus-values réellement réalisées</strong>, selon les modalités, le taux et les conditions définis dans votre lettre de mission. Pas de gain, pas de commission.</p>
            <p>Le mandat est résiliable à tout moment. Chaque opération est visible dans votre espace client.</p>
          </React.Fragment>
        ),
      },
      {
        id: "risques", h: "Risques & absence de garantie",
        body: (
          <React.Fragment>
            <p>Investir comporte un <strong>risque de perte en capital</strong>. Les performances passées ne préjugent pas des performances futures. Aucun objectif de rendement n’est garanti. Les informations du site ne constituent pas un conseil en investissement personnalisé.</p>
          </React.Fragment>
        ),
      },
      {
        id: "responsabilite", h: "Responsabilité",
        body: <p>Naboo met en œuvre les moyens raisonnables pour assurer la disponibilité et l’exactitude du service, sans garantie d’absence d’interruption. Sa responsabilité ne saurait être engagée pour les décisions prises par le client sur la seule base des informations affichées, hors mandat de gestion.</p>,
      },
      {
        id: "droit", h: "Droit applicable",
        body: <p>Les présentes conditions sont soumises au droit français. En cas de litige, une solution amiable sera recherchée en priorité, y compris via le médiateur de la consommation mentionné dans les mentions légales.</p>,
      },
    ],
  },

  cookies: {
    slug: "cookies",
    title: "Gestion des cookies",
    overline: "Traceurs & consentement",
    lead: "Nous limitons les cookies au strict nécessaire. Aucun traceur publicitaire, aucune revente de données.",
    sections: [
      {
        id: "quoi", h: "Ce qu’est un cookie",
        body: <p>Un cookie est un petit fichier déposé sur votre appareil lors de la visite d’un site. Il permet notamment de faire fonctionner le service et, éventuellement, d’en mesurer l’audience.</p>,
      },
      {
        id: "types", h: "Cookies que nous utilisons",
        body: (
          <React.Fragment>
            <dl className="mk-legal-def">
              <dt>Cookies nécessaires</dt><dd>Indispensables au fonctionnement (session, sécurité, préférences). Exemptés de consentement.</dd>
              <dt>Mesure d’audience</dt><dd><Todo label="préciser l’outil si utilisé (ex. Matomo)" /> — soumise à consentement.</dd>
              <dt>Publicité / traceurs tiers</dt><dd>Aucun.</dd>
            </dl>
          </React.Fragment>
        ),
      },
      {
        id: "consentement", h: "Votre consentement",
        body: <p>Les cookies non essentiels ne sont déposés qu’après votre accord, recueilli via le bandeau de consentement lors de votre première visite. Vous pouvez modifier votre choix à tout moment.</p>,
      },
      {
        id: "gestion", h: "Gérer les cookies",
        body: <p>Vous pouvez configurer votre navigateur pour bloquer ou supprimer les cookies. Le blocage des cookies nécessaires peut toutefois dégrader le fonctionnement du service.</p>,
      },
    ],
  },
};

const LINKS = [
  { slug: "mentions", label: "Mentions légales", href: "mentions-legales.html" },
  { slug: "confidentialite", label: "Confidentialité", href: "confidentialite.html" },
  { slug: "cgu", label: "Conditions générales", href: "cgu.html" },
  { slug: "cookies", label: "Cookies", href: "cookies.html" },
];

function LegalPage({ page }) {
  return (
    <div id="top" data-screen-label={"Légal — " + page.title}>
      <S.SiteNav dark home={HOME} />

      <header className="mk-dark" style={{ position: "relative", overflow: "hidden", padding: "72px 0 56px" }}>
        <div className="mk-glow"></div>
        <S.Cosmos />
        <div className="mk-container" style={{ position: "relative" }}>
          <p className="mk-overline">{page.overline}</p>
          <h1 className="mk-h1" style={{ maxWidth: 760, fontSize: "clamp(32px, 4.2vw, 48px)" }}>{page.title}</h1>
          <p className="mk-lead">{page.lead}</p>
          <p className="mk-legal-updated" style={{ color: "rgba(255,255,255,0.5)" }}>Dernière mise à jour&nbsp;: {UPDATED}</p>
        </div>
      </header>

      <section className="mk-section-tight" style={{ position: "relative", overflow: "hidden" }}>
        <div className="mk-orbit-motif" aria-hidden="true"></div>
        <div className="mk-container" style={{ position: "relative", zIndex: 1 }}>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginBottom: 40 }}>
            {LINKS.map((l) => (
              <a key={l.slug} href={l.href}>
                <Badge tone={l.slug === page.slug ? "brand" : "neutral"}>{l.label}</Badge>
              </a>
            ))}
          </div>

          <div className="mk-prose">
            <ul className="mk-legal-toc">
              {page.sections.map((s, i) => (
                <li key={s.id}><a href={"#" + s.id}>{i + 1}. {s.h}</a></li>
              ))}
            </ul>

            {page.sections.map((s, i) => (
              <div className="mk-legal-sec" id={s.id} key={s.id}>
                <h2><span className="n">{String(i + 1).padStart(2, "0")}</span>{s.h}</h2>
                {s.body}
              </div>
            ))}

            <div className="mk-legal-note">
              <Icon name="info" size={18} color="var(--text-muted)" style={{ flex: "none", marginTop: 1 }} />
              <p>
                Les mentions signalées « à compléter » correspondent aux informations réglementaires
                en cours d’obtention (immatriculation, statut, médiateur). Ce document sera mis à jour
                dès leur finalisation. Une question&nbsp;? Écrivez à <a href={"mailto:" + CONTACT} style={{ color: "var(--brand-blue-600)", fontWeight: 700 }}>{CONTACT}</a>.
              </p>
            </div>
          </div>
        </div>
      </section>

      <S.SiteFooter />
    </div>
  );
}

const current = PAGES[window.__legalPage] || PAGES.mentions;
document.title = "Naboo — " + current.title;
ReactDOM.createRoot(document.getElementById("site-root")).render(<LegalPage page={current} />);