// Trivan v3 — sections de la page d'accueil : hero, bande marques, clients, routeur,
// features bento, étapes, chiffres, intégrations, témoignages, FAQ, contact
// (logo, nav et footer : voir trivan-shared.jsx)
// Exporte sur window : V3Hero, V3Band, V3Clients, V3Router, V3Features,
// V3Steps, V3Numbers, V3Integrations, V3Testimonials, V3Faq, V3Contact

const { useState: useV3State } = React;

/* ---------- Hero ---------- */
function V3Hero() {
  return (
    <header className="hero3" data-screen-label="Hero">
      <div className="container hero3-grid">
        <div className="hero3-copy">
          <span className="hero3-eyebrow" data-reveal=""><span className="live-dot"></span>Orchestration de paiement nouvelle génération</span>
          <h1 data-reveal="split">
            <SplitWords text="Maîtrisez vos" />{" "}
            <WordRotate
              className="hl"
              words={["paiements", "encaissements", "frais", "prestataires", "conversions"]}
            />
            <br />
            <span className="h1-sub"><SplitWords text="depuis une seule intégration" start={3} /></span>
          </h1>
          <p className="hero3-sub" data-reveal="" style={{ "--reveal-delay": "200ms" }}>
            Une unique connexion entre votre boutique et l'ensemble de vos
            prestataires de paiement : Trivan compare, route et sécurise chaque
            transaction. Vous restez concentré sur vos ventes, on gère la suite.
          </p>
          <div className="hero3-ctas" data-reveal="" style={{ "--reveal-delay": "280ms" }}>
            <a className="btn3 primary" href="demarrer.html">Démarrer maintenant <span className="arr">→</span></a>
            <a className="btn3 outline-d" href="#routeur">Voir le routeur</a>
          </div>
          <div className="hero3-proof" data-reveal="" style={{ "--reveal-delay": "360ms" }}>
            <div className="proof-item">
              <div className="pv"><CountUp to={97.2} decimals={1} suffix=" %" /></div>
              <div className="pl">de taux d'acceptation</div>
            </div>
            <div className="proof-item">
              <div className="pv">&lt; 1 jour</div>
              <div className="pl">pour être opérationnel</div>
            </div>
            <div className="proof-item">
              <div className="pv"><CountUp to={6} suffix="+" /></div>
              <div className="pl">prestataires connectables</div>
            </div>
          </div>
        </div>
        <HeroSchema />
      </div>
    </header>
  );
}

/* ---------- Bande marques ---------- */
function V3Band() {
  const brands = [
    { name: "Shopify", icon: "shopify", color: "96BF48" },
    { name: "WooCommerce", icon: "woocommerce", color: "96588A" },
    { name: "PayPal", icon: "paypal", color: "003087" },
    { name: "PrestaShop", icon: "prestashop", color: "DF0067" },
    { name: "Stripe", icon: "stripe", color: "635BFF" },
    { name: "BigCommerce", icon: "bigcommerce", color: "121118" },
    { name: "Adyen", icon: "adyen", color: "0ABF53" },
    { name: "HubSpot", icon: "hubspot", color: "FF7A59" },
    { name: "Zapier", icon: "zapier", color: "FF4A00" },
    { name: "Notion", icon: "notion", color: "000000" },
  ];
  return (
    <div className="band3" data-screen-label="Marques">
      <div className="container band3-inner">
        {brands.map((b) => (
          <span className="psp-pill" key={b.name}>
            <img src={"https://cdn.simpleicons.org/" + b.icon + "/" + b.color} alt={b.name} loading="lazy" />
            {b.name}
          </span>
        ))}
      </div>
    </div>
  );
}

/* ---------- Clients ---------- */
function V3Clients() {
  const shops = [
    "Maison Lutea", "Goudron & Cuir", "Nuage Paris", "Atelier Verde",
    "Ombrelle", "Kapsule", "Herbier Sauvage", "La Botte Rousse",
    "Café Noma", "Studio Brune", "Linon & Fils", "Ferme du Val",
  ];
  return (
    <section className="clients3" data-screen-label="Clients" data-reveal="">
      <p className="clients3-lbl">Ils nous font confiance</p>
      <Marquee duration={42}>
        {shops.map((n) => <span className="client3" key={n}>{n}</span>)}
      </Marquee>
    </section>
  );
}

/* ---------- Routeur live ---------- */
function V3Router() {
  const steps = [
    { t: "La transaction arrive", p: "Votre client règle sa commande sur votre boutique, exactement comme avant. De son côté, rien ne bouge." },
    { t: "Trivan analyse", p: "Montant, moyen de paiement, frais et taux d'acceptation de chaque prestataire sont passés en revue en quelques millisecondes." },
    { t: "La meilleure route est choisie", p: "Le paiement file vers le prestataire le plus pertinent. En cas de panne, un autre prend immédiatement le relais." },
    { t: "Vous encaissez", p: "Les fonds arrivent directement chez votre prestataire. Trivan ne détient jamais votre argent." },
  ];
  return (
    <section className="sec3" id="routeur" data-screen-label="Le routeur">
      <div className="container">
        <div className="sec3-head" data-reveal="split">
          <span className="kicker3">Le routeur</span>
          <h2><SplitWords text="Regardez une transaction se router" /></h2>
          <p>Le cœur de Trivan, en conditions réelles : chaque paiement est analysé, routé et confirmé en moins d'une seconde.</p>
        </div>
        <div className="router-grid">
          <div className="router-steps">
            {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>
          <RouterLive />
        </div>
      </div>
    </section>
  );
}

/* ---------- Features (bento) ---------- */
function V3Features() {
  return (
    <section className="sec3" id="fonctionnalites" style={{ paddingTop: 0 }} data-screen-label="Fonctionnalités">
      <div className="container">
        <div className="sec3-head" data-reveal="split">
          <span className="kicker3">Plateforme complète</span>
          <h2><SplitWords text="Tout ce qu'il faut pour mieux encaisser" /></h2>
          <p>Six piliers pour orchestrer vos paiements de bout en bout — sans rien ajouter de superflu.</p>
        </div>
        <div className="feat3-grid">

          <article className="feat3 wide" data-reveal="">
            <h3>Routage intelligent</h3>
            <p>
              Chaque transaction est comparée sur les frais, le taux d'acceptation
              et vos propres règles, puis dirigée vers le prestataire le plus
              pertinent. Sans friction pour vos clients, sans arbitrage manuel
              pour vous.
            </p>
            <div className="feat3-stats">
              <div className="proof-item"><div className="pv">6+</div><div className="pl">prestataires</div></div>
              <div className="proof-item"><div className="pv">&lt; 1 s</div><div className="pl">par décision</div></div>
              <div className="proof-item"><div className="pv">97,2 %</div><div className="pl">d'acceptation</div></div>
              <div className="proof-item"><div className="pv">100 %</div><div className="pl">des fonds chez vous</div></div>
            </div>
          </article>

          <article className="feat3 tall" data-reveal="" style={{ "--reveal-delay": "80ms" }}>
            <h3>Bascule automatique</h3>
            <p>Un prestataire tombe ? Les paiements basculent instantanément vers un autre. Vos clients ne s'en aperçoivent même pas.</p>
            <div className="feat3-visual">
              <Failover />
            </div>
            <div className="feat3-visual">
              <div className="bars3 lg">
                <div className="br"><span>re-routées</span><span className="tr"><span className="fl" style={{ "--w2": "100%" }}></span></span><span>100%</span></div>
                <div className="br"><span>sauvées</span><span className="tr"><span className="fl" style={{ "--w2": "99.8%" }}></span></span><span>99,8%</span></div>
                <div className="br"><span>coupures</span><span className="tr"><span className="fl" style={{ "--w2": "2%" }}></span></span><span>0%</span></div>
              </div>
            </div>
          </article>

          <article className="feat3" data-reveal="">
            <h3>Registre unifié</h3>
            <p>Tous vos encaissements au même endroit, quel que soit le prestataire derrière.</p>
            <div className="feat3-visual">
              <div className="ledger3">
                <div className="lr"><span className="src">adyen</span><span>Commande #1843</span><span className="am">49,90 €</span><span className="st">✓</span></div>
                <div className="lr"><span className="src">payplug</span><span>Commande #1842</span><span className="am">124,00 €</span><span className="st">✓</span></div>
                <div className="lr"><span className="src">paypal</span><span>Commande #1841</span><span className="am">18,50 €</span><span className="st">✓</span></div>
              </div>
            </div>
          </article>

          <article className="feat3" data-reveal="" style={{ "--reveal-delay": "80ms" }}>
            <h3>Règles sur mesure</h3>
            <p>Plafonds, répartitions, préférences par moyen de paiement : le routeur applique vos consignes.</p>
            <div className="feat3-visual">
              <div className="rules3">
                <div className="rl"><span>si montant &gt; 150 €</span><span className="ra">→ adyen</span></div>
                <div className="rl"><span>si client récurrent</span><span className="ra">→ payplug</span></div>
                <div className="rl"><span>si panier &lt; 30 €</span><span className="ra">→ paypal</span></div>
              </div>
            </div>
          </article>

          <article className="feat3" data-reveal="">
            <h3>Analytique en temps réel</h3>
            <p>Volumes, acceptation, répartition par prestataire : votre activité, lisible d'un coup d'œil.</p>
            <div className="feat3-visual">
              <div className="bars3">
                <div className="br"><span>adyen</span><span className="tr"><span className="fl" style={{ "--w2": "82%" }}></span></span><span>82%</span></div>
                <div className="br"><span>payplug</span><span className="tr"><span className="fl" style={{ "--w2": "63%" }}></span></span><span>63%</span></div>
                <div className="br"><span>paypal</span><span className="tr"><span className="fl" style={{ "--w2": "41%" }}></span></span><span>41%</span></div>
              </div>
            </div>
          </article>

          <article className="feat3 wide" data-reveal="" style={{ "--reveal-delay": "80ms" }}>
            <h3>Installation sans code</h3>
            <p>Des modules prêts à l'emploi pour votre plateforme, une API pour aller plus loin. Opérationnel en moins d'une journée, accompagné par notre équipe.</p>
            <div className="feat3-visual">
              <div className="plat3">
                <span>Shopify</span>
                <span>WooCommerce</span>
                <span>PrestaShop</span>
                <span>Wix</span>
                <span>API REST</span>
              </div>
            </div>
          </article>

        </div>
      </div>
    </section>
  );
}

/* ---------- Étapes ---------- */
function V3Steps() {
  const steps = [
    { t: "Installez le module", p: "Quelques clics sur Shopify, WooCommerce ou PrestaShop suffisent. Notre équipe vous accompagne du début à la fin." },
    { t: "Connectez vos prestataires", p: "Reliez vos comptes PayPal, PayPlug ou Adyen existants. Ils restent les vôtres, vous en gardez le contrôle total." },
    { t: "Encaissez", p: "Trivan route chaque paiement au bon endroit, et vous suivez toute votre activité depuis un seul tableau de bord." },
  ];
  return (
    <section className="sec3" id="etapes" style={{ paddingTop: 0 }} data-screen-label="Installation">
      <div className="container">
        <div className="sec3-head" data-reveal="split">
          <span className="kicker3">Simple par conception</span>
          <h2><SplitWords text="Trois étapes, zéro ligne de code" /></h2>
          <p>Pas des semaines d'intégration, pas de complexité cachée : Trivan se branche à votre boutique en moins d'une journée.</p>
        </div>
        <div className="steps3">
          {steps.map((s, i) => (
            <article className="step3" key={i} data-reveal="" style={{ "--reveal-delay": (i * 90) + "ms" }}>
              <span className="sn3">ÉTAPE 0{i + 1}</span>
              <h3>{s.t}</h3>
              <p>{s.p}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Chiffres ---------- */
function V3Numbers() {
  const stats = [
    { v: 850, suffix: "+", label: "Boutiques actives", desc: "en France et en Europe" },
    { v: 38, suffix: " M€", label: "Volume routé", desc: "chaque année" },
    { v: 99.95, suffix: " %", decimals: 2, label: "Disponibilité", desc: "constatée sur 12 mois" },
    { v: 4, prefix: "+", suffix: " pts", label: "Taux d'acceptation", desc: "gagnés en moyenne" },
  ];
  return (
    <section className="sec3" id="chiffres" style={{ paddingTop: 0 }} data-screen-label="Chiffres">
      <div className="container">
        <div className="sec3-head" data-reveal="split">
          <span className="kicker3">En chiffres</span>
          <h2><SplitWords text="Des résultats qui se constatent" /></h2>
        </div>
        <div className="nums3">
          {stats.map((s, i) => (
            <div className="num3" key={s.label} data-reveal="" style={{ "--reveal-delay": (i * 80) + "ms" }}>
              <div className="nv">
                {s.prefix || ""}<CountUp to={s.v} decimals={s.decimals || 0} suffix={s.suffix || ""} />
              </div>
              <div className="nl">{s.label}</div>
              <div className="nd">{s.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Intégrations ---------- */
function V3Integrations() {
  const items = [
    { name: "Shopify", icon: "shopify", color: "96BF48", tag: "module" },
    { name: "WooCommerce", icon: "woocommerce", color: "96588A", tag: "module" },
    { name: "PrestaShop", icon: "prestashop", color: "DF0067", tag: "module" },
    { name: "Wix", icon: "wix", color: "0C6EFC", tag: "module" },
    { name: "Stripe", icon: "stripe", color: "635BFF", tag: "prestataire" },
    { name: "PayPal", icon: "paypal", color: "003087", tag: "prestataire" },
    { name: "Adyen", icon: "adyen", color: "0ABF53", tag: "prestataire" },
    { name: "HubSpot", icon: "hubspot", color: "FF7A59", tag: "outil" },
    { name: "Zapier", icon: "zapier", color: "FF4A00", tag: "outil" },
    { name: "Notion", icon: "notion", color: "000000", tag: "outil" },
  ];
  return (
    <section className="sec3" id="integrations" style={{ paddingTop: 0 }} data-screen-label="Intégrations">
      <div className="container int3">
        <div data-reveal="split">
          <span className="kicker3">Écosystème ouvert</span>
          <h2 className="int3-title"><SplitWords text="Compatible avec votre boutique" /></h2>
          <p className="int3-sub">
            Des modules natifs pour les principales plateformes e-commerce, une
            API complète pour les besoins sur mesure, et des webhooks pour garder
            vos outils synchronisés en permanence.
          </p>
          <div className="int3-stats">
            <div className="proof-item"><div className="pv">4</div><div className="pl">plateformes natives</div></div>
            <div className="proof-item"><div className="pv">6+</div><div className="pl">prestataires</div></div>
            <div className="proof-item"><div className="pv">&lt; 1 jour</div><div className="pl">d'installation</div></div>
          </div>
          <a className="link3" href="contact.html">Parler de votre intégration <span className="arr">→</span></a>
        </div>
        <div className="int3-grid" data-reveal="" style={{ "--reveal-delay": "120ms" }}>
          {items.map((p) => (
            <div className="int3-pill" key={p.name}>
              <span className="int3-name">
                <img src={"https://cdn.simpleicons.org/" + p.icon + "/" + p.color} alt="" loading="lazy" />
                {p.name}
              </span>
              <span className="tag">{p.tag}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Témoignages ---------- */
function V3Testimonials() {
  const reviews = [
    {
      text: "Notre taux d'acceptation a gagné quatre points dès le premier mois. L'installation a tenu en une matinée.",
      name: "Camille Roussel", role: "Fondatrice, Maison Lutea",
    },
    {
      text: "Le jour où notre prestataire principal est tombé, nous n'avons pas perdu une seule commande. Personne ne s'est rendu compte de rien.",
      name: "Julien Mercier", role: "Gérant, Goudron & Cuir",
    },
    {
      text: "Toutes nos ventes au même endroit, peu importe le prestataire derrière. Notre comptable nous dit merci.",
      name: "Inès Belkacem", role: "Co-fondatrice, Nuage Paris",
    },
    {
      text: "Nous sommes passés de trois back-offices de paiement à un seul tableau de bord. Un vrai soulagement au quotidien.",
      name: "Marc Aubry", role: "Resp. e-commerce, Atelier Verde",
    },
    {
      text: "Nos frais ont baissé de 18 % simplement parce que chaque paiement part désormais au bon endroit.",
      name: "Sophie Lenoir", role: "Gérante, Ombrelle",
    },
    {
      text: "Le support répond en français, vite, et comprend vraiment les contraintes d'une petite boutique.",
      name: "Théo Garnier", role: "Fondateur, Kapsule",
    },
  ];

  const Card = ({ r }) => (
    <div className="tcard">
      <div className="tcard-stars">★★★★★</div>
      <p className="tcard-text">«&nbsp;{r.text}&nbsp;»</p>
      <div className="tcard-who">
        <span className="tcard-av">{r.name.split(" ").map((n) => n[0]).join("")}</span>
        <span>
          <span className="tn">{r.name}</span>
          <span className="tr2">{r.role}</span>
        </span>
      </div>
    </div>
  );

  return (
    <section className="sec3" id="temoignages" style={{ paddingTop: 0 }} data-screen-label="Témoignages">
      <div className="container">
        <div className="sec3-head" data-reveal="split">
          <span className="kicker3">Témoignages</span>
          <h2><SplitWords text="Ce qu'en disent les boutiques" /></h2>
        </div>
      </div>
      <div className="tmarq" data-reveal="">
        <Marquee duration={46}>
          {reviews.slice(0, 3).map((r) => <Card r={r} key={r.name} />)}
        </Marquee>
        <Marquee duration={46} reverse>
          {reviews.slice(3).map((r) => <Card r={r} key={r.name} />)}
        </Marquee>
      </div>
    </section>
  );
}

/* ---------- FAQ ---------- */
function V3Faq() {
  const [open, setOpen] = useV3State(0);
  const items = [
    {
      q: "Est-ce que Trivan remplace mes prestataires de paiement ?",
      a: "Non, et c'est tout l'intérêt : Trivan travaille avec vos prestataires de paiement. Vous gardez vos comptes existants ; nous les connectons à votre boutique via une seule intégration et nous routons chaque transaction au bon endroit.",
    },
    {
      q: "Mon argent passe-t-il par Trivan ?",
      a: "Non. Les fonds circulent directement entre vos clients et vos prestataires de paiement, comme aujourd'hui. Trivan orchestre les transactions mais ne détient jamais votre argent.",
    },
    {
      q: "Combien de temps prend l'installation ?",
      a: "Moins d'une journée dans la plupart des cas. Sur Shopify, WooCommerce ou PrestaShop, le module s'installe en quelques clics et notre équipe vous accompagne pour la configuration.",
    },
    {
      q: "Faut-il des compétences techniques ?",
      a: "Non. Trivan est pensé pour les indépendants et les petites boutiques : tout se configure depuis une interface simple, sans code. Une API est disponible pour ceux qui veulent aller plus loin.",
    },
    {
      q: "Que se passe-t-il si un prestataire tombe en panne ?",
      a: "Trivan bascule automatiquement les transactions vers un autre prestataire connecté. Vos clients peuvent continuer à payer, et vous ne perdez pas de ventes.",
    },
  ];
  return (
    <section className="sec3" id="faq" style={{ paddingTop: 0 }} data-screen-label="FAQ">
      <div className="container">
        <div className="sec3-head" data-reveal="split">
          <span className="kicker3">FAQ</span>
          <h2><SplitWords text="Questions fréquentes" /></h2>
        </div>
        <div className="faq3" data-reveal="">
          {items.map((it, i) => (
            <div className={"faq3-item" + (open === i ? " open" : "")} key={i}>
              <button className="faq3-q" 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>
      </div>
    </section>
  );
}

/* ---------- Contact ---------- */
function V3Contact() {
  return (
    <section className="contact3" id="contact" data-screen-label="Contact">
      <span className="kicker3">Tarifs &amp; contact</span>
      <h2 data-reveal="split"><SplitWords text="Prêt à ne plus perdre une vente ?" /></h2>
      <p data-reveal="">
        Rejoignez les 850+ boutiques qui routent déjà leurs paiements avec Trivan.
        Tarification simple, indexée sur votre volume, et une réponse en moins de
        24 h — sans démarchage insistant.
      </p>
      <div className="contact3-ctas" data-reveal="" style={{ "--reveal-delay": "120ms" }}>
        <a className="btn3 primary" href="demarrer.html">Démarrer avec Trivan <span className="arr">→</span></a>
        <a className="btn3 outline-d" href="contact.html">Parler à un expert</a>
      </div>
      <div className="contact3-points" data-reveal="" style={{ "--reveal-delay": "200ms" }}>
        <span><span className="ck">✓</span>Sans engagement</span>
        <span><span className="ck">✓</span>Installation accompagnée</span>
        <span><span className="ck">✓</span>Support en français</span>
      </div>
    </section>
  );
}

Object.assign(window, {
  V3Hero, V3Band, V3Clients, V3Router, V3Features,
  V3Steps, V3Numbers, V3Integrations, V3Testimonials, V3Faq, V3Contact,
});