import { useId } from "react";

/**
 * Greenlight's brand mark — HEARTS variant. Same badge, same proportions,
 * same lamp positions as GreenlightLogo — only the three lamp lenses are
 * heart-shaped instead of circular (top/middle unlit, bottom lit green).
 * Static artwork, no animation.
 *
 * All gradient/filter/clipPath ids are namespaced per mount via `useId()`
 * so multiple instances on one page never collide.
 */
type GreenlightLogoHeartsProps = {
  size?: number;
  className?: string;
  ariaLabel?: string;
  animated?: boolean;
};

const HEART_82 = "M 0.00 81.18 C -29.34 45.97, -78.25 16.63, -78.25 -26.41 C -78.25 -61.62, -48.90 -81.18, -19.56 -81.18 C -7.82 -81.18, 0.00 -63.57, 0.00 -38.14 C 0.00 -63.57, 7.82 -81.18, 19.56 -81.18 C 48.90 -81.18, 78.25 -61.62, 78.25 -26.41 C 78.25 16.63, 29.34 45.97, 0.00 81.18 Z";
const HEART_88 = "M 0.00 87.12 C -31.49 49.33, -83.97 17.84, -83.97 -28.34 C -83.97 -66.13, -52.48 -87.12, -20.99 -87.12 C -8.40 -87.12, 0.00 -68.23, 0.00 -40.94 C 0.00 -68.23, 8.40 -87.12, 20.99 -87.12 C 52.48 -87.12, 83.97 -66.13, 83.97 -28.34 C 83.97 17.84, 31.49 49.33, 0.00 87.12 Z";
const HEART_81 = "M 0.00 80.19 C -28.98 45.41, -77.29 16.42, -77.29 -26.09 C -77.29 -60.87, -48.31 -80.19, -19.32 -80.19 C -7.73 -80.19, 0.00 -62.80, 0.00 -37.68 C 0.00 -62.80, 7.73 -80.19, 19.32 -80.19 C 48.31 -80.19, 77.29 -60.87, 77.29 -26.09 C 77.29 16.42, 28.98 45.41, 0.00 80.19 Z";
const HEART_87 = "M 0.00 86.13 C -31.13 48.77, -83.02 17.64, -83.02 -28.02 C -83.02 -65.38, -51.89 -86.13, -20.75 -86.13 C -8.30 -86.13, 0.00 -67.45, 0.00 -40.47 C 0.00 -67.45, 8.30 -86.13, 20.75 -86.13 C 51.89 -86.13, 83.02 -65.38, 83.02 -28.02 C 83.02 17.64, 31.13 48.77, 0.00 86.13 Z";

export function GreenlightLogoHearts({
  size,
  className,
  ariaLabel,
  animated: _animated = true,
}: GreenlightLogoHeartsProps) {
  const uid = useId();
  const id = (name: string) => `gl-${uid}-${name}`;

  return (
    <svg
      className={`gl-orb${className ? " " + className : ""}`}
      width={size}
      height={size}
      viewBox="0 0 1024 1024"
      aria-label={ariaLabel}
      aria-hidden={ariaLabel ? undefined : true}
      role={ariaLabel ? "img" : undefined}
    >
      <defs>
        {/* bezel / puck */}
        <linearGradient id={id("bezelGrad")} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#1a221d" />
          <stop offset="100%" stopColor="#0a0f0c" />
        </linearGradient>
        <linearGradient
          id={id("rimLightGrad")}
          gradientUnits="userSpaceOnUse"
          x1="48.7"
          y1="343.4"
          x2="975.3"
          y2="343.4"
        >
          <stop offset="0%" stopColor="#3d4a42" stopOpacity="0" />
          <stop offset="50%" stopColor="#4f5d54" stopOpacity="0.9" />
          <stop offset="100%" stopColor="#3d4a42" stopOpacity="0" />
        </linearGradient>

        {/* brushed face */}
        <linearGradient
          id={id("brushSweep")}
          gradientUnits="userSpaceOnUse"
          x1="90"
          y1="70"
          x2="720"
          y2="760"
        >
          <stop offset="0%" stopColor="#ffffff" stopOpacity="0.08" />
          <stop offset="28%" stopColor="#ffffff" stopOpacity="0.03" />
          <stop offset="55%" stopColor="#ffffff" stopOpacity="0" />
          <stop offset="100%" stopColor="#ffffff" stopOpacity="0" />
        </linearGradient>
        <filter id={id("grain")} x="-10%" y="-10%" width="120%" height="120%">
          <feTurbulence
            type="fractalNoise"
            baseFrequency="0.9"
            numOctaves={2}
            stitchTiles="stitch"
            result="n"
          />
          <feColorMatrix
            in="n"
            type="matrix"
            values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.035 0"
          />
        </filter>

        <radialGradient
          id={id("ambient")}
          cx="512"
          cy="620"
          r="470"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset="0%" stopColor="#0a1a10" stopOpacity="0.55" />
          <stop offset="60%" stopColor="#0a1a10" stopOpacity="0.15" />
          <stop offset="100%" stopColor="#0a1a10" stopOpacity="0" />
        </radialGradient>

        {/* ring */}
        <linearGradient id={id("ringEdge")} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#7dffc0" />
          <stop offset="50%" stopColor="#00e061" />
          <stop offset="100%" stopColor="#00a844" />
        </linearGradient>
        <filter id={id("ringBlurSoft")} x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur stdDeviation="14" />
        </filter>
        <filter id={id("ringBlurWide")} x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur stdDeviation="34" />
        </filter>

        {/* lamps (hearts) */}
        <radialGradient id={id("litLamp")} cx="50%" cy="42%" r="65%">
          <stop offset="0%" stopColor="#7ff0ac" />
          <stop offset="45%" stopColor="#2fdd70" />
          <stop offset="100%" stopColor="#00c853" />
        </radialGradient>
        <filter id={id("lampBlurSoft")} x="-100%" y="-100%" width="300%" height="300%">
          <feGaussianBlur stdDeviation="26" />
        </filter>
        <filter id={id("lampBlurWide")} x="-150%" y="-150%" width="400%" height="400%">
          <feGaussianBlur stdDeviation="60" />
        </filter>
        <filter id={id("softBlur6")} x="-60%" y="-60%" width="220%" height="220%">
          <feGaussianBlur stdDeviation="4" />
        </filter>
        <filter id={id("softBlur3")} x="-100%" y="-100%" width="300%" height="300%">
          <feGaussianBlur stdDeviation="3.5" />
        </filter>

        <clipPath id={id("clipHeart82")}>
          <path d={HEART_82} />
        </clipPath>
        <clipPath id={id("clipHeart88")}>
          <path d={HEART_88} />
        </clipPath>
        <clipPath id={id("badgeClip")}>
          <circle cx="512" cy="512" r="500" />
        </clipPath>
      </defs>

      <g clipPath={`url(#${id("badgeClip")})`}>
        {/* machined bezel puck */}
        <circle cx="512" cy="512" r="500" fill={`url(#${id("bezelGrad")})`} />
        <path
          d="M 48.7 343.4 A 493 493 0 0 1 975.3 343.4"
          fill="none"
          stroke={`url(#${id("rimLightGrad")})`}
          strokeWidth="3"
          strokeLinecap="round"
          opacity="0.85"
        />

        {/* brushed dark face */}
        <circle cx="512" cy="512" r="486" fill="#06110b" />
        <circle cx="512" cy="512" r="486" fill={`url(#${id("ambient")})`} />
        <circle cx="512" cy="512" r="486" fill={`url(#${id("brushSweep")})`} />
        <circle
          cx="512"
          cy="512"
          r="486"
          fill="#ffffff"
          filter={`url(#${id("grain")})`}
        />

        {/* ring glow layers */}
        <circle
          cx="512"
          cy="512"
          r="420"
          fill="none"
          stroke="#00e061"
          strokeWidth="34"
          opacity="0.25"
          filter={`url(#${id("ringBlurWide")})`}
        />
        <circle
          cx="512"
          cy="512"
          r="420"
          fill="none"
          stroke="#00e061"
          strokeWidth="30"
          opacity="0.55"
          filter={`url(#${id("ringBlurSoft")})`}
        />

        {/* crisp glass-tube ring */}
        <circle
          cx="512"
          cy="512"
          r="420"
          fill="none"
          stroke={`url(#${id("ringEdge")})`}
          strokeWidth="22"
        />
        <circle
          cx="512"
          cy="512"
          r="413"
          fill="none"
          stroke="#d9fff0"
          strokeWidth="2"
          opacity="0.5"
        />

        {/* top unlit heart */}
        <path
          transform="translate(512,322)"
          d={HEART_82}
          fill="#37423a"
          opacity="0.9"
        />
        <g transform="translate(512,322)" clipPath={`url(#${id("clipHeart82")})`}>
          <ellipse
            cx="0"
            cy="46"
            rx="52"
            ry="24"
            fill="#000000"
            opacity="0.24"
            filter={`url(#${id("softBlur6")})`}
          />
          <ellipse
            cx="-24"
            cy="-38"
            rx="13"
            ry="7"
            fill="#ffffff"
            opacity="0.10"
            filter={`url(#${id("softBlur3")})`}
          />
        </g>
        <path
          transform="translate(512,322)"
          d={HEART_81}
          fill="none"
          stroke="#171d19"
          strokeWidth="2"
          opacity="0.6"
        />

        {/* middle unlit heart */}
        <path
          transform="translate(512,512)"
          d={HEART_82}
          fill="#303a33"
          opacity="0.9"
        />
        <g transform="translate(512,512)" clipPath={`url(#${id("clipHeart82")})`}>
          <ellipse
            cx="0"
            cy="46"
            rx="52"
            ry="24"
            fill="#000000"
            opacity="0.24"
            filter={`url(#${id("softBlur6")})`}
          />
          <ellipse
            cx="-24"
            cy="-38"
            rx="13"
            ry="7"
            fill="#ffffff"
            opacity="0.12"
            filter={`url(#${id("softBlur3")})`}
          />
        </g>
        <path
          transform="translate(512,512)"
          d={HEART_81}
          fill="none"
          stroke="#171d19"
          strokeWidth="2"
          opacity="0.6"
        />

        {/* bottom lit heart glow */}
        <path
          transform="translate(512,702)"
          d={HEART_88}
          fill="#00e061"
          opacity="0.25"
          filter={`url(#${id("lampBlurWide")})`}
        />
        <path
          transform="translate(512,702)"
          d={HEART_88}
          fill="#00e061"
          opacity="0.7"
          filter={`url(#${id("lampBlurSoft")})`}
        />
        <path
          transform="translate(512,702)"
          d={HEART_88}
          fill={`url(#${id("litLamp")})`}
        />
        <g transform="translate(512,702)" clipPath={`url(#${id("clipHeart88")})`}>
          <ellipse
            cx="0"
            cy="54"
            rx="66"
            ry="32"
            fill="#00341c"
            opacity="0.40"
            filter={`url(#${id("softBlur6")})`}
          />
          <ellipse
            cx="-28"
            cy="-46"
            rx="14"
            ry="8"
            fill="#ffffff"
            opacity="0.45"
            filter={`url(#${id("softBlur3")})`}
          />
        </g>
        <path
          transform="translate(512,702)"
          d={HEART_87}
          fill="none"
          stroke="#064023"
          strokeWidth="2"
          opacity="0.5"
        />
      </g>
    </svg>
  );
}