/**
 * Piggy — the mark.
 *
 * A front-facing pig's head reduced to the four shapes that survive at 16px:
 * two triangular ears, a rounded head, a snout with two nostrils, two eyes.
 * Drawn with `currentColor` so it inherits whatever it sits on and works in
 * both themes without a second asset, and on any accent the user picks.
 *
 * This is a placeholder of reasonable quality, not final brand art — good
 * enough to ship and to judge layout against, and easy to swap for
 * commissioned artwork later without touching any layout code.
 */
export function PiggyMark({
  className = 'h-6 w-6',
  title,
}: {
  className?: string;
  title?: string;
}) {
  return (
    <svg
      viewBox="0 0 32 32"
      className={className}
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      // Decorative by default: when there is no title the mark sits beside the
      // wordmark, and announcing it twice is noise for a screen reader.
      role={title ? 'img' : undefined}
      aria-hidden={title ? undefined : true}
      aria-label={title}
    >
      {title ? <title>{title}</title> : null}

      {/* Ears. Drawn before the head so the head's fill overlaps their base. */}
      <path
        d="M7.4 8.6 5.1 3.9c-.2-.5.3-1 .8-.8l5.2 2.2z"
        fill="currentColor"
      />
      <path
        d="M24.6 8.6 26.9 3.9c.2-.5-.3-1-.8-.8l-5.2 2.2z"
        fill="currentColor"
      />

      {/* Head. Slightly wider than tall — reads as a pig rather than a bear. */}
      <path
        d="M16 5.2c6.3 0 11.2 4.3 11.2 10.4 0 6.5-5 11.2-11.2 11.2S4.8 22.1 4.8 15.6C4.8 9.5 9.7 5.2 16 5.2z"
        fill="currentColor"
      />

      {/* Eyes, knocked out of the head so the mark stays a single colour. */}
      <ellipse cx="11.6" cy="13.4" rx="1.5" ry="1.8" className="fill-[hsl(var(--bg))]" />
      <ellipse cx="20.4" cy="13.4" rx="1.5" ry="1.8" className="fill-[hsl(var(--bg))]" />

      {/* Snout, also knocked out, with two nostrils punched back in. */}
      <rect x="11.3" y="17.6" width="9.4" height="6.2" rx="3.1" className="fill-[hsl(var(--bg))]" />
      <ellipse cx="14.2" cy="20.7" rx="1.15" ry="1.5" fill="currentColor" />
      <ellipse cx="17.8" cy="20.7" rx="1.15" ry="1.5" fill="currentColor" />
    </svg>
  );
}

/**
 * The full lockup: mark plus wordmark.
 *
 * Lowercase, because "pig" set in lowercase reads as a friendly product name
 * while "PIG" reads as an acronym being shouted. The expansion is available
 * to assistive technology without cluttering the interface.
 */
export function PiggyLogo({ className = '' }: { className?: string }) {
  return (
    <span className={`inline-flex items-center gap-2 ${className}`}>
      <PiggyMark className="h-7 w-7 shrink-0 text-accent-fg" />
      <span className="text-lg font-semibold lowercase tracking-tight">
        pig
        <span className="sr-only"> — Prime Intellect Growth</span>
      </span>
    </span>
  );
}
