// Glossy 3D foil paper plane — gold by default, tints via accent prop
const FoilPlane = ({ accent = 'gold', size = 220, style = {} }) => {
  const palettes = {
    gold: { hi: '#FFF3C8', mid: '#F0C964', deep: '#A77329', shadow: '#5a3a05', glow: 'rgba(255,210,120,0.45)' },
    rose: { hi: '#FFE3EA', mid: '#FF99B7', deep: '#B43A66', shadow: '#5e1733', glow: 'rgba(255,160,190,0.5)' },
    chrome: { hi: '#FFFFFF', mid: '#C9D8E6', deep: '#5E7286', shadow: '#1f2a36', glow: 'rgba(180,200,220,0.5)' },
    cream: { hi: '#FFFCF0', mid: '#F0E6C5', deep: '#9A8755', shadow: '#3b3219', glow: 'rgba(240,230,200,0.55)' },
  };
  const p = palettes[accent] || palettes.gold;
  const uid = React.useId().replace(/:/g,'');

  return (
    <svg
      viewBox="0 0 320 280"
      width={size}
      height={size * 280 / 320}
      style={{ display: 'block', filter: `drop-shadow(0 30px 40px rgba(20,40,80,0.35)) drop-shadow(0 0 60px ${p.glow})`, ...style }}
    >
      <defs>
        {/* Top face: bright with hot highlight */}
        <linearGradient id={`top_${uid}`} x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor={p.hi}/>
          <stop offset="35%" stopColor={p.mid}/>
          <stop offset="100%" stopColor={p.deep}/>
        </linearGradient>
        {/* Right wing: darker, in shadow */}
        <linearGradient id={`right_${uid}`} x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor={p.mid}/>
          <stop offset="60%" stopColor={p.deep}/>
          <stop offset="100%" stopColor={p.shadow}/>
        </linearGradient>
        {/* Belly: mid */}
        <linearGradient id={`belly_${uid}`} x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stopColor={p.mid}/>
          <stop offset="100%" stopColor={p.shadow}/>
        </linearGradient>
        {/* Crease highlight */}
        <linearGradient id={`crease_${uid}`} x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stopColor="rgba(255,255,255,0.0)"/>
          <stop offset="50%" stopColor="rgba(255,255,255,0.85)"/>
          <stop offset="100%" stopColor="rgba(255,255,255,0.0)"/>
        </linearGradient>
        {/* Specular shine blob */}
        <radialGradient id={`spec_${uid}`} cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="rgba(255,255,255,0.95)"/>
          <stop offset="60%" stopColor="rgba(255,255,255,0.2)"/>
          <stop offset="100%" stopColor="rgba(255,255,255,0)"/>
        </radialGradient>
      </defs>

      {/* Right (back) wing — appears behind */}
      <path d="M 160 110 L 300 80 L 220 200 L 160 175 Z" fill={`url(#right_${uid})`} />
      {/* Belly fold */}
      <path d="M 160 110 L 220 200 L 100 230 L 60 180 Z" fill={`url(#belly_${uid})`} opacity="0.92"/>
      {/* Top face — the big puffy front */}
      <path d="M 30 60 L 290 30 L 160 175 L 100 130 Z" fill={`url(#top_${uid})`} />
      {/* Crease line down the spine of the top face */}
      <path d="M 30 60 L 160 175" stroke={`url(#crease_${uid})`} strokeWidth="2.5" fill="none" opacity="0.7"/>
      {/* Edge highlight on leading edge */}
      <path d="M 30 60 L 290 30" stroke="rgba(255,255,255,0.85)" strokeWidth="1.5" fill="none" opacity="0.85"/>
      <path d="M 290 30 L 160 175" stroke="rgba(255,255,255,0.4)" strokeWidth="1" fill="none"/>
      {/* Specular highlight blob */}
      <ellipse cx="170" cy="80" rx="60" ry="22" fill={`url(#spec_${uid})`} transform="rotate(-12 170 80)" opacity="0.85"/>
      {/* small secondary highlight on right wing */}
      <ellipse cx="240" cy="120" rx="28" ry="10" fill={`url(#spec_${uid})`} transform="rotate(40 240 120)" opacity="0.55"/>
      {/* tiny rim of light on back fold */}
      <path d="M 160 110 L 220 200" stroke="rgba(255,255,255,0.35)" strokeWidth="1" fill="none"/>
    </svg>
  );
};

window.FoilPlane = FoilPlane;