import type { CaseStudy } from "@/lib/content/work";

/** Parametric cover art — gradient ground, category motif, Sadu accents, mono caption. */
export default function CoverArt({
  cs,
  caption,
  className,
}: {
  cs: Pick<CaseStudy, "hue" | "category" | "slug">;
  caption?: string;
  className?: string;
}) {
  const { from, to, accent } = cs.hue;
  const gid = `g-${cs.slug}`;
  return (
    <svg
      viewBox="0 0 640 340"
      preserveAspectRatio="xMidYMid slice"
      className={className}
      aria-hidden="true"
    >
      <defs>
        <linearGradient id={gid} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor={from} />
          <stop offset="1" stopColor={to} />
        </linearGradient>
      </defs>
      <rect width="640" height="340" fill={`url(#${gid})`} />
      {/* weave hairlines */}
      <g stroke="#EAF1F8" strokeOpacity=".07">
        <path d="M0 90 H640 M0 175 H640 M0 260 H640" />
      </g>
      {/* category motif */}
      {cs.category === "software" && (
        <g stroke={accent} strokeOpacity=".3" fill="none">
          <circle cx="520" cy="84" r="140" />
          <circle cx="520" cy="84" r="100" />
          <circle cx="520" cy="84" r="60" />
        </g>
      )}
      {cs.category === "cloud" && (
        <g fill="none" stroke={accent} strokeOpacity=".35" strokeWidth="2">
          <path d="M120 210 a44 44 0 1 1 8 -87 A52 52 0 0 1 230 138 a36 36 0 0 1 -6 72 Z" />
          <path d="M330 172 h180 M480 152 l30 20 -30 20" strokeOpacity=".5" stroke="#7FB8F0" />
        </g>
      )}
      {cs.category === "security" && (
        <g fill="none" stroke={accent} strokeOpacity=".35">
          <path d="M320 40 L420 76 V160 c0 62 -44 100 -100 116 C264 260 220 222 220 160 V76 Z" />
          <path d="M300 158 l16 16 28 -32" stroke="#7FB8F0" strokeOpacity=".45" />
        </g>
      )}
      {cs.category === "data" && (
        <g>
          <g fill={accent} fillOpacity=".75">
            <rect x="90" y="200" width="24" height="58" />
            <rect x="128" y="172" width="24" height="86" opacity=".7" />
            <rect x="166" y="142" width="24" height="116" opacity=".5" />
            <rect x="204" y="112" width="24" height="146" opacity=".35" />
          </g>
          <path d="M330 220 C 390 140, 450 200, 560 90" fill="none" stroke="#7FB8F0" strokeOpacity=".5" strokeWidth="2" />
          <circle cx="560" cy="90" r="5" fill="#7FB8F0" />
        </g>
      )}
      {cs.category === "commerce" && (
        <g fill="none" stroke={accent} strokeOpacity=".45">
          <rect x="70" y="84" width="118" height="146" rx="8" />
          <rect x="226" y="64" width="118" height="166" rx="8" />
          <rect x="382" y="98" width="118" height="132" rx="8" />
        </g>
      )}
      {/* Sadu triangles */}
      <g fill="#7FB8F0" fillOpacity=".5">
        <path d="M40 300 l14 -22 14 22 Z" />
        <path d="M76 300 l14 -22 14 22 Z" />
        <path d="M112 300 l14 -22 14 22 Z" />
      </g>
      {caption ? (
        <text
          x="180"
          y="300"
          fontFamily="ui-monospace, monospace"
          fontSize="15"
          fill="#A9C2E0"
          opacity=".9"
        >
          {caption}
        </text>
      ) : null}
    </svg>
  );
}