// Afdelingswapens — gestileerde SVG illustraties per afdeling

function CrestLion({ size = 200, primary = '#7a0e1a', accent = '#f4c95d' }) {
  return (
    <svg width={size} viewBox="0 0 200 200" style={{ overflow: 'visible' }}>
      <defs>
        <radialGradient id="lionG" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor={accent} />
          <stop offset="100%" stopColor={primary} />
        </radialGradient>
      </defs>
      {/* Manen — stralen */}
      <g fill={accent} opacity="0.95">
        {Array.from({ length: 16 }).map((_, i) => {
          const a = (i / 16) * Math.PI * 2;
          const x1 = 100 + Math.cos(a) * 55;
          const y1 = 100 + Math.sin(a) * 55;
          const x2 = 100 + Math.cos(a) * 88;
          const y2 = 100 + Math.sin(a) * 88;
          const x3 = 100 + Math.cos(a + 0.18) * 55;
          const y3 = 100 + Math.sin(a + 0.18) * 55;
          return <polygon key={i} points={`${x1},${y1} ${x2},${y2} ${x3},${y3}`} />;
        })}
      </g>
      {/* Hoofd */}
      <circle cx="100" cy="100" r="56" fill="url(#lionG)" stroke={primary} strokeWidth="2" />
      {/* Snuit */}
      <ellipse cx="100" cy="118" rx="22" ry="16" fill={primary} opacity="0.4" />
      {/* Ogen */}
      <ellipse cx="86" cy="92" rx="5" ry="7" fill={primary} />
      <ellipse cx="114" cy="92" rx="5" ry="7" fill={primary} />
      <circle cx="86" cy="93" r="1.5" fill={accent} />
      <circle cx="114" cy="93" r="1.5" fill={accent} />
      {/* Neus */}
      <path d="M 100 105 L 94 114 L 106 114 Z" fill={primary} />
      {/* Mond */}
      <path d="M 100 114 Q 100 122 92 124 M 100 114 Q 100 122 108 124" stroke={primary} strokeWidth="2.5" fill="none" strokeLinecap="round" />
      {/* Oren */}
      <path d="M 60 70 Q 65 55 78 60 Q 70 70 65 80 Z" fill={primary} />
      <path d="M 140 70 Q 135 55 122 60 Q 130 70 135 80 Z" fill={primary} />
      {/* Whiskers */}
      <path d="M 75 115 L 60 113 M 75 118 L 60 120 M 125 115 L 140 113 M 125 118 L 140 120" stroke={primary} strokeWidth="1" opacity="0.6" />
    </svg>
  );
}

function CrestEagle({ size = 200, primary = '#0e3a6b', accent = '#c89c5a' }) {
  return (
    <svg width={size} viewBox="0 0 200 200" style={{ overflow: 'visible' }}>
      <defs>
        <linearGradient id="eagleG" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stopColor={accent} />
          <stop offset="100%" stopColor={primary} />
        </linearGradient>
      </defs>
      {/* Vleugels — veren */}
      <g fill={accent} stroke={primary} strokeWidth="1.5">
        {/* Linker vleugel */}
        <path d="M 100 85 Q 60 75 30 95 Q 50 100 70 105 Q 55 115 35 130 Q 60 130 80 125 Q 70 140 55 160 Q 80 150 95 135 Z" />
        {/* Rechter vleugel */}
        <path d="M 100 85 Q 140 75 170 95 Q 150 100 130 105 Q 145 115 165 130 Q 140 130 120 125 Q 130 140 145 160 Q 120 150 105 135 Z" />
      </g>
      {/* Lichaam */}
      <ellipse cx="100" cy="115" rx="14" ry="32" fill="url(#eagleG)" stroke={primary} strokeWidth="2" />
      {/* Hoofd */}
      <circle cx="100" cy="78" r="20" fill="url(#eagleG)" stroke={primary} strokeWidth="2" />
      {/* Oog */}
      <circle cx="106" cy="74" r="3" fill={primary} />
      <circle cx="107" cy="73" r="1" fill={accent} />
      {/* Snavel */}
      <path d="M 116 80 L 132 84 L 116 88 Z" fill={accent} stroke={primary} strokeWidth="1.5" />
      <path d="M 124 84 L 130 86" stroke={primary} strokeWidth="1" />
      {/* Staart */}
      <path d="M 90 145 L 85 175 L 100 165 L 115 175 L 110 145 Z" fill={accent} stroke={primary} strokeWidth="1.5" />
    </svg>
  );
}

function CrestBadger({ size = 200, primary = '#c69417', accent = '#1a1a1a' }) {
  return (
    <svg width={size} viewBox="0 0 200 200" style={{ overflow: 'visible' }}>
      <defs>
        <radialGradient id="badgerG" cx="50%" cy="40%" r="60%">
          <stop offset="0%" stopColor="#fff" />
          <stop offset="60%" stopColor="#e8e8e8" />
          <stop offset="100%" stopColor="#999" />
        </radialGradient>
      </defs>
      {/* Hoofd basis (wit) */}
      <ellipse cx="100" cy="105" rx="55" ry="48" fill="url(#badgerG)" stroke={accent} strokeWidth="2" />
      {/* Zwarte strepen — kenmerkend voor das */}
      <path d="M 70 65 Q 60 100 70 145 Q 80 130 80 105 Q 80 80 75 65 Z" fill={accent} />
      <path d="M 130 65 Q 140 100 130 145 Q 120 130 120 105 Q 120 80 125 65 Z" fill={accent} />
      {/* Middenstreep over neus */}
      <path d="M 92 70 Q 95 110 100 130 Q 105 110 108 70 Z" fill={accent} opacity="0.8" />
      {/* Ogen */}
      <ellipse cx="80" cy="100" rx="4" ry="5" fill="#fff" />
      <ellipse cx="120" cy="100" rx="4" ry="5" fill="#fff" />
      <circle cx="80" cy="101" r="2" fill={accent} />
      <circle cx="120" cy="101" r="2" fill={accent} />
      {/* Neus */}
      <ellipse cx="100" cy="125" rx="6" ry="4" fill={accent} />
      {/* Mond */}
      <path d="M 100 130 Q 100 138 93 140 M 100 130 Q 100 138 107 140" stroke={accent} strokeWidth="2" fill="none" strokeLinecap="round" />
      {/* Oren */}
      <ellipse cx="65" cy="65" rx="10" ry="8" fill={primary} stroke={accent} strokeWidth="1.5" transform="rotate(-30 65 65)" />
      <ellipse cx="135" cy="65" rx="10" ry="8" fill={primary} stroke={accent} strokeWidth="1.5" transform="rotate(30 135 65)" />
      {/* Klauwen / poten suggestie */}
      <path d="M 60 150 L 55 165 M 70 155 L 68 170 M 130 155 L 132 170 M 140 150 L 145 165" stroke={accent} strokeWidth="2" strokeLinecap="round" />
    </svg>
  );
}

function CrestSerpent({ size = 200, primary = '#0e4a2a', accent = '#dcdce0' }) {
  return (
    <svg width={size} viewBox="0 0 200 200" style={{ overflow: 'visible' }}>
      <defs>
        <linearGradient id="snakeG" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor={accent} />
          <stop offset="50%" stopColor={primary} />
          <stop offset="100%" stopColor="#062417" />
        </linearGradient>
      </defs>
      {/* Slang — S-vorm */}
      <path
        d="M 100 30
           C 60 30, 50 70, 90 90
           C 130 110, 140 140, 100 160
           C 70 170, 60 180, 70 185"
        fill="none"
        stroke="url(#snakeG)"
        strokeWidth="22"
        strokeLinecap="round"
      />
      <path
        d="M 100 30
           C 60 30, 50 70, 90 90
           C 130 110, 140 140, 100 160
           C 70 170, 60 180, 70 185"
        fill="none"
        stroke={primary}
        strokeWidth="22"
        strokeLinecap="round"
        strokeDasharray="4 8"
        opacity="0.5"
      />
      {/* Hoofd */}
      <ellipse cx="100" cy="32" rx="22" ry="16" fill={primary} stroke="#062417" strokeWidth="2" />
      {/* Oog */}
      <ellipse cx="108" cy="30" rx="3" ry="5" fill={accent} />
      <ellipse cx="108" cy="30" rx="1" ry="3" fill="#062417" />
      {/* Tong */}
      <path
        d="M 122 32 L 138 30 L 134 33 L 140 36 L 132 36"
        fill="none"
        stroke={primary}
        strokeWidth="2"
        strokeLinejoin="round"
      />
      {/* Schubpatroon op lichaam */}
      <g fill={accent} opacity="0.4">
        <circle cx="80" cy="60" r="2" />
        <circle cx="70" cy="75" r="2" />
        <circle cx="95" cy="78" r="2" />
        <circle cx="115" cy="100" r="2" />
        <circle cx="125" cy="120" r="2" />
        <circle cx="105" cy="135" r="2" />
        <circle cx="85" cy="155" r="2" />
      </g>
      {/* Staartpunt */}
      <path d="M 70 185 L 60 195 L 75 195 Z" fill={primary} />
    </svg>
  );
}

function HouseCrest({ house, size = 200 }) {
  const props = { size, primary: house.primary, accent: house.accentBright };
  if (house.crestSymbol === 'leeuw') return <CrestLion {...props} />;
  if (house.crestSymbol === 'adelaar') return <CrestEagle {...props} />;
  if (house.crestSymbol === 'das') return <CrestBadger {...props} />;
  if (house.crestSymbol === 'slang') return <CrestSerpent {...props} />;
  return null;
}

window.HouseCrest = HouseCrest;