/* global React */
const { useId } = React;

// Chalk SVG filter — re-used across all icons
function ChalkDefs(){
  return (
    <svg width="0" height="0" style={{position:'absolute'}} aria-hidden="true">
      <defs>
        <filter id="chalk" x="-10%" y="-10%" width="120%" height="120%">
          <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" seed="3" />
          <feDisplacementMap in="SourceGraphic" scale="1.6" />
          <feGaussianBlur stdDeviation="0.25" />
        </filter>
        <filter id="chalk-soft" x="-10%" y="-10%" width="120%" height="120%">
          <feTurbulence type="fractalNoise" baseFrequency="1.2" numOctaves="2" seed="7" />
          <feDisplacementMap in="SourceGraphic" scale="0.8" />
        </filter>
      </defs>
    </svg>
  );
}

// Generic chalk icon wrapper
function ChalkIcon({ size=44, children, soft=false }){
  return (
    <svg viewBox="0 0 64 64" width={size} height={size} className="chalk"
      style={{ filter: soft ? 'url(#chalk-soft)' : 'url(#chalk)' }}>
      <g className="chalk-inner">{children}</g>
    </svg>
  );
}

// ── Big chalk icons (ones in the icon strip)
const IconMask = ({ size=44 }) => (
  <ChalkIcon size={size}>
    <path d="M16 14 Q32 6 48 14 Q52 30 48 46 Q42 56 32 56 Q22 56 16 46 Q12 30 16 14 Z" />
    <ellipse cx="24" cy="28" rx="4" ry="6" />
    <ellipse cx="40" cy="28" rx="4" ry="6" />
    <path d="M22 42 Q32 46 42 42" />
  </ChalkIcon>
);

const IconGun = ({ size=44 }) => (
  <ChalkIcon size={size}>
    <path d="M14 18 L46 18 L50 22 L50 28 L44 28 L40 32 L24 32 L20 28 L14 28 Z" />
    <path d="M28 32 L28 50 L34 50 L34 32" />
    <path d="M30 50 L31 56 M32 50 L32 56 M33 50 L33 57" />
    <circle cx="20" cy="23" r="1.6" />
    <circle cx="44" cy="23" r="1.6" />
  </ChalkIcon>
);

const IconStar = ({ size=44 }) => (
  <ChalkIcon size={size}>
    <path d="M32 6 L36 26 L56 28 L40 38 L46 56 L32 46 L18 56 L24 38 L8 28 L28 26 Z" />
    <circle cx="32" cy="32" r="3" />
  </ChalkIcon>
);

const IconSpray = ({ size=44 }) => (
  <ChalkIcon size={size}>
    <rect x="22" y="24" width="20" height="32" rx="2" />
    <rect x="26" y="14" width="12" height="10" />
    <path d="M16 14 L20 14 M16 10 L18 10 M16 18 L18 18 M12 14 L14 14" />
    <path d="M28 32 L36 32 M28 38 L36 38" />
  </ChalkIcon>
);

const IconLaptop = ({ size=44 }) => (
  <ChalkIcon size={size}>
    <path d="M12 18 L52 18 L52 44 L12 44 Z" />
    <path d="M8 48 L56 48" />
    <path d="M22 24 L26 28 L22 32 M30 32 L40 32" />
  </ChalkIcon>
);

const IconMachine = ({ size=44 }) => (
  <ChalkIcon size={size}>
    <path d="M14 20 L34 20 L34 30 L40 30 L40 24 L52 24 L52 36 L40 36 L40 30" />
    <path d="M22 30 L22 48 L26 48 L26 30" />
    <path d="M24 48 L24 56" />
    <circle cx="46" cy="30" r="3" />
  </ChalkIcon>
);

const IconFAQ = ({ size=66 }) => (
  <ChalkIcon size={size}>
    <path d="M14 14 L50 14 L50 50 L14 50 Z" />
    <path d="M22 36 Q22 26 32 26 Q42 26 38 34 Q34 38 32 40 L32 44" />
    <circle cx="32" cy="50" r="0.8" />
  </ChalkIcon>
);

const IconSketch = ({ size=66 }) => (
  <ChalkIcon size={size}>
    <path d="M32 8 L36 28 L56 32 L36 36 L32 56 L28 36 L8 32 L28 28 Z" />
    <circle cx="32" cy="32" r="6" />
    <path d="M22 18 L18 14 M42 18 L46 14 M22 46 L18 50 M42 46 L46 50" />
  </ChalkIcon>
);

const IconHome = ({ size=22 }) => (
  <ChalkIcon size={size}>
    <path d="M10 30 L32 12 L54 30 L54 54 L10 54 Z" />
    <path d="M26 54 L26 38 L38 38 L38 54" />
  </ChalkIcon>
);

const IconBook = ({ size=22 }) => (
  <ChalkIcon size={size}>
    <path d="M14 12 L14 52 L32 48 L50 52 L50 12 L32 16 Z" />
    <path d="M32 16 L32 48" />
  </ChalkIcon>
);

// Original "marks" footer glyphs (drawn from scratch — no Creative Loop)
const MarkN717 = () => (
  <ChalkIcon size={36} soft>
    <path d="M10 12 L10 52 M10 12 L34 52 M34 12 L34 52" />
    <path d="M40 12 L54 12 M40 32 L54 32 M40 52 L54 52" />
  </ChalkIcon>
);
const MarkAngel = () => (
  <ChalkIcon size={36} soft>
    <circle cx="32" cy="22" r="6" />
    <path d="M14 30 L32 28 L50 30" />
    <path d="M22 36 L42 36 M28 44 L36 44" />
  </ChalkIcon>
);

window.Icons = {
  ChalkDefs, ChalkIcon,
  Mask: IconMask, Gun: IconGun, Star: IconStar, Spray: IconSpray,
  Laptop: IconLaptop, Machine: IconMachine,
  FAQ: IconFAQ, Sketch: IconSketch, Home: IconHome, Book: IconBook,
  MarkN717, MarkAngel,
};