// Visual placeholders for chrome/glossy product-like artifacts (à la HUSH bags)
// SVG-based abstract liquid metal blobs — drop-in for product photos
const { useId } = React;

function ChromeBlob({ tint = "pink", seed = 1, style = {} }) {
  const id = useId();
  const grads = {
    pink: ["#ffd1e0", "#fff5f8", "#ee82ad", "#f7a8c4", "#d14a85"],
    silver: ["#d8d8d8", "#ffffff", "#7a7a7a", "#c0c0c0", "#5a5a5a"],
    rose: ["#ffe8f0", "#fff", "#f7a8c4", "#ffd1e0", "#ee82ad"],
  };
  const c = grads[tint] || grads.pink;
  // Deterministic blob shapes by seed
  const shapes = [
    "M 100 30 C 160 20 200 70 195 130 C 190 180 130 200 80 175 C 35 150 30 90 60 55 C 75 40 90 32 100 30 Z",
    "M 120 25 C 175 35 200 90 180 145 C 160 195 95 200 55 165 C 20 130 25 70 70 40 C 90 28 105 22 120 25 Z",
    "M 90 35 C 150 25 195 60 200 115 C 205 170 150 200 95 195 C 40 190 20 135 35 85 C 45 55 65 40 90 35 Z",
  ];
  const path = shapes[seed % shapes.length];

  return (
    <svg viewBox="0 0 220 220" style={style} xmlns="http://www.w3.org/2000/svg">
      <defs>
        <radialGradient id={`g1-${id}`} cx="35%" cy="30%" r="80%">
          <stop offset="0%" stopColor={c[1]} />
          <stop offset="35%" stopColor={c[0]} />
          <stop offset="65%" stopColor={c[3]} />
          <stop offset="100%" stopColor={c[4]} />
        </radialGradient>
        <linearGradient id={`g2-${id}`} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor={c[1]} stopOpacity="0.9" />
          <stop offset="50%" stopColor={c[2]} stopOpacity="0.4" />
          <stop offset="100%" stopColor={c[1]} stopOpacity="0.9" />
        </linearGradient>
        <filter id={`blur-${id}`} x="-20%" y="-20%" width="140%" height="140%">
          <feGaussianBlur stdDeviation="2" />
        </filter>
      </defs>
      <path d={path} fill={`url(#g1-${id})`} />
      {/* highlight */}
      <ellipse cx="80" cy="70" rx="40" ry="22" fill={c[1]} opacity="0.7" filter={`url(#blur-${id})`} transform="rotate(-25 80 70)" />
      <ellipse cx="155" cy="155" rx="22" ry="10" fill={c[1]} opacity="0.5" filter={`url(#blur-${id})`} />
      {/* dark accent */}
      <path d={path} fill={`url(#g2-${id})`} opacity="0.25" />
    </svg>
  );
}

// Liquid mercury organic shape (the squiggle in HUSH about-section)
function LiquidGlyph({ style = {} }) {
  const id = useId();
  return (
    <svg viewBox="0 0 200 220" style={style} xmlns="http://www.w3.org/2000/svg">
      <defs>
        <radialGradient id={`lg-${id}`} cx="50%" cy="40%" r="60%">
          <stop offset="0%" stopColor="#fff" />
          <stop offset="35%" stopColor="#d8d8d8" />
          <stop offset="70%" stopColor="#7a7a7a" />
          <stop offset="100%" stopColor="#3a3a3a" />
        </radialGradient>
      </defs>
      <path
        d="M 60 30 C 90 10 130 25 140 60 C 145 90 110 100 105 130 C 100 160 140 170 145 195 C 95 210 50 180 60 145 C 65 120 40 110 35 80 C 32 55 45 40 60 30 Z"
        fill={`url(#lg-${id})`}
      />
      <path
        d="M 75 50 C 90 45 105 55 100 70 C 95 85 78 80 75 65 Z"
        fill="#fff"
        opacity="0.6"
      />
    </svg>
  );
}

// Mannequin head placeholder (HUSH-style chrome face)
function ChromeFace({ style = {} }) {
  const id = useId();
  return (
    <svg viewBox="0 0 240 320" style={style} xmlns="http://www.w3.org/2000/svg">
      <defs>
        <radialGradient id={`face-${id}`} cx="40%" cy="35%" r="70%">
          <stop offset="0%" stopColor="#ffffff" />
          <stop offset="30%" stopColor="#e5e5e5" />
          <stop offset="60%" stopColor="#9a9a9a" />
          <stop offset="100%" stopColor="#3a3a3a" />
        </radialGradient>
        <linearGradient id={`neck-${id}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#bcbcbc" />
          <stop offset="100%" stopColor="#5a5a5a" />
        </linearGradient>
      </defs>
      {/* neck */}
      <path d="M 95 230 L 95 290 Q 95 310 120 310 Q 145 310 145 290 L 145 230 Z" fill={`url(#neck-${id})`} />
      {/* head */}
      <ellipse cx="120" cy="135" rx="78" ry="100" fill={`url(#face-${id})`} />
      {/* highlight */}
      <ellipse cx="95" cy="100" rx="22" ry="40" fill="#fff" opacity="0.5" />
      <ellipse cx="155" cy="170" rx="10" ry="20" fill="#fff" opacity="0.3" />
      {/* subtle features */}
      <ellipse cx="100" cy="135" rx="6" ry="3" fill="#3a3a3a" opacity="0.5" />
      <ellipse cx="145" cy="135" rx="6" ry="3" fill="#3a3a3a" opacity="0.5" />
      <path d="M 105 175 Q 122 182 140 175" stroke="#3a3a3a" strokeWidth="1.5" fill="none" opacity="0.5" />
    </svg>
  );
}

// Main hero "product" — a stylized glossy beauty/skincare bottle
function HeroProduct({ style = {} }) {
  const id = useId();
  return (
    <svg viewBox="0 0 380 480" style={style} xmlns="http://www.w3.org/2000/svg">
      <defs>
        <radialGradient id={`hp-${id}`} cx="38%" cy="30%" r="75%">
          <stop offset="0%" stopColor="#ffffff" />
          <stop offset="20%" stopColor="#ffe8f0" />
          <stop offset="55%" stopColor="#f7a8c4" />
          <stop offset="85%" stopColor="#ee82ad" />
          <stop offset="100%" stopColor="#c93d77" />
        </radialGradient>
        <radialGradient id={`hpcap-${id}`} cx="40%" cy="30%" r="80%">
          <stop offset="0%" stopColor="#fff" />
          <stop offset="40%" stopColor="#d8d8d8" />
          <stop offset="100%" stopColor="#5a5a5a" />
        </radialGradient>
        <filter id={`hpblur-${id}`}>
          <feGaussianBlur stdDeviation="3" />
        </filter>
      </defs>
      {/* metallic dripping cap on top-left like HUSH */}
      <path
        d="M 30 80 C 50 50 100 60 130 90 C 150 110 170 100 175 130 C 178 145 165 155 155 145 C 145 135 130 145 115 135 C 95 125 70 130 50 115 C 30 100 20 95 30 80 Z"
        fill={`url(#hpcap-${id})`}
      />
      {/* body — rounded glossy bag/bottle */}
      <ellipse cx="200" cy="280" rx="155" ry="170" fill={`url(#hp-${id})`} />
      {/* highlight */}
      <ellipse cx="140" cy="200" rx="50" ry="80" fill="#fff" opacity="0.55" filter={`url(#hpblur-${id})`} transform="rotate(-20 140 200)" />
      <ellipse cx="280" cy="380" rx="20" ry="40" fill="#fff" opacity="0.4" filter={`url(#hpblur-${id})`} />
      {/* bottom shadow */}
      <ellipse cx="200" cy="450" rx="120" ry="14" fill="#000" opacity="0.08" />
      {/* small label tag */}
      <rect x="180" y="270" width="40" height="18" rx="3" fill="#c93d77" opacity="0.85" />
      <rect x="184" y="276" width="32" height="2" rx="1" fill="#fff" opacity="0.6" />
      <rect x="184" y="280" width="20" height="2" rx="1" fill="#fff" opacity="0.6" />
    </svg>
  );
}

// Tiny circular icon for the "ECO" / category badges
function PillBadge({ children, style = {} }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '6px 12px',
      background: 'rgba(255,255,255,0.65)',
      backdropFilter: 'blur(8px)',
      borderRadius: 999,
      fontSize: 11,
      letterSpacing: '0.08em',
      textTransform: 'uppercase',
      fontWeight: 600,
      color: '#d14a85',
      ...style
    }}>
      <span style={{
        width: 14, height: 14, borderRadius: 999,
        background: 'linear-gradient(135deg,#ee82ad,#fff5f8)',
        display: 'inline-block'
      }} />
      {children}
    </div>
  );
}

Object.assign(window, { ChromeBlob, LiquidGlyph, ChromeFace, HeroProduct, PillBadge });