// ─────────────────────────────────────────────────────────────
// Mezoo — Page Mentions légales / Politique de confidentialité
// Layout éditorial sobre Senior. Tout est rédigé en français
// juridique mais sans jargon abscons. Sections numérotées en romain,
// SpecCard de référence en colonne sticky.
// ─────────────────────────────────────────────────────────────

function LegalPage() {
  useReveal();
  const { go } = useRouter();

  const sections = [
    {
      n: 'I.',
      slug: 'editeur',
      title: 'Éditeur du site',
      body: [
        'Le site mezoo.studio est édité par Mezoo Atelier.',
        'Siège social : 178 rue du Maréchal Leclerc, 94410 Saint-Maurice France.',
        'SIRET : 412 088 044 00037 — RCS Paris B 412 088 044 — TVA intracommunautaire : FR 51 412088044.',
        'Directeur de la publication : Mezoo, en sa qualité de gérant.',
        'Contact : hello@mezoo.studio',
      ],
    },
    {
      n: 'II.',
      slug: 'hebergement',
      title: 'Hébergement',
      body: [
        'Le site est hébergé en Europe sur l\'infrastructure d\'Amazon Web Services EMEA SARL — 38 avenue John F. Kennedy, L-1855 Luxembourg, dans la région eu-central-1 (Francfort).',
        'Les bases de données et fichiers utilisateurs sont stockés exclusivement sur des serveurs situés en Union européenne. Aucun transfert hors UE n\'est effectué dans le cadre du fonctionnement courant du site.',
        'Pour les projets clients soumis à des contraintes de souveraineté renforcée, un hébergement 100% français peut être proposé chez OVH SAS ou Scaleway SAS — voir le manifeste, pilier II.',
      ],
    },
    {
      n: 'III.',
      slug: 'propriete',
      title: 'Propriété intellectuelle',
      body: [
        'L\'ensemble des éléments du site mezoo.studio — design, textes, illustrations, logos, code source — sont la propriété exclusive de Mezoo Atelier, sauf mention contraire.',
        'Toute reproduction, représentation ou diffusion, totale ou partielle, est interdite sans autorisation écrite préalable.',
        'Le manifeste Mezoo est publié sous licence Creative Commons CC-BY-ND 4.0 : reproduction autorisée avec attribution, sans modification.',
        'Les noms et logos des clients cités dans les études de cas sont la propriété de leurs détenteurs respectifs, utilisés avec leur autorisation expresse.',
      ],
    },
    {
      n: 'IV.',
      slug: 'donnees',
      title: 'Traitement des données personnelles',
      body: [
        'Mezoo Atelier collecte des données personnelles dans deux contextes :',
        '— via le formulaire de contact, lorsque vous nous écrivez pour une demande commerciale (nom, e-mail, téléphone, fonction, entreprise, brief) ;',
        '— via les e-mails de correspondance échangés ensuite, conservés à des fins de continuité du dialogue commercial.',
        'Base légale : intérêt légitime — gestion de notre relation commerciale (RGPD article 6.1.f). Vous pouvez vous opposer à ce traitement à tout moment.',
        'Durée de conservation : 24 mois après le dernier échange, sauf transformation en projet client (auquel cas les durées contractuelles s\'appliquent).',
        'Destinataires : exclusivement les associés et collaborateurs de Mezoo Atelier ayant à connaître votre demande. Aucune donnée n\'est revendue, partagée avec des tiers à des fins marketing, ni utilisée à des fins de profilage.',
        'Sous-traitants techniques : Resend Inc. (envoi d\'e-mails transactionnels, infrastructure UE), Amazon Web Services (hébergement, UE), Google LLC (Workspace pour la messagerie professionnelle, comptes administrés en UE).',
      ],
    },
    {
      n: 'V.',
      slug: 'droits',
      title: 'Vos droits',
      body: [
        'Conformément au Règlement Général sur la Protection des Données (RGPD) et à la loi Informatique et Libertés modifiée, vous disposez sur vos données personnelles des droits suivants :',
        '— droit d\'accès : obtenir copie de l\'ensemble des données que nous détenons sur vous ;',
        '— droit de rectification : faire corriger toute information inexacte ;',
        '— droit à l\'effacement : demander la suppression de vos données, sous réserve de nos obligations légales de conservation ;',
        '— droit à la limitation du traitement ;',
        '— droit à la portabilité : recevoir vos données dans un format structuré et lisible par machine ;',
        '— droit d\'opposition : retirer votre consentement au traitement à tout moment ;',
        '— droit de définir des directives post-mortem.',
        'Toute demande peut être adressée à privacy@mezoo.studio. Nous répondons sous 30 jours maximum. En cas de désaccord, vous pouvez saisir la Commission Nationale de l\'Informatique et des Libertés (CNIL) — 3 place de Fontenoy, 75007 Paris — www.cnil.fr.',
      ],
    },
    {
      n: 'VI.',
      slug: 'cookies',
      title: 'Cookies et traceurs',
      body: [
        'Le site mezoo.studio ne pose aucun cookie marketing ni traceur publicitaire. Aucun outil d\'analyse comportementale n\'est installé.',
        'Seules trois données locales sont stockées dans votre navigateur :',
        '— votre préférence de thème (clair / sombre) ;',
        '— vos préférences d\'affichage (densité, échelle typo) si vous utilisez le panneau Tweaks ;',
        '— la position de défilement de la page courante, pour conserver votre lecture en cas de rechargement.',
        'Ces données ne quittent jamais votre navigateur. Aucune information n\'est transmise à un tiers. Vider votre cache suffit à toutes les supprimer.',
      ],
    },
    {
      n: 'VII.',
      slug: 'securite',
      title: 'Sécurité',
      body: [
        'Les échanges entre votre navigateur et nos serveurs sont chiffrés en TLS 1.3 avec un certificat délivré par Let\'s Encrypt et noté A+ par Qualys SSL Labs.',
        'Les données du formulaire de contact transitent uniquement sur des canaux chiffrés. Le contenu de votre message n\'est stocké ni indexé par aucun service tiers.',
        'En cas de faille de sécurité avérée affectant vos données, nous nous engageons à vous notifier sous 72 heures conformément à l\'article 33 du RGPD.',
      ],
    },
    {
      n: 'VIII.',
      slug: 'droit',
      title: 'Droit applicable',
      body: [
        'Les présentes mentions sont régies par le droit français. Tout litige relatif à leur interprétation ou à leur exécution relève de la compétence exclusive des tribunaux du ressort de la Cour d\'appel de Paris.',
        'En cas de différend, et préalablement à toute action contentieuse, nous nous engageons à rechercher une solution amiable dans un délai raisonnable.',
      ],
    },
  ];

  return (
    <main className="mz-page">
      {/* ── Title page ───────────────────────────────────────── */}
      <section style={{ paddingBlock: 'var(--s-9)', borderBottom: '1px solid var(--hairline-strong)' }}>
        <div className="mz-container-wide">
          <Reveal style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 'var(--s-5)', alignItems: 'flex-start' }}>
            <Eyebrow>Mentions légales & confidentialité — édition mars 2026</Eyebrow>
            <span className="mz-mono" style={{ color: 'var(--fg-subtle)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>Folio · 8 articles</span>
          </Reveal>

          <Reveal delay={80} as="h1" className="mz-display-xl"
            style={{ marginTop: 'var(--s-6)', maxWidth: '20ch' }}>
            Ce qu'on collecte. <Em>Ce qu'on en fait.</Em><br />
            <span style={{ color: 'var(--fg-muted)' }}>Et où elles dorment la nuit.</span>
          </Reveal>

          <Reveal delay={160} className="mz-lead"
            style={{ marginTop: 'var(--s-6)', maxWidth: '58ch' }}>
            La transparence est une <Em>conviction</Em> avant d'être une obligation légale.
            Ce document détaille, en clair et sans renvois interminables, qui édite ce site,
            quelles données nous traitons, où elles sont hébergées, et comment vous en gardez
            la maîtrise pleine et entière.
          </Reveal>
        </div>
      </section>

      {/* ── Body grid ───────────────────────────────────────── */}
      <section style={{ paddingBlock: 'var(--s-9)' }}>
        <div className="mz-container-wide" style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 'var(--s-8)', alignItems: 'flex-start' }}>

          {/* Articles */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--s-7)' }}>
            {sections.map((s, i) => (
              <Reveal key={s.slug} id={`legal-${s.slug}`} as="article"
                style={{ display: 'flex', flexDirection: 'column', gap: 'var(--s-3)', scrollMarginTop: 100 }}>
                <header style={{ display: 'flex', alignItems: 'baseline', gap: 'var(--s-3)', paddingBottom: 'var(--s-3)', borderBottom: '1px solid var(--hairline)' }}>
                  <span className="mz-italic" style={{ fontSize: 36, lineHeight: 1, minWidth: 64 }}>{s.n}</span>
                  <h2 className="mz-h2" style={{ fontSize: 'clamp(24px, 3vw, 36px)' }}>{s.title}</h2>
                  <span className="mz-mono" style={{ marginLeft: 'auto', color: 'var(--fg-subtle)', letterSpacing: '0.12em', textTransform: 'uppercase', whiteSpace: 'nowrap' }}>Art. {s.n.replace('.', '')}</span>
                </header>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--s-3)' }}>
                  {s.body.map((p, j) => (
                    <p key={j} className="mz-body" style={{ fontSize: 16, lineHeight: 1.65, maxWidth: '64ch' }}>{p}</p>
                  ))}
                </div>
              </Reveal>
            ))}
          </div>

          {/* Sticky TOC + Privacy badge */}
          <aside style={{ position: 'sticky', top: 100, display: 'flex', flexDirection: 'column', gap: 'var(--s-4)' }}>
            <Reveal delay={100} style={{ border: '1px solid var(--hairline-strong)', padding: 'var(--s-4)' }}>
              <Eyebrow line={false}>↳ Sommaire</Eyebrow>
              <ol style={{ margin: 'var(--s-3) 0 0', padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 8 }}>
                {sections.map((s) => (
                  <li key={s.slug} style={{ display: 'flex', gap: 10, fontSize: 13 }}>
                    <span className="mz-mono" style={{ color: 'var(--accent)', minWidth: 24 }}>{s.n}</span>
                    <a href={`#legal-${s.slug}`}
                      onClick={(e) => { e.preventDefault(); document.getElementById(`legal-${s.slug}`)?.scrollIntoView({ behavior: 'smooth', block: 'start' }); }}
                      className="mz-link" style={{ color: 'var(--fg)' }}>{s.title}</a>
                  </li>
                ))}
              </ol>
            </Reveal>

            <Reveal delay={200}>
              <SpecCard title="Souveraineté · synthèse" status="Europe">
                <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--s-1)' }}>
                  <SpecRow k="HÉBERGEMENT" v="UE — Francfort" />
                  <SpecRow k="CHIFFREMENT" v="TLS 1.3 · A+" />
                  <SpecRow k="COOKIES TIERS" v="Aucun" />
                  <SpecRow k="TRACEURS PUB." v="Aucun" />
                  <SpecRow k="DURÉE CONSERV." v="24 mois max." />
                  <SpecRow k="DÉLAI NOTIF." v="< 72 h (art. 33)" />
                </div>
              </SpecCard>
            </Reveal>

            <Reveal delay={300} as="div" style={{ border: '1px dashed var(--hairline-strong)', padding: 'var(--s-4)' }}>
              <Eyebrow line={false}>Une question sur vos données ?</Eyebrow>
              <p style={{ margin: 'var(--s-3) 0 0', fontSize: 14, color: 'var(--fg-muted)', lineHeight: 1.5 }}>
                Notre DPO interne répond personnellement à toute demande RGPD sous 30 jours.
              </p>
              <a href="mailto:privacy@mezoo.studio" className="mz-link" style={{ display: 'inline-block', marginTop: 'var(--s-3)', fontSize: 14 }}>
                privacy@mezoo.studio →
              </a>
            </Reveal>
          </aside>
        </div>
      </section>

      {/* ── Closing ─────────────────────────────────────────── */}
      <section style={{ paddingBlock: 'var(--s-8)', background: 'var(--surface)', borderTop: '1px solid var(--hairline)' }}>
        <div className="mz-container-wide" style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 'var(--s-5)', alignItems: 'flex-end' }}>
          <Reveal>
            <Eyebrow>Document évolutif</Eyebrow>
            <p className="mz-lead" style={{ marginTop: 'var(--s-3)', maxWidth: '54ch' }}>
              Ces mentions sont révisées à chaque évolution réglementaire significative, et au minimum une fois par an. La date de dernière mise à jour fait foi.
            </p>
          </Reveal>
          <Reveal delay={120} className="mz-mono" style={{ color: 'var(--fg-subtle)', letterSpacing: '0.1em', textTransform: 'uppercase', textAlign: 'right' }}>
            ↳ Dernière révision · 03 mars 2026<br />
            Version 2026.I
          </Reveal>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { LegalPage });
