// peper-components.jsx — shared Hete Peper mascotte en strip onderdelen

// Hete Peper mascotte — toont een échte tekening als `image` is gezet,
// anders een handgetekend SVG-stripfiguurtje.
function PeperMascotte({ size = 120, mood = "happy", fire = false, image = null, style = {} }) {
  if (image) {
    return (
      <img
        src={image}
        alt="Hete Peper"
        style={{ width: size, height: size * 1.3, objectFit: "contain", ...style }}
      />
    );
  }
  // moods: happy, angry, determined, wink, scared
  const eyeAngry = mood === "angry" || mood === "determined";
  const mouthOpen = mood === "angry" || fire;

  return (
    <svg viewBox="0 0 200 260" width={size} height={size * 1.3} style={style}>
      {/* Pet groen */}
      <g>
        <path
          d="M 60 50 Q 100 20 140 50 L 150 70 L 55 72 Z"
          fill="#3FA34D" stroke="#1A1A1A" strokeWidth="4" strokeLinejoin="round"
        />
        {/* Pet klep */}
        <path
          d="M 50 70 Q 100 68 155 70 L 160 78 Q 100 82 45 78 Z"
          fill="#2B7A38" stroke="#1A1A1A" strokeWidth="4" strokeLinejoin="round"
        />
        {/* Pet knopje */}
        <circle cx="100" cy="38" r="5" fill="#2B7A38" stroke="#1A1A1A" strokeWidth="3" />
      </g>

      {/* Peper lichaam — rood, met kartelige randen */}
      <g>
        <path
          d="M 100 70
             C 55 72, 50 130, 65 180
             C 72 210, 90 235, 100 240
             C 110 235, 128 210, 135 180
             C 150 130, 145 72, 100 70 Z"
          fill="#E63946" stroke="#1A1A1A" strokeWidth="4.5" strokeLinejoin="round"
        />
        {/* Highlights */}
        <path
          d="M 78 95 Q 72 130 80 170"
          stroke="rgba(255,255,255,0.45)" strokeWidth="6" fill="none" strokeLinecap="round"
        />
      </g>

      {/* Stekelige achtergrond randjes (peper-look) */}
      <path
        d="M 55 105 L 45 102 M 150 115 L 162 113 M 52 160 L 42 158 M 148 175 L 160 173"
        stroke="#1A1A1A" strokeWidth="3" strokeLinecap="round"
      />

      {/* Ogen */}
      {!eyeAngry ? (
        <>
          <circle cx="85" cy="115" r="8" fill="#F0FAE6" stroke="#1A1A1A" strokeWidth="3" />
          <circle cx="115" cy="115" r="8" fill="#F0FAE6" stroke="#1A1A1A" strokeWidth="3" />
          <circle cx="86" cy="116" r="3.2" fill="#1A1A1A" />
          <circle cx="116" cy="116" r="3.2" fill="#1A1A1A" />
        </>
      ) : (
        <>
          {/* Boze wenkbrauw-ogen */}
          <path d="M 76 108 L 94 116" stroke="#1A1A1A" strokeWidth="4" strokeLinecap="round" />
          <path d="M 124 108 L 106 116" stroke="#1A1A1A" strokeWidth="4" strokeLinecap="round" />
          <circle cx="88" cy="122" r="4.5" fill="#1A1A1A" />
          <circle cx="112" cy="122" r="4.5" fill="#1A1A1A" />
        </>
      )}

      {/* Mond */}
      {mood === "happy" && (
        <path d="M 85 145 Q 100 158 115 145"
          stroke="#1A1A1A" strokeWidth="3.5" fill="none" strokeLinecap="round" />
      )}
      {mood === "wink" && (
        <path d="M 82 148 Q 100 154 118 148"
          stroke="#1A1A1A" strokeWidth="3.5" fill="none" strokeLinecap="round" />
      )}
      {mood === "determined" && (
        <path d="M 85 150 L 115 150"
          stroke="#1A1A1A" strokeWidth="4" strokeLinecap="round" />
      )}
      {mouthOpen && (
        <>
          <path
            d="M 80 140 Q 100 170 120 140 Q 118 148 100 152 Q 82 148 80 140 Z"
            fill="#1A1A1A" stroke="#1A1A1A" strokeWidth="3" strokeLinejoin="round"
          />
          {/* Tanden */}
          <path d="M 86 143 L 90 150 L 94 143 M 98 143 L 102 150 L 106 143 M 110 143 L 114 150"
            stroke="#F0FAE6" strokeWidth="2" fill="none" />
        </>
      )}

      {/* Armpjes */}
      <path
        d="M 62 145 Q 40 155 38 175"
        stroke="#1A1A1A" strokeWidth="4" fill="none" strokeLinecap="round"
      />
      <circle cx="38" cy="178" r="10" fill="#E63946" stroke="#1A1A1A" strokeWidth="3.5" />

      <path
        d="M 138 145 Q 160 155 162 175"
        stroke="#1A1A1A" strokeWidth="4" fill="none" strokeLinecap="round"
      />
      <circle cx="162" cy="178" r="10" fill="#E63946" stroke="#1A1A1A" strokeWidth="3.5" />

      {/* Beentjes */}
      <path d="M 85 238 L 80 255" stroke="#1A1A1A" strokeWidth="4" strokeLinecap="round" />
      <path d="M 115 238 L 120 255" stroke="#1A1A1A" strokeWidth="4" strokeLinecap="round" />
      <ellipse cx="78" cy="256" rx="14" ry="5" fill="#1A1A1A" />
      <ellipse cx="122" cy="256" rx="14" ry="5" fill="#1A1A1A" />

      {/* Vuur */}
      {fire && (
        <g className="flicker">
          <path
            d="M 125 152 Q 170 155 195 140 Q 180 158 195 172 Q 170 170 140 168 Z"
            fill="#FF8C1A" stroke="#1A1A1A" strokeWidth="3" strokeLinejoin="round"
          />
          <path
            d="M 130 155 Q 160 158 180 150 Q 170 162 180 170 Q 155 170 135 165 Z"
            fill="#FFD23F" stroke="none"
          />
        </g>
      )}
    </svg>
  );
}

// Strippaneel met dikke rand + bijschrift support
function StripPanel({ children, title, skew = 0, style = {}, bg = "#F0FAE6" }) {
  return (
    <div className="panel" style={{
      transform: `rotate(${skew}deg)`,
      background: bg,
      ...style,
    }}>
      {title && (
        <div style={{
          position: "absolute", top: 8, left: 8,
          background: "#D6EFC7", border: "2.5px solid #1A1A1A",
          padding: "3px 10px",
          fontFamily: "'Bangers', sans-serif", fontSize: 16,
          letterSpacing: "0.03em", zIndex: 2,
        }}>
          {title}
        </div>
      )}
      {children}
    </div>
  );
}

// Sticker — rond label met rotatie
function Sticker({ children, color = "#FFD23F", rotate = -8, size = 90, style = {} }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: "50%",
      background: color, border: "3.5px solid #1A1A1A",
      boxShadow: "3px 3px 0 #1A1A1A",
      display: "flex", alignItems: "center", justifyContent: "center",
      textAlign: "center", padding: 6, lineHeight: 1,
      fontFamily: "'Bangers', sans-serif", fontSize: size * 0.18,
      color: "#1A1A1A", transform: `rotate(${rotate}deg)`,
      ...style,
    }}>
      {children}
    </div>
  );
}

// Explosie bubbel (BAM! POW!)
function Burst({ children, color = "#FFD23F", size = 110, rotate = -6, style = {} }) {
  return (
    <div style={{
      width: size, height: size, position: "relative",
      display: "inline-flex", alignItems: "center", justifyContent: "center",
      transform: `rotate(${rotate}deg)`, ...style,
    }}>
      <svg viewBox="0 0 120 120" width={size} height={size} style={{ position: "absolute", inset: 0 }}>
        <polygon
          points="60,4 72,24 92,10 88,34 112,32 94,52 118,68 94,72 106,96 82,86 78,114 62,94 48,116 40,90 18,104 24,78 2,72 22,56 4,40 28,38 18,16 42,24"
          fill={color} stroke="#1A1A1A" strokeWidth="4" strokeLinejoin="round"
        />
      </svg>
      <span style={{
        position: "relative", zIndex: 1,
        fontFamily: "'Bangers', sans-serif",
        fontSize: size * 0.22,
        color: "#1A1A1A",
        textAlign: "center", lineHeight: 1,
        padding: size * 0.1,
      }}>{children}</span>
    </div>
  );
}

// Wasknijper vijand
function Wasknijper({ size = 100, angry = true, image = null, style = {} }) {
  if (image) {
    return <img src={image} alt="Boze Wasknijper" style={{ width: size, height: size * 1.7, objectFit: "contain", ...style }} />;
  }
  return (
    <svg viewBox="0 0 140 240" width={size} height={size * 1.7} style={style}>
      {/* Twee benen */}
      <path
        d="M 50 70 L 35 230 L 58 230 L 68 90 Z"
        fill="#C8C2B4" stroke="#1A1A1A" strokeWidth="4" strokeLinejoin="round"
      />
      <path
        d="M 90 70 L 105 230 L 82 230 L 72 90 Z"
        fill="#B5AD9C" stroke="#1A1A1A" strokeWidth="4" strokeLinejoin="round"
      />
      {/* Bovenkant — kop */}
      <path
        d="M 35 70 Q 35 30 70 25 Q 105 30 105 70 L 95 80 L 45 80 Z"
        fill="#C8C2B4" stroke="#1A1A1A" strokeWidth="4" strokeLinejoin="round"
      />
      {/* Veer */}
      <ellipse cx="70" cy="100" rx="18" ry="12"
        fill="#8B8273" stroke="#1A1A1A" strokeWidth="3" />
      <path d="M 56 100 Q 70 92 84 100 M 56 104 Q 70 96 84 104"
        stroke="#1A1A1A" strokeWidth="2" fill="none" />

      {/* Boze ogen */}
      {angry ? (
        <>
          <path d="M 50 48 L 65 56" stroke="#1A1A1A" strokeWidth="4" strokeLinecap="round" />
          <path d="M 90 48 L 75 56" stroke="#1A1A1A" strokeWidth="4" strokeLinecap="round" />
          <circle cx="60" cy="60" r="4" fill="#1A1A1A" />
          <circle cx="80" cy="60" r="4" fill="#1A1A1A" />
        </>
      ) : (
        <>
          <circle cx="60" cy="55" r="6" fill="#F0FAE6" stroke="#1A1A1A" strokeWidth="3" />
          <circle cx="80" cy="55" r="6" fill="#F0FAE6" stroke="#1A1A1A" strokeWidth="3" />
          <circle cx="60" cy="56" r="2.5" fill="#1A1A1A" />
          <circle cx="80" cy="56" r="2.5" fill="#1A1A1A" />
        </>
      )}
      {/* Mond */}
      <path d="M 55 72 Q 70 62 85 72 Q 80 68 70 69 Q 60 68 55 72"
        fill="#1A1A1A" stroke="#1A1A1A" strokeWidth="2" />
    </svg>
  );
}

// Gescande strippagina — bijschrift + afbeelding
function ComicThumb({ src, title, nummer, rotate = 0, style = {} }) {
  return (
    <div style={{
      background: "#F0FAE6",
      border: "4px solid #1A1A1A",
      boxShadow: "6px 6px 0 #1A1A1A",
      padding: 10,
      transform: `rotate(${rotate}deg)`,
      position: "relative",
      ...style,
    }}>
      <div style={{
        width: "100%", aspectRatio: "3/4",
        background: `url(${src}) center/cover, #B9E1A4`,
        border: "2.5px solid #1A1A1A",
      }} />
      <div style={{
        fontFamily: "'Bangers', sans-serif",
        fontSize: 22, letterSpacing: "0.02em",
        marginTop: 6, color: "#1A1A1A", lineHeight: 1,
      }}>{title}</div>
      <div style={{
        fontFamily: "'Patrick Hand', cursive",
        fontSize: 14, color: "#6B5A3D",
      }}>Aflevering #{nummer}</div>
    </div>
  );
}

// Kleine peper icoon voor lijsten
function PeperIcon({ size = 22 }) {
  return (
    <svg viewBox="0 0 40 52" width={size} height={size * 1.3}>
      <path d="M 8 18 Q 10 6 18 6 L 22 2 L 26 6 Q 30 8 32 18 Q 34 44 20 48 Q 6 44 8 18 Z"
        fill="#E63946" stroke="#1A1A1A" strokeWidth="2.5" strokeLinejoin="round" />
      <path d="M 22 2 L 26 6 L 24 10 Q 22 8 22 2 Z"
        fill="#3FA34D" stroke="#1A1A1A" strokeWidth="2" strokeLinejoin="round" />
    </svg>
  );
}

// IJsheks vijand (was alleen inline — nu herbruikbaar)
function IjsheksIcon({ size = 75, image = null, style = {} }) {
  if (image) return <img src={image} alt="IJsheks" style={{ width: size, height: size, objectFit: "contain", ...style }} />;
  return (
    <svg viewBox="0 0 80 100" width={size} height={size * 1.25} style={style}>
      <path d="M 40 10 Q 20 15 15 45 Q 12 80 40 90 Q 68 80 65 45 Q 60 15 40 10 Z"
        fill="#8ECFF0" stroke="#1A1A1A" strokeWidth="3" strokeLinejoin="round" />
      <path d="M 40 8 L 44 18 L 54 14 L 48 24 L 60 26 L 50 32 L 60 40 L 48 40 L 54 50 L 44 44 L 40 54 L 36 44 L 26 50 L 32 40 L 20 40 L 30 32 L 20 26 L 32 24 L 26 14 L 36 18 Z"
        fill="#F0FAE6" stroke="#1A1A1A" strokeWidth="2" strokeLinejoin="round"
        transform="translate(0 -2) scale(0.7) translate(18 10)" />
      <circle cx="32" cy="42" r="3" fill="#1A1A1A" />
      <circle cx="48" cy="42" r="3" fill="#1A1A1A" />
      <path d="M 32 58 Q 40 52 48 58" stroke="#1A1A1A" strokeWidth="2.5" fill="none" />
    </svg>
  );
}

function SlijmIcon({ size = 65, image = null, style = {} }) {
  if (image) return <img src={image} alt="Slijm" style={{ width: size, height: size, objectFit: "contain", ...style }} />;
  return (
    <svg viewBox="0 0 90 90" width={size} height={size} style={style}>
      <path d="M 15 50 Q 10 20 45 18 Q 80 20 75 50 Q 78 70 70 75 L 65 82 L 55 75 L 45 82 L 35 75 L 25 82 L 20 75 Q 12 70 15 50 Z"
        fill="#7FDBA3" stroke="#1A1A1A" strokeWidth="3" strokeLinejoin="round" />
      <ellipse cx="30" cy="30" rx="8" ry="5" fill="rgba(255,255,255,0.4)" />
      <circle cx="35" cy="48" r="5" fill="#F0FAE6" stroke="#1A1A1A" strokeWidth="2.5" />
      <circle cx="58" cy="48" r="5" fill="#F0FAE6" stroke="#1A1A1A" strokeWidth="2.5" />
      <circle cx="36" cy="49" r="2" fill="#1A1A1A" />
      <circle cx="59" cy="49" r="2" fill="#1A1A1A" />
      <path d="M 38 62 Q 46 58 54 62" stroke="#1A1A1A" strokeWidth="2.5" fill="none" strokeLinecap="round" />
    </svg>
  );
}

// EnemyVisual — kiest op basis van `visual` en optionele uploaded `image`.
function EnemyVisual({ visual = "wasknijper", image = null, size = 80, style = {} }) {
  if (image) {
    return <img src={image} alt="" style={{ width: size, height: size * 1.3, objectFit: "contain", ...style }} />;
  }
  if (visual === "wasknijper") return <Wasknijper size={size} style={style} />;
  if (visual === "ijsheks") return <IjsheksIcon size={size * 0.9} style={style} />;
  if (visual === "slijm") return <SlijmIcon size={size * 0.85} style={style} />;
  return <div style={{ width: size, height: size, background: "#eee", ...style }} />;
}

Object.assign(window, { PeperMascotte, StripPanel, Sticker, Burst, Wasknijper, IjsheksIcon, SlijmIcon, EnemyVisual, ComicThumb, PeperIcon });