// Trivan — éléments partagés entre toutes les pages : logo, nav, footer, révélation
// Exporte sur window : TrivanMark, TrivanBrand, TrivanNav, TrivanFooter, useReveal, PageShell
// Coordonnées société : TRIVAN SASU · 47 rue Vivienne, 75002 Paris · contact@trivan.eu · +33 7 56 92 95 77

const TRIVAN_INFO = {
  company: "TRIVAN SASU",
  email: "contact@trivan.eu",
  phoneDisplay: "+33 7 56 92 95 77",
  phoneHref: "tel:+33756929577",
  address: "47 rue Vivienne, 75002 Paris",
  tagline: "La couche de paiement des boutiques indépendantes",
};

/* ---------- Logo ---------- */
/* Wordmark "Trivan" (charbon, point du i émeraude) — logotype principal. */
function TrivanWordmark({ height = 26 }) {
  return (
    <img
      className="wordmark3"
      src="images/trivan-wordmark.png"
      alt="Trivan"
      style={{ height: height + "px" }}
    />
  );
}

/* Monogramme T (favicon / petites surfaces). */
function TrivanMark({ size = 30 }) {
  return (
    <img
      className="bmark2"
      src="images/trivan-logo-192.png"
      alt="Trivan"
      width={size}
      height={size}
    />
  );
}

function TrivanBrand({ height = 26 }) {
  return (
    <a className="brand3" href="index.html" aria-label="Trivan — accueil">
      <TrivanWordmark height={height} />
    </a>
  );
}

/* ---------- Nav ---------- */
function TrivanNav({ page = "home" }) {
  const home = page === "home";
  const [open, setOpen] = React.useState(false);
  const links = home
    ? [
        { label: "Le routeur", href: "#routeur" },
        { label: "Fonctionnalités", href: "#fonctionnalites" },
        { label: "Intégrations", href: "#integrations" },
        { label: "Tarifs", href: "tarifs.html" },
      ]
    : [
        { label: "Tarifs", href: "tarifs.html" },
        { label: "À propos", href: "a-propos.html" },
        { label: "Documentation", href: "documentation.html" },
        { label: "Contact", href: "contact.html" },
      ];
  return (
    <div className={"nav3" + (open ? " open" : "")}>
      <div className="container nav3-inner">
        <TrivanBrand />
        <div className="nav3-links">
          {links.map((l) => (
            <a key={l.label} href={l.href} className={page === l.href.replace(".html", "") ? "on" : ""}>
              {l.label}
            </a>
          ))}
        </div>
        <div className="nav3-cta">
          <a className="nav3-login" href="connexion.html">Connexion</a>
          <a className="btn3 primary nav3-start" href="demarrer.html">Démarrer <span className="arr">→</span></a>
          <button
            className="nav3-burger"
            type="button"
            aria-label={open ? "Fermer le menu" : "Ouvrir le menu"}
            aria-expanded={open}
            onClick={() => setOpen(!open)}
          >
            <span></span><span></span><span></span>
          </button>
        </div>
      </div>
      {open ? (
        <div className="nav3-mobile">
          {links.map((l) => (
            <a key={l.label} href={l.href} onClick={() => setOpen(false)}>{l.label}</a>
          ))}
          <div className="nav3-mobile-sep"></div>
          <a href="connexion.html" onClick={() => setOpen(false)}>Connexion</a>
          <a className="btn3 primary" href="demarrer.html" onClick={() => setOpen(false)}>
            Démarrer <span className="arr">→</span>
          </a>
        </div>
      ) : null}
    </div>
  );
}

/* ---------- Footer ---------- */
function TrivanFooter() {
  const columns = [
    {
      title: "Produit",
      links: [
        { label: "Le routeur", href: "index.html#routeur" },
        { label: "Fonctionnalités", href: "index.html#fonctionnalites" },
        { label: "Intégrations", href: "index.html#integrations" },
        { label: "Tarifs", href: "tarifs.html" },
        { label: "Documentation", href: "documentation.html" },
      ],
    },
    {
      title: "Entreprise",
      links: [
        { label: "À propos", href: "a-propos.html" },
        { label: "Clients", href: "index.html#temoignages" },
        { label: "Carrières", href: "contact.html" },
        { label: "Contact", href: "contact.html" },
      ],
    },
    {
      title: "Ressources",
      links: [
        { label: "Guides d'intégration", href: "documentation.html" },
        { label: "FAQ", href: "index.html#faq" },
        { label: "Support", href: "contact.html" },
      ],
    },
    {
      title: "Légal",
      links: [
        { label: "Mentions légales", href: "mentions-legales.html" },
        { label: "Conditions générales", href: "cgv.html" },
        { label: "Confidentialité", href: "confidentialite.html" },
        { label: "Cookies", href: "cookies.html" },
        { label: "Usage acceptable", href: "usage-acceptable.html" },
      ],
    },
  ];
  return (
    <footer className="footer3" data-screen-label="Footer">
      <div className="container">
        <div className="footer3-grid">
          <div className="footer3-brandcol">
            <TrivanBrand height={22} />
            <p>
              Une seule intégration entre votre boutique et vos prestataires de
              paiement. Trivan route chaque transaction au meilleur endroit pour
              que vous ne perdiez plus une vente.
            </p>
            <div className="footer3-coords">
              <span>{TRIVAN_INFO.address}</span>
              <a href={"mailto:" + TRIVAN_INFO.email}>{TRIVAN_INFO.email}</a>
              <a href={TRIVAN_INFO.phoneHref}>{TRIVAN_INFO.phoneDisplay}</a>
            </div>
          </div>
          {columns.map((col) => (
            <div className="footer3-col" key={col.title}>
              <h4>{col.title}</h4>
              <ul>
                {col.links.map((l) => (
                  <li key={l.label}><a href={l.href}>{l.label}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div className="footer3-bottom">
          <span>© 2026 {TRIVAN_INFO.company}. Tous droits réservés.</span>
          <span>{TRIVAN_INFO.tagline}</span>
        </div>
      </div>
    </footer>
  );
}

/* ---------- Révélation au scroll (partagée) ---------- */
function useReveal(deps) {
  React.useEffect(() => {
    const els = Array.from(document.querySelectorAll("[data-reveal]"));
    let ticking = false;
    const check = () => {
      ticking = false;
      const vh = window.innerHeight;
      els.forEach((el) => {
        if (el.classList.contains("in")) return;
        const r = el.getBoundingClientRect();
        if (r.top < vh - 40 && r.bottom > 0) el.classList.add("in");
      });
    };
    const onScroll = () => {
      if (!ticking) {
        ticking = true;
        requestAnimationFrame(check);
      }
    };
    check();
    const t = setTimeout(check, 120);
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => {
      clearTimeout(t);
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
    };
  }, deps || []);
}

/* ---------- Coquille de page (nav + contenu + footer) ---------- */
function PageShell({ page, children }) {
  useReveal([page]);
  return (
    <div>
      <TrivanNav page={page} />
      <main className="pagewrap">{children}</main>
      <TrivanFooter />
    </div>
  );
}

Object.assign(window, { TRIVAN_INFO, TrivanWordmark, TrivanMark, TrivanBrand, TrivanNav, TrivanFooter, useReveal, PageShell });