/**
 * The prototype's icon set (Voxi.dc.html), transcribed exactly — same Lucide
 * path data, same per-icon default sizes. The design calls for Lucide
 * throughout; these are inlined rather than pulled from `lucide-react` so the
 * static export (ADR-005) doesn't carry a dependency for ~25 glyphs, and so
 * the sizes stay pinned to what the design specifies rather than a library
 * default.
 */

export interface IconProps {
  size?: number;
  className?: string;
}

function make(body: React.ReactNode, defaultSize: number) {
  const Icon = ({ size, className }: IconProps) => (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size ?? defaultSize}
      height={size ?? defaultSize}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
      aria-hidden="true"
      focusable="false"
    >
      {body}
    </svg>
  );
  return Icon;
}

export const IconHome = make(
  <>
    <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
    <path d="M9 22V12h6v10" />
  </>,
  18,
);

export const IconThreads = make(<path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />, 18);

export const IconBell = make(
  <>
    <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
    <path d="M10.3 21a1.9 1.9 0 0 0 3.4 0" />
  </>,
  20,
);

export const IconTasks = make(
  <>
    <path d="M13 5h8" />
    <path d="M13 12h8" />
    <path d="M13 19h8" />
    <path d="m3 17 2 2 4-4" />
    <path d="m3 7 2 2 4-4" />
  </>,
  20,
);

export const IconMessages = make(
  <>
    <path d="M14 9a2 2 0 0 1-2 2H6l-4 4V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2z" />
    <path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1" />
  </>,
  18,
);

export const IconCalendar = make(
  <>
    <rect width="18" height="18" x="3" y="4" rx="2" />
    <path d="M16 2v4M8 2v4M3 10h18" />
  </>,
  18,
);

export const IconDocs = make(
  <>
    <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
    <path d="M14 2v5h5" />
    <path d="M9 13h6M9 17h6" />
  </>,
  18,
);

export const IconPeople = make(
  <>
    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
    <circle cx="9" cy="7" r="4" />
    <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
    <path d="M16 3.13a4 4 0 0 1 0 7.75" />
  </>,
  18,
);

export const IconAnalytics = make(<path d="M12 20V10M18 20V4M6 20v-4" />, 18);

export const IconSearch = make(
  <>
    <circle cx="11" cy="11" r="7" />
    <path d="m20 20-3.5-3.5" />
  </>,
  16,
);

export const IconPlus = make(<path d="M12 5v14M5 12h14" />, 16);

export const IconX = make(<path d="M18 6 6 18M6 6l12 12" />, 16);

export const IconChevron = make(<path d="m6 9 6 6 6-6" />, 15);

export const IconStar = make(
  <path d="m12 3 2.6 5.6 6 .8-4.4 4.2 1.1 6.1L12 16.8 6.7 19.7l1.1-6.1L3.4 9.4l6-.8Z" />,
  17,
);

export const IconVideo = make(
  <>
    <path d="m22 8-6 4 6 4V8Z" />
    <rect width="14" height="12" x="2" y="6" rx="2" />
  </>,
  17,
);

export const IconPhone = make(
  <path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z" />,
  17,
);

export const IconMore = make(
  <>
    <circle cx="12" cy="12" r="1" />
    <circle cx="19" cy="12" r="1" />
    <circle cx="5" cy="12" r="1" />
  </>,
  17,
);

/** Vertical variant of IconMore — the conventional "more actions" affordance
 * on a message row, where the horizontal one reads as a toolbar. */
export const IconMoreVertical = make(
  <>
    <circle cx="12" cy="5" r="1" />
    <circle cx="12" cy="12" r="1" />
    <circle cx="12" cy="19" r="1" />
  </>,
  17,
);

export const IconCompose = make(
  <>
    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
    <path d="M18.5 2.5a2.1 2.1 0 0 1 3 3L12 15l-4 1 1-4Z" />
  </>,
  17,
);

export const IconSliders = make(
  <path d="M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6" />,
  17,
);

export const IconSmile = make(
  <>
    <circle cx="12" cy="12" r="9" />
    <path d="M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01" />
  </>,
  15,
);

export const IconSend = make(
  <>
    <path d="m22 2-7 20-4-9-9-4Z" />
    <path d="M22 2 11 13" />
  </>,
  16,
);

export const IconUsers = make(
  <>
    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
    <circle cx="9" cy="7" r="4" />
  </>,
  15,
);

export const IconDoc = make(
  <>
    <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
    <path d="M9 13h6M9 17h4" />
  </>,
  17,
);

export const IconPlay = make(<path d="m6 3 14 9-14 9V3Z" />, 13);

export const IconAt = make(
  <>
    <circle cx="12" cy="12" r="4" />
    <path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8" />
  </>,
  17,
);

export const IconClip = make(
  <path d="m21 8-9.5 9.5a4.6 4.6 0 0 1-6.5-6.5L14 2.5a3 3 0 0 1 4.3 4.3l-9 9a1.5 1.5 0 0 1-2.1-2.1L15 6" />,
  17,
);

export const IconMic = make(
  <>
    <rect width="7" height="12" x="8.5" y="2" rx="3.5" />
    <path d="M19 10a7 7 0 0 1-14 0M12 17v5" />
  </>,
  17,
);

export const IconMicOff = make(
  <path d="m2 2 20 20M9 5.5A3 3 0 0 1 15 6v4M15 15a3 3 0 0 1-6-1.5V9M19 10a7 7 0 0 1-1.4 4.2M12 17v5M5 10a7 7 0 0 0 9.6 6.5" />,
  17,
);

export const IconText = make(<path d="M4 20V7M4 7h9M9 7v13M14 20v-8M14 12h6M17 12v8" />, 17);

export const IconSlash = make(
  <>
    <rect width="18" height="18" x="3" y="3" rx="2" />
    <path d="M14 8l-4 8" />
  </>,
  17,
);

export const IconShare = make(
  <>
    <rect width="20" height="14" x="2" y="3" rx="2" />
    <path d="M8 21h8M12 17v4" />
  </>,
  17,
);

export const IconPhoneOff = make(
  <>
    <path d="M10.7 13.3a16 16 0 0 1-2.6-3.4L9.4 8.6a2 2 0 0 0 .5-2.1c-.3-.9-.6-1.8-.7-2.8A2 2 0 0 0 7.1 2h-3a2 2 0 0 0-2 2.2 19.8 19.8 0 0 0 3 8.6M14 15.9a16 16 0 0 0 1.4.7l1.3-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1" />
    <path d="m2 2 20 20" />
  </>,
  17,
);

export const IconCheck = make(<path d="m4 12 5 5L20 6" />, 13);

export const IconPin = make(
  <>
    <path d="M12 17v5" />
    <path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z" />
  </>,
  15,
);

export const IconDownload = make(
  <>
    <path d="M12 3v12" />
    <path d="m7 10 5 5 5-5" />
    <path d="M5 21h14" />
  </>,
  17,
);

export const IconLink = make(
  <>
    <path d="M10 13a5 5 0 0 0 7.1.1l2-2a5 5 0 0 0-7.1-7.1l-1.1 1.1" />
    <path d="M14 11a5 5 0 0 0-7.1-.1l-2 2A5 5 0 0 0 12 20l1.1-1.1" />
  </>,
  15,
);

export const IconForward = make(
  <>
    <path d="m15 8 5 4-5 4v-3H9a5 5 0 0 0-5 5v1" />
    <path d="M4 14v-1a5 5 0 0 1 5-5h6" />
  </>,
  15,
);

export const IconEdit = make(
  <>
    <path d="M12 20h9" />
    <path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L8 18l-4 1 1-4Z" />
  </>,
  14,
);

export const IconTrash = make(
  <>
    <path d="M3 6h18M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2" />
    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
  </>,
  14,
);

export const IconBellOff = make(
  <>
    <path d="M8.7 3A6 6 0 0 1 18 8c0 2.3.5 4 1.1 5.1" />
    <path d="M17 17H4a4 4 0 0 0 2-3V8a6 6 0 0 1 .6-2.6" />
    <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
    <path d="m2 2 20 20" />
  </>,
  16,
);

export const IconLock = make(
  <>
    <rect width="14" height="10" x="5" y="11" rx="2" />
    <path d="M8 11V8a4 4 0 0 1 8 0v3" />
  </>,
  15,
);

export const IconHelp = make(
  <>
    <circle cx="12" cy="12" r="9" />
    <path d="M9.1 9a3 3 0 0 1 5.8 1c0 2-3 2-3 4M12 17h.01" />
  </>,
  15,
);

export const IconKey = make(
  <>
    <circle cx="8" cy="15" r="4" />
    <path d="m10.8 12.2 8-8M17 6l2 2M14 9l2 2" />
  </>,
  17,
);

export const IconGoogle = make(
  <>
    <circle cx="12" cy="12" r="9" />
    <path d="M12 8v8M8 12h8" />
  </>,
  17,
);

/**
 * The connectHUB mark — four members around a shared conversation. Unlike the
 * icons above it is multi-colour by definition, so it neither goes through
 * `make()` nor takes a `color`: the palette *is* the brand. Chips that host it
 * are white on the dark rail (see `.gnav-brand-chip`) and inverted on the
 * purple workspace chip. The palette *is* the brand.
 *
 * Kept inline rather than <img src="/brand/connecthub-mark.svg"> so it renders
 * in the first paint with no extra request — the same reason the icon set is
 * inlined. public/brand/ holds the standalone files for anything outside React.
 */
export function BrandMark({ size = 18 }: { size?: number }) {
  const gradientId = "brandmark-c";
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" fill="none" aria-hidden="true" focusable="false">
      <defs>
        <linearGradient id={gradientId} x1="14" y1="18" x2="46" y2="46" gradientUnits="userSpaceOnUse">
          <stop offset="0" stopColor="#5b5ce6" />
          <stop offset="1" stopColor="#7a7bf0" />
        </linearGradient>
      </defs>
      <circle cx="20" cy="7.5" r="5.5" fill="#5b5ce6" />
      <circle cx="44" cy="7.5" r="5.5" fill="#23c063" />
      <rect x="10" y="15" width="20" height="17" rx="6" fill="#5b5ce6" />
      <rect x="34" y="15" width="20" height="17" rx="6" fill="#23c063" />
      <rect x="10" y="32" width="20" height="17" rx="6" fill="#e5326b" />
      <rect x="34" y="32" width="20" height="17" rx="6" fill="#f5a623" />
      <circle cx="20" cy="56.5" r="5.5" fill="#e5326b" />
      <circle cx="44" cy="56.5" r="5.5" fill="#f5a623" />
      <path
        d="M44.63 20.63A17 17 0 1 0 44.63 43.37L38.69 38.02A9 9 0 1 1 38.69 25.98Z"
        fill={`url(#${gradientId})`}
        stroke="#ffffff"
        strokeWidth="5"
        strokeLinejoin="round"
      />
      <g fill="#16213e">
        <circle cx="26.6" cy="32" r="2.1" />
        <circle cx="32" cy="32" r="2.1" />
        <circle cx="37.4" cy="32" r="2.1" />
      </g>
    </svg>
  );
}

/**
 * The wordmark: "connect" in ink, "HUB" in the brand blue. A component rather
 * than a bare string so the two-tone split can't drift between the five places
 * the name is rendered. `tone="invert"` is for dark backgrounds (the auth
 * hero), where "connect" has to be white instead of ink.
 */
export function BrandWord({ tone = "default" }: { tone?: "default" | "invert" }) {
  return (
    <span className={tone === "invert" ? "brand-word invert" : "brand-word"}>
      connect<b>HUB</b>
    </span>
  );
}