// SVG-illustratie van de Sorteerhoed — gestileerd, animeerbaar
// Props:
//   talking: de mond beweegt
//   thinking: subtiel wiebelen
//   size: pixel breedte
//   color: optionele kleur-tint voor reveal moment

function SortingHat({ talking = false, thinking = false, size = 240, glow = null }) {
  const id = React.useId().replace(/:/g, '');
  return (
    <svg
      width={size}
      viewBox="0 0 240 280"
      className={`hat ${thinking ? 'hat-think' : ''} ${talking ? 'hat-talk' : ''}`}
      style={{ overflow: 'visible' }}
    >
      <defs>
        <radialGradient id={`hatBody${id}`} cx="50%" cy="60%" r="70%">
          <stop offset="0%" stopColor="#5a4225" />
          <stop offset="55%" stopColor="#3a2a16" />
          <stop offset="100%" stopColor="#1a1108" />
        </radialGradient>
        <linearGradient id={`hatBrim${id}`} x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stopColor="#4a3520" />
          <stop offset="100%" stopColor="#1a1108" />
        </linearGradient>
        <radialGradient id={`hatGlow${id}`} cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor={glow || '#f4c95d'} stopOpacity="0.6" />
          <stop offset="100%" stopColor={glow || '#f4c95d'} stopOpacity="0" />
        </radialGradient>
        <filter id={`hatShadow${id}`} x="-20%" y="-20%" width="140%" height="140%">
          <feGaussianBlur stdDeviation="3" />
        </filter>
      </defs>

      {/* glow */}
      {glow && <circle cx="120" cy="160" r="120" fill={`url(#hatGlow${id})`} />}

      {/* ground shadow */}
      <ellipse cx="120" cy="262" rx="80" ry="6" fill="rgba(0,0,0,0.35)" filter={`url(#hatShadow${id})`} />

      {/* hat body — gekromde, scheve punthoed */}
      <g className="hat-body">
        <path
          d="M 70 240
             C 70 240, 60 180, 80 130
             C 95 90, 130 50, 165 25
             C 175 18, 180 22, 178 32
             C 172 65, 158 130, 145 175
             C 138 200, 130 225, 122 240
             Z"
          fill={`url(#hatBody${id})`}
          stroke="#0a0604"
          strokeWidth="1.5"
        />

        {/* tip flop */}
        <path
          d="M 165 25 C 175 18, 180 22, 178 32 C 176 38, 170 45, 162 50"
          fill="none"
          stroke="#0a0604"
          strokeWidth="1"
          opacity="0.6"
        />

        {/* brim */}
        <ellipse cx="115" cy="240" rx="68" ry="14" fill={`url(#hatBrim${id})`} stroke="#0a0604" strokeWidth="1.5" />
        <ellipse cx="115" cy="237" rx="58" ry="9" fill="#1a1108" opacity="0.7" />

        {/* creases / stitching */}
        <path
          d="M 88 200 Q 110 195 132 198"
          fill="none"
          stroke="#7a5a32"
          strokeWidth="0.8"
          opacity="0.4"
          strokeDasharray="2 3"
        />
        <path
          d="M 95 165 Q 115 158 138 162"
          fill="none"
          stroke="#7a5a32"
          strokeWidth="0.8"
          opacity="0.4"
          strokeDasharray="2 3"
        />
        <path
          d="M 82 220 Q 110 214 145 218"
          fill="none"
          stroke="#7a5a32"
          strokeWidth="0.8"
          opacity="0.5"
          strokeDasharray="2 3"
        />

        {/* Eyes — ribbels die oogvormen suggereren */}
        <g className="hat-eyes">
          <path
            d="M 88 195 Q 96 190 104 195 Q 96 198 88 195 Z"
            fill="#0a0604"
            opacity="0.85"
          />
          <path
            d="M 122 195 Q 130 190 138 195 Q 130 198 122 195 Z"
            fill="#0a0604"
            opacity="0.85"
          />
          {/* glints */}
          <circle cx="94" cy="193" r="1" fill="#f4c95d" opacity="0.7" />
          <circle cx="128" cy="193" r="1" fill="#f4c95d" opacity="0.7" />
        </g>

        {/* Mouth — vouw in stof die als mond werkt */}
        <g className="hat-mouth">
          <path
            d="M 92 220 Q 110 228 132 220 Q 130 224 110 226 Q 92 224 92 220 Z"
            fill="#0a0604"
            opacity="0.9"
          />
        </g>

        {/* highlight on top fold */}
        <path
          d="M 145 80 Q 155 70 165 60"
          fill="none"
          stroke="#7a5a32"
          strokeWidth="1.5"
          opacity="0.3"
        />
      </g>
    </svg>
  );
}

window.SortingHat = SortingHat;