/**
 * ── APPRENTISSAGE ────────────────────────────────────────────────────────────
 * Un « composant » React, c'est une fonction qui retourne du HTML. Rien de
 * plus. L'équivalent exact de ta fonction PHP `afficherChevrons()` qui ferait
 * un `echo` — sauf qu'ici on `return` au lieu d'`echo`, et que les arguments
 * s'appellent des *props*.
 *
 * Celui-ci reprend le motif ‹ › du logo comme ornement graphique. Le logo
 * lui-même n'est JAMAIS redessiné : il est toujours servi depuis son PNG
 * d'origine (public/logo-adt-*.png).
 * ─────────────────────────────────────────────────────────────────────────────
 */
export function Chevrons({ className = "" }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 26 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2.6}
      strokeLinecap="butt"
      strokeLinejoin="miter"
      /* aria-hidden : purement décoratif, les lecteurs d'écran l'ignorent. */
      aria-hidden="true"
      className={className}
    >
      <path d="M9.5 3.5 2 12l7.5 8.5" />
      <path d="M16.5 3.5 24 12l-7.5 8.5" />
    </svg>
  );
}

/** Le même motif, mais plein cadre, pour servir de filigrane de fond. */
export function ChevronsFiligrane({ className = "" }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 26 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={1.4}
      strokeLinecap="butt"
      strokeLinejoin="miter"
      aria-hidden="true"
      className={className}
    >
      <path d="M9.5 3.5 2 12l7.5 8.5" />
      <path d="M16.5 3.5 24 12l-7.5 8.5" />
    </svg>
  );
}
