/**
 * Three stars strung on a single thread.
 *
 * The mark says the company name literally and carries the idea the whole site
 * is built on: one thread running through everything. The thread arcs over the
 * middle star and tapers off past the outer two, so it reads as a yarn passing
 * through rather than a closed badge.
 *
 * Pure SVG, everything in currentColor, so it stays crisp at any size and takes
 * its colour from whatever it sits inside.
 */

const STARS = [
  { cx: 8, cy: 15.5, r: 4.4 },
  { cx: 24, cy: 7.5, r: 5.8 },
  { cx: 40, cy: 15.5, r: 4.4 },
];

/**
 * Four cubics whose joins land exactly on the three star centres, so the thread
 * passes through the stars rather than around them.
 *
 * The two control points either side of the apex share its y, which makes the
 * tangent horizontal there and keeps the top of the arc smooth instead of
 * peaked. The end segments run out to the edges of the viewBox, where the
 * gradient below fades them to nothing.
 */
const THREAD = [
  "M0 22",
  "C 3 22, 5.5 17.5, 8 15.5",
  "C 12 12.5, 17.5 7.5, 24 7.5",
  "C 30.5 7.5, 36 12.5, 40 15.5",
  "C 42.5 17.5, 45 22, 48 22",
].join(" ");

// A fixed id is fine here. The mark appears more than once per page, but every
// instance defines an identical gradient, so sharing one is harmless.
const THREAD_FADE = "three-stars-thread-fade";

export function Logo({ className }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 48 24"
      className={className}
      fill="none"
      aria-hidden="true"
      focusable="false"
    >
      <defs>
        {/* The yarn dissolves at both ends rather than stopping. A hard stop
            reads as a broken stub; a fade reads as thread carrying on past the
            edge of the mark. currentColor in the stops keeps the whole thing
            inheriting its colour from the header or the footer. */}
        <linearGradient id={THREAD_FADE} x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor="currentColor" stopOpacity="0" />
          <stop offset="18%" stopColor="currentColor" stopOpacity="0.5" />
          <stop offset="82%" stopColor="currentColor" stopOpacity="0.5" />
          <stop offset="100%" stopColor="currentColor" stopOpacity="0" />
        </linearGradient>
      </defs>

      {/* The thread sits back so the stars stay dominant at small sizes. */}
      <path
        d={THREAD}
        stroke={`url(#${THREAD_FADE})`}
        strokeWidth="1.2"
        strokeLinecap="round"
      />

      {STARS.map((star) => (
        <path
          key={star.cx}
          d={starPath(star.cx, star.cy, star.r, star.r * 0.42)}
          fill="currentColor"
        />
      ))}
    </svg>
  );
}

function starPath(cx: number, cy: number, outer: number, inner: number): string {
  const points: string[] = [];
  for (let i = 0; i < 10; i++) {
    const radius = i % 2 === 0 ? outer : inner;
    const angle = (Math.PI / 5) * i - Math.PI / 2;
    points.push(
      `${(cx + radius * Math.cos(angle)).toFixed(2)} ${(cy + radius * Math.sin(angle)).toFixed(2)}`,
    );
  }
  return `M${points.join(" L")} Z`;
}