// LogoMark.jsx — the official AILC logo, animated.
// Three layers extracted from the real logo PNG:
//   logo-base.png   → dial ring + N/E/S/W letters (fixed)
//   logo-needle.png → the figure/needle (rotates: "cherche le nord")
//   logo-star.png   → the north star (ignites when the needle locks)
// At rest the three layers reassemble pixel-for-pixel into the official mark.
function LogoMark({ size = 312, replayable = true }) {
  const W = 238, H = 256;
  const needleRef = React.useRef(null);
  const starRef = React.useRef(null);
  const glowRef = React.useRef(null);

  const play = React.useCallback(() => {
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const needle = needleRef.current, star = starRef.current, glow = glowRef.current;
    if (!needle || !star) return;
    if (reduce) {
      needle.style.transform = "rotate(0deg)";
      star.style.opacity = 1; star.style.transform = "scale(1)";
      if (glow) glow.style.opacity = 0;
      return;
    }
    // Needle: spins clockwise, decelerates, hunts gently, settles on north (0°).
    needle.animate(
      [
        { transform: "rotate(-1010deg)" },
        { transform: "rotate(-14deg)", offset: 0.78 },
        { transform: "rotate(6deg)", offset: 0.89 },
        { transform: "rotate(-2deg)", offset: 0.96 },
        { transform: "rotate(0deg)" },
      ],
      { duration: 2000, easing: "cubic-bezier(.17,.85,.28,1)", fill: "both" }
    );
    // Star: dim while searching, then ignites with a gold flare as it locks.
    star.animate(
      [
        { opacity: 0.22, transform: "scale(.55)" },
        { opacity: 0.22, transform: "scale(.55)", offset: 0.62 },
        { opacity: 1, transform: "scale(1.22)", offset: 0.82 },
        { opacity: 1, transform: "scale(1)" },
      ],
      { duration: 2300, easing: "cubic-bezier(.16,1,.3,1)", fill: "both" }
    );
    if (glow) {
      glow.animate(
        [
          { opacity: 0 },
          { opacity: 0, offset: 0.62 },
          { opacity: 0.9, offset: 0.82 },
          { opacity: 0 },
        ],
        { duration: 2600, easing: "ease-out", fill: "both" }
      );
    }
  }, []);

  React.useEffect(() => {
    const t = setTimeout(play, 220);
    return () => clearTimeout(t);
  }, [play]);

  const layer = { position: "absolute", inset: 0, width: "100%", height: "100%", display: "block" };
  return (
    <div
      onClick={replayable ? play : undefined}
      title={replayable ? "Rejouer" : undefined}
      style={{
        position: "relative", width: size, height: size * H / W,
        cursor: replayable ? "pointer" : "default", userSelect: "none",
      }}
    >
      {/* gold flare that blooms behind the star on lock */}
      <div ref={glowRef} aria-hidden="true" style={{
        position: "absolute", left: "77.3%", top: "17.6%", width: size * 0.5, height: size * 0.5,
        transform: "translate(-50%,-50%)", opacity: 0, pointerEvents: "none",
        background: "radial-gradient(circle, rgba(240,208,112,.85) 0%, rgba(201,154,60,.35) 35%, rgba(201,154,60,0) 70%)",
      }}></div>
      <img src="assets/logo-base.png" alt="" aria-hidden="true" style={layer} />
      <img ref={needleRef} src="assets/logo-needle.png" alt="" aria-hidden="true"
        style={{ ...layer, transformOrigin: "51.26% 51.56%", transform: "rotate(0deg)" }} />
      <img ref={starRef} src="assets/logo-star.png" alt="" aria-hidden="true"
        style={{ ...layer, transformOrigin: "77.3% 17.6%" }} />
      <span style={{ position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }}>
        AI Leadership Compass
      </span>
    </div>
  );
}
Object.assign(window, { LogoMark });