/* global React */
/* ============================================================
   Claymorphism Icons — puffy 3D SVG icon set
   All icons are designed in a 48x48 viewBox.
   Pass `size` to render any pixel size.
   Pass `tone` to swap the gradient palette:
     primary | gold | accent | navy | sand | rose | sky | lime
   ============================================================ */

const TONES = {
  primary: { hi: "#5BA088", base: "#2D6B57", lo: "#143329", shadow: "rgba(20,51,41,0.35)" },
  forest:  { hi: "#5BA088", base: "#2D6B57", lo: "#143329", shadow: "rgba(20,51,41,0.35)" },
  navy:    { hi: "#5B78AA", base: "#2A4575", lo: "#0F1F38", shadow: "rgba(15,31,56,0.35)" },
  gold:    { hi: "#E1C9A8", base: "#B89366", lo: "#7E5F38", shadow: "rgba(126,95,56,0.35)" },
  accent:  { hi: "#D67B7B", base: "#B04545", lo: "#6E2A2A", shadow: "rgba(110,42,42,0.35)" },
  rose:    { hi: "#F0B5B5", base: "#D67B7B", lo: "#9C4040", shadow: "rgba(156,64,64,0.30)" },
  sand:    { hi: "#ECE5D3", base: "#C2B186", lo: "#8B7551", shadow: "rgba(139,117,81,0.30)" },
  sky:     { hi: "#A6C8DE", base: "#5C90B5", lo: "#2A5C8A", shadow: "rgba(42,92,138,0.30)" },
  lime:    { hi: "#D5DF8E", base: "#9CAA50", lo: "#5D6A22", shadow: "rgba(93,106,34,0.30)" },
  cream:   { hi: "#FBF8F2", base: "#ECE5D3", lo: "#A89067", shadow: "rgba(168,144,103,0.25)" },
};

let __clayUid = 0;
function clayGrads(toneName) {
  const t = TONES[toneName] || TONES.primary;
  const id = `clay-${++__clayUid}`;
  return {
    id,
    tone: t,
    defs: (
      <defs>
        <linearGradient id={`${id}-body`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor={t.hi} />
          <stop offset="0.55" stopColor={t.base} />
          <stop offset="1" stopColor={t.lo} />
        </linearGradient>
        <radialGradient id={`${id}-hl`} cx="0.3" cy="0.2" r="0.6">
          <stop offset="0" stopColor="#FFFFFF" stopOpacity="0.7" />
          <stop offset="1" stopColor="#FFFFFF" stopOpacity="0" />
        </radialGradient>
        <linearGradient id={`${id}-rim`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#FFFFFF" stopOpacity="0.55" />
          <stop offset="0.5" stopColor="#FFFFFF" stopOpacity="0.05" />
          <stop offset="1" stopColor="#000000" stopOpacity="0.18" />
        </linearGradient>
        <filter id={`${id}-soft`} x="-20%" y="-20%" width="140%" height="140%">
          <feGaussianBlur stdDeviation="0.6" />
        </filter>
      </defs>
    ),
  };
}

/* Base wrapper — a rounded squircle "pillow" that holds the glyph */
function ClayBase({ tone = "primary", radius = 14, children, withRing = true }) {
  const { id, defs } = clayGrads(tone);
  return (
    <g>
      {defs}
      <rect x="2" y="2" width="44" height="44" rx={radius} fill={TONES[tone].shadow}
        opacity="0.4" transform="translate(0,1.5)" filter={`url(#${id}-soft)`} />
      <rect x="2" y="2" width="44" height="44" rx={radius} fill={`url(#${id}-body)`} />
      <rect x="2" y="2" width="44" height="44" rx={radius} fill={`url(#${id}-rim)`} opacity="0.7" />
      <ellipse cx="18" cy="14" rx="14" ry="8" fill="#FFFFFF" opacity="0.18" />
      {children}
      {withRing && <rect x="2.5" y="2.5" width="43" height="43" rx={radius - 0.5}
        fill="none" stroke="#FFFFFF" strokeOpacity="0.18" strokeWidth="1" />}
    </g>
  );
}

/* Free-form clay (no rounded-square base) — used for "decorative" icons
   like big paw, DNA helix where the shape itself is the icon. */
function ClayBlob({ tone = "primary", children, dropShadow = true }) {
  const { defs } = clayGrads(tone);
  return (
    <g>
      {defs}
      {dropShadow && (
        <defs>
          <filter id="clay-drop" x="-20%" y="-20%" width="140%" height="140%">
            <feDropShadow dx="0" dy="1.5" stdDeviation="1.2"
              floodColor={TONES[tone].shadow} floodOpacity="1" />
          </filter>
        </defs>
      )}
      <g filter={dropShadow ? "url(#clay-drop)" : undefined}>{children}</g>
    </g>
  );
}

/* ============================================================
   Outer wrapper — sets viewBox & sizing
   ============================================================ */
function ClayIcon({ size = 36, children, style }) {
  return (
    <svg width={size} height={size} viewBox="0 0 48 48"
      style={{ display: "block", ...style }} xmlns="http://www.w3.org/2000/svg">
      {children}
    </svg>
  );
}

/* ============================================================
   Icons — each is a small composition
   ============================================================ */

/* PAW print */
function IconPaw({ size, tone = "primary" }) {
  const { id, defs, tone: t } = clayGrads(tone);
  const pad = (cx, cy, rx, ry, rot) => (
    <ellipse cx={cx} cy={cy} rx={rx} ry={ry} fill={`url(#${id}-body)`}
      transform={`rotate(${rot} ${cx} ${cy})`} />
  );
  const padHi = (cx, cy, rx, ry, rot) => (
    <ellipse cx={cx} cy={cy - 1.5} rx={rx * 0.7} ry={ry * 0.4} fill="#FFFFFF" opacity="0.45"
      transform={`rotate(${rot} ${cx} ${cy})`} />
  );
  return (
    <g>
      {defs}
      <filter id={`${id}-drop`} x="-20%" y="-20%" width="140%" height="140%">
        <feDropShadow dx="0" dy="1.5" stdDeviation="1.2" floodColor={t.shadow} floodOpacity="1" />
      </filter>
      <g filter={`url(#${id}-drop)`}>
        {/* main pad */}
        <path d="M24 38c-7 0-12-4-12-9 0-5 5-9 12-9s12 4 12 9c0 5-5 9-12 9z" fill={`url(#${id}-body)`} />
        <ellipse cx="22" cy="25" rx="7" ry="2.5" fill="#FFFFFF" opacity="0.45" />
        {/* toes */}
        {pad(12, 16, 3.5, 5, -15)}
        {pad(20, 11, 3.5, 5, -5)}
        {pad(28, 11, 3.5, 5, 5)}
        {pad(36, 16, 3.5, 5, 15)}
        {padHi(12, 16, 3.5, 5, -15)}
        {padHi(20, 11, 3.5, 5, -5)}
        {padHi(28, 11, 3.5, 5, 5)}
        {padHi(36, 16, 3.5, 5, 15)}
      </g>
    </g>
  );
}

/* DOG face */
function IconDog({ size, tone = "sand" }) {
  const { id, defs, tone: t } = clayGrads(tone);
  return (
    <g>
      {defs}
      <filter id={`${id}-drop`} x="-20%" y="-20%" width="140%" height="140%">
        <feDropShadow dx="0" dy="1.5" stdDeviation="1.2" floodColor={t.shadow} floodOpacity="1" />
      </filter>
      <g filter={`url(#${id}-drop)`}>
        {/* ears */}
        <ellipse cx="11" cy="16" rx="5" ry="8" fill={`url(#${id}-body)`} transform="rotate(-15 11 16)" />
        <ellipse cx="37" cy="16" rx="5" ry="8" fill={`url(#${id}-body)`} transform="rotate(15 37 16)" />
        {/* head */}
        <ellipse cx="24" cy="26" rx="13" ry="12" fill={`url(#${id}-body)`} />
        {/* highlight */}
        <ellipse cx="19" cy="20" rx="7" ry="4" fill="#FFFFFF" opacity="0.35" />
        {/* snout */}
        <ellipse cx="24" cy="32" rx="7" ry="5" fill="#FBF8F2" opacity="0.9" />
        {/* nose */}
        <ellipse cx="24" cy="30" rx="2.2" ry="1.6" fill="#1A1A1A" />
        <ellipse cx="23.5" cy="29.5" rx="0.8" ry="0.5" fill="#FFF" opacity="0.7" />
        {/* eyes */}
        <ellipse cx="19" cy="24" rx="1.3" ry="1.6" fill="#1A1A1A" />
        <ellipse cx="29" cy="24" rx="1.3" ry="1.6" fill="#1A1A1A" />
        <circle cx="19.3" cy="23.5" r="0.4" fill="#FFF" />
        <circle cx="29.3" cy="23.5" r="0.4" fill="#FFF" />
        {/* mouth line */}
        <path d="M22 34c0.8 1 1.5 1 2 1s1.2 0 2-1" stroke="#5A4A2A" strokeWidth="0.8"
          strokeLinecap="round" fill="none" />
      </g>
    </g>
  );
}

/* CAT face */
function IconCat({ size, tone = "sand" }) {
  const { id, defs, tone: t } = clayGrads(tone);
  return (
    <g>
      {defs}
      <filter id={`${id}-drop`} x="-20%" y="-20%" width="140%" height="140%">
        <feDropShadow dx="0" dy="1.5" stdDeviation="1.2" floodColor={t.shadow} floodOpacity="1" />
      </filter>
      <g filter={`url(#${id}-drop)`}>
        {/* ears (triangles) */}
        <path d="M11 18 L9 8 L18 14 Z" fill={`url(#${id}-body)`} />
        <path d="M37 18 L39 8 L30 14 Z" fill={`url(#${id}-body)`} />
        <path d="M11 16 L11 11 L15 13.5 Z" fill="#FFFFFF" opacity="0.35" />
        <path d="M37 16 L37 11 L33 13.5 Z" fill="#FFFFFF" opacity="0.35" />
        {/* head — wider */}
        <ellipse cx="24" cy="26" rx="13.5" ry="11" fill={`url(#${id}-body)`} />
        <ellipse cx="19" cy="21" rx="7" ry="4" fill="#FFFFFF" opacity="0.35" />
        {/* eyes — almond */}
        <path d="M17 23c0 1.5 1 2.5 2 2.5s2-1 2-2.5-1-2-2-2-2 0.5-2 2z" fill="#1A1A1A" />
        <path d="M27 23c0 1.5 1 2.5 2 2.5s2-1 2-2.5-1-2-2-2-2 0.5-2 2z" fill="#1A1A1A" />
        <ellipse cx="19" cy="22.5" rx="0.4" ry="0.6" fill="#FFF" />
        <ellipse cx="29" cy="22.5" rx="0.4" ry="0.6" fill="#FFF" />
        {/* nose */}
        <path d="M24 29 L22.5 27.5 L25.5 27.5 Z" fill="#B04545" />
        {/* whiskers */}
        <path d="M15 30 L21 30 M15 32 L21 30.5 M33 30 L27 30 M33 32 L27 30.5" stroke="#5A4A2A"
          strokeWidth="0.6" strokeLinecap="round" />
        {/* mouth */}
        <path d="M24 30 v1.5 M22 32.5 c0.7 1 1.3 1 2 0.7 c0.7 0.3 1.3 0.3 2-0.7" stroke="#5A4A2A"
          strokeWidth="0.8" strokeLinecap="round" fill="none" />
      </g>
    </g>
  );
}

/* DNA helix */
function IconDNA({ size, tone = "primary" }) {
  const { id, defs, tone: t } = clayGrads(tone);
  const goldId = `${id}-g`;
  return (
    <g>
      {defs}
      <linearGradient id={goldId} x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor={TONES.gold.hi} />
        <stop offset="1" stopColor={TONES.gold.base} />
      </linearGradient>
      <filter id={`${id}-drop`} x="-20%" y="-20%" width="140%" height="140%">
        <feDropShadow dx="0" dy="1.5" stdDeviation="1.2" floodColor={t.shadow} floodOpacity="1" />
      </filter>
      <g filter={`url(#${id}-drop)`}>
        {/* Two helical strands (smooth bezier) */}
        <path d="M16 6 C30 14, 18 26, 32 34 C40 38, 36 42, 32 42"
          stroke={`url(#${id}-body)`} strokeWidth="3.4" fill="none" strokeLinecap="round" />
        <path d="M32 6 C18 14, 30 26, 16 34 C8 38, 12 42, 16 42"
          stroke={`url(#${id}-body)`} strokeWidth="3.4" fill="none" strokeLinecap="round" />
        {/* rungs */}
        {[
          [17, 12, 31, 12],
          [21, 18, 27, 18],
          [22, 24, 26, 24],
          [21, 30, 27, 30],
          [17, 36, 31, 36],
        ].map(([x1, y1, x2, y2], i) => (
          <line key={i} x1={x1} y1={y1} x2={x2} y2={y2}
            stroke={`url(#${goldId})`} strokeWidth="2.2" strokeLinecap="round" />
        ))}
        {/* highlight along upper strand */}
        <path d="M17 8 C28 15, 19 23, 27 28" stroke="#FFFFFF" strokeOpacity="0.5"
          strokeWidth="1.2" fill="none" strokeLinecap="round" />
      </g>
    </g>
  );
}

/* HEART (health) */
function IconHeart({ size, tone = "accent" }) {
  const { id, defs, tone: t } = clayGrads(tone);
  return (
    <g>
      {defs}
      <filter id={`${id}-drop`} x="-20%" y="-20%" width="140%" height="140%">
        <feDropShadow dx="0" dy="1.5" stdDeviation="1.2" floodColor={t.shadow} floodOpacity="1" />
      </filter>
      <g filter={`url(#${id}-drop)`}>
        <path d="M24 40 C 6 28, 10 12, 18 12 C22 12, 24 14, 24 16 C24 14, 26 12, 30 12 C38 12, 42 28, 24 40 Z"
          fill={`url(#${id}-body)`} />
        <path d="M16 17 C19 14, 23 17, 19 22 C17 24, 14 22, 14 19 C14 18, 14.8 17 16 17 Z"
          fill="#FFFFFF" opacity="0.5" />
      </g>
    </g>
  );
}

/* FOOD bowl */
function IconFood({ size, tone = "gold" }) {
  const { id, defs, tone: t } = clayGrads(tone);
  return (
    <g>
      {defs}
      <filter id={`${id}-drop`} x="-20%" y="-20%" width="140%" height="140%">
        <feDropShadow dx="0" dy="1.5" stdDeviation="1.2" floodColor={t.shadow} floodOpacity="1" />
      </filter>
      <g filter={`url(#${id}-drop)`}>
        {/* bowl */}
        <path d="M8 24 C8 36, 14 42, 24 42 S40 36, 40 24 Z" fill={`url(#${id}-body)`} />
        <ellipse cx="24" cy="24" rx="16" ry="4" fill="#FBF8F2" />
        <ellipse cx="24" cy="23.5" rx="14" ry="2.8" fill={`url(#${id}-body)`} opacity="0.4" />
        {/* kibbles */}
        <circle cx="18" cy="22" r="2" fill={TONES.gold.lo} />
        <circle cx="24" cy="21.5" r="2.2" fill={TONES.gold.lo} />
        <circle cx="30" cy="22.5" r="1.8" fill={TONES.gold.lo} />
        <circle cx="17" cy="22" r="0.6" fill="#FFFFFF" opacity="0.7" />
        <circle cx="23" cy="21" r="0.7" fill="#FFFFFF" opacity="0.7" />
        <circle cx="29" cy="22" r="0.5" fill="#FFFFFF" opacity="0.7" />
        {/* bowl rim highlight */}
        <ellipse cx="18" cy="30" rx="4" ry="2" fill="#FFFFFF" opacity="0.25" />
      </g>
    </g>
  );
}

/* WATER drop */
function IconWater({ size, tone = "sky" }) {
  const { id, defs, tone: t } = clayGrads(tone);
  return (
    <g>
      {defs}
      <filter id={`${id}-drop`} x="-20%" y="-20%" width="140%" height="140%">
        <feDropShadow dx="0" dy="1.5" stdDeviation="1.2" floodColor={t.shadow} floodOpacity="1" />
      </filter>
      <g filter={`url(#${id}-drop)`}>
        <path d="M24 6 C24 6, 38 22, 38 30 C38 38, 32 42, 24 42 S10 38, 10 30 C10 22, 24 6, 24 6 Z"
          fill={`url(#${id}-body)`} />
        <path d="M16 22 C14 26, 14 32, 18 36" stroke="#FFFFFF" strokeOpacity="0.6"
          strokeWidth="2" strokeLinecap="round" fill="none" />
      </g>
    </g>
  );
}

/* RUN (paw + motion) */
function IconRun({ size, tone = "lime" }) {
  const { id, defs, tone: t } = clayGrads(tone);
  return (
    <g>
      {defs}
      <filter id={`${id}-drop`} x="-20%" y="-20%" width="140%" height="140%">
        <feDropShadow dx="0" dy="1.5" stdDeviation="1.2" floodColor={t.shadow} floodOpacity="1" />
      </filter>
      <g filter={`url(#${id}-drop)`}>
        {/* lightning bolt-y motion */}
        <path d="M28 8 L18 26 L24 26 L20 40 L34 22 L28 22 Z" fill={`url(#${id}-body)`} />
        <path d="M26 12 L21 22 L25 22 L23 30" stroke="#FFFFFF" strokeOpacity="0.55"
          strokeWidth="1.4" fill="none" strokeLinecap="round" />
      </g>
    </g>
  );
}

/* BONE */
function IconBone({ size, tone = "cream" }) {
  const { id, defs, tone: t } = clayGrads(tone);
  return (
    <g>
      {defs}
      <filter id={`${id}-drop`} x="-20%" y="-20%" width="140%" height="140%">
        <feDropShadow dx="0" dy="1.5" stdDeviation="1.2" floodColor={t.shadow} floodOpacity="1" />
      </filter>
      <g filter={`url(#${id}-drop)`} transform="rotate(-25 24 24)">
        <path d="M10 18 a5 5 0 1 1 6 6 l16 0 a5 5 0 1 1 6 -6 a5 5 0 1 1 -6 -6 l-16 0 a5 5 0 1 1 -6 6z"
          fill={`url(#${id}-body)`} />
        <path d="M14 17 a3 2 0 0 1 2 -2" stroke="#FFFFFF" strokeOpacity="0.7"
          strokeWidth="1.2" fill="none" strokeLinecap="round" />
      </g>
    </g>
  );
}

/* PILL */
function IconPill({ size, tone = "accent" }) {
  const { id, defs, tone: t } = clayGrads(tone);
  const id2 = `${id}-2`;
  return (
    <g>
      {defs}
      <linearGradient id={id2} x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor="#FBF8F2" />
        <stop offset="1" stopColor="#DCD0B5" />
      </linearGradient>
      <filter id={`${id}-drop`} x="-20%" y="-20%" width="140%" height="140%">
        <feDropShadow dx="0" dy="1.5" stdDeviation="1.2" floodColor={t.shadow} floodOpacity="1" />
      </filter>
      <g filter={`url(#${id}-drop)`} transform="rotate(-35 24 24)">
        <rect x="6" y="18" width="36" height="14" rx="7" fill={`url(#${id}-body)`} />
        <rect x="6" y="18" width="18" height="14" rx="7" fill={`url(#${id2})`} />
        <rect x="8" y="20" width="14" height="3" rx="1.5" fill="#FFFFFF" opacity="0.7" />
        <rect x="26" y="20" width="14" height="3" rx="1.5" fill="#FFFFFF" opacity="0.35" />
      </g>
    </g>
  );
}

/* CHART */
function IconChart({ size, tone = "primary" }) {
  const { id, defs, tone: t } = clayGrads(tone);
  return (
    <g>
      {defs}
      <filter id={`${id}-drop`} x="-20%" y="-20%" width="140%" height="140%">
        <feDropShadow dx="0" dy="1.5" stdDeviation="1.2" floodColor={t.shadow} floodOpacity="1" />
      </filter>
      <g filter={`url(#${id}-drop)`}>
        <rect x="8" y="28" width="7" height="14" rx="2" fill={`url(#${id}-body)`} />
        <rect x="20" y="20" width="7" height="22" rx="2" fill={`url(#${id}-body)`} />
        <rect x="32" y="12" width="7" height="30" rx="2" fill={`url(#${id}-body)`} />
        <rect x="9" y="29" width="1.5" height="6" rx="0.7" fill="#FFFFFF" opacity="0.55" />
        <rect x="21" y="21" width="1.5" height="10" rx="0.7" fill="#FFFFFF" opacity="0.55" />
        <rect x="33" y="13" width="1.5" height="14" rx="0.7" fill="#FFFFFF" opacity="0.55" />
      </g>
    </g>
  );
}

/* BELL — notification */
function IconBell({ size, tone = "gold" }) {
  const { id, defs, tone: t } = clayGrads(tone);
  return (
    <g>
      {defs}
      <filter id={`${id}-drop`} x="-20%" y="-20%" width="140%" height="140%">
        <feDropShadow dx="0" dy="1.5" stdDeviation="1.2" floodColor={t.shadow} floodOpacity="1" />
      </filter>
      <g filter={`url(#${id}-drop)`}>
        <path d="M24 8 C16 8, 12 13, 12 22 C12 28, 10 30, 8 34 L40 34 C38 30, 36 28, 36 22 C36 13, 32 8, 24 8 Z"
          fill={`url(#${id}-body)`} />
        <ellipse cx="24" cy="38" rx="4" ry="3" fill={`url(#${id}-body)`} />
        <path d="M14 14 C16 12, 19 11, 22 11" stroke="#FFFFFF" strokeOpacity="0.55"
          strokeWidth="1.6" fill="none" strokeLinecap="round" />
      </g>
    </g>
  );
}

/* CART */
function IconCart({ size, tone = "primary" }) {
  const { id, defs, tone: t } = clayGrads(tone);
  return (
    <g>
      {defs}
      <filter id={`${id}-drop`} x="-20%" y="-20%" width="140%" height="140%">
        <feDropShadow dx="0" dy="1.5" stdDeviation="1.2" floodColor={t.shadow} floodOpacity="1" />
      </filter>
      <g filter={`url(#${id}-drop)`}>
        <path d="M6 10 L12 10 L16 30 L38 30 L42 16 L14 16" stroke={`url(#${id}-body)`}
          strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" fill="none" />
        <circle cx="18" cy="38" r="3.5" fill={`url(#${id}-body)`} />
        <circle cx="34" cy="38" r="3.5" fill={`url(#${id}-body)`} />
        <circle cx="17.5" cy="37.5" r="1" fill="#FFFFFF" opacity="0.6" />
        <circle cx="33.5" cy="37.5" r="1" fill="#FFFFFF" opacity="0.6" />
        <path d="M16 18 L19 28" stroke="#FFFFFF" strokeOpacity="0.5" strokeWidth="1.4" strokeLinecap="round" />
      </g>
    </g>
  );
}

/* SHOP BAG */
function IconBag({ size, tone = "accent" }) {
  const { id, defs, tone: t } = clayGrads(tone);
  return (
    <g>
      {defs}
      <filter id={`${id}-drop`} x="-20%" y="-20%" width="140%" height="140%">
        <feDropShadow dx="0" dy="1.5" stdDeviation="1.2" floodColor={t.shadow} floodOpacity="1" />
      </filter>
      <g filter={`url(#${id}-drop)`}>
        <path d="M16 14 C16 9, 19 6, 24 6 S32 9, 32 14" stroke={`url(#${id}-body)`}
          strokeWidth="3" fill="none" strokeLinecap="round" />
        <path d="M8 16 L40 16 L38 42 L10 42 Z" fill={`url(#${id}-body)`} />
        <path d="M11 18 L13 24" stroke="#FFFFFF" strokeOpacity="0.45" strokeWidth="1.5" strokeLinecap="round" />
      </g>
    </g>
  );
}

/* ARTICLE / BOOK */
function IconBook({ size, tone = "navy" }) {
  const { id, defs, tone: t } = clayGrads(tone);
  return (
    <g>
      {defs}
      <filter id={`${id}-drop`} x="-20%" y="-20%" width="140%" height="140%">
        <feDropShadow dx="0" dy="1.5" stdDeviation="1.2" floodColor={t.shadow} floodOpacity="1" />
      </filter>
      <g filter={`url(#${id}-drop)`}>
        <path d="M8 10 C16 10, 22 12, 24 14 C26 12, 32 10, 40 10 L40 38 C32 38, 26 40, 24 42 C22 40, 16 38, 8 38 Z"
          fill={`url(#${id}-body)`} />
        <path d="M24 14 L24 42" stroke="#FFFFFF" strokeOpacity="0.3" strokeWidth="1" />
        <path d="M12 16 L21 17.5 M12 22 L21 23 M12 28 L19 29" stroke="#FFFFFF"
          strokeOpacity="0.55" strokeWidth="1.2" strokeLinecap="round" />
        <path d="M27 17.5 L36 16 M27 23 L36 22 M29 29 L36 28" stroke="#FFFFFF"
          strokeOpacity="0.55" strokeWidth="1.2" strokeLinecap="round" />
      </g>
    </g>
  );
}

/* HOME */
function IconHome({ size, tone = "primary" }) {
  const { id, defs, tone: t } = clayGrads(tone);
  return (
    <g>
      {defs}
      <filter id={`${id}-drop`} x="-20%" y="-20%" width="140%" height="140%">
        <feDropShadow dx="0" dy="1.5" stdDeviation="1.2" floodColor={t.shadow} floodOpacity="1" />
      </filter>
      <g filter={`url(#${id}-drop)`}>
        <path d="M24 6 L6 22 L10 24 L10 40 C10 42, 11 42, 12 42 L20 42 L20 32 L28 32 L28 42 L36 42 C37 42, 38 42, 38 40 L38 24 L42 22 Z"
          fill={`url(#${id}-body)`} />
        <path d="M12 26 L12 38 M16 26 L16 30" stroke="#FFFFFF" strokeOpacity="0.5"
          strokeWidth="1.3" strokeLinecap="round" />
      </g>
    </g>
  );
}

/* SETTINGS */
function IconGear({ size, tone = "sand" }) {
  const { id, defs, tone: t } = clayGrads(tone);
  return (
    <g>
      {defs}
      <filter id={`${id}-drop`} x="-20%" y="-20%" width="140%" height="140%">
        <feDropShadow dx="0" dy="1.5" stdDeviation="1.2" floodColor={t.shadow} floodOpacity="1" />
      </filter>
      <g filter={`url(#${id}-drop)`}>
        <path d="M24 4 L27 8 L32 7 L33 12 L38 14 L36 19 L40 22 V26 L36 29 L38 34 L33 36 L32 41 L27 40 L24 44 L21 40 L16 41 L15 36 L10 34 L12 29 L8 26 V22 L12 19 L10 14 L15 12 L16 7 L21 8 Z"
          fill={`url(#${id}-body)`} />
        <circle cx="24" cy="24" r="5" fill={TONES[tone].lo} />
        <circle cx="22" cy="22" r="2" fill="#FFFFFF" opacity="0.55" />
      </g>
    </g>
  );
}

/* STETHOSCOPE */
function IconVet({ size, tone = "primary" }) {
  const { id, defs, tone: t } = clayGrads(tone);
  return (
    <g>
      {defs}
      <filter id={`${id}-drop`} x="-20%" y="-20%" width="140%" height="140%">
        <feDropShadow dx="0" dy="1.5" stdDeviation="1.2" floodColor={t.shadow} floodOpacity="1" />
      </filter>
      <g filter={`url(#${id}-drop)`}>
        <path d="M10 8 L10 22 C10 28, 14 32, 20 32 C26 32, 30 28, 30 22 L30 8"
          stroke={`url(#${id}-body)`} strokeWidth="3.4" fill="none" strokeLinecap="round" />
        <circle cx="10" cy="8" r="3" fill={`url(#${id}-body)`} />
        <circle cx="30" cy="8" r="3" fill={`url(#${id}-body)`} />
        <path d="M20 32 L20 38" stroke={`url(#${id}-body)`} strokeWidth="3.4" strokeLinecap="round" />
        <circle cx="20" cy="42" r="5" fill={`url(#${id}-body)`} />
        <circle cx="18" cy="40" r="1.5" fill="#FFFFFF" opacity="0.5" />
      </g>
    </g>
  );
}

/* CAMERA */
function IconCamera({ size, tone = "navy" }) {
  const { id, defs, tone: t } = clayGrads(tone);
  return (
    <g>
      {defs}
      <filter id={`${id}-drop`} x="-20%" y="-20%" width="140%" height="140%">
        <feDropShadow dx="0" dy="1.5" stdDeviation="1.2" floodColor={t.shadow} floodOpacity="1" />
      </filter>
      <g filter={`url(#${id}-drop)`}>
        <rect x="6" y="14" width="36" height="26" rx="6" fill={`url(#${id}-body)`} />
        <rect x="18" y="10" width="12" height="6" rx="2" fill={`url(#${id}-body)`} />
        <circle cx="24" cy="27" r="8" fill={TONES[tone].lo} />
        <circle cx="24" cy="27" r="5" fill={`url(#${id}-body)`} />
        <circle cx="22" cy="25" r="1.5" fill="#FFFFFF" opacity="0.7" />
        <circle cx="36" cy="20" r="1" fill="#FFFFFF" opacity="0.85" />
      </g>
    </g>
  );
}

/* CHECKMARK badge */
function IconCheck({ size, tone = "primary" }) {
  const { id, defs, tone: t } = clayGrads(tone);
  return (
    <g>
      {defs}
      <filter id={`${id}-drop`} x="-20%" y="-20%" width="140%" height="140%">
        <feDropShadow dx="0" dy="1.5" stdDeviation="1.2" floodColor={t.shadow} floodOpacity="1" />
      </filter>
      <g filter={`url(#${id}-drop)`}>
        <circle cx="24" cy="24" r="18" fill={`url(#${id}-body)`} />
        <path d="M14 24 L21 31 L34 18" stroke="#FFFFFF" strokeWidth="3.4" fill="none"
          strokeLinecap="round" strokeLinejoin="round" />
        <ellipse cx="19" cy="16" rx="6" ry="3" fill="#FFFFFF" opacity="0.35" />
      </g>
    </g>
  );
}

/* SHIELD (warranty / trust) */
function IconShield({ size, tone = "gold" }) {
  const { id, defs, tone: t } = clayGrads(tone);
  return (
    <g>
      {defs}
      <filter id={`${id}-drop`} x="-20%" y="-20%" width="140%" height="140%">
        <feDropShadow dx="0" dy="1.5" stdDeviation="1.2" floodColor={t.shadow} floodOpacity="1" />
      </filter>
      <g filter={`url(#${id}-drop)`}>
        <path d="M24 6 L40 12 L38 28 C36 36, 30 40, 24 42 C18 40, 12 36, 10 28 L8 12 Z"
          fill={`url(#${id}-body)`} />
        <path d="M16 22 L22 28 L34 16" stroke="#FFFFFF" strokeWidth="2.6" fill="none"
          strokeLinecap="round" strokeLinejoin="round" />
        <ellipse cx="18" cy="14" rx="6" ry="3" fill="#FFFFFF" opacity="0.4" />
      </g>
    </g>
  );
}

/* SUN / DAY */
function IconSun({ size, tone = "gold" }) {
  const { id, defs, tone: t } = clayGrads(tone);
  return (
    <g>
      {defs}
      <filter id={`${id}-drop`} x="-20%" y="-20%" width="140%" height="140%">
        <feDropShadow dx="0" dy="1.5" stdDeviation="1.2" floodColor={t.shadow} floodOpacity="1" />
      </filter>
      <g filter={`url(#${id}-drop)`}>
        {[0, 45, 90, 135, 180, 225, 270, 315].map((a) => (
          <rect key={a} x="22" y="4" width="4" height="9" rx="2" fill={`url(#${id}-body)`}
            transform={`rotate(${a} 24 24)`} />
        ))}
        <circle cx="24" cy="24" r="10" fill={`url(#${id}-body)`} />
        <ellipse cx="20" cy="20" rx="4" ry="2.5" fill="#FFFFFF" opacity="0.55" />
      </g>
    </g>
  );
}

/* WEIGHT scale */
function IconWeight({ size, tone = "navy" }) {
  const { id, defs, tone: t } = clayGrads(tone);
  return (
    <g>
      {defs}
      <filter id={`${id}-drop`} x="-20%" y="-20%" width="140%" height="140%">
        <feDropShadow dx="0" dy="1.5" stdDeviation="1.2" floodColor={t.shadow} floodOpacity="1" />
      </filter>
      <g filter={`url(#${id}-drop)`}>
        <rect x="6" y="14" width="36" height="28" rx="6" fill={`url(#${id}-body)`} />
        <rect x="14" y="20" width="20" height="10" rx="3" fill="#FBF8F2" />
        <path d="M22 22 L22 28 M18 24 L22 22 L26 24" stroke={TONES[tone].lo} strokeWidth="1.5"
          fill="none" strokeLinecap="round" />
        <rect x="20" y="33" width="8" height="3" rx="1.5" fill="#FFFFFF" opacity="0.4" />
        <ellipse cx="18" cy="18" rx="8" ry="2" fill="#FFFFFF" opacity="0.35" />
      </g>
    </g>
  );
}

/* MOON / NIGHT */
function IconMoon({ size, tone = "navy" }) {
  const { id, defs, tone: t } = clayGrads(tone);
  return (
    <g>
      {defs}
      <filter id={`${id}-drop`} x="-20%" y="-20%" width="140%" height="140%">
        <feDropShadow dx="0" dy="1.5" stdDeviation="1.2" floodColor={t.shadow} floodOpacity="1" />
      </filter>
      <g filter={`url(#${id}-drop)`}>
        <path d="M30 8 C18 8, 8 18, 8 28 S18 42, 28 42 C36 42, 40 38, 42 32 C30 36, 22 28, 24 18 C25 14, 28 10, 30 8 Z"
          fill={`url(#${id}-body)`} />
        <ellipse cx="18" cy="20" rx="4" ry="2" fill="#FFFFFF" opacity="0.45" />
      </g>
    </g>
  );
}

/* ============================================================
   Public wrapper — pick by name
   ============================================================ */
const ICONS = {
  paw: IconPaw, dog: IconDog, cat: IconCat, dna: IconDNA, heart: IconHeart,
  food: IconFood, water: IconWater, run: IconRun, bone: IconBone, pill: IconPill,
  chart: IconChart, bell: IconBell, cart: IconCart, bag: IconBag, book: IconBook,
  home: IconHome, gear: IconGear, vet: IconVet, camera: IconCamera, check: IconCheck,
  shield: IconShield, sun: IconSun, moon: IconMoon, weight: IconWeight,
};

function Clay({ name, size = 36, tone, style }) {
  const C = ICONS[name];
  if (!C) return null;
  return (
    <ClayIcon size={size} style={style}>
      <C size={size} tone={tone} />
    </ClayIcon>
  );
}

/* ============================================================
   Tile — clay icon inside a soft rounded card (used in quick-actions)
   ============================================================ */
function ClayTile({ name, tone, size = 56, bg = "var(--surface)", style }) {
  return (
    <div style={{
      width: size, height: size,
      borderRadius: 18,
      background: bg,
      display: "flex", alignItems: "center", justifyContent: "center",
      boxShadow: "var(--shadow-clay-2)",
      ...style,
    }}>
      <Clay name={name} tone={tone} size={Math.round(size * 0.7)} />
    </div>
  );
}

/* ============================================================
   Pet placeholder portrait — drawn with the same clay icons
   ============================================================ */
function PetPortrait({ kind = "dog", size = 96 }) {
  return (
    <div className="pet-photo" style={{
      width: size, height: size,
      background: "linear-gradient(160deg, var(--surface-tint), var(--surface-soft))",
    }}>
      <Clay name={kind} size={size * 0.82} />
    </div>
  );
}

Object.assign(window, { Clay, ClayTile, ClayBase, ClayBlob, ClayIcon, ICONS, PetPortrait });