/* Witch silhouette — production brand asset for MacFleek.
   Three render modes: silhouette (solid), chrome (gradient), monochrome (single color).
   ViewBox 386×383, witch on broom with optional stars + chrome metallic fill. */

const Witch = ({ size = 240, variant = "chrome", stars = false, animate = false }) => {
  const id = React.useId().replace(/:/g, "");
  return (
    <svg
      viewBox="0 0 386 383"
      width={size}
      height={size}
      style={{ display: "block", overflow: "visible" }}
      aria-hidden="true"
    >
      <defs>
        {/* Chrome gradient — light/dark purple metallic */}
        <linearGradient id={`chrome-${id}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#ffffff"/>
          <stop offset="18%" stopColor="#f5f3ff"/>
          <stop offset="50%" stopColor="#c4b5fd"/>
          <stop offset="75%" stopColor="#a78bfa"/>
          <stop offset="100%" stopColor="#e9d5ff"/>
        </linearGradient>
        <linearGradient id={`glow-${id}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#a78bfa" stopOpacity="0.45"/>
          <stop offset="100%" stopColor="#6366f1" stopOpacity="0"/>
        </linearGradient>
        <filter id={`blur-${id}`}>
          <feGaussianBlur stdDeviation="4"/>
        </filter>
      </defs>

      {/* Soft glow halo */}
      {variant === "chrome" && (
        <ellipse cx="193" cy="280" rx="120" ry="20" fill={`url(#glow-${id})`} filter={`url(#blur-${id})`}/>
      )}

      {/* Stars trailing the broom */}
      {stars && (
        <g fill={variant === "chrome" ? "#e9d5ff" : "currentColor"} opacity="0.85" className={animate ? "witch-stars" : ""}>
          <path d="M60 121 l3 7.5 7.5 3 -7.5 3 -3 7.5 -3 -7.5 -7.5 -3 7.5 -3z"/>
          <path d="M90 226 l2.3 6 6 2.3 -6 2.3 -2.3 6 -2.3 -6 -6 -2.3 6 -2.3z" opacity="0.7"/>
          <path d="M30 196 l1.5 4.5 4.5 1.5 -4.5 1.5 -1.5 4.5 -1.5 -4.5 -4.5 -1.5 4.5 -1.5z" opacity="0.6"/>
          <path d="M340 60 l2 5 5 2 -5 2 -2 5 -2 -5 -5 -2 5 -2z" opacity="0.5"/>
        </g>
      )}

      {/* Production witch silhouette — single path on 386×383 viewBox */}
      <g
        className={animate ? "witch-body" : ""}
        fill={variant === "chrome" ? `url(#chrome-${id})` : variant === "mono" ? "currentColor" : "#a78bfa"}
      >
        <path d="M210.25,1.15c33.43,4.23,56.29,32.67,65.3,63.46l25.71,2.84c7.79,3.09,6.62,9.69-1.45,11.76l-20.33,2c4.52,19.85-6.8,40.68-26.43,47.48,20.77,31.9,41.06,63.99,60.88,96.29,6.77,5.53,12.34,13.08,11.42,22.23,19.06.87,37.95,2.16,56.67,3.89,1.77.39,2.76,1.66,2.98,3.8v2.99c-3.51,3.37-10.82,2.72-17.27,3.12-3.25.2-6.35,1.05-9.74.62-2.88-.36-5.54.51-8.31.58l-18.36.52-15.72.52c-8.08,6.79-19.05,6.8-27.53.65l-50.12-.06c1.26,2.45,3.65,3.4,5.41,5.19l14.07,14.25c9.39,9.52,5.7,22.8-3.9,32.75l-11.79,12.22-12.75,13.44-9.71,9.84-5.17,1.41-8.91,12.91c-3.5,5.07-7.92,9.14-13.14,12.31-9.75,5.91-21.2,3.71-28.59-4.78-4.86-5.58-7.51-14.51-4.2-21.21l-31.33-.14c-3.22-.01-5.6-2.16-6.73-4.33-1.18-2.3-1.68-5.98.75-8.12l51.35-45.19-12.55-31.22h-15.1c-3.92-.79-8.12-1.61-11.97-.05.26,4.33.02,10.77-4.13,12.97s-9.87,1.64-14.53,2.75-8.96,1.12-13.42-.09l-19.2,9.47-18.5,8.58-51.42,22.66c-2.53,1.12-5.21,1.4-7.34-.21-1.64-1.23-3.49-2.92-3.48-5.19-.59-1.88-.57-4.85.04-6.77-.64-1.83-.6-4.84,0-6.74-.64-1.57-.59-4.34,0-5.99-.64-8.62-.62-18.25,0-26.95-.63-4.03-.58-9.29,0-13.47-.65-2.07-.61-5.34,0-7.49-.65-1.82-.6-4.84,0-6.74-.65-.73-.55-2.84,0-3.74-.64-1.32-.59-3.85,0-5.24-.67-.77-.56-3.31-.03-4.48l.28-26.97c.03-2.98,5.26-7.25,8.67-5.89,23.69,9.39,46.74,19.02,69.78,29.78,7.19,3.36,13.82,6.14,20.39,10.42l3.79-1.25,14.87.07c3.81.02,7.38.56,11.27.68,4.67.15,6.54,5.39,6.01,9.63-.48,3.87-1.33,6.98-.56,10.36,3.18-1.49,6.47-.21,9.48-.69,3.66-.58,6.82-1,10.59-.67-6.27-15.26-13.6-29.11-7.45-44.95l27.59-71.07c5.33-14.87,15.56-23.56,30.82-27.8-4.81-9.12-5.04-19.39-1.29-29.01l-25.14-2.87c-2.42-.42-4.5-2.2-4.33-4.28.19-2.39,2.02-3.98,4.53-4.26l20.29-2.26c1.64-.18,5.22.84,6.38-1.02,5.81-11.57,8.3-26.83,1.93-37.96l-7.1-12.4c-2.21-3.86-2.63-8.34,1.41-11.07,1.04-.71,2.51-1.09,3.31-1.85h3ZM243.99,64.44l17.81.51c.87,1.68,2.81-.08,1.22-.88-9.77-15.64-20.83-31.54-37.99-39.3,5,14.74,2.17,28.1-6.65,39.7,2.65,1.15,4.64-.37,6.9-.33l18.71.3ZM255.85,80.79c-5.45.09-10.77.16-15.93.01l-16.11-.45c-2.8-.08-5.37-1.08-8.06-.5-2.28,9.7.83,19.3,8.52,25.64,5.4,4.45,12.35,8.14,19.68,7.03,15.27-2.31,24.87-16.97,23.21-31.93l-11.31.2ZM198.06,237.53c-3.89-4.07-8.68-10.65-6.59-12.23,2.24-1.7,11.83,6.87,17.56,11.49,2.72-17.96,9.3-34.22,20.04-48.86l-10.45-21.44c-3.06-6.28-7.57-16.89-3.9-18.72,4.67,3.41,7.37,8.37,10.1,13.25l13.73,24.56,31.42,55.09,25.6-17.9-61.95-92.59c-4.23-4.66-8.34-7.13-14.37-7.2-8.35-.09-16.64,2.21-22.26,8.65-2.73,3.13-4.21,6.83-5.75,10.8l-25.86,66.93c-2.19,5.66-3.14,10.17-1.54,16.31,1.8,6.93,4.73,13.36,7.46,20.21l18.76,47.1c2.05,5.14-.44,8.45-4.23,11.71l-37.75,32.4,16.94.48,30.49.83,18.3.29,33.95-34.26c2.35-2.37,3.89-5.64,3.67-8.58-.2-2.69-1.86-5.56-4.14-7.53-2.94-2.54-5.02-5.31-7.7-8.05l-27.74-28.34-13.77-14.4ZM229.49,247.75l30.63-.61-24.03-45.45c-3.38,15.27-10.11,29.58-19.51,42.42,3.13,5.06,7.84,3.74,12.9,3.64ZM24.24,281.07l-6.81-1.26c.56,3.04-.55,5.04-.55,7.32l.02,14.12,43.43-16.32,37.22-12.83c.8-3.51-.34-6.53-.38-9.77l-.23-21.73-79.49-28.32.07,21.14c8.26-2.11,16.63-.97,23.53,4.04,1.42,1.03,2.09,5.21.61,6.27-7.09,5.08-15.73,6.42-24.12,4.33l-.13,17.29c8.3-1.6,17.12-1.19,23.88,4.11,2.7,2.11.29,7.04-2.42,8.21-4.81,2.07-9.39,3.35-14.64,3.4ZM293.2,250.35c2.84,2.82,7.36,3.15,10.61,1.12,2.43-1.52,5.02-4.48,5.14-8.23s-2.26-7.5-3.96-11.04l-17.93,12.05,6.14,6.09ZM124.24,267.6c-1.2-7.22-1.91-12.62-1.87-19.31-3.52.86-6.25.69-9.63.58l.05,17.32,11.45,1.42ZM198.43,352.3l-27.07.05c-.74,5.05.36,9.17,3.83,11.27s7.8,1.96,11.11-.89l12.14-10.43Z"/>
      </g>

      {animate && (
        <style>{`
          .witch-body { transform-origin: 193px 191px; animation: witchFloat 6s var(--ease-apple-spring, ease-in-out) infinite; }
          .witch-stars { animation: starsTwinkle 3s ease-in-out infinite; }
          @keyframes witchFloat {
            0%, 100% { transform: translate(0, 0) rotate(-1deg); }
            50% { transform: translate(-2px, -8px) rotate(1deg); }
          }
          @keyframes starsTwinkle {
            0%, 100% { opacity: 0.85; }
            50% { opacity: 0.4; }
          }
          @media (prefers-reduced-motion: reduce) {
            .witch-body, .witch-stars { animation: none !important; }
          }
        `}</style>
      )}
    </svg>
  );
};

/* Tiny squircle-bg AppIcon — chrome witch on purple gradient square */
const AppIcon = ({ size = 96 }) => (
  <div style={{
    width: size, height: size,
    borderRadius: size * 0.22,
    background: "radial-gradient(circle at 32% 28%, #a78bfa 0%, #6366f1 35%, #1e1b4b 95%)",
    display: "grid", placeItems: "center",
    boxShadow: `
      0 0 0 0.5px rgba(255,255,255,0.10) inset,
      0 24px 60px -16px rgba(99,102,241,0.55),
      0 8px 18px -4px rgba(0,0,0,0.4)`,
    position: "relative",
    overflow: "hidden",
  }}>
    <div style={{
      position: "absolute", inset: 0,
      background: "radial-gradient(ellipse at 50% -20%, rgba(255,255,255,0.18) 0%, transparent 60%)",
      pointerEvents: "none",
    }}/>
    <Witch size={size * 0.78} variant="chrome"/>
  </div>
);

Object.assign(window, { Witch, AppIcon });
