/* global React */
const { useEffect, useRef } = React;

/* A metallic chrome blob rendered purely in SVG.
   Placeholder for real 3D renders — simple gradient shapes, glossy highlights. */
function ChromeBlob({ shape = 'knot', size = 520, hue = 280, spin = true, className = '' }) {
  const id = React.useId();
  const gid = 'g' + id.replace(/:/g, '');
  const shapes = {
    knot: 'M350 90 C 470 80, 560 190, 520 300 C 500 360, 540 420, 480 470 C 400 540, 260 520, 210 430 C 160 340, 70 330, 90 230 C 110 130, 240 100, 350 90 Z',
    flow: 'M 80 260 C 80 120, 240 60, 380 110 C 520 160, 580 320, 500 420 C 420 520, 260 520, 160 440 C 60 360, 80 400, 80 260 Z',
    drop: 'M 300 60 C 440 80, 520 180, 500 300 C 480 420, 380 520, 260 500 C 140 480, 80 380, 100 260 C 120 140, 160 40, 300 60 Z',
    wave: 'M 100 300 C 100 180, 220 100, 340 140 C 460 180, 480 280, 520 360 C 560 440, 460 520, 340 500 C 220 480, 100 420, 100 300 Z',
    loop: 'M 320 80 C 460 80, 520 220, 500 340 C 480 460, 360 520, 240 480 C 120 440, 80 320, 120 220 C 160 120, 220 80, 320 80 Z',
  };
  const d = shapes[shape] || shapes.knot;

  return (
    <svg className={`blob ${spin ? 'blob-a' : ''} ${className}`} width={size} height={size} viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <radialGradient id={gid + 'body'} cx="30%" cy="25%" r="85%">
          <stop offset="0%" stopColor="#ffffff" />
          <stop offset="25%" stopColor="#e0e0ec" />
          <stop offset="55%" stopColor="#7a7a92" />
          <stop offset="78%" stopColor="#2a2a36" />
          <stop offset="100%" stopColor={`oklch(35% 0.12 ${hue})`} />
        </radialGradient>
        <radialGradient id={gid + 'highlight'} cx="40%" cy="30%" r="35%">
          <stop offset="0%" stopColor="#ffffff" stopOpacity="0.9" />
          <stop offset="100%" stopColor="#ffffff" stopOpacity="0" />
        </radialGradient>
        <radialGradient id={gid + 'rim'} cx="70%" cy="75%" r="50%">
          <stop offset="0%" stopColor={`oklch(62% 0.22 ${hue})`} stopOpacity="0.7" />
          <stop offset="100%" stopColor={`oklch(62% 0.22 ${hue})`} stopOpacity="0" />
        </radialGradient>
        <linearGradient id={gid + 'band'} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#fff" stopOpacity="0.4" />
          <stop offset="50%" stopColor="#9a9aa8" stopOpacity="0.2" />
          <stop offset="100%" stopColor="#000" stopOpacity="0.4" />
        </linearGradient>
        <filter id={gid + 'shadow'} x="-20%" y="-20%" width="140%" height="140%">
          <feGaussianBlur in="SourceAlpha" stdDeviation="12" />
          <feOffset dx="0" dy="14" />
          <feComponentTransfer><feFuncA type="linear" slope="0.5" /></feComponentTransfer>
          <feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge>
        </filter>
      </defs>
      <g filter={`url(#${gid}shadow)`}>
        <path d={d} fill={`url(#${gid}body)`} />
        <path d={d} fill={`url(#${gid}rim)`} style={{ mixBlendMode: 'screen' }} />
        <path d={d} fill={`url(#${gid}highlight)`} style={{ mixBlendMode: 'screen' }} />
        <path d={d} fill="none" stroke={`url(#${gid}band)`} strokeWidth="1" opacity="0.6" />
      </g>
    </svg>
  );
}

/* Smaller decorative liquid-metal drop */
function ChromeDrop({ size = 160, hue = 280, style = {} }) {
  const id = React.useId();
  const gid = 'd' + id.replace(/:/g, '');
  return (
    <svg width={size} height={size} viewBox="0 0 200 200" style={style} className="blob blob-b">
      <defs>
        <radialGradient id={gid + 'b'} cx="30%" cy="25%" r="90%">
          <stop offset="0%" stopColor="#fff" />
          <stop offset="30%" stopColor="#d0d0dc" />
          <stop offset="65%" stopColor="#5a5a6c" />
          <stop offset="100%" stopColor={`oklch(40% 0.15 ${hue})`} />
        </radialGradient>
      </defs>
      <circle cx="100" cy="100" r="80" fill={`url(#${gid}b)`} />
      <ellipse cx="78" cy="70" rx="22" ry="14" fill="#fff" opacity="0.6" />
    </svg>
  );
}

Object.assign(window, { ChromeBlob, ChromeDrop });