"use client";

/**
 * Animated heartbeat (ECG) logo for heartbeads.
 * A minimalistic, elegant heartbeat trace line that continuously animates
 * with a drawing/pulse effect — representing the living pulse of a project.
 */
export function BeadsLogo({ className }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 32 32"
      fill="none"
      className={className}
      aria-hidden="true"
    >
      {/* Heartbeat ECG trace — the signature PQRST waveform */}
      <polyline
        points="1,16 6,16 8,16 9.5,14 11,18 12.5,6 14,26 15.5,10 17,16 19,16 20.5,14.5 21.5,17.5 22.5,16 31,16"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
        fill="none"
        opacity="0.9"
      >
        {/* Dash animation: line draws itself, then fades and redraws */}
        <animate
          attributeName="stroke-dasharray"
          values="0 60;60 0"
          dur="2s"
          repeatCount="indefinite"
        />
        <animate
          attributeName="opacity"
          values="0.4;0.95;0.95;0.4"
          dur="2s"
          repeatCount="indefinite"
        />
      </polyline>

      {/* Trailing glow — a second faded copy offset in time */}
      <polyline
        points="1,16 6,16 8,16 9.5,14 11,18 12.5,6 14,26 15.5,10 17,16 19,16 20.5,14.5 21.5,17.5 22.5,16 31,16"
        stroke="currentColor"
        strokeWidth="2.5"
        strokeLinecap="round"
        strokeLinejoin="round"
        fill="none"
        opacity="0.15"
      >
        <animate
          attributeName="stroke-dasharray"
          values="0 60;60 0"
          dur="2s"
          repeatCount="indefinite"
        />
        <animate
          attributeName="opacity"
          values="0;0.2;0.2;0"
          dur="2s"
          repeatCount="indefinite"
        />
      </polyline>

      {/* Pulse dot — travels along the trace */}
      <circle cx="0" cy="16" r="1.5" fill="currentColor" opacity="0">
        <animate
          attributeName="cx"
          values="1;6;8;9.5;11;12.5;14;15.5;17;19;20.5;21.5;22.5;31"
          dur="2s"
          repeatCount="indefinite"
        />
        <animate
          attributeName="cy"
          values="16;16;16;14;18;6;26;10;16;16;14.5;17.5;16;16"
          dur="2s"
          repeatCount="indefinite"
        />
        <animate
          attributeName="opacity"
          values="0;0.8;1;1;1;1;1;1;0.8;0.6;0.6;0.6;0.4;0"
          dur="2s"
          repeatCount="indefinite"
        />
        <animate
          attributeName="r"
          values="1;1.5;2;2.5;2;2.5;2;1.5;1.5;1;1;1;1;0.5"
          dur="2s"
          repeatCount="indefinite"
        />
      </circle>
    </svg>
  );
}