/* ClientBase — Legal pages (CGU, Privacy, Cookies, Mentions) — RGPD */

const LEGAL_SECTIONS = [
  { id: "privacy",  label: "Confidentialité (RGPD)" },
  { id: "cgu",      label: "Conditions d'utilisation" },
  { id: "cookies",  label: "Cookies" },
  { id: "mentions", label: "Mentions légales" },
];

const LegalPage = ({ go, section: initial }) => {
  const [section, setSection] = React.useState(() => {
    try {
      const fromGlobal = window.__cbLegalSection;
      if (fromGlobal) { window.__cbLegalSection = null; return fromGlobal; }
    } catch {}
    return initial || "privacy";
  });
  const isMobile = useIsMobile(1040);

  const currentLabel = (LEGAL_SECTIONS.find(s => s.id === section) || LEGAL_SECTIONS[0]).label;

  const switchTo = (id) => {
    setSection(id);
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  return (
    <>
      <PageHeader eyebrow="Informations légales"
        title="Transparence & RGPD"
        subtitle="Toutes les informations sur vos droits, vos données, et comment on gère ClientBase."/>

      <section style={{ padding: "20px 0 96px" }}>
        <div className="container">
          {/* ==================== Desktop ==================== */}
          {!isMobile && (
            <div style={{
              display: "grid", gridTemplateColumns: "240px 1fr", gap: 48,
              maxWidth: 1040, margin: "0 auto",
            }}>
              <nav style={{ position: "sticky", top: 80, alignSelf: "flex-start" }}>
                <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
                  {LEGAL_SECTIONS.map(s => (
                    <button key={s.id} onClick={() => switchTo(s.id)} style={{
                      padding: "10px 12px", border: "none",
                      borderRadius: 8, cursor: "pointer",
                      fontSize: 13.5, fontWeight: section === s.id ? 560 : 450,
                      background: section === s.id ? "var(--accent-soft)" : "transparent",
                      color: section === s.id ? "var(--accent-ink)" : "var(--ink-2)",
                      textAlign: "left", fontFamily: "inherit",
                    }}>{s.label}</button>
                  ))}
                </div>
                <div style={{ marginTop: 24, padding: 14, background: "var(--bg-alt)", border: "1px solid var(--line)", borderRadius: 10, fontSize: 12.5, color: "var(--ink-3)", lineHeight: 1.55 }}>
                  Une question ? Écrivez-nous à <a href="mailto:clientbase.fr@gmail.com" style={{ color: "var(--accent-ink)", fontWeight: 520 }}>clientbase.fr@gmail.com</a>.
                </div>
              </nav>

              <article style={{ fontSize: 15, lineHeight: 1.75, color: "var(--ink-2)", minWidth: 0 }}>
                {section === "privacy"  && <PrivacyContent go={go}/>}
                {section === "cgu"      && <CguContent/>}
                {section === "cookies"  && <CookiesContent/>}
                {section === "mentions" && <MentionsContent/>}
              </article>
            </div>
          )}

          {/* ==================== Mobile ==================== */}
          {isMobile && (
            <div style={{ maxWidth: 640, margin: "0 auto" }}>
              {/* Dropdown select natif — ultra-robuste sur mobile */}
              <label style={{
                display: "block", fontSize: 12, color: "var(--ink-4)", fontWeight: 520,
                textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: 6,
              }}>
                Choisir une section
              </label>
              <div style={{ position: "relative" }}>
                <select value={section}
                  onChange={e => switchTo(e.target.value)}
                  style={{
                    width: "100%", padding: "14px 44px 14px 16px",
                    fontSize: 15, fontWeight: 520,
                    background: "var(--surface)", border: "1px solid var(--line-strong)",
                    borderRadius: 12, color: "var(--ink)", outline: "none",
                    fontFamily: "inherit", appearance: "none",
                    cursor: "pointer",
                  }}>
                  {LEGAL_SECTIONS.map(s => (
                    <option key={s.id} value={s.id}>{s.label}</option>
                  ))}
                </select>
                <div aria-hidden style={{
                  position: "absolute", right: 14, top: "50%", transform: "translateY(-50%)",
                  color: "var(--ink-4)", pointerEvents: "none",
                  display: "flex", alignItems: "center",
                }}>
                  <Icon name="arrow" size={14} style={{ transform: "rotate(90deg)" }}/>
                </div>
              </div>

              <article style={{
                marginTop: 24,
                fontSize: 15, lineHeight: 1.7, color: "var(--ink-2)",
              }}>
                {section === "privacy"  && <PrivacyContent go={go}/>}
                {section === "cgu"      && <CguContent/>}
                {section === "cookies"  && <CookiesContent/>}
                {section === "mentions" && <MentionsContent/>}
              </article>

              {/* Section navigation at bottom — prev/next */}
              <div style={{
                marginTop: 40, padding: "16px 0",
                borderTop: "1px solid var(--line)",
                display: "flex", justifyContent: "space-between", gap: 10,
              }}>
                {(() => {
                  const idx = LEGAL_SECTIONS.findIndex(s => s.id === section);
                  const prev = idx > 0 ? LEGAL_SECTIONS[idx - 1] : null;
                  const next = idx < LEGAL_SECTIONS.length - 1 ? LEGAL_SECTIONS[idx + 1] : null;
                  return (
                    <>
                      {prev ? (
                        <button className="btn btn-sm btn-ghost" onClick={() => switchTo(prev.id)}
                          style={{ flex: 1, justifyContent: "flex-start" }}>
                          <Icon name="arrow" size={12} style={{ transform: "rotate(180deg)" }}/>
                          <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                            {prev.label}
                          </span>
                        </button>
                      ) : <div style={{ flex: 1 }}/>}
                      {next ? (
                        <button className="btn btn-sm btn-ghost" onClick={() => switchTo(next.id)}
                          style={{ flex: 1, justifyContent: "flex-end" }}>
                          <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                            {next.label}
                          </span>
                          <Icon name="arrow" size={12}/>
                        </button>
                      ) : <div style={{ flex: 1 }}/>}
                    </>
                  );
                })()}
              </div>

              <div style={{
                marginTop: 20, padding: 14,
                background: "var(--bg-alt)", border: "1px solid var(--line)",
                borderRadius: 10, fontSize: 12.5, color: "var(--ink-3)", lineHeight: 1.55,
                textAlign: "center",
              }}>
                Une question ? <a href="mailto:clientbase.fr@gmail.com" style={{ color: "var(--accent-ink)", fontWeight: 520 }}>clientbase.fr@gmail.com</a>
              </div>
            </div>
          )}
        </div>
      </section>
    </>
  );
};

const LegalH2 = ({ children }) => (
  <h2 style={{ fontSize: 26, marginTop: 8 }}>{children}</h2>
);
const LegalH3 = ({ children }) => (
  <h3 style={{ fontSize: 18, marginTop: 32 }}>{children}</h3>
);
const LegalUpdated = () => (
  <div style={{
    display: "inline-block", padding: "3px 10px", marginBottom: 20,
    fontSize: 12, color: "var(--accent-ink)", fontWeight: 520,
    background: "var(--accent-soft)", borderRadius: 999,
  }}>
    Mise à jour · avril 2026
  </div>
);

const PrivacyContent = ({ go }) => (
  <>
    <LegalUpdated/>
    <LegalH2>Politique de confidentialité</LegalH2>
    <p style={{ marginTop: 16 }}>
      Cette politique décrit comment ClientBase collecte, utilise et protège vos données personnelles, conformément au Règlement Général sur la Protection des Données (RGPD) et à la loi Informatique et Libertés.
    </p>

    <LegalH3>Qui est responsable de quoi ?</LegalH3>
    <p>
      ClientBase est un outil que vous utilisez pour gérer votre activité. Pour clarifier les rôles RGPD :
    </p>
    <ul>
      <li><strong>Pour les données de votre compte pro</strong> (nom, email, paramètres, abonnement) : ClientBase est <em>responsable de traitement</em>.</li>
      <li><strong>Pour les données de vos clients</strong> (fiches, rendez-vous, factures, messages, notes) : <em>vous</em> êtes responsable de traitement, et ClientBase agit comme <em>sous-traitant</em> au sens de l'article 28 du RGPD. Nous ne traitons ces données que pour vous fournir le service.</li>
    </ul>

    <LegalH3>Quelles données sont collectées ?</LegalH3>
    <ul>
      <li><strong>À l'inscription :</strong> votre nom, votre email, le nom de votre activité, et un mot de passe.</li>
      <li><strong>Lors de l'utilisation :</strong> les informations que vous saisissez (fiches clients, rendez-vous, prestations, factures, stock, notifications, paramètres de l'activité).</li>
      <li><strong>Réservations en ligne :</strong> si vous activez le lien de réservation public, les coordonnées que vos clients saisissent (prénom, nom, email, téléphone, précisions éventuelles).</li>
      <li><strong>Données techniques :</strong> aucun analytics, aucun tracker tiers, aucun cookie publicitaire. Nous ne mesurons pas votre navigation.</li>
    </ul>

    <LegalH3>Où sont stockées vos données ?</LegalH3>
    <p>
      Les données sont hébergées chez <strong>Supabase</strong> sur l'infrastructure située à <strong>Paris (région eu-west-3, France)</strong>, dans l'Union européenne. Elles ne sortent pas de l'UE. Les communications entre votre appareil et nos serveurs sont chiffrées (TLS).
    </p>
    <p>
      Le site web est servi par <strong>Vercel</strong> (hébergeur du front-end). Les emails transactionnels (confirmation de compte, réinitialisation de mot de passe) sont envoyés via le service intégré de Supabase. Aucun autre sous-traitant n'a accès à vos données.
    </p>

    <LegalH3>Pourquoi ces données ?</LegalH3>
    <p>
      Uniquement pour faire fonctionner l'application : authentifier votre compte, afficher vos clients et vos rendez-vous, générer vos factures, gérer le lien de réservation public. Aucun usage commercial, aucune revente, aucune publicité, aucun partage avec des tiers.
    </p>

    <LegalH3>Combien de temps sont-elles conservées ?</LegalH3>
    <ul>
      <li><strong>Compte actif :</strong> tant que vous utilisez ClientBase.</li>
      <li><strong>Compte inactif :</strong> en cas d'absence de connexion pendant 24 mois consécutifs, nous vous prévenons par email puis supprimons le compte et les données associées.</li>
      <li><strong>Suppression à la demande :</strong> vos données sont supprimées définitivement sous 30 jours après votre demande (depuis <em>Paramètres → Supprimer mon compte</em> ou par email).</li>
      <li><strong>Données de facturation :</strong> les factures émises sont conservées 10 ans, conformément à l'obligation comptable du Code de commerce.</li>
      <li><strong>Logs techniques :</strong> les journaux de connexion et de sécurité sont conservés 12 mois maximum.</li>
    </ul>

    <LegalH3>Vos droits RGPD</LegalH3>
    <p>Conformément au RGPD, vous disposez des droits suivants :</p>
    <ul>
      <li><strong>Droit d'accès :</strong> toutes vos données sont directement visibles dans l'application. Une copie complète peut vous être envoyée sur demande.</li>
      <li><strong>Droit de rectification :</strong> vous pouvez modifier toute information à tout moment dans l'app.</li>
      <li><strong>Droit à l'effacement :</strong> via <em>Paramètres → Supprimer mon compte</em>, ou par email.</li>
      <li><strong>Droit à la portabilité :</strong> export complet de vos données au format JSON sur simple demande, sous un mois maximum.</li>
      <li><strong>Droit d'opposition et de limitation :</strong> écrivez-nous, nous traitons votre demande sous un mois.</li>
    </ul>
    <p>
      Pour exercer vos droits ou poser toute question sur vos données : <a href="mailto:clientbase.fr@gmail.com" style={{ color: "var(--accent-ink)", fontWeight: 520 }}>clientbase.fr@gmail.com</a>.
    </p>

    <LegalH3>Sécurité</LegalH3>
    <p>
      Les mots de passe ne sont jamais stockés en clair : ils sont transmis via une connexion chiffrée (TLS) puis hachés côté serveur par Supabase Auth (algorithme bcrypt) avant stockage. Nous ne pouvons pas voir votre mot de passe. Les accès aux données sont protégés par des règles d'isolation au niveau de la base (<em>Row Level Security</em>) : chaque compte ne peut lire que ses propres données.
    </p>
    <p>
      Conseils d'usage : utilisez un mot de passe unique, ne le partagez pas, et déconnectez-vous des appareils partagés.
    </p>

    <LegalH3>Réclamation</LegalH3>
    <p>
      Vous disposez du droit d'introduire une réclamation auprès de la CNIL si vous estimez que le traitement de vos données constitue une violation du RGPD. <a href="https://www.cnil.fr" target="_blank" rel="noopener noreferrer" style={{ color: "var(--accent-ink)", fontWeight: 520 }}>www.cnil.fr</a>
    </p>

    <LegalH3>Évolution de cette politique</LegalH3>
    <p>
      Toute modification substantielle de cette politique vous sera notifiée par email. La date de dernière mise à jour figure en haut de cette page.
    </p>
  </>
);

const CguContent = () => (
  <>
    <LegalUpdated/>
    <LegalH2>Conditions générales d'utilisation (CGU)</LegalH2>
    <p style={{ marginTop: 16 }}>
      Les présentes CGU régissent l'utilisation de ClientBase dans sa phase de bêta. En créant un compte, vous acceptez ces conditions.
    </p>

    <LegalH3>Objet</LegalH3>
    <p>
      ClientBase est un outil de gestion d'activité à destination des indépendants et petites entreprises du service (prise de rendez-vous, gestion des clients, facturation, fidélité, stock).
    </p>

    <LegalH3>Accès au service</LegalH3>
    <p>
      L'accès à la bêta est gratuit. Nous nous réservons le droit de faire évoluer, suspendre ou arrêter le service pendant la bêta avec un préavis raisonnable, sauf en cas d'urgence technique ou de sécurité. Avant tout arrêt, un export de vos données vous sera proposé.
    </p>

    <LegalH3>Compte utilisateur</LegalH3>
    <p>
      Vous êtes responsable de la confidentialité de votre mot de passe et de toute activité réalisée depuis votre compte. Vous vous engagez à fournir des informations exactes lors de l'inscription et à les tenir à jour.
    </p>

    <LegalH3>Utilisation acceptable</LegalH3>
    <p>
      Vous vous engagez à utiliser ClientBase pour votre activité professionnelle légitime. Sont notamment interdits : toute utilisation frauduleuse, le spam de vos clients, l'usurpation d'identité, le contournement des limites techniques, et toute tentative d'atteinte à l'intégrité du service ou aux données d'autres utilisateurs.
    </p>

    <LegalH3>Données et rôles RGPD</LegalH3>
    <p>
      Vous restez propriétaire des données que vous saisissez. Concernant les données de vos clients (fiches, rendez-vous, factures, réservations), <strong>vous êtes responsable de traitement</strong> et ClientBase intervient en tant que <strong>sous-traitant</strong> au sens de l'article 28 du RGPD. Vous vous engagez à informer vos clients de l'usage de leurs données et à recueillir, le cas échéant, leur consentement. Les engagements de sous-traitance de ClientBase sont décrits dans la <a href="#" onClick={e => { e.preventDefault(); window.scrollTo({top:0,behavior:"smooth"}); }} style={{ color: "var(--accent-ink)", fontWeight: 520 }}>politique de confidentialité</a>.
    </p>

    <LegalH3>Propriété intellectuelle</LegalH3>
    <p>
      La marque, le logo, le code et les éléments graphiques de ClientBase restent la propriété de leurs auteurs. Les données que vous saisissez vous appartiennent intégralement et nous ne nous arrogeons aucun droit dessus.
    </p>

    <LegalH3>Responsabilité</LegalH3>
    <p>
      ClientBase est fourni "en l'état" pendant la bêta. Nous mettons en œuvre les moyens raisonnables pour assurer la disponibilité, la sécurité et l'intégrité du service, mais nous ne pouvons garantir une absence totale de bug ou d'interruption. Notre responsabilité ne saurait être engagée pour les dommages indirects (perte d'exploitation, perte de chance, etc.). Nous vous recommandons d'exporter régulièrement vos données.
    </p>

    <LegalH3>Résiliation</LegalH3>
    <p>
      Vous pouvez cesser d'utiliser ClientBase à tout moment, sans préavis ni justification, en supprimant votre compte depuis <em>Paramètres → Supprimer mon compte</em>. Nous pouvons suspendre ou résilier un compte en cas de manquement grave aux présentes CGU, après notification.
    </p>

    <LegalH3>Droit applicable</LegalH3>
    <p>
      Les présentes CGU sont soumises au droit français. En cas de litige, une résolution amiable sera recherchée en priorité.
    </p>
  </>
);

const CookiesContent = () => (
  <>
    <LegalUpdated/>
    <LegalH2>Politique de cookies</LegalH2>
    <p style={{ marginTop: 16 }}>
      Un cookie est un petit fichier déposé par un site web sur votre appareil pour mémoriser des informations. Voici ce qu'on utilise sur ClientBase — et surtout ce qu'on <strong>n'utilise pas</strong>.
    </p>

    <LegalH3>Cookies et stockage strictement nécessaires</LegalH3>
    <p>
      On utilise le <code style={{ fontFamily: "inherit", fontSize: 13, background: "var(--bg-alt)", padding: "1px 6px", borderRadius: 4 }}>localStorage</code> de votre navigateur pour mémoriser :
    </p>
    <ul>
      <li>Le <strong>jeton de session</strong> qui vous garde connecté(e) à votre compte (émis par notre prestataire d'authentification, Supabase).</li>
      <li>Votre <strong>préférence de thème</strong> (clair, chaud, sombre).</li>
      <li>La <strong>page active</strong> et le module ouvert dans l'app, pour retrouver votre contexte au rechargement.</li>
      <li>Un éventuel <strong>brouillon</strong> de saisie en cours, pour ne pas perdre votre travail.</li>
    </ul>
    <p>
      Ces informations sont <strong>strictement nécessaires</strong> au fonctionnement du service ; à ce titre, leur dépôt ne requiert pas de consentement préalable (article 82 de la loi Informatique et Libertés).
    </p>

    <LegalH3>Ce qu'on n'utilise PAS</LegalH3>
    <ul>
      <li>❌ Aucun cookie publicitaire.</li>
      <li>❌ Aucun cookie de tracking (Google Analytics, Facebook Pixel, etc.).</li>
      <li>❌ Aucun cookie de mesure d'audience tiers.</li>
      <li>❌ Aucune revente ou partage de données comportementales.</li>
    </ul>

    <LegalH3>Gérer vos cookies</LegalH3>
    <p>
      Vous pouvez à tout moment supprimer les données stockées par ClientBase en effaçant les données de site de votre navigateur, ou via le bouton <em>Réinitialiser les données</em> dans les Paramètres de l'app.
    </p>
  </>
);

const MentionsContent = () => (
  <>
    <LegalUpdated/>
    <LegalH2>Mentions légales</LegalH2>
    <p style={{ marginTop: 16 }}>
      Conformément à la loi pour la confiance dans l'économie numérique (LCEN), voici les informations d'identification de l'éditeur du site clientbase.fr.
    </p>

    <LegalH3>Éditeur</LegalH3>
    <ul style={{ listStyle: "none", padding: 0, margin: "10px 0 0", display: "flex", flexDirection: "column", gap: 6 }}>
      <li><strong>Responsable de la publication&nbsp;:</strong> Noah Pascual</li>
      <li><strong>Projet&nbsp;:</strong> ClientBase (nom commercial)</li>
      <li><strong>Forme juridique&nbsp;:</strong> <em>structure en cours d'immatriculation</em></li>
      <li><strong>SIRET&nbsp;:</strong> <em>publié dès l'immatriculation</em></li>
      <li><strong>N° TVA intracommunautaire&nbsp;:</strong> <em>publié dès l'immatriculation (le cas échéant)</em></li>
      <li><strong>Localisation&nbsp;:</strong> Essonne (91), France</li>
      <li><strong>Contact&nbsp;:</strong> <a href="mailto:clientbase.fr@gmail.com" style={{ color: "var(--accent-ink)", fontWeight: 520 }}>clientbase.fr@gmail.com</a></li>
    </ul>
    <p style={{ marginTop: 14 }}>
      ClientBase est actuellement en phase de <strong>bêta gratuite</strong>. La structure juridique est en cours d'immatriculation ; les mentions complètes (SIRET, adresse de siège, forme juridique) seront publiées ici <strong>avant tout lancement commercial payant</strong>. Aucune transaction financière n'est traitée tant que ces mentions ne sont pas complétées.
    </p>

    <LegalH3>Hébergement</LegalH3>
    <p>
      <strong>Front-end :</strong> le site clientbase.fr est servi par Vercel Inc., 440 N Barranca Ave #4133, Covina, CA 91723, USA — <a href="https://vercel.com" target="_blank" rel="noopener noreferrer" style={{ color: "var(--accent-ink)", fontWeight: 520 }}>vercel.com</a>. Vercel ne stocke aucune donnée personnelle des utilisateurs ; il sert uniquement les fichiers statiques du site.
    </p>
    <p>
      <strong>Base de données et authentification :</strong> les données applicatives (comptes, clients, rendez-vous, factures, etc.) sont hébergées par <strong>Supabase</strong> (Supabase, Inc., 970 Toa Payoh North #07-04, Singapore 318992) sur l'infrastructure située en France — région <em>eu-west-3 (Paris)</em>. Les données ne sortent pas de l'Union européenne. <a href="https://supabase.com" target="_blank" rel="noopener noreferrer" style={{ color: "var(--accent-ink)", fontWeight: 520 }}>supabase.com</a>
    </p>
    <p>
      <strong>Emails transactionnels :</strong> envoyés via le service intégré de Supabase (confirmation de compte, réinitialisation de mot de passe).
    </p>

    <LegalH3>Propriété intellectuelle</LegalH3>
    <p>
      L'ensemble des contenus du site (textes, visuels, code) sont protégés par le droit d'auteur. Toute reproduction non autorisée est interdite.
    </p>

    <LegalH3>Contact</LegalH3>
    <p>
      Pour toute question juridique, contactez <a href="mailto:clientbase.fr@gmail.com" style={{ color: "var(--accent-ink)", fontWeight: 520 }}>clientbase.fr@gmail.com</a>.
    </p>
  </>
);

Object.assign(window, { LegalPage });