/**
 * ── APPRENTISSAGE ────────────────────────────────────────────────────────────
 * Aucune librairie d'icônes : chaque icône est un petit SVG écrit à la main.
 * Avantage direct sur le score Lighthouse — zéro requête réseau, zéro
 * kilo-octet de police d'icônes à télécharger.
 *
 * Note TypeScript : `Props` décrit ce qu'on peut passer au composant.
 * Le `?` veut dire « facultatif ». Si tu écris `<IconeCle taille="grand" />`,
 * le compilateur refuse de builder. C'est le filet que PHP n'avait pas.
 * ─────────────────────────────────────────────────────────────────────────────
 */

type Props = { className?: string };

/** Réglages partagés par toutes les icônes : trait fin, bouts nets. */
const base = {
  viewBox: "0 0 24 24",
  fill: "none",
  stroke: "currentColor",
  strokeWidth: 1.6,
  strokeLinecap: "round",
  strokeLinejoin: "round",
  "aria-hidden": true,
} as const;

export function IconeCalendrier({ className }: Props) {
  return (
    <svg {...base} className={className}>
      <rect x="3" y="5" width="18" height="16" rx="1.5" />
      <path d="M3 10h18M8 3v4M16 3v4" />
      <path d="M8 14h3v3H8z" />
    </svg>
  );
}

export function IconeCle({ className }: Props) {
  return (
    <svg {...base} className={className}>
      <circle cx="7.5" cy="12" r="4" />
      <path d="M11.5 12H21M18 12v3.5M15 12v2.5" />
    </svg>
  );
}

export function IconePorte({ className }: Props) {
  return (
    <svg {...base} className={className}>
      <path d="M5 21V4a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v17" />
      <path d="M3 21h18M13 12.5v1.5" />
    </svg>
  );
}

export function IconeAtelier({ className }: Props) {
  return (
    <svg {...base} className={className}>
      <path d="M3 21V10l6 3.5V10l6 3.5V10l6 3.5V21z" />
      <path d="M3 10 4 3h4l1 7" />
    </svg>
  );
}

export function IconeCaisses({ className }: Props) {
  return (
    <svg {...base} className={className}>
      <path d="M3 8.5 12 4l9 4.5-9 4.5z" />
      <path d="M3 8.5v7L12 20l9-4.5v-7M12 13v7" />
    </svg>
  );
}

export function IconeCarte({ className }: Props) {
  return (
    <svg {...base} className={className}>
      <path d="m3 6 6-2 6 2 6-2v14l-6 2-6-2-6 2z" />
      <path d="M9 4v14M15 6v14" />
    </svg>
  );
}

export function IconeImmeuble({ className }: Props) {
  return (
    <svg {...base} className={className}>
      <path d="M4 21V5a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v16" />
      <path d="M14 10h5a1 1 0 0 1 1 1v10M3 21h18" />
      <path d="M7 8h4M7 12h4M7 16h4M17 14v3" />
    </svg>
  );
}

export function IconeCarteBancaire({ className }: Props) {
  return (
    <svg {...base} className={className}>
      <rect x="2.5" y="5" width="19" height="14" rx="2" />
      <path d="M2.5 10h19M6 15h4" />
    </svg>
  );
}

export function IconeMessage({ className }: Props) {
  return (
    <svg {...base} className={className}>
      <path d="M21 12a8 8 0 0 1-8 8H4l2-3a8 8 0 1 1 15-5z" />
      <path d="M8.5 11h8M8.5 14.5h5" />
    </svg>
  );
}

export function IconeGlobe({ className }: Props) {
  return (
    <svg {...base} className={className}>
      <circle cx="12" cy="12" r="9" />
      <path d="M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9S14.5 18.4 12 21c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z" />
    </svg>
  );
}

export function IconeLoupe({ className }: Props) {
  return (
    <svg {...base} className={className}>
      <circle cx="10.5" cy="10.5" r="6.5" />
      <path d="m15.5 15.5 5 5" />
    </svg>
  );
}

export function IconePanier({ className }: Props) {
  return (
    <svg {...base} className={className}>
      <path d="M3 4h2.2l2.3 11h10l2-8H6" />
      <circle cx="9.5" cy="19" r="1.4" />
      <circle cx="17" cy="19" r="1.4" />
    </svg>
  );
}

export function IconePosition({ className }: Props) {
  return (
    <svg {...base} className={className}>
      <path d="M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11z" />
      <circle cx="12" cy="10" r="2.6" />
    </svg>
  );
}

export function IconeTelephone({ className }: Props) {
  return (
    <svg {...base} className={className}>
      <path d="M5 3h3.5l1.8 4.5-2.2 1.6a12 12 0 0 0 5.8 5.8l1.6-2.2L20 14.5V18a2 2 0 0 1-2.2 2A16.5 16.5 0 0 1 3 5.2 2 2 0 0 1 5 3z" />
    </svg>
  );
}

export function IconeEnveloppe({ className }: Props) {
  return (
    <svg {...base} className={className}>
      <rect x="2.5" y="5" width="19" height="14" rx="2" />
      <path d="m3 7 9 6 9-6" />
    </svg>
  );
}

export function IconeFleche({ className }: Props) {
  return (
    <svg {...base} className={className}>
      <path d="M4 12h15M13 6l6 6-6 6" />
    </svg>
  );
}

export function IconeEtapes({ className }: Props) {
  return (
    <svg {...base} className={className}>
      <circle cx="5" cy="12" r="2.2" />
      <circle cx="12" cy="12" r="2.2" />
      <circle cx="19" cy="12" r="2.2" />
      <path d="M7.2 12h2.6M14.2 12h2.6" />
    </svg>
  );
}

export function IconeTableau({ className }: Props) {
  return (
    <svg {...base} className={className}>
      <rect x="3" y="4" width="18" height="16" rx="1.5" />
      <path d="M3 9h18M9 9v11M15 9v11" />
    </svg>
  );
}

export function IconeCoche({ className }: Props) {
  return (
    <svg {...base} className={className}>
      <path d="m4.5 12.5 5 5 10-11" />
    </svg>
  );
}