// Gestopia — Info / Legal / Resources page
// All secondary topics (CGU, RGPD, À propos, Docs, etc.) live here.

const { useState: useStateInfo, useEffect: useEffectInfo } = React;

// ─────────────────────────────────────────────────────────────
// Content tree — grouped topics with realistic placeholder copy.
// ─────────────────────────────────────────────────────────────
const INFO_TOPICS = [
  {
    group: "Produit",
    items: [
      {
        id: "fonctionnalites",
        title: "Fonctionnalités",
        eyebrow: "PRODUIT",
        intro: "Tout l'atelier dans une seule app : tickets de réparation, devis, factures, caisse, stock, étiquettes et fiches client. Pensé avec — et pour — des réparateurs indépendants.",
        sections: [
          {
            h: "Le flux complet",
            p: "Diagnostic, devis, validation client par SMS, commande de pièces, intervention, retrait, encaissement. Chaque étape est tracée et notifiée automatiquement.",
          },
          {
            h: "Compatible avec votre matériel",
            p: "Imprimantes Zebra, Brother, Dymo pour les étiquettes. Stripe Terminal pour le TPE. Lecteurs de code-barres USB et Bluetooth.",
          },
          {
            h: "Mobile et hors-ligne",
            p: "L'app reste fonctionnelle même sans internet à l'atelier. Tickets, caisse, fiches client : tout se synchronise dès que la connexion revient.",
          },
        ],
      },
      {
        id: "tarifs",
        title: "Tarifs",
        eyebrow: "PRODUIT",
        intro: "Trois plans simples. Pas de surcoût caché. 14 jours d'essai gratuit, sans carte bancaire.",
        sections: [
          { h: "Solo — 19 € / mois", p: "1 utilisateur, tickets illimités, devis & factures PDF, caisse simple, support email." },
          { h: "Boutique — 49 € / mois", p: "Jusqu'à 5 utilisateurs, TPE Stripe Terminal, étiquettes & code-barres, catalogue fournisseurs, support prioritaire." },
          { h: "Réseau — sur devis", p: "Utilisateurs illimités, multi-boutiques, API, SSO, gestionnaire de compte dédié, SLA 99,97 %." },
        ],
      },
      {
        id: "roadmap",
        title: "Roadmap",
        eyebrow: "PRODUIT",
        intro: "Ce sur quoi nous travaillons en ce moment. Nous publions chaque trimestre.",
        sections: [
          { h: "Q2 2026 — En cours", p: "Module RMA fournisseur, signature électronique des BAT sur tablette, raccourcis clavier, mode sombre/clair." },
          { h: "Q3 2026 — Planifié", p: "Marketplace de pièces détachées intégrée, scoring fournisseur, alertes prédictives de stock." },
          { h: "Q4 2026 — En réflexion", p: "Module SAV web pour vos clients, gestion des reprises et trade-in, intégration comptable Sage / EBP." },
        ],
      },
      {
        id: "changelog",
        title: "Changelog",
        eyebrow: "PRODUIT",
        intro: "Tout ce que nous avons livré, dans l'ordre.",
        sections: [
          { h: "v 1.0.4 — 12 mai 2026", p: "Filtres avancés sur les tickets, recherche par IMEI, exports CSV des ventes du jour, corrections d'affichage sur Firefox." },
          { h: "v 1.0.3 — 28 avril 2026", p: "Import CSV des clients depuis RepairShopr et mHelpDesk. Nouveau template de devis avec acompte." },
          { h: "v 1.0.2 — 09 avril 2026", p: "Étiquettes Zebra ZD230 supportées. Caisse : Z de caisse PDF, journal des écarts." },
        ],
      },
      {
        id: "statut",
        title: "Statut système",
        eyebrow: "PRODUIT",
        intro: "Tous nos systèmes sont surveillés en continu. Uptime sur 90 jours : 99,98 %.",
        sections: [
          { h: "API & app web", p: "Opérationnel — temps de réponse moyen 142 ms." },
          { h: "Synchronisation hors-ligne", p: "Opérationnel — files de synchro vides." },
          { h: "Paiements Stripe Terminal", p: "Opérationnel — aucun incident en cours." },
          { h: "Emails sortants & SMS", p: "Opérationnel." },
        ],
      },
    ],
  },
  {
    group: "Ressources",
    items: [
      {
        id: "documentation",
        title: "Documentation",
        eyebrow: "RESSOURCES",
        intro: "Tout ce qu'il faut savoir pour démarrer et maîtriser Gestopia.",
        sections: [
          { h: "Démarrer en 10 minutes", p: "Importez vos clients, votre catalogue de pièces, paramétrez vos étiquettes, prenez votre premier ticket. Ce guide vous accompagne pas à pas." },
          { h: "Migrer depuis votre outil actuel", p: "Migration assistée gratuite depuis RepairShopr, mHelpDesk, RepairDesk, Notion, Excel. Nous reprenons vos historiques de tickets et de factures." },
          { h: "Configurer votre TPE", p: "Stripe Terminal BBPOS WisePOS E ou Verifone P400. Activation en 2 clics, paiements sans contact et Apple Pay." },
        ],
      },
      {
        id: "guides",
        title: "Guides d'atelier",
        eyebrow: "RESSOURCES",
        intro: "Bonnes pratiques par type d'atelier, rédigées avec nos premiers utilisateurs.",
        sections: [
          { h: "Réparation smartphone", p: "Diagnostic systématique, gestion des IMEI, RGPD sur les données client, sauvegarde avant intervention, garanties pièces." },
          { h: "Réparation électronique", p: "Suivi par numéro de série, traçabilité des composants, micro-soudure et estimation horaire." },
          { h: "Atelier multi-services", p: "Gestion mixte vente / réparation / dépôt-vente, calcul de marges, gestion des occasions." },
        ],
      },
      {
        id: "communaute",
        title: "Communauté",
        eyebrow: "RESSOURCES",
        intro: "Rejoignez plus de 2 400 réparateurs qui utilisent Gestopia au quotidien.",
        sections: [
          { h: "Discord", p: "Un canal par grande thématique : caisse, comptabilité, fournisseurs, micro-soudure. Réponses en moyenne sous 2 h en journée." },
          { h: "Rencontres trimestrielles", p: "Meetups physiques à Paris, Lyon, Lille et Bordeaux. Démos, retours produit, partage de pratiques." },
          { h: "Programme ambassadeurs", p: "Vous nous aidez à améliorer Gestopia, on vous offre votre abonnement à vie." },
        ],
      },
      {
        id: "webinaires",
        title: "Webinaires",
        eyebrow: "RESSOURCES",
        intro: "Sessions live de 45 minutes avec démo et Q&A. Replays disponibles.",
        sections: [
          { h: "Prendre un ticket en 90 secondes", p: "Tous les mardis 14 h. Démo de bout en bout, de l'accueil client à l'encaissement." },
          { h: "Fiscalité et caisse en règle", p: "Mensuel. Mentions légales, Z de caisse, archivage : on déroule la check-list." },
          { h: "Optimiser ses marges", p: "Trimestriel. Lecture des KPIs, négociation fournisseur, suivi du panier moyen." },
        ],
      },
      {
        id: "api",
        title: "API",
        eyebrow: "RESSOURCES",
        intro: "API REST documentée. Inclus dans le plan Réseau, sur demande pour Boutique.",
        sections: [
          { h: "Endpoints disponibles", p: "Tickets, clients, devis, factures, paiements, stock. Webhooks sur tous les événements." },
          { h: "Authentification", p: "Clés API avec scopes, OAuth pour les intégrations tierces, journal d'audit complet." },
          { h: "Rate limits & SLA", p: "10 000 requêtes / heure par clé. SLA 99,97 % sur le plan Réseau." },
        ],
      },
    ],
  },
  {
    group: "Entreprise",
    items: [
      {
        id: "a-propos",
        title: "À propos",
        eyebrow: "ENTREPRISE",
        intro: "Gestopia a été fondée en 2024 à Paris par deux anciens réparateurs et un ingénieur logiciel. Notre mission : rendre les ateliers indépendants aussi outillés que les grandes enseignes.",
        sections: [
          { h: "Pourquoi Gestopia", p: "Parce que jongler entre un tableur, une caisse vieillissante, un outil de devis et un cahier de rendez-vous, ça ne tient pas. Vous méritez mieux qu'un patchwork." },
          { h: "Comment nous travaillons", p: "Tous les jeudis, deux membres de l'équipe passent une journée dans un atelier partenaire. Tous les sprints sont nommés d'après un client. C'est notre meilleure source d'idées." },
          { h: "L'équipe", p: "8 personnes en 2026, dont 4 anciens du secteur de la réparation. Basés à Paris, Lyon et Nantes." },
        ],
      },
      {
        id: "clients",
        title: "Clients",
        eyebrow: "ENTREPRISE",
        intro: "Plus de 2 400 ateliers en France et en Belgique font tourner leur activité avec Gestopia.",
        sections: [
          { h: "Phone Repair Lyon", p: "« Avant, je passais 1 h le soir à clôturer ma journée. Maintenant 10 minutes, montre en main. » — Jérémy, gérant." },
          { h: "Atelier Volt — Bordeaux", p: "« On a migré 3 boutiques en une semaine, sans perdre un seul ticket en cours. » — Sandra, fondatrice." },
          { h: "FixIt — Bruxelles", p: "« Les étiquettes ticket Zebra c'est ce qui nous a fait basculer. Plus jamais une réparation perdue. » — Tarek, technicien." },
        ],
      },
      {
        id: "presse",
        title: "Presse",
        eyebrow: "ENTREPRISE",
        intro: "Vous écrivez sur la French Tech, le retail ou la réparation ? On parle volontiers.",
        sections: [
          { h: "Contact presse", p: "presse@gestopia.fr — réponse sous 24 h ouvrées." },
          { h: "Kit presse", p: "Logo (SVG, PNG), portraits fondateurs, screenshots produit haute définition, chiffres clés. Téléchargement direct." },
          { h: "Articles récents", p: "Les Échos, Maddyness, FrenchWeb, La Tribune. Liens et PDFs sur demande." },
        ],
      },
      {
        id: "recrutement",
        title: "Recrutement",
        eyebrow: "ENTREPRISE",
        intro: "Nous recrutons des gens qui aiment l'artisanat — celui du logiciel comme celui de l'atelier.",
        sections: [
          { h: "Postes ouverts", p: "Senior Product Designer (Paris, hybride). Backend Engineer (full remote France). Customer Success Lead (Lyon)." },
          { h: "Ce qu'on offre", p: "Salaire au-dessus du marché, BSPCE, 35 jours de congés, 4 jours de retreat équipe par an, budget formation libre." },
          { h: "Comment postuler", p: "Une lettre, pas un CV. Adressée à jobs@gestopia.fr. On répond à tout le monde." },
        ],
      },
      {
        id: "contact",
        title: "Contact",
        eyebrow: "ENTREPRISE",
        intro: "On répond vite. Vraiment.",
        sections: [
          { h: "Support client", p: "support@gestopia.fr — réponse moyenne sous 2 h en journée, 24 h le week-end. Chat intégré à l'app pour les abonnés Boutique et Réseau." },
          { h: "Commercial", p: "ventes@gestopia.fr — pour les démos, les devis Réseau, les partenariats." },
          { h: "Courrier postal", p: "Gestopia SAS, 14 rue de Paradis, 75010 Paris, France." },
        ],
      },
    ],
  },
  {
    group: "Légal",
    items: [
      {
        id: "cgu",
        title: "CGU",
        eyebrow: "LÉGAL",
        intro: "Conditions Générales d'Utilisation — version en vigueur au 1ᵉʳ janvier 2026.",
        sections: [
          { h: "Objet", p: "Les présentes CGU encadrent l'utilisation de Gestopia, service en ligne édité par Gestopia SAS, immatriculée au RCS de Paris sous le n° 932 145 678." },
          { h: "Accès au service", p: "L'accès est gratuit pendant 14 jours, puis soumis à abonnement. Vous pouvez résilier à tout moment, sans préavis ni motif." },
          { h: "Engagements de l'utilisateur", p: "Vous garantissez la véracité des informations fournies, n'utilisez pas le service à des fins illicites, et respectez les droits des tiers." },
          { h: "Responsabilité", p: "Gestopia s'engage à une obligation de moyens. Nous publions notre SLA et nos incidents publiquement. Nous ne sommes pas responsables des données saisies par vos soins." },
          { h: "Loi applicable", p: "Droit français. Tribunaux de Paris compétents en cas de litige, après tentative de résolution amiable." },
        ],
      },
      {
        id: "confidentialite",
        title: "Confidentialité",
        eyebrow: "LÉGAL",
        intro: "Politique de confidentialité — vos données vous appartiennent, point.",
        sections: [
          { h: "Données collectées", p: "Compte (email, nom, atelier), données métier (clients, tickets, factures), données techniques (logs d'accès, type d'appareil). Pas de tracking publicitaire." },
          { h: "Finalités", p: "Faire fonctionner le service, vous facturer, vous aider quand vous nous contactez, prévenir la fraude. Rien d'autre." },
          { h: "Partage", p: "Aucune revente. Sous-traitants techniques (hébergement OVH France, Stripe pour paiements, Postmark pour emails) liés par contrat conforme RGPD." },
          { h: "Conservation", p: "Données comptables conservées 10 ans (obligation légale). Données client supprimées 30 jours après résiliation, exports CSV avant suppression." },
          { h: "Vos droits", p: "Accès, rectification, suppression, portabilité — par email à privacy@gestopia.fr, réponse sous 30 jours maximum." },
        ],
      },
      {
        id: "rgpd",
        title: "RGPD",
        eyebrow: "LÉGAL",
        intro: "Conformité au Règlement Général sur la Protection des Données.",
        sections: [
          { h: "Notre rôle", p: "Pour vos propres données de compte, nous sommes responsable de traitement. Pour les données de vos clients que vous saisissez, vous êtes responsable de traitement et nous sommes sous-traitant." },
          { h: "Contrat de sous-traitance", p: "Un DPA (Data Processing Agreement) est annexé à votre abonnement, conforme à l'article 28 du RGPD." },
          { h: "Hébergement", p: "Vos données sont stockées exclusivement en France, chez OVH (Roubaix et Strasbourg). Aucun transfert hors UE." },
          { h: "Délégué à la protection des données", p: "Notre DPO est joignable à dpo@gestopia.fr. CNIL, autorité de contrôle compétente." },
          { h: "Notification d'incident", p: "En cas de violation de données, notification sous 72 h à vous et à la CNIL, conformément à l'article 33." },
        ],
      },
      {
        id: "mentions-legales",
        title: "Mentions légales",
        eyebrow: "LÉGAL",
        intro: "Informations légales de l'éditeur du service Gestopia.",
        sections: [
          { h: "Éditeur", p: "Gestopia SAS, société par actions simplifiée au capital de 50 000 €. RCS Paris 932 145 678. N° de TVA intracommunautaire FR 12 932145678." },
          { h: "Siège social", p: "14 rue de Paradis, 75010 Paris, France." },
          { h: "Directeur de la publication", p: "M. Lucas Vasseur, Président." },
          { h: "Hébergeur", p: "OVH SAS, 2 rue Kellermann, 59100 Roubaix — tél. +33 9 72 10 10 07." },
          { h: "Contact", p: "contact@gestopia.fr — tél. +33 1 84 80 12 34." },
        ],
      },
      {
        id: "securite",
        title: "Sécurité",
        eyebrow: "LÉGAL",
        intro: "Comment nous protégeons vos données et celles de vos clients.",
        sections: [
          { h: "Chiffrement", p: "TLS 1.3 en transit. AES-256 au repos. Mots de passe hachés avec Argon2id, jamais stockés en clair." },
          { h: "Accès", p: "2FA disponible pour tous les utilisateurs, obligatoire pour les rôles administrateurs. SSO SAML disponible sur le plan Réseau." },
          { h: "Sauvegardes", p: "Sauvegardes chiffrées toutes les heures, conservées 30 jours. Restauration testée trimestriellement." },
          { h: "Audits", p: "Pentest annuel par une société tierce. Programme de bug bounty ouvert à security@gestopia.fr. Récompenses jusqu'à 5 000 €." },
          { h: "Conformité", p: "Hébergement HDS pas requis pour notre cas d'usage. Conforme RGPD, NF525 friendly pour la caisse." },
        ],
      },
    ],
  },
];

const FLAT_TOPICS = INFO_TOPICS.flatMap((g) => g.items);

// Topic title → id slug helper
const slugify = (s) => s.toLowerCase().replace(/[éèê]/g, "e").replace(/[àâ]/g, "a").replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");

function InfoPage({ topicId, setView, setTopicId }) {
  const topic = FLAT_TOPICS.find((t) => t.id === topicId) || FLAT_TOPICS[0];

  useEffectInfo(() => {
    window.scrollTo({ top: 0, behavior: "instant" });
  }, [topicId]);

  return (
    <div
      style={{
        background: "var(--bg)",
        color: "var(--fg)",
        position: "relative",
        minHeight: "100vh",
      }}
    >
      <Nav view="info" setView={setView} />

      <div className="container" style={{ paddingTop: 56, paddingBottom: 120 }}>
        <div className="mono-eyebrow" style={{ marginBottom: 12 }}>
          <button
            onClick={() => setView("landing")}
            className="ulink"
            style={{ color: "var(--fg-dim)", fontFamily: "inherit", textTransform: "inherit", letterSpacing: "inherit" }}
          >
            ← retour à l'accueil
          </button>
        </div>

        <h1
          style={{
            fontFamily: "var(--font-display)",
            fontSize: "clamp(40px, 5vw, 64px)",
            fontWeight: 700,
            letterSpacing: "-0.025em",
            lineHeight: 1.02,
            margin: "0 0 14px",
            textWrap: "balance",
          }}
        >
          Centre d'information
        </h1>
        <p
          style={{
            color: "var(--fg-dim)",
            fontSize: 17,
            lineHeight: 1.55,
            margin: "0 0 56px",
            maxWidth: 640,
            textWrap: "pretty",
          }}
        >
          Tout ce qu'il faut savoir sur Gestopia — produit, ressources, entreprise, et le cadre légal qui protège vos données.
        </p>

        <div
          style={{
            display: "grid",
            gridTemplateColumns: "260px 1fr",
            gap: 64,
            alignItems: "flex-start",
          }}
        >
          {/* Sidebar */}
          <aside
            style={{
              position: "sticky",
              top: 96,
              display: "flex",
              flexDirection: "column",
              gap: 28,
            }}
          >
            {INFO_TOPICS.map((g) => (
              <div key={g.group}>
                <div className="mono-eyebrow" style={{ fontSize: 10, marginBottom: 12 }}>
                  {g.group}
                </div>
                <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 2 }}>
                  {g.items.map((it) => {
                    const active = it.id === topic.id;
                    return (
                      <li key={it.id}>
                        <button
                          onClick={() => setTopicId(it.id)}
                          style={{
                            display: "flex",
                            alignItems: "center",
                            gap: 10,
                            padding: "7px 0",
                            fontSize: 14,
                            fontFamily: "var(--font-ui)",
                            color: active ? "var(--fg)" : "var(--fg-dim)",
                            fontWeight: active ? 500 : 400,
                            textAlign: "left",
                            width: "100%",
                            transition: "color 160ms ease",
                          }}
                          onMouseEnter={(e) => { if (!active) e.currentTarget.style.color = "var(--fg)"; }}
                          onMouseLeave={(e) => { if (!active) e.currentTarget.style.color = "var(--fg-dim)"; }}
                        >
                          <span
                            style={{
                              width: 4,
                              height: 4,
                              borderRadius: 999,
                              background: active ? "var(--accent)" : "transparent",
                              flexShrink: 0,
                            }}
                          />
                          <span>{it.title}</span>
                        </button>
                      </li>
                    );
                  })}
                </ul>
              </div>
            ))}
          </aside>

          {/* Content */}
          <article
            key={topic.id}
            className="rise"
            style={{
              maxWidth: 760,
            }}
          >
            <div className="mono-eyebrow" style={{ fontSize: 11, color: "var(--accent)", marginBottom: 16 }}>
              {topic.eyebrow}
            </div>
            <h2
              style={{
                fontFamily: "var(--font-display)",
                fontSize: "clamp(32px, 3.6vw, 52px)",
                fontWeight: 700,
                letterSpacing: "-0.025em",
                lineHeight: 1.05,
                margin: "0 0 20px",
                textWrap: "balance",
              }}
            >
              {topic.title}
            </h2>
            <p
              style={{
                fontSize: 18,
                lineHeight: 1.55,
                color: "var(--fg-dim)",
                margin: "0 0 48px",
                textWrap: "pretty",
              }}
            >
              {topic.intro}
            </p>

            <div style={{ display: "flex", flexDirection: "column", gap: 36 }}>
              {topic.sections.map((s, i) => (
                <section key={i}>
                  <h3
                    style={{
                      fontFamily: "var(--font-display)",
                      fontSize: 22,
                      fontWeight: 600,
                      letterSpacing: "-0.015em",
                      margin: "0 0 10px",
                    }}
                  >
                    {s.h}
                  </h3>
                  <p
                    style={{
                      fontSize: 15.5,
                      lineHeight: 1.65,
                      color: "var(--fg-dim)",
                      margin: 0,
                      textWrap: "pretty",
                    }}
                  >
                    {s.p}
                  </p>
                </section>
              ))}
            </div>

            {/* Footer prev/next */}
            <InfoPagination topicId={topic.id} setTopicId={setTopicId} />
          </article>
        </div>
      </div>
    </div>
  );
}

function InfoPagination({ topicId, setTopicId }) {
  const idx = FLAT_TOPICS.findIndex((t) => t.id === topicId);
  const prev = idx > 0 ? FLAT_TOPICS[idx - 1] : null;
  const next = idx < FLAT_TOPICS.length - 1 ? FLAT_TOPICS[idx + 1] : null;
  return (
    <div
      style={{
        display: "grid",
        gridTemplateColumns: "1fr 1fr",
        gap: 16,
        marginTop: 80,
        paddingTop: 32,
        borderTop: "1px solid var(--line)",
      }}
    >
      {prev ? (
        <button
          onClick={() => setTopicId(prev.id)}
          style={{
            textAlign: "left",
            padding: "16px 20px",
            border: "1px solid var(--line-strong)",
            borderRadius: 14,
            background: "var(--surface)",
            color: "var(--fg)",
            cursor: "pointer",
            transition: "border-color 160ms ease, background 160ms ease",
          }}
          onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--accent)"; }}
          onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--line-strong)"; }}
        >
          <div className="mono-eyebrow" style={{ fontSize: 10, color: "var(--fg-faint)" }}>← PRÉCÉDENT</div>
          <div style={{ marginTop: 4, fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 16 }}>{prev.title}</div>
        </button>
      ) : <div />}
      {next ? (
        <button
          onClick={() => setTopicId(next.id)}
          style={{
            textAlign: "right",
            padding: "16px 20px",
            border: "1px solid var(--line-strong)",
            borderRadius: 14,
            background: "var(--surface)",
            color: "var(--fg)",
            cursor: "pointer",
            transition: "border-color 160ms ease, background 160ms ease",
          }}
          onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--accent)"; }}
          onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--line-strong)"; }}
        >
          <div className="mono-eyebrow" style={{ fontSize: 10, color: "var(--fg-faint)" }}>SUIVANT →</div>
          <div style={{ marginTop: 4, fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 16 }}>{next.title}</div>
        </button>
      ) : <div />}
    </div>
  );
}

// Helper: map footer link labels → topic ids
const FOOTER_LINK_MAP = {
  "Fonctionnalités": "fonctionnalites",
  "Tarifs": "tarifs",
  "Roadmap": "roadmap",
  "Changelog": "changelog",
  "Statut système": "statut",
  "Documentation": "documentation",
  "Guides d'atelier": "guides",
  "Communauté": "communaute",
  "Webinaires": "webinaires",
  "API": "api",
  "À propos": "a-propos",
  "Clients": "clients",
  "Presse": "presse",
  "Recrutement": "recrutement",
  "Contact": "contact",
  "CGU": "cgu",
  "Confidentialité": "confidentialite",
  "RGPD": "rgpd",
  "Mentions légales": "mentions-legales",
  "Sécurité": "securite",
};

Object.assign(window, { InfoPage, FOOTER_LINK_MAP });
