import { LogoMark } from "@/components/logo-mark"

// Version glitchée de LogoMark, même principe que le wordmark VALABEL de la
// page d'accueil (.glitch dans globals.css) mais adapté à un SVG plutôt qu'à
// du texte : comme `content: attr(data-text)` ne fonctionne pas sur une
// image vectorielle, les deux copies chromatiques (bleu / magenta) sont de
// vrais éléments superposés (pas des pseudo-éléments), pilotés par leurs
// propres keyframes (voir .glitch-logo* dans globals.css).
export function LogoGlitch({ className }: { className?: string }) {
  return (
    <span className="glitch-logo relative inline-block">
      <svg aria-hidden="true" focusable="false" className="absolute h-0 w-0 overflow-hidden">
        <filter id="glitch-displace-logo">
          <feTurbulence type="fractalNoise" baseFrequency="0.01 0.09" numOctaves="2" seed="7" result="noise" />
          <feDisplacementMap in="SourceGraphic" in2="noise" scale="10" xChannelSelector="R" yChannelSelector="G" />
        </filter>
      </svg>
      <LogoMark className={`${className ?? ""} glitch-logo-shape`} />
      <span className="absolute inset-0 glitch-logo-burst-1" style={{ color: "var(--accent)" }}>
        <LogoMark className={className} />
      </span>
      <span className="absolute inset-0 glitch-logo-burst-2" style={{ color: "#ff2965" }}>
        <LogoMark className={className} />
      </span>
    </span>
  )
}