/**
 * Brand marks for the social profiles.
 *
 * `lucide-react` carries no brand icons any more (verified: 3928 icons in the
 * installed version, none of them `linkedin` / `facebook` / `instagram`), and
 * pulling a whole icon package for three glyphs would cost a dependency plus an
 * `optimizePackageImports` entry. These are traced here instead: pure Server
 * Components, `viewBox="0 0 24 24"`, `currentColor` only — so the `hover:*`
 * colour of the enclosing link keeps working — and no intrinsic `width` /
 * `height`, so the caller sizes them with `size-*`.
 *
 * They are always decorative: the accessible name belongs on the `<a>` that
 * wraps them (`aria-label`).
 */
type IconProps = {
  className?: string;
};

export function LinkedInIcon({ className }: IconProps) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="currentColor"
      aria-hidden="true"
      focusable="false"
      className={className}
    >
      {/* « i » — dot and stem. */}
      <circle cx="4.6" cy="4.6" r="2.4" />
      <path d="M2.6 9h4v12.4h-4z" />
      {/* « n » — stem, shoulder and leg. */}
      <path d="M9.1 9h3.8v1.7a4.3 4.3 0 0 1 3.8-2c3.1 0 5.2 2 5.2 5.6v7.1h-4v-6.5c0-1.8-.8-3-2.4-3-1.4 0-2.3 1-2.3 3v6.5h-4.1z" />
    </svg>
  );
}

export function FacebookIcon({ className }: IconProps) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="currentColor"
      aria-hidden="true"
      focusable="false"
      className={className}
    >
      {/* « f » — descender, crossbar and hook. */}
      <path d="M13.4 21.6v-8.2h2.8l.5-3.2h-3.3V8.1c0-.9.3-1.6 1.7-1.6h1.7V3.6a22 22 0 0 0-2.6-.1c-2.5 0-4.2 1.5-4.2 4.3v2.4H6.9v3.2h3.1v8.2z" />
    </svg>
  );
}

export function InstagramIcon({ className }: IconProps) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.8"
      aria-hidden="true"
      focusable="false"
      className={className}
    >
      {/* Body, lens and flash — the mark is a line drawing, unlike the two above. */}
      <rect x="3.1" y="3.1" width="17.8" height="17.8" rx="5" />
      <circle cx="12" cy="12" r="4.1" />
      <circle cx="17.3" cy="6.7" r="1.05" fill="currentColor" stroke="none" />
    </svg>
  );
}