// Legal / Privacy modal — opens as an overlay
const LegalModal = ({ open, kind, onClose }) => {
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [open, onClose]);

  if (!open) return null;

  const isPrivacy = kind === 'privacy';
  const title = isPrivacy ? 'Politique de confidentialité' : 'Mentions légales';
  const monoTag = isPrivacy ? '// document.privacy' : '// document.legal';
  const intro = isPrivacy
    ? 'Comment Créations PL collecte, utilise et protège vos renseignements personnels.'
    : 'Informations légales concernant le site web de Créations PL.';

  return (
    <div
      role="dialog"
      aria-modal="true"
      aria-labelledby="legal-title"
      onClick={onClose}
      style={{
        position: 'fixed', inset: 0, zIndex: 100,
        background: 'color-mix(in oklab, var(--bg) 80%, transparent)',
        backdropFilter: 'blur(8px)',
        WebkitBackdropFilter: 'blur(8px)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: 'clamp(16px, 4vw, 48px)',
        animation: 'legalFadeIn .25s ease'
      }}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          position: 'relative',
          width: '100%', maxWidth: 880, maxHeight: '85vh',
          background: 'var(--bg-2)',
          border: '1px solid var(--line-strong)',
          borderRadius: 16,
          overflow: 'hidden',
          display: 'flex', flexDirection: 'column',
          boxShadow: '0 40px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(37,212,242,0.1)',
          animation: 'legalSlideUp .35s cubic-bezier(0.2, 0.8, 0.2, 1)'
        }}
      >
        {/* Header */}
        <header style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '20px 28px',
          borderBottom: '1px solid var(--line)',
          background: 'color-mix(in oklab, var(--surface) 60%, transparent)',
          flexShrink: 0
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <span className="live-dot" style={{ background: 'var(--cyan)' }}></span>
            <div>
              <div className="mono" style={{ color: 'var(--cyan)' }}>{monoTag}</div>
              <h2 id="legal-title" style={{ margin: '4px 0 0', fontSize: 20, fontWeight: 500, letterSpacing: '-0.01em' }}>
                {title}
              </h2>
            </div>
          </div>
          <button
            onClick={onClose}
            aria-label="Fermer"
            style={{
              width: 36, height: 36, borderRadius: 999,
              border: '1px solid var(--line-strong)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: 'var(--fg-dim)',
              transition: 'all .2s ease'
            }}
            onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--cyan)'; e.currentTarget.style.color = 'var(--cyan)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'var(--line-strong)'; e.currentTarget.style.color = 'var(--fg-dim)'; }}
          >
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path d="M3 3l8 8M11 3l-8 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
            </svg>
          </button>
        </header>

        {/* Body */}
        <div style={{
          padding: '32px clamp(24px, 5vw, 48px) 40px',
          overflowY: 'auto',
          color: 'var(--fg-dim)',
          fontSize: 15,
          lineHeight: 1.65
        }}>
          <p style={{ color: 'var(--fg-dim)', marginTop: 0, fontSize: 14 }}>{intro}</p>

          {isPrivacy ? <PrivacyContent /> : <LegalContent />}

          <div style={{
            marginTop: 32,
            paddingTop: 20,
            borderTop: '1px solid var(--line)',
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            fontFamily: 'var(--font-mono)',
            fontSize: 11,
            color: 'var(--fg-mute)'
          }}>
            <span>// dernière mise à jour : mai 2026</span>
            <span>esc · fermer</span>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes legalFadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes legalSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
      `}</style>
    </div>
  );
};

const LegalSection = ({ num, title, children, last }) => (
  <section style={{
    paddingTop: 28,
    paddingBottom: last ? 0 : 28,
    borderTop: '1px solid var(--line)'
  }}>
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 12 }}>
      <span className="mono" style={{ color: 'var(--cyan)', fontSize: 11 }}>— {num}</span>
      <h3 style={{
        margin: 0,
        fontSize: 20,
        fontWeight: 500,
        letterSpacing: '-0.01em',
        color: 'var(--fg)'
      }}>{title}</h3>
    </div>
    <div>{children}</div>
  </section>
);

const LegalContent = () => (
  <>
    <LegalSection num="01" title="Éditeur du site">
      <p style={{ margin: 0 }}>Le présent site web est édité par :</p>
      <div style={{
        marginTop: 16, padding: 20,
        border: '1px solid var(--line)', borderRadius: 10,
        background: 'var(--surface)',
        fontFamily: 'var(--font-mono)', fontSize: 13,
        display: 'grid', gridTemplateColumns: '110px 1fr', gap: '8px 16px'
      }}>
        <span style={{ color: 'var(--fg-mute)' }}>Raison sociale</span>
        <span style={{ color: 'var(--fg)' }}>Créations PL</span>
        <span style={{ color: 'var(--fg-mute)' }}>Courriel</span>
        <a href="mailto:info@creationspl.com" style={{ color: 'var(--cyan)' }}>info@creationspl.com</a>
        <span style={{ color: 'var(--fg-mute)' }}>Téléphone</span>
        <a href="tel:+14388314150" style={{ color: 'var(--cyan)' }}>+1 (438) 831-4150</a>
      </div>
    </LegalSection>

    <LegalSection num="02" title="Propriété intellectuelle">
      <p>L'ensemble de ce site relève de la législation canadienne et internationale sur le droit d'auteur et la propriété intellectuelle. Tous les droits de reproduction sont réservés, y compris pour les documents téléchargeables et les représentations iconographiques et photographiques.</p>
      <p>La reproduction de tout ou partie de ce site sur un support électronique quel qu'il soit est formellement interdite sauf autorisation expresse du directeur de la publication.</p>
      <p>Les marques et logos reproduits sur ce site sont déposés par les sociétés qui en sont propriétaires.</p>
    </LegalSection>

    <LegalSection num="03" title="Données personnelles">
      <p>Conformément à la Loi sur la protection des renseignements personnels et les documents électroniques (LPRPDE) du Canada, vous disposez d'un droit d'accès, de rectification, de suppression et d'opposition aux données personnelles vous concernant.</p>
      <p>Pour exercer ce droit, contactez-nous à l'adresse : <a href="mailto:info@creationspl.com" style={{ color: 'var(--cyan)' }}>info@creationspl.com</a></p>
    </LegalSection>

    <LegalSection num="04" title="Témoins (cookies)">
      <p>Ce site utilise des témoins essentiels à son fonctionnement, ainsi que — avec votre consentement explicite — des témoins de mesure d'audience. Votre choix vous est demandé dès votre première visite et peut être modifié à tout moment via le lien « Gérer les témoins » au bas de chaque page.</p>
    </LegalSection>

    <LegalSection num="05" title="Responsabilité">
      <p>Les informations contenues sur ce site sont aussi précises que possible et le site est périodiquement remis à jour, mais peut toutefois contenir des inexactitudes, des omissions ou des lacunes.</p>
      <p>Si vous constatez une lacune, erreur ou ce qui parait être un dysfonctionnement, merci de bien vouloir le signaler par courriel à l'adresse <a href="mailto:info@creationspl.com" style={{ color: 'var(--cyan)' }}>info@creationspl.com</a>, en décrivant le problème de la façon la plus précise possible.</p>
    </LegalSection>

    <LegalSection num="06" title="Droit applicable" last>
      <p>Tout litige en relation avec l'utilisation du site www.creationspl.com est soumis au droit canadien. En dehors des cas où la loi ne le permet pas, il est fait attribution exclusive de juridiction aux tribunaux compétents de Montréal, Canada.</p>
    </LegalSection>
  </>
);

const PrivacyContent = () => (
  <>
    <LegalSection num="01" title="Notre engagement">
      <p>Créations PL conçoit des solutions d'automatisation pour PME. À ce titre, nous traitons vos données — celles des visiteurs de notre site et celles que nos clients nous confient dans le cadre de leurs mandats — avec rigueur et transparence.</p>
      <p>La présente politique décrit quelles informations nous collectons, pourquoi, comment elles sont protégées, et quels sont vos droits. Elle s'inscrit dans le cadre de la <strong style={{ color: 'var(--fg)' }}>Loi 25 du Québec</strong> et de la <strong style={{ color: 'var(--fg)' }}>LPRPDE fédérale</strong>.</p>
    </LegalSection>

    <LegalSection num="02" title="Renseignements collectés">
      <p>Nous collectons uniquement les renseignements nécessaires à nos activités :</p>
      <div style={{
        marginTop: 12, padding: 20,
        border: '1px solid var(--line)', borderRadius: 10,
        background: 'var(--surface)',
        fontFamily: 'var(--font-mono)', fontSize: 12.5,
        display: 'grid', gridTemplateColumns: '160px 1fr', gap: '10px 18px'
      }}>
        <span style={{ color: 'var(--cyan)' }}>formulaire.contact</span>
        <span>nom, courriel, message, contexte d'affaires</span>
        <span style={{ color: 'var(--cyan)' }}>navigation.site</span>
        <span>pages visitées, durée, type d'appareil (anonymisé)</span>
        <span style={{ color: 'var(--cyan)' }}>mandat.client</span>
        <span>données strictement requises pour livrer le projet</span>
        <span style={{ color: 'var(--cyan)' }}>facturation</span>
        <span>raison sociale, adresse, coordonnées du responsable</span>
      </div>
      <p style={{ marginTop: 16 }}>Nous ne collectons jamais de données sensibles (santé, opinions politiques, données biométriques) sans votre consentement explicite et un besoin opérationnel clair.</p>
    </LegalSection>

    <LegalSection num="03" title="Finalités du traitement">
      <p>Vos renseignements servent exclusivement à :</p>
      <ul style={{ paddingLeft: 20, margin: '8px 0' }}>
        <li>Répondre à vos demandes de contact et de devis;</li>
        <li>Exécuter les mandats que vous nous confiez;</li>
        <li>Vous transmettre des informations relatives à un projet en cours;</li>
        <li>Améliorer notre site et la qualité de nos services;</li>
        <li>Respecter nos obligations légales (facturation, comptabilité).</li>
      </ul>
      <p>Nous ne vendons, ne louons et n'échangeons aucune donnée à des fins commerciales.</p>
    </LegalSection>

    <LegalSection num="04" title="Hébergement et sous-traitants">
      <p>Pour fonctionner, nous nous appuyons sur un nombre limité de fournisseurs reconnus. Chacun est lié par contrat aux mêmes obligations de confidentialité que nous-mêmes :</p>
      <ul style={{ paddingLeft: 20, margin: '8px 0' }}>
        <li><strong style={{ color: 'var(--fg)' }}>Hébergement web</strong> — serveurs situés au Canada ou aux États-Unis, conformes SOC 2;</li>
        <li><strong style={{ color: 'var(--fg)' }}>Courriel & calendrier</strong> — fournisseurs professionnels avec chiffrement en transit et au repos;</li>
        <li><strong style={{ color: 'var(--fg)' }}>Outils d'automatisation</strong> — utilisés uniquement avec votre accord et pour vos propres données.</li>
      </ul>
      <p>Lorsqu'un transfert de données hors du Canada est nécessaire, nous nous assurons que le niveau de protection est équivalent à celui exigé par la loi québécoise.</p>
    </LegalSection>

    <LegalSection num="05" title="Durée de conservation">
      <p>Nous conservons vos renseignements seulement le temps nécessaire :</p>
      <div style={{
        marginTop: 12, padding: 20,
        border: '1px solid var(--line)', borderRadius: 10,
        background: 'var(--surface)',
        fontFamily: 'var(--font-mono)', fontSize: 12.5,
        display: 'grid', gridTemplateColumns: '1fr 140px', gap: '10px 18px'
      }}>
        <span>Demandes de contact restées sans suite</span>
        <span style={{ color: 'var(--cyan)', textAlign: 'right' }}>12 mois</span>
        <span>Données liées à un mandat actif</span>
        <span style={{ color: 'var(--cyan)', textAlign: 'right' }}>durée du mandat</span>
        <span>Documents comptables et fiscaux</span>
        <span style={{ color: 'var(--cyan)', textAlign: 'right' }}>6 ans (loi)</span>
        <span>Journaux techniques anonymisés</span>
        <span style={{ color: 'var(--cyan)', textAlign: 'right' }}>13 mois</span>
      </div>
    </LegalSection>

    <LegalSection num="06" title="Témoins (cookies) & analytique">
      <p>Notre site utilise un nombre minimal de témoins. Aucun témoin non essentiel n'est déposé sans votre consentement explicite, recueilli via notre bandeau de consentement conforme à la Loi 25.</p>
      <ul style={{ paddingLeft: 20, margin: '8px 0' }}>
        <li><strong style={{ color: 'var(--fg)' }}>Témoins essentiels</strong> — nécessaires au fonctionnement du site (préférences d'affichage, mémorisation de votre choix de consentement). Pas de consentement requis, mais mentionnés par transparence.</li>
        <li><strong style={{ color: 'var(--fg)' }}>Mesure d'audience</strong> — statistiques anonymes (pages vues, provenance). Activées uniquement si vous y consentez.</li>
      </ul>
      <p>Vous pouvez retirer ou modifier votre consentement à tout moment — aussi facilement que vous l'avez donné — via le lien « Gérer les témoins » au bas de chaque page. Votre choix est conservé localement avec sa date, et vous est redemandé si notre politique change.</p>
    </LegalSection>

    <LegalSection num="07" title="Vos droits">
      <p>Conformément aux lois en vigueur, vous disposez en tout temps des droits suivants sur vos renseignements personnels :</p>
      <ul style={{ paddingLeft: 20, margin: '8px 0' }}>
        <li><strong style={{ color: 'var(--fg)' }}>Accès</strong> — savoir quelles données nous détenons sur vous;</li>
        <li><strong style={{ color: 'var(--fg)' }}>Rectification</strong> — corriger une information inexacte;</li>
        <li><strong style={{ color: 'var(--fg)' }}>Suppression</strong> — demander l'effacement, sous réserve d'obligations légales;</li>
        <li><strong style={{ color: 'var(--fg)' }}>Portabilité</strong> — recevoir vos données dans un format structuré et lisible;</li>
        <li><strong style={{ color: 'var(--fg)' }}>Retrait du consentement</strong> — à tout moment, sans avoir à se justifier.</li>
      </ul>
      <p>Pour exercer l'un de ces droits, écrivez-nous à <a href="mailto:info@creationspl.com" style={{ color: 'var(--cyan)' }}>info@creationspl.com</a>. Nous répondons sous 30 jours.</p>
    </LegalSection>

    <LegalSection num="08" title="Sécurité">
      <p>Nous mettons en œuvre des mesures techniques et organisationnelles raisonnables pour protéger vos renseignements : chiffrement des communications, contrôle d'accès strict, sauvegardes régulières, revue annuelle de sécurité.</p>
      <p>En cas d'incident susceptible de porter atteinte à la confidentialité de vos données, nous vous en informerons sans délai et notifierons les autorités compétentes conformément à la loi.</p>
    </LegalSection>

    <LegalSection num="09" title="Contact — responsable de la protection" last>
      <p>Pour toute question relative à cette politique ou au traitement de vos données :</p>
      <div style={{
        marginTop: 16, padding: 20,
        border: '1px solid var(--line)', borderRadius: 10,
        background: 'var(--surface)',
        fontFamily: 'var(--font-mono)', fontSize: 13,
        display: 'grid', gridTemplateColumns: '110px 1fr', gap: '8px 16px'
      }}>
        <span style={{ color: 'var(--fg-mute)' }}>Courriel</span>
        <a href="mailto:info@creationspl.com" style={{ color: 'var(--cyan)' }}>info@creationspl.com</a>
        <span style={{ color: 'var(--fg-mute)' }}>Téléphone</span>
        <a href="tel:+14388314150" style={{ color: 'var(--cyan)' }}>+1 (438) 831-4150</a>
        <span style={{ color: 'var(--fg-mute)' }}>Adresse</span>
        <span>Montréal, QC, Canada</span>
      </div>
    </LegalSection>
  </>
);

Object.assign(window, { LegalModal, LegalSection, LegalContent, PrivacyContent });