// Trivan — sous-pages : tarifs, connexion, démarrer, à propos, contact,
// documentation, pages légales. Montées via <div id="root" data-page="…">.
// Dépend de : trivan-anim.jsx, trivan-shared.jsx

const { useState: usePgState } = React;

/* ============================================================
   En-tête de page commun
   ============================================================ */
function PageHead({ kicker, title, sub }) {
  return (
    <div className="page3-head">
      <span className="kicker3">{kicker}</span>
      <h1 data-reveal="split"><SplitWords text={title} /></h1>
      {sub ? <p data-reveal="" style={{ "--reveal-delay": "150ms" }}>{sub}</p> : null}
    </div>
  );
}

/* ============================================================
   Page : Tarifs
   ============================================================ */
function PageTarifs() {
  const included = [
    "Aucun frais d'installation",
    "Routage et bascule automatique inclus",
    "Vos contrats prestataires inchangés",
    "Support en français",
  ];
  const plans = [
    {
      name: "Standard",
      desc: "Pour toutes les boutiques",
      rate: "0,9 %",
      fee: "+ 0,15 € par transaction routée",
      extra: "Sans engagement, sans minimum",
      features: [
        "Routage intelligent multi-prestataires",
        "Bascule automatique en cas de panne",
        "Registre unifié des encaissements",
        "Tableau de bord & analytique",
        "Modules Shopify, WooCommerce, PrestaShop",
        "Support par email",
      ],
      cta: "Commencer",
      ctaHref: "demarrer.html",
      highlighted: true,
      badge: "Par défaut",
    },
    {
      name: "Professionnel",
      desc: "Tarifs négociés selon le volume",
      rate: "Sur mesure",
      fee: null,
      extra: "Taux dégressifs",
      features: [
        "Tout du plan Standard",
        "Taux réduits selon le volume",
        "Règles de routage avancées",
        "Accès API complet",
        "Support prioritaire",
        "Interlocuteur dédié",
      ],
      cta: "Nous contacter",
      ctaHref: "contact.html",
      highlighted: false,
    },
    {
      name: "Entreprise",
      desc: "Pour les grandes organisations",
      rate: "Sur mesure",
      fee: null,
      extra: "Conditions négociées",
      features: [
        "Tout du plan Professionnel",
        "Volume illimité",
        "Intégrations personnalisées",
        "Environnements de test dédiés",
        "Support dédié 24/7",
        "Garantie SLA",
      ],
      cta: "Nous contacter",
      ctaHref: "contact.html",
      highlighted: false,
    },
  ];
  return (
    <div className="container">
      <PageHead
        kicker="Tarification transparente"
        title="Des tarifs simples, sans surprise"
        sub="Choisissez la formule adaptée à votre boutique. Toutes nos offres incluent l'essentiel — et vos fonds ne transitent jamais par nous."
      />

      <div className="inc3" data-reveal="">
        {included.map((item) => (
          <span key={item}><span className="ck">✓</span>{item}</span>
        ))}
      </div>

      <div className="plans3">
        {plans.map((plan, i) => (
          <article
            className={"plan3" + (plan.highlighted ? " hl" : "")}
            key={plan.name}
            data-reveal=""
            style={{ "--reveal-delay": (i * 90) + "ms" }}
          >
            {plan.badge ? <span className="plan3-badge">{plan.badge}</span> : null}
            <h3>{plan.name}</h3>
            <p className="plan3-desc">{plan.desc}</p>
            <div className="plan3-price">
              <span className="rate">{plan.rate}</span>
              {plan.fee ? <span className="fee">{plan.fee}</span> : null}
            </div>
            {plan.extra ? <span className="plan3-extra">{plan.extra}</span> : null}
            <ul className="plan3-feats">
              {plan.features.map((f) => (
                <li key={f}><span className="ck">✓</span>{f}</li>
              ))}
            </ul>
            <a className={"btn3 " + (plan.highlighted ? "primary" : "outline-d")} href={plan.ctaHref}>
              {plan.cta}{plan.highlighted ? <span className="arr">→</span> : null}
            </a>
          </article>
        ))}
      </div>

      <div className="cta3-card" data-reveal="">
        <h3>Besoin d'une solution sur mesure ?</h3>
        <p>
          Parlez-nous de votre volume et de vos prestataires : nous construisons
          une tarification personnalisée et des intégrations adaptées à votre activité.
        </p>
        <a className="btn3 primary" href="contact.html">Contacter l'équipe commerciale <span className="arr">→</span></a>
      </div>
    </div>
  );
}

/* ============================================================
   Page : Connexion
   ============================================================ */
function PageConnexion() {
  const [err, setErr] = usePgState(false);
  const onSubmit = (e) => {
    e.preventDefault();
    setErr(true);
  };
  return (
    <div className="container auth3-wrap">
      <div className="auth3" data-reveal="">
        <div className="auth3-head">
          <TrivanWordmark height={28} />
          <h1>Connexion</h1>
          <p>Accédez à votre tableau de bord Trivan.</p>
        </div>
        <form className="form3" onSubmit={onSubmit} noValidate>
          <div className="f3-field">
            <label htmlFor="login-email">Email</label>
            <input id="login-email" type="email" placeholder="vous@boutique.fr" autoComplete="email" required />
          </div>
          <div className="f3-field">
            <label htmlFor="login-pass">Mot de passe</label>
            <input id="login-pass" type="password" placeholder="••••••••" autoComplete="current-password" required />
          </div>
          {err ? (
            <p className="f3-error" role="alert">
              Identifiants non reconnus. Besoin d'aide ?{" "}
              <a href={"mailto:" + TRIVAN_INFO.email}>{TRIVAN_INFO.email}</a>
            </p>
          ) : null}
          <button className="btn3 primary f3-submit" type="submit">Se connecter <span className="arr">→</span></button>
        </form>
        <div className="auth3-foot">
          <a href={"mailto:" + TRIVAN_INFO.email + "?subject=Mot%20de%20passe%20oubli%C3%A9"}>Mot de passe oublié ?</a>
          <span>Pas encore de compte ? <a href="demarrer.html">Démarrer</a></span>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   Page : Démarrer
   ============================================================ */
function PageDemarrer() {
  const [sent, setSent] = usePgState(false);
  const onSubmit = (e) => {
    e.preventDefault();
    const f = e.target;
    const body =
      "Boutique : " + f.shop.value +
      "\nPlateforme : " + f.platform.value +
      "\nVolume mensuel : " + f.volume.value +
      "\nEmail : " + f.email.value +
      "\n\n" + f.msg.value;
    window.location.href =
      "mailto:" + TRIVAN_INFO.email +
      "?subject=" + encodeURIComponent("Démarrer avec Trivan — " + f.shop.value) +
      "&body=" + encodeURIComponent(body);
    setSent(true);
  };
  const steps = [
    { t: "Vous nous écrivez", p: "Quelques infos sur votre boutique et vos prestataires actuels suffisent." },
    { t: "On configure ensemble", p: "Installation du module et connexion de vos comptes, accompagnées par notre équipe — en moins d'une journée." },
    { t: "Vous encaissez mieux", p: "Le routeur prend le relais : meilleure acceptation, frais optimisés, zéro vente perdue." },
  ];
  return (
    <div className="container">
      <PageHead
        kicker="Créer un compte"
        title="Démarrez avec Trivan"
        sub="Dites-nous en un peu plus sur votre boutique : nous revenons vers vous sous 24 h pour ouvrir votre compte et planifier l'installation."
      />
      <div className="start3">
        <div className="auth3 wide" data-reveal="">
          <form className="form3" onSubmit={onSubmit}>
            <div className="f3-row">
              <div className="f3-field">
                <label htmlFor="st-shop">Nom de la boutique</label>
                <input id="st-shop" name="shop" type="text" placeholder="Ma Boutique" required />
              </div>
              <div className="f3-field">
                <label htmlFor="st-email">Email</label>
                <input id="st-email" name="email" type="email" placeholder="vous@boutique.fr" required />
              </div>
            </div>
            <div className="f3-row">
              <div className="f3-field">
                <label htmlFor="st-platform">Plateforme</label>
                <select id="st-platform" name="platform" defaultValue="">
                  <option value="" disabled>Choisir…</option>
                  <option>Shopify</option>
                  <option>WooCommerce</option>
                  <option>PrestaShop</option>
                  <option>Wix</option>
                  <option>Autre / sur mesure</option>
                </select>
              </div>
              <div className="f3-field">
                <label htmlFor="st-volume">Volume mensuel</label>
                <select id="st-volume" name="volume" defaultValue="">
                  <option value="" disabled>Choisir…</option>
                  <option>Moins de 10 000 €</option>
                  <option>10 000 € – 50 000 €</option>
                  <option>50 000 € – 200 000 €</option>
                  <option>Plus de 200 000 €</option>
                </select>
              </div>
            </div>
            <div className="f3-field">
              <label htmlFor="st-msg">Vos prestataires actuels (optionnel)</label>
              <textarea id="st-msg" name="msg" rows="4" placeholder="Ex. : PayPal et PayPlug, et nous regardons Adyen…"></textarea>
            </div>
            {sent ? (
              <p className="f3-ok" role="status">
                Votre client email s'est ouvert avec la demande pré-remplie — envoyez-la
                et nous revenons vers vous sous 24 h.
              </p>
            ) : null}
            <button className="btn3 primary f3-submit" type="submit">Envoyer ma demande <span className="arr">→</span></button>
            <p className="f3-note">Sans engagement. Déjà un compte ? <a href="connexion.html">Connexion</a></p>
          </form>
        </div>
        <div className="start3-side">
          {steps.map((s, i) => (
            <div className="router-step" key={i} data-reveal="" style={{ "--reveal-delay": (i * 80) + "ms" }}>
              <span className="sn">{i + 1}</span>
              <div>
                <h3>{s.t}</h3>
                <p>{s.p}</p>
              </div>
            </div>
          ))}
          <div className="contact3-points" style={{ justifyContent: "flex-start", marginTop: 26 }} data-reveal="">
            <span><span className="ck">✓</span>Sans engagement</span>
            <span><span className="ck">✓</span>Installation accompagnée</span>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   Page : À propos
   ============================================================ */
function PageAPropos() {
  const offers = [
    { t: "Routage intelligent", p: "Chaque transaction dirigée vers le prestataire le plus pertinent" },
    { t: "Bascule automatique", p: "Aucune vente perdue quand un prestataire tombe" },
    { t: "Registre unifié", p: "Tous vos encaissements au même endroit" },
    { t: "Règles sur mesure", p: "Le routeur applique vos consignes, pas l'inverse" },
    { t: "Analytique temps réel", p: "Volumes, acceptation et répartition d'un coup d'œil" },
    { t: "Modules sans code", p: "Shopify, WooCommerce, PrestaShop, Wix + API complète" },
  ];
  const milestones = [
    { year: "2026", event: "Création de TRIVAN à Paris, rue Vivienne" },
    { year: "2026", event: "Premières boutiques connectées et premiers modules e-commerce" },
    { year: "2027", event: "Objectif : 1 000 boutiques indépendantes équipées" },
  ];
  return (
    <div className="container narrow3">
      <PageHead
        kicker="Notre histoire"
        title="À propos de Trivan"
        sub="Une couche d'orchestration de paiement pensée pour les boutiques indépendantes qui refusent de perdre des ventes."
      />

      <div className="about3-mission" data-reveal="">
        <div>
          <h2>Notre mission</h2>
          <p>
            Donner à chaque boutique, quelle que soit sa taille, le même niveau
            d'infrastructure de paiement que les grandes plateformes : routage
            intelligent, tolérance aux pannes et visibilité totale — sans une
            ligne de code.
          </p>
        </div>
        <div>
          <h2>Notre vision</h2>
          <p>
            Le paiement ne devrait jamais être un point de défaillance unique.
            Nous croyons à un e-commerce où les prestataires se combinent au
            lieu de s'imposer, et où chaque transaction prend la meilleure route.
          </p>
        </div>
      </div>

      <h2 className="about3-h2" data-reveal="">Notre parcours</h2>
      <div className="timeline3">
        {milestones.map((m, i) => (
          <div className="tl3-item" key={i} data-reveal="" style={{ "--reveal-delay": (i * 80) + "ms" }}>
            <span className="tl3-year">{m.year}</span>
            <span className="tl3-dot"></span>
            <p>{m.event}</p>
          </div>
        ))}
      </div>

      <h2 className="about3-h2" data-reveal="">Ce que nous proposons</h2>
      <div className="offers3">
        {offers.map((o, i) => (
          <div className="offer3" key={o.t} data-reveal="" style={{ "--reveal-delay": (i % 3) * 70 + "ms" }}>
            <h3>{o.t}</h3>
            <p>{o.p}</p>
          </div>
        ))}
      </div>

      <div className="info3-card" data-reveal="">
        <div>
          <h3>{TRIVAN_INFO.company}</h3>
          <p>Société par actions simplifiée unipersonnelle<br />{TRIVAN_INFO.address}</p>
        </div>
        <div>
          <h3>Contact</h3>
          <p>
            <a href={"mailto:" + TRIVAN_INFO.email}>{TRIVAN_INFO.email}</a><br />
            <a href={TRIVAN_INFO.phoneHref}>{TRIVAN_INFO.phoneDisplay}</a>
          </p>
        </div>
        <div>
          <h3>Bureaux</h3>
          <p>Paris, France<br />47 rue Vivienne, 75002</p>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   Page : Contact
   ============================================================ */
function PageContact() {
  const [open, setOpen] = usePgState(0);
  const [sent, setSent] = usePgState(false);
  const cards = [
    { t: "Email", v: TRIVAN_INFO.email, href: "mailto:" + TRIVAN_INFO.email, sub: "Réponse sous 24 h" },
    { t: "Téléphone", v: TRIVAN_INFO.phoneDisplay, href: TRIVAN_INFO.phoneHref, sub: "Lun–Ven, 9 h – 18 h" },
    { t: "Bureau", v: "Paris, France", href: null, sub: TRIVAN_INFO.address },
    { t: "Support", v: "En français", href: null, sub: "Par email et téléphone" },
  ];
  const faqs = [
    { q: "Combien de temps pour démarrer ?", a: "Moins d'une journée dans la plupart des cas : le module s'installe en quelques clics et notre équipe vous accompagne pour connecter vos prestataires." },
    { q: "Quel support proposez-vous ?", a: "Un support en français par email et par téléphone, du lundi au vendredi. Les clients Entreprise disposent d'un canal dédié 24/7." },
    { q: "Proposez-vous des intégrations sur mesure ?", a: "Oui. Au-delà des modules Shopify, WooCommerce, PrestaShop et Wix, notre API REST permet d'intégrer Trivan à n'importe quelle stack." },
    { q: "Mon argent transite-t-il par Trivan ?", a: "Jamais. Les fonds circulent directement entre vos clients et vos prestataires de paiement ; Trivan orchestre les transactions sans détenir votre argent." },
  ];
  const onSubmit = (e) => {
    e.preventDefault();
    const f = e.target;
    window.location.href =
      "mailto:" + TRIVAN_INFO.email +
      "?subject=" + encodeURIComponent("[" + f.subject.value + "] Message de " + f.name.value) +
      "&body=" + encodeURIComponent(f.msg.value + "\n\n— " + f.name.value + " (" + f.email.value + ")");
    setSent(true);
  };
  return (
    <div className="container">
      <PageHead
        kicker="Parlons de votre boutique"
        title="Contactez notre équipe"
        sub="Une question, un volume à discuter, un cas particulier ? Nous sommes là — sans démarchage insistant."
      />

      <div className="ccards3">
        {cards.map((c, i) => (
          <div className="ccard3" key={c.t} data-reveal="" style={{ "--reveal-delay": (i * 70) + "ms" }}>
            <h3>{c.t}</h3>
            {c.href ? <a href={c.href}>{c.v}</a> : <span className="v">{c.v}</span>}
            <p>{c.sub}</p>
          </div>
        ))}
      </div>

      <div className="contact3-grid">
        <div data-reveal="">
          <h2 className="sub3-h2">Envoyez-nous un message</h2>
          <p className="sub3-p">Remplissez le formulaire : il pré-remplit un email prêt à envoyer.</p>
          <form className="form3" onSubmit={onSubmit}>
            <div className="f3-row">
              <div className="f3-field">
                <label htmlFor="ct-name">Nom</label>
                <input id="ct-name" name="name" type="text" placeholder="Votre nom" required />
              </div>
              <div className="f3-field">
                <label htmlFor="ct-email">Email</label>
                <input id="ct-email" name="email" type="email" placeholder="vous@boutique.fr" required />
              </div>
            </div>
            <div className="f3-field">
              <label htmlFor="ct-subject">Sujet</label>
              <select id="ct-subject" name="subject" defaultValue="Demande commerciale">
                <option>Demande commerciale</option>
                <option>Support technique</option>
                <option>Question facturation</option>
                <option>Partenariat</option>
                <option>Autre</option>
              </select>
            </div>
            <div className="f3-field">
              <label htmlFor="ct-msg">Message</label>
              <textarea id="ct-msg" name="msg" rows="5" placeholder="Comment pouvons-nous vous aider ?" required></textarea>
            </div>
            {sent ? (
              <p className="f3-ok" role="status">
                Votre client email s'est ouvert avec le message pré-rempli — il ne reste qu'à l'envoyer.
              </p>
            ) : null}
            <button className="btn3 primary f3-submit" type="submit">Envoyer le message <span className="arr">→</span></button>
          </form>
        </div>

        <div data-reveal="" style={{ "--reveal-delay": "120ms" }}>
          <h2 className="sub3-h2">Questions fréquentes</h2>
          <div className="faq3" style={{ marginBottom: 34 }}>
            {faqs.map((it, i) => (
              <div className={"faq3-item" + (open === i ? " open" : "")} key={i}>
                <button className="faq3-q sm" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                  {it.q}
                  <span className="faq3-t">+</span>
                </button>
                <div className="faq3-a"><div><p>{it.a}</p></div></div>
              </div>
            ))}
          </div>
          <h3 className="sub3-h3">Informations société</h3>
          <div className="lcard3">
            <p>
              <strong>{TRIVAN_INFO.company}</strong><br />
              47 rue Vivienne<br />
              75002 Paris, France<br />
              <a href={"mailto:" + TRIVAN_INFO.email}>{TRIVAN_INFO.email}</a> · <a href={TRIVAN_INFO.phoneHref}>{TRIVAN_INFO.phoneDisplay}</a>
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   Page : Documentation
   ============================================================ */
const TV_SNIPPET = `import Trivan from '@trivan/sdk';

const tv = new Trivan('tv_live_…');

const route = await tv.transactions.route({
  amount: 4990,
  currency: 'eur',
  method: 'card',
  orderId: 'CMD-1843'
});`;

function PageDocumentation() {
  const [copied, setCopied] = usePgState(false);
  const sections = [
    { t: "Démarrage rapide", d: "Installation du module et première transaction de test", links: ["Installation", "Authentification", "Première transaction", "Mode test"] },
    { t: "Référence API", d: "Endpoints, objets et codes d'erreur de l'API Trivan", links: ["Transactions", "Routes", "Remboursements", "Erreurs"] },
    { t: "Modules e-commerce", d: "Guides pas à pas pour votre plateforme", links: ["Shopify", "WooCommerce", "PrestaShop", "Wix"] },
    { t: "Règles de routage", d: "Définissez comment vos transactions sont réparties", links: ["Par frais", "Par acceptation", "Par moyen de paiement", "Plafonds"] },
    { t: "Webhooks", d: "Notifications d'événements en temps réel", links: ["Configuration", "Événements", "Signature", "Re-livraison"] },
    { t: "Bonnes pratiques", d: "Sécurité, performance et conformité", links: ["Sécurité", "Gestion des erreurs", "Performance", "Conformité"] },
  ];
  const copy = () => {
    navigator.clipboard.writeText(TV_SNIPPET).then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    });
  };
  return (
    <div className="container">
      <PageHead
        kicker="Ressources développeurs"
        title="Documentation développeur"
        sub="Tout ce qu'il faut pour brancher Trivan à votre boutique — module sans code ou API complète."
      />

      <div className="code3" data-reveal="">
        <div className="code3-top">
          <span className="code3-file">quickstart.js</span>
          <button className="code3-copy" onClick={copy} type="button">
            {copied ? "Copié ✓" : "Copier"}
          </button>
        </div>
        <pre><code>{TV_SNIPPET}</code></pre>
      </div>

      <div className="docs3">
        {sections.map((s, i) => (
          <article className="doc3" key={s.t} data-reveal="" style={{ "--reveal-delay": (i % 3) * 70 + "ms" }}>
            <h3>{s.t}</h3>
            <p>{s.d}</p>
            <ul>
              {s.links.map((l) => <li key={l}>{l}</li>)}
            </ul>
          </article>
        ))}
      </div>

      <div className="cta3-card" data-reveal="">
        <h3>Un cas d'intégration particulier ?</h3>
        <p>
          Notre équipe technique répond directement à vos questions et vous
          accompagne sur les intégrations sur mesure, de l'audit au déploiement.
        </p>
        <a className="btn3 primary" href="contact.html">Poser une question technique <span className="arr">→</span></a>
      </div>
    </div>
  );
}

/* ============================================================
   Pages légales — layout + contenus
   ============================================================ */
function LegalLayout({ current, title, updated, children }) {
  const sections = [
    { href: "mentions-legales.html", key: "mentions-legales", label: "Mentions légales" },
    { href: "cgv.html", key: "cgv", label: "Conditions générales" },
    { href: "confidentialite.html", key: "confidentialite", label: "Confidentialité" },
    { href: "cookies.html", key: "cookies", label: "Politique cookies" },
    { href: "usage-acceptable.html", key: "usage-acceptable", label: "Usage acceptable" },
  ];
  return (
    <div className="container legal3-grid">
      <aside className="legal3-aside">
        <div className="legal3-nav">
          <span className="legal3-navtitle">Documents légaux</span>
          {sections.map((s) => (
            <a key={s.key} href={s.href} className={current === s.key ? "on" : ""}>{s.label}</a>
          ))}
        </div>
      </aside>
      <article className="legal3">
        <span className="kicker3">{title}</span>
        <h1>{title}</h1>
        <p className="legal3-date">Dernière mise à jour : 10 juin 2026</p>
        {children}
      </article>
    </div>
  );
}

function PageMentionsLegales() {
  return (
    <LegalLayout current="mentions-legales" title="Mentions légales">
      <p className="lead">
        Conformément à la loi n° 2004-575 du 21 juin 2004 pour la confiance dans
        l'économie numérique (LCEN), les utilisateurs du site trivan.eu sont
        informés de l'identité des intervenants dans sa réalisation et son suivi.
      </p>
      <h2>1. Éditeur du site</h2>
      <div className="lcard3">
        <p>
          <strong>{TRIVAN_INFO.company}</strong><br />
          Société par actions simplifiée unipersonnelle<br />
          Siège social : 47 rue Vivienne, 75002 Paris, France<br />
          Immatriculée au RCS de Paris<br />
          Téléphone : <a href={TRIVAN_INFO.phoneHref}>{TRIVAN_INFO.phoneDisplay}</a><br />
          Email : <a href={"mailto:" + TRIVAN_INFO.email}>{TRIVAN_INFO.email}</a>
        </p>
      </div>
      <h2>2. Directeur de la publication</h2>
      <p>Le directeur de la publication est le Président de {TRIVAN_INFO.company}.</p>
      <h2>3. Hébergeur</h2>
      <div className="lcard3">
        <p>
          <strong>Vercel Inc.</strong><br />
          440 N Barranca Ave #4133, Covina, CA 91723, États-Unis<br />
          Site : <a href="https://vercel.com" target="_blank" rel="noopener noreferrer">vercel.com</a>
        </p>
      </div>
      <h2>4. Propriété intellectuelle</h2>
      <p>
        L'ensemble des éléments composant le site (textes, graphismes, logiciels,
        logos, marques, schémas) est la propriété exclusive de {TRIVAN_INFO.company} ou
        fait l'objet d'une autorisation d'utilisation. Toute reproduction ou
        exploitation, totale ou partielle, sans autorisation écrite préalable est
        interdite et constitue une contrefaçon au sens des articles L.335-2 et
        suivants du Code de la propriété intellectuelle.
      </p>
      <h2>5. Responsabilité</h2>
      <p>
        {TRIVAN_INFO.company} s'efforce de fournir des informations exactes et à jour,
        mais ne saurait être tenue responsable des erreurs, omissions ou d'une
        indisponibilité du site. Les informations publiées ne constituent pas un
        conseil financier, juridique ou fiscal personnalisé.
      </p>
      <h2>6. Liens hypertextes</h2>
      <p>
        Le site peut contenir des liens vers des sites tiers sur lesquels
        {" "}{TRIVAN_INFO.company} n'exerce aucun contrôle ; elle décline toute
        responsabilité quant à leur contenu.
      </p>
      <h2>7. Données personnelles</h2>
      <p>
        Le traitement des données personnelles collectées sur le site est détaillé
        dans notre <a href="confidentialite.html">politique de confidentialité</a>.
      </p>
      <h2>8. Droit applicable</h2>
      <p>
        Les présentes mentions légales sont régies par le droit français. À défaut
        de résolution amiable, compétence est attribuée aux tribunaux de Paris.
      </p>
      <h2>9. Contact</h2>
      <p>
        Pour toute question : <a href={"mailto:" + TRIVAN_INFO.email}>{TRIVAN_INFO.email}</a>{" "}
        ou par courrier au siège social indiqué ci-dessus.
      </p>
    </LegalLayout>
  );
}

function PageCgv() {
  return (
    <LegalLayout current="cgv" title="Conditions générales">
      <p className="lead">
        Les présentes conditions générales encadrent l'utilisation du service
        d'orchestration de paiement Trivan, édité par {TRIVAN_INFO.company}, par tout
        professionnel disposant d'un compte (le « Client »).
      </p>
      <h2>1. Objet</h2>
      <p>
        Trivan fournit une couche logicielle qui connecte la boutique du Client à
        ses prestataires de services de paiement (PSP) et route chaque transaction
        vers le prestataire le plus pertinent selon des règles configurables.
        Trivan n'est pas un établissement de paiement : le service ne comprend ni
        encaissement, ni détention, ni reversement de fonds.
      </p>
      <h2>2. Acceptation et conclusion du contrat</h2>
      <p>
        La création d'un compte vaut acceptation pleine et entière des présentes
        conditions. Le contrat est conclu à la date d'activation du compte par
        {" "}{TRIVAN_INFO.company} et pour une durée indéterminée.
      </p>
      <h2>3. Comptes prestataires du Client</h2>
      <p>
        Le Client demeure titulaire de ses contrats et comptes auprès de ses PSP
        (PayPal, PayPlug, Adyen, etc.). Il garantit disposer des droits nécessaires
        pour les connecter à Trivan et reste seul responsable du respect des
        conditions propres à chaque prestataire.
      </p>
      <h2>4. Activités autorisées et interdites</h2>
      <p>
        Le service est réservé aux activités licites. Les secteurs et comportements
        prohibés sont détaillés dans la{" "}
        <a href="usage-acceptable.html">politique d'usage acceptable</a>, qui fait
        partie intégrante des présentes.
      </p>
      <h2>5. Tarifs et facturation</h2>
      <p>
        Les tarifs en vigueur sont publiés sur la <a href="tarifs.html">page tarifs</a>.
        Les commissions sont calculées sur les transactions routées et facturées
        mensuellement, à terme échu. Tout retard de paiement entraîne des pénalités
        au taux légal en vigueur majorées de l'indemnité forfaitaire de recouvrement.
      </p>
      <h2>6. Flux des fonds</h2>
      <p>
        Les fonds des transactions circulent directement entre les clients finaux
        et les PSP du Client, selon les conditions de ces derniers. Trivan
        n'intervient à aucun moment dans la détention ou le reversement des fonds.
      </p>
      <h2>7. Remboursements et litiges</h2>
      <p>
        Les remboursements et la gestion des litiges (rétrofacturations) relèvent
        des PSP concernés. Trivan met à disposition des outils de suivi mais
        n'assume aucune obligation de résultat sur l'issue d'un litige.
      </p>
      <h2>8. Obligations du Client</h2>
      <p>
        Le Client s'engage à fournir des informations exactes, à maintenir la
        confidentialité de ses identifiants, à respecter la réglementation
        applicable à son activité (notamment consommation, RGPD et lutte contre la
        fraude) et à ne pas détourner le service de sa finalité.
      </p>
      <h2>9. Disponibilité du service</h2>
      <p>
        {TRIVAN_INFO.company} met en œuvre des moyens raisonnables pour assurer une
        disponibilité continue du service, hors maintenance planifiée et cas de
        force majeure. Des engagements de niveau de service (SLA) peuvent être
        souscrits dans le cadre de l'offre Entreprise.
      </p>
      <h2>10. Propriété intellectuelle</h2>
      <p>
        Le service, son code, sa documentation et ses marques restent la propriété
        exclusive de {TRIVAN_INFO.company}. Le Client bénéficie d'un droit d'usage
        personnel, non exclusif et non cessible pendant la durée du contrat.
      </p>
      <h2>11. Données personnelles</h2>
      <p>
        Les traitements de données réalisés dans le cadre du service sont décrits
        dans la <a href="confidentialite.html">politique de confidentialité</a>.
        Chaque partie demeure responsable de ses obligations au titre du RGPD.
      </p>
      <h2>12. Confidentialité</h2>
      <p>
        Chaque partie s'engage à préserver la confidentialité des informations non
        publiques de l'autre partie obtenues à l'occasion du contrat, pendant sa
        durée et trois ans après son terme.
      </p>
      <h2>13. Responsabilité</h2>
      <p>
        La responsabilité totale de {TRIVAN_INFO.company} est limitée, tous dommages
        confondus, au montant des commissions perçues au cours des douze derniers
        mois. Elle ne saurait être engagée pour les dommages indirects, pertes de
        chiffre d'affaires ou décisions prises par les PSP du Client.
      </p>
      <h2>14. Résiliation</h2>
      <p>
        Chaque partie peut résilier le contrat à tout moment avec un préavis de
        trente jours. En cas de manquement grave, la résiliation peut intervenir
        immédiatement, sans préjudice des sommes restant dues.
      </p>
      <h2>15. Force majeure</h2>
      <p>
        Aucune partie ne sera responsable d'un manquement causé par un événement de
        force majeure au sens de l'article 1218 du Code civil.
      </p>
      <h2>16. Cession</h2>
      <p>
        Le contrat ne peut être cédé par le Client sans accord écrit préalable de
        {" "}{TRIVAN_INFO.company}.
      </p>
      <h2>17. Modification</h2>
      <p>
        {TRIVAN_INFO.company} peut faire évoluer les présentes conditions ; les
        Clients sont informés au moins trente jours avant l'entrée en vigueur des
        nouvelles conditions, la poursuite de l'utilisation valant acceptation.
      </p>
      <h2>18. Droit applicable et juridiction</h2>
      <p>
        Les présentes sont régies par le droit français. Tout litige sera soumis
        aux tribunaux compétents de Paris, après tentative de résolution amiable.
      </p>
      <h2>19. Contact</h2>
      <p>
        <a href={"mailto:" + TRIVAN_INFO.email}>{TRIVAN_INFO.email}</a> ·{" "}
        {TRIVAN_INFO.company}, {TRIVAN_INFO.address}.
      </p>
    </LegalLayout>
  );
}

function PageConfidentialite() {
  return (
    <LegalLayout current="confidentialite" title="Politique de confidentialité">
      <p className="lead">
        Cette politique décrit comment {TRIVAN_INFO.company} collecte et traite vos
        données personnelles dans le cadre du site trivan.eu et du service Trivan,
        conformément au Règlement (UE) 2016/679 (« RGPD »).
      </p>
      <h2>1. Responsable du traitement</h2>
      <p>
        {TRIVAN_INFO.company}, {TRIVAN_INFO.address} —{" "}
        <a href={"mailto:" + TRIVAN_INFO.email}>{TRIVAN_INFO.email}</a>.
      </p>
      <h2>2. Données collectées</h2>
      <p>
        Données de compte (nom, email, téléphone, société), données d'usage du
        service (journaux de connexion, configuration de routage), données de
        transaction strictement nécessaires au routage (montant, devise, moyen de
        paiement, identifiant de commande — jamais les numéros de carte complets),
        et données de navigation (cf. <a href="cookies.html">politique cookies</a>).
      </p>
      <h2>3. Finalités et bases légales</h2>
      <p>
        Fourniture et amélioration du service (exécution du contrat), facturation
        et comptabilité (obligation légale), prévention de la fraude et sécurité
        (intérêt légitime), communication commerciale (consentement, révocable à
        tout moment).
      </p>
      <h2>4. Destinataires des données</h2>
      <p>
        Les données sont accessibles aux équipes habilitées de {TRIVAN_INFO.company}{" "}
        et à ses sous-traitants techniques (hébergement, emailing), dans la limite
        de leurs missions. Les données de transaction sont partagées avec les PSP
        choisis par le Client, qui agissent selon leurs propres politiques.
      </p>
      <h2>5. Transferts hors UE</h2>
      <p>
        Lorsqu'un transfert hors de l'Union européenne est nécessaire, il est
        encadré par des garanties appropriées (clauses contractuelles types de la
        Commission européenne ou décision d'adéquation).
      </p>
      <h2>6. Durées de conservation</h2>
      <p>
        Données de compte : durée du contrat puis archivage légal. Journaux
        techniques : 12 mois. Documents de facturation : 10 ans. Prospection :
        3 ans après le dernier contact.
      </p>
      <h2>7. Sécurité</h2>
      <p>
        Chiffrement en transit (TLS), contrôle d'accès strict, journalisation,
        sauvegardes et tests réguliers. Aucune donnée de carte complète n'est
        stockée par Trivan.
      </p>
      <h2>8. Vos droits</h2>
      <p>
        Vous disposez des droits d'accès, de rectification, d'effacement, de
        limitation, d'opposition et de portabilité, ainsi que du droit de définir
        des directives post-mortem. Exercez-les à{" "}
        <a href={"mailto:" + TRIVAN_INFO.email}>{TRIVAN_INFO.email}</a>. Vous pouvez
        également saisir la CNIL (cnil.fr).
      </p>
      <h2>9. Modifications</h2>
      <p>
        Cette politique peut être mise à jour ; la version en vigueur est celle
        publiée sur cette page, avec sa date de mise à jour.
      </p>
    </LegalLayout>
  );
}

function PageCookies() {
  return (
    <LegalLayout current="cookies" title="Politique cookies">
      <p className="lead">
        Cette page explique comment le site trivan.eu utilise des cookies et
        technologies similaires, et comment vous pouvez les contrôler.
      </p>
      <h2>1. Qu'est-ce qu'un cookie ?</h2>
      <p>
        Un cookie est un petit fichier déposé sur votre appareil lors de la visite
        d'un site. Il permet notamment de mémoriser vos préférences ou de mesurer
        l'audience.
      </p>
      <h2>2. Cookies utilisés</h2>
      <p>
        <strong>Cookies strictement nécessaires</strong> : fonctionnement du site et
        de l'espace client (session, sécurité). Ils ne requièrent pas de
        consentement.<br />
        <strong>Cookies de mesure d'audience</strong> : statistiques anonymisées de
        fréquentation, déposés uniquement avec votre consentement.<br />
        Le site n'utilise pas de cookies publicitaires.
      </p>
      <h2>3. Gestion de votre consentement</h2>
      <p>
        Vous pouvez accepter ou refuser les cookies non essentiels à tout moment ;
        votre choix est conservé six mois, après quoi il vous est demandé à nouveau.
      </p>
      <h2>4. Paramètres du navigateur</h2>
      <p>
        Vous pouvez configurer votre navigateur pour bloquer ou supprimer les
        cookies. Le refus des cookies strictement nécessaires peut dégrader le
        fonctionnement du site.
      </p>
      <h2>5. Cookies tiers</h2>
      <p>
        Certains contenus tiers (polices, scripts, logos hébergés sur des CDN)
        peuvent déposer leurs propres traceurs, régis par les politiques de leurs
        éditeurs respectifs.
      </p>
      <h2>6. Contact</h2>
      <p>
        Pour toute question : <a href={"mailto:" + TRIVAN_INFO.email}>{TRIVAN_INFO.email}</a>.
      </p>
    </LegalLayout>
  );
}

function PageUsageAcceptable() {
  return (
    <LegalLayout current="usage-acceptable" title="Politique d'usage acceptable">
      <p className="lead">
        Cette politique définit les activités et comportements interdits dans le
        cadre de l'utilisation du service Trivan. Elle complète les{" "}
        <a href="cgv.html">conditions générales</a>.
      </p>
      <h2>1. Activités illégales</h2>
      <p>
        Toute activité contraire au droit français ou européen est interdite :
        blanchiment, financement du terrorisme, contrefaçon, fraude, vente de biens
        volés ou prohibés.
      </p>
      <h2>2. Secteurs et produits interdits</h2>
      <p>
        Sont notamment exclus du service : armes et munitions, stupéfiants,
        contenus pédopornographiques, jeux d'argent non licenciés, systèmes
        pyramidaux, documents officiels falsifiés, produits contrefaisants.
      </p>
      <h2>3. Activités soumises à approbation préalable</h2>
      <p>
        Certaines activités à risque élevé (compléments alimentaires, CBD,
        abonnements à reconduction, billetterie, voyages) nécessitent une revue et
        une approbation écrite préalable de {TRIVAN_INFO.company}, ainsi que celle des
        PSP concernés.
      </p>
      <h2>4. Comportements interdits sur la plateforme</h2>
      <p>
        Sont interdits : le contournement des contrôles de fraude, la dissimulation
        de la nature réelle de l'activité, l'usage de données de paiement sans
        autorisation, la revente du service sans accord, et toute tentative
        d'atteinte à la sécurité ou à l'intégrité de la plateforme.
      </p>
      <h2>5. Signalement</h2>
      <p>
        Tout abus peut être signalé à{" "}
        <a href={"mailto:" + TRIVAN_INFO.email}>{TRIVAN_INFO.email}</a>. Les
        signalements sont traités de manière confidentielle.
      </p>
      <h2>6. Conséquences d'une violation</h2>
      <p>
        En cas de manquement : avertissement, suspension immédiate du routage,
        résiliation du compte et, le cas échéant, signalement aux autorités
        compétentes. Les sommes dues restent exigibles.
      </p>
      <h2>7. Mise à jour</h2>
      <p>
        Cette politique peut évoluer avec la réglementation et les exigences des
        réseaux de paiement ; la version applicable est celle publiée sur cette page.
      </p>
    </LegalLayout>
  );
}

/* ============================================================
   Bootstrap : monte la page selon data-page
   ============================================================ */
const TRIVAN_PAGES = {
  "tarifs": PageTarifs,
  "connexion": PageConnexion,
  "demarrer": PageDemarrer,
  "a-propos": PageAPropos,
  "contact": PageContact,
  "documentation": PageDocumentation,
  "mentions-legales": PageMentionsLegales,
  "cgv": PageCgv,
  "confidentialite": PageConfidentialite,
  "cookies": PageCookies,
  "usage-acceptable": PageUsageAcceptable,
};

(function bootTrivanPage() {
  const rootEl = document.getElementById("root");
  const key = rootEl && rootEl.dataset.page;
  const Comp = key && TRIVAN_PAGES[key];
  if (Comp) {
    ReactDOM.createRoot(rootEl).render(
      <PageShell page={key}>
        <Comp />
      </PageShell>
    );
  }
})();