function ProductMouthpiece({ animated = true }) {
  return (
    <div className={`mouthpiece-wrap ${animated ? 'animated' : ''}`}>
      <svg viewBox="0 0 600 420" className="mouthpiece" aria-hidden="true">
        <defs>
          <linearGradient id="mpBody" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#ffffff" />
            <stop offset="55%" stopColor="#f0e8f8" />
            <stop offset="100%" stopColor="#c9b6e0" />
          </linearGradient>
          <linearGradient id="mpRim" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#ffffff" stopOpacity="0.9"/>
            <stop offset="100%" stopColor="#7712d8" stopOpacity="0.1"/>
          </linearGradient>
          <linearGradient id="mpGlow" x1="0.2" y1="0" x2="0.8" y2="1">
            <stop offset="0%" stopColor="#cc33cc" stopOpacity="0.6"/>
            <stop offset="100%" stopColor="#7712d8" stopOpacity="0.9"/>
          </linearGradient>
          <radialGradient id="mpInner" cx="0.5" cy="0.4" r="0.6">
            <stop offset="0%" stopColor="#3a2450" stopOpacity="0.35"/>
            <stop offset="100%" stopColor="#3a2450" stopOpacity="0"/>
          </radialGradient>
          <filter id="mpShadow" x="-10%" y="-10%" width="120%" height="140%">
            <feGaussianBlur in="SourceAlpha" stdDeviation="18"/>
            <feOffset dx="0" dy="28"/>
            <feComponentTransfer><feFuncA type="linear" slope="0.28"/></feComponentTransfer>
            <feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge>
          </filter>
        </defs>

        {/* drop shadow ellipse */}
        <ellipse cx="300" cy="370" rx="210" ry="18" fill="#2b3e6d" opacity="0.12"/>

        {/* outer body — U-shape like a dental aligner */}
        <g filter="url(#mpShadow)">
          <path
            d="M120 180
               C 120 90, 200 50, 300 50
               C 400 50, 480 90, 480 180
               C 480 260, 440 320, 380 330
               L 380 280
               C 420 270, 440 230, 440 185
               C 440 120, 380 90, 300 90
               C 220 90, 160 120, 160 185
               C 160 230, 180 270, 220 280
               L 220 330
               C 160 320, 120 260, 120 180 Z"
            fill="url(#mpBody)"
          />
          {/* inner shadow dip */}
          <path
            d="M160 185 C 160 120, 220 90, 300 90 C 380 90, 440 120, 440 185 C 440 230, 420 270, 380 280 L 220 280 C 180 270, 160 230, 160 185 Z"
            fill="url(#mpInner)"
          />

          {/* top highlight rim */}
          <path
            d="M135 170 C 135 92, 210 55, 300 55 C 390 55, 465 92, 465 170"
            stroke="url(#mpRim)" strokeWidth="3" fill="none" strokeLinecap="round"
          />

          {/* central chin button (LED / control) */}
          <g className="mp-led">
            <circle cx="300" cy="310" r="22" fill="#3a2450"/>
            <circle cx="300" cy="310" r="14" fill="url(#mpGlow)"/>
            <circle cx="295" cy="305" r="3" fill="#ffffff" opacity="0.8"/>
          </g>

          {/* tooth row indication */}
          <g opacity="0.35">
            {Array.from({length: 9}).map((_, i) => {
              const t = (i - 4) / 4;
              const x = 300 + t * 130;
              const y = 140 + Math.abs(t) * 40;
              return <rect key={i} x={x-8} y={y} width="16" height="28" rx="4" fill="#ffffff"/>;
            })}
          </g>
        </g>

        {/* subtle sonic rings */}
        {animated && (
          <g className="mp-rings">
            <circle cx="300" cy="200" r="180" fill="none" stroke="#7712d8" strokeWidth="1" opacity="0.25"/>
            <circle cx="300" cy="200" r="220" fill="none" stroke="#cc33cc" strokeWidth="1" opacity="0.15"/>
            <circle cx="300" cy="200" r="260" fill="none" stroke="#7712d8" strokeWidth="1" opacity="0.08"/>
          </g>
        )}
      </svg>

      {animated && (
        <div className="mp-bubbles" aria-hidden="true">
          {Array.from({length: 16}).map((_, i) => (
            <span key={i} style={{
              '--d': `${Math.random() * 6 + 4}s`,
              '--x': `${Math.random() * 100}%`,
              '--s': `${Math.random() * 8 + 4}px`,
              '--delay': `${-Math.random() * 6}s`,
            }} />
          ))}
        </div>
      )}
    </div>
  );
}

function CavitationAnim() {
  const { t } = window.useT();
  return (
    <div className="cavitation">
      <svg viewBox="0 0 400 400" className="cav-svg" aria-hidden="true">
        <defs>
          <radialGradient id="cavGlow" cx="0.5" cy="0.5" r="0.5">
            <stop offset="0%" stopColor="#cc33cc" stopOpacity="0.4"/>
            <stop offset="70%" stopColor="#7712d8" stopOpacity="0.05"/>
            <stop offset="100%" stopColor="#7712d8" stopOpacity="0"/>
          </radialGradient>
          <radialGradient id="tooth" cx="0.4" cy="0.3" r="0.8">
            <stop offset="0%" stopColor="#ffffff"/>
            <stop offset="70%" stopColor="#f5ebe0"/>
            <stop offset="100%" stopColor="#d9c9b5"/>
          </radialGradient>
        </defs>
        <circle cx="200" cy="200" r="190" fill="url(#cavGlow)"/>
        {/* tooth */}
        <path
          d="M140 110 C 135 80, 175 70, 200 75 C 225 70, 265 80, 260 110
             L 255 240 C 250 280, 220 295, 200 295 C 180 295, 150 280, 145 240 Z"
          fill="url(#tooth)"
          stroke="#c9b6a0" strokeWidth="1.5"
        />
        {/* ultrasonic wave arcs */}
        <g className="cav-waves" fill="none" strokeLinecap="round">
          <path d="M 60 200 Q 100 160, 60 120" stroke="#7712d8" strokeWidth="1.5" opacity="0.7"/>
          <path d="M 80 230 Q 120 190, 80 150" stroke="#cc33cc" strokeWidth="1.5" opacity="0.6"/>
          <path d="M 340 200 Q 300 160, 340 120" stroke="#7712d8" strokeWidth="1.5" opacity="0.7"/>
          <path d="M 320 230 Q 280 190, 320 150" stroke="#cc33cc" strokeWidth="1.5" opacity="0.6"/>
        </g>
        {/* bubbles around tooth */}
        <g className="cav-bubbles">
          {Array.from({length: 18}).map((_, i) => {
            const angle = (i / 18) * Math.PI * 2;
            const r = 120 + (i % 3) * 12;
            const cx = 200 + Math.cos(angle) * r;
            const cy = 200 + Math.sin(angle) * r;
            const size = 3 + (i % 4) * 1.5;
            return (
              <circle
                key={i} cx={cx} cy={cy} r={size}
                fill="#ffffff" stroke="#7712d8" strokeWidth="0.6" opacity="0.8"
                style={{animationDelay: `${i * 0.2}s`}}
              />
            );
          })}
        </g>
      </svg>
      <div className="cav-caption">{t('cav.caption')}</div>
    </div>
  );
}

window.ProductMouthpiece = ProductMouthpiece;
window.CavitationAnim = CavitationAnim;