/**
 * The line icons the storefront draws, in one file.
 *
 * All one family: a 24-unit box, no fill, round caps, 1.8 stroke, and `currentColor` so an icon takes the
 * colour of whatever it sits in — a white one on the brand panel and an azure one in a tile, with no
 * variant of the file. Size comes from CSS (`.iconbtn svg`, `.cat-icon svg`, …), never from a prop, so
 * one rule resizes every icon in a place at once.
 *
 * Every icon here is decoration beside a word, so each is `aria-hidden`. An icon that is the ONLY content
 * of a control gets its name from that control's `aria-label`, never from the icon.
 */
import type { JSX } from 'react'

export type IconName = keyof typeof PATHS

const PATHS = {
  book: <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />,
  code: <path d="m8 17-5-5 5-5m8 0 5 5-5 5m-3-14-2 20" />,
  ai: <path d="M12 3l1.9 5.9L20 11l-6.1 2.1L12 19l-1.9-5.9L4 11l6.1-2.1L12 3Zm7 13 .9 2.1L22 19l-2.1.9L19 22l-.9-2.1L16 19l2.1-.9L19 16Z" />,
  lang: <path d="m5 8 6 6m-7 0 6-6 2-3H3m5-2v3m6 14 5-12 5 12m-8-4h6" />,
  biz: <><rect x="3" y="7" width="18" height="14" rx="2" /><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m-13 7h18" /></>,
  school: <path d="m2 10 10-6 10 6-10 6-10-6Zm4 3v5c4 3 8 3 12 0v-5m4-3v8" />,
  moon: <path d="M20.9 13A9 9 0 0 1 11 3.1 9 9 0 1 0 20.9 13Z" />,
  sun: <><circle cx="12" cy="12" r="4" /><path d="M12 2v2m0 16v2M4.9 4.9l1.4 1.4m11.4 11.4 1.4 1.4M2 12h2m16 0h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" /></>,
  chat: <path d="M21 11.5a8.4 8.4 0 0 1-.9 3.8A8.5 8.5 0 0 1 12.5 20a8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 0 1-.9-3.8A8.5 8.5 0 0 1 12.5 3a8.5 8.5 0 0 1 8.5 8.5Z" />,
  arrow: <path d="M5 12h14m-7-7 7 7-7 7" />,
  check: <path d="m4 12 5 5L20 6" />,
  clock: <><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></>,
  play: <><circle cx="12" cy="12" r="10" /><path d="m10 8 6 4-6 4V8Z" /></>,
  menu: <path d="M4 7h16M4 12h16M4 17h16" />,
  close: <path d="M6 6l12 12M18 6 6 18" />,
  target: <><circle cx="12" cy="12" r="9" /><circle cx="12" cy="12" r="5" /><circle cx="12" cy="12" r="1" /></>,
  mail: <><rect x="2" y="4" width="20" height="16" rx="2" /><path d="m2 6 10 8 10-8" /></>,
  phone: <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" />,
  filter: <path d="M4 7h16M7 12h10m-7 5h4" />,
  layers: <path d="m12 2 9 5-9 5-9-5 9-5Zm-9 10 9 5 9-5m-18 5 9 5 9-5" />,
  signin: <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4m-5-4-5-5 5-5m-5 5h12" />,
  youtube: <><rect x="2" y="5" width="20" height="14" rx="4" /><path d="m10 9 5 3-5 3V9Z" /></>,
  globe: <><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3c2.5 2.6 2.5 15.4 0 18M12 3c-2.5 2.6-2.5 15.4 0 18" /></>,
} as const

export function Icon({ name }: { name: IconName }): JSX.Element {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8}
         strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" focusable="false">
      {PATHS[name] ?? PATHS.book}
    </svg>
  )
}

/**
 * The networks the footer links to.
 *
 * Drawn in the same line family as the icons above rather than pasted in as each company's official
 * filled logo: a row mixing seven house styles, seven weights and seven brand colours is the untidiest
 * thing on a page, and the marks stay recognisable as outlines. They take `currentColor` like the rest,
 * so one rule colours the row and dark mode needs nothing.
 *
 * Each is decoration: the link around it carries the network's name for a screen reader.
 */
const SOCIAL = {
  facebook: <path d="M15 3h-2.5A4.5 4.5 0 0 0 8 7.5V11H5v4h3v6h4v-6h3l1-4h-4V7.5a.5.5 0 0 1 .5-.5H16V3Z" />,
  instagram: <><rect x="3" y="3" width="18" height="18" rx="5" /><circle cx="12" cy="12" r="4" /><path d="M17.5 6.5v.01" /></>,
  linkedin: <><rect x="3" y="3" width="18" height="18" rx="2" /><path d="M8 10.5V17M8 7v.01M12 17v-3.8a2.7 2.7 0 0 1 5.4 0V17" /></>,
  youtube: <><rect x="2" y="5" width="20" height="14" rx="4" /><path d="m10 9 5 3-5 3V9Z" /></>,
  tiktok: <path d="M15 3v10.5a4.5 4.5 0 1 1-4.3-4.49M15 3a5.5 5.5 0 0 0 5.5 5.5" />,
  telegram: <path d="m21.5 3.5-19 7.3 5.6 2.1m13.4-9.4-3 15.6-5-4.1m8-11.5-10.4 9.2m-3-2.1 3 2.1m-3-2.1v5.3l3-3.2" />,
  twitter: <path d="m4 3 7.1 9.1L4.4 21M20 21l-7.1-9.1L19.6 3" />,
  whatsapp: <><path d="M3 21l1.9-5.6A8.5 8.5 0 1 1 8.6 19L3 21Z" /><path d="M9 8.5c.3 2.6 2.4 4.7 5 5 .6.1 1.2-.3 1.4-.9l.1-.4-2-1-.8.9a5.6 5.6 0 0 1-2.3-2.3l.9-.8-1-2-.4.1c-.6.2-1 .8-.9 1.4Z" /></>,
} as const

export type SocialName = keyof typeof SOCIAL

/** The name a screen reader reads; the same word in both languages, as these are proper nouns. */
export const SOCIAL_NAME: Record<SocialName, string> = {
  facebook: 'Facebook',
  instagram: 'Instagram',
  linkedin: 'LinkedIn',
  youtube: 'YouTube',
  tiktok: 'TikTok',
  telegram: 'Telegram',
  twitter: 'X',
  whatsapp: 'WhatsApp',
}

/**
 * How far each mark has to move to sit in the middle of its 24-unit box.
 *
 * A network's mark is not symmetrical — Facebook's «f» hangs to one side of its own outline, and
 * TikTok's note leans up and to the right — so a path drawn to look right on its own lands off
 * centre inside a round button, and a row of them reads as badly set. These are the measured gaps
 * between each mark's bounding box and the box's centre (taken with getBBox in the browser,
 * 9 October 2026); anything not listed already centres itself.
 */
const NUDGE: Partial<Record<SocialName, [number, number]>> = {
  facebook: [1.5, 0],
  tiktok: [-1.25, 1.5],
  telegram: [0, 0.7],
}

export function SocialIcon({ name }: { name: SocialName }): JSX.Element {
  const [dx, dy] = NUDGE[name] || [0, 0]
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.7}
         strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" focusable="false">
      {dx || dy ? <g transform={`translate(${dx} ${dy})`}>{SOCIAL[name]}</g> : SOCIAL[name]}
    </svg>
  )
}

/**
 * The icon for a subject, and the cover tint that goes with it.
 *
 * A category comes from the platform with a slug and nothing else to look at, so the picture is chosen
 * from that slug here rather than being another thing an editor has to set. An unknown slug — a category
 * added on the platform tomorrow — falls back to the book, which is true of every course on this site.
 */
const BY_SLUG: Record<string, { icon: IconName; cover: string }> = {
  programming: { icon: 'code', cover: 'c3' },
  ai: { icon: 'ai', cover: 'c2' },
  school: { icon: 'school', cover: '' },
  curricula: { icon: 'school', cover: '' },
  english: { icon: 'lang', cover: 'c4' },
  languages: { icon: 'lang', cover: 'c4' },
  business: { icon: 'biz', cover: 'c5' },
  general: { icon: 'biz', cover: 'c5' },
  career: { icon: 'biz', cover: 'c5' },
  data: { icon: 'layers', cover: 'c2' },
}

export function look(slug?: string | null): { icon: IconName; cover: string } {
  const key = (slug || '').toLowerCase()
  return BY_SLUG[key] || { icon: 'book', cover: '' }
}