/* LoopWordmark.jsx
   Wordmark "loopdoedson". Os dois "o" de "loop" são dois anéis e
   um ponto percorre um ∞ (figure-8) atravessando ambos — sugere o "loop".
   Sutil e contínuo. Em reduced-motion o ponto fica parado.
   Props: size (px) controla a escala. */
function LoopWordmark({ size = 22, color, speed = 1 }) {
  const reduced = useReducedMotion();
  const green = color || "var(--green)";
  const dur = (3.4 / speed) + "s"; // velocidade do loop (maior speed = mais rápido)
  // os dois "o" viram um SVG; o resto é texto normal
  return (
    <span
      style={{
        display: "inline-flex", alignItems: "baseline", gap: "0.02em",
        fontFamily: "var(--font-title)", fontWeight: 600,
        fontSize: size, letterSpacing: "-0.03em", lineHeight: 1, color: "var(--text)",
        userSelect: "none",
      }}
      aria-label="loopdoedson"
    >
      <span style={{ display: "inline-block" }}>l</span>
      <svg
        viewBox="0 0 90 50"
        width={size * 1.78} height={size}
        style={{ display: "inline-block", transform: "translateY(0.12em)" }}
        aria-hidden="true"
      >
        {/* trilho ∞ invisível usado pelo ponto */}
        <path id="loopPath" d="M25,25 C25,9 60,9 60,25 C60,41 25,41 25,25 Z"
              fill="none" stroke="none" />
        {/* dois anéis = "oo" */}
        <circle cx="25" cy="25" r="13.5" fill="none" stroke="var(--text)" strokeWidth="5" />
        <circle cx="60" cy="25" r="13.5" fill="none" stroke="var(--text)" strokeWidth="5" />
        {/* leve halo verde nos anéis ao passar o ponto */}
        <circle cx="25" cy="25" r="13.5" fill="none" stroke={green} strokeWidth="5"
                strokeDasharray="6 80" opacity={reduced ? 0 : 0.9}>
          {!reduced && (
            <animate attributeName="stroke-dashoffset" from="0" to="-86"
              dur={dur} repeatCount="indefinite" />
          )}
        </circle>
        {/* ponto que viaja o ∞ */}
        <circle r="3.4" fill={green}
          style={{ filter: `drop-shadow(0 0 4px ${green})` }}>
          {!reduced && (
            <animateMotion dur={dur} repeatCount="indefinite"
              keyPoints="0;1" keyTimes="0;1" calcMode="linear">
              <mpath href="#loopPath" />
            </animateMotion>
          )}
          {reduced && <set attributeName="cx" to="25" />}
          {reduced && <set attributeName="cy" to="25" />}
        </circle>
      </svg>
      <span style={{ display: "inline-block" }}>p</span>
      <span style={{ display: "inline-block", color: "var(--muted)" }}>doedson</span>
    </span>
  );
}

Object.assign(window, { LoopWordmark });