import {useId} from 'react';

/** Compact faceted solids for the two primary hero actions. */
export function HeroActionIcon({kind}:{kind:'invest'|'tokenize'}) {
  const id=`hero-action-${useId().replace(/:/g,'')}`;
  const paint=(name:string)=>`url(#${id}-${name})`;
  return <span className="hero-action-icon hero-action-icon-3d" aria-hidden="true">
    <svg width="28" height="28" viewBox="0 0 64 64" fill="none" focusable="false">
      <defs>
        <linearGradient id={`${id}-mint`} x1="8" y1="20" x2="39" y2="56" gradientUnits="userSpaceOnUse">
          <stop stopColor="#b9ffed"/><stop offset=".45" stopColor="#39dfbd"/><stop offset="1" stopColor="#079e99"/>
        </linearGradient>
        <linearGradient id={`${id}-mint-side`} x1="17" y1="23" x2="36" y2="55" gradientUnits="userSpaceOnUse">
          <stop stopColor="#16b9b2"/><stop offset="1" stopColor="#126b96"/>
        </linearGradient>
        <linearGradient id={`${id}-gold`} x1="30" y1="30" x2="59" y2="57" gradientUnits="userSpaceOnUse">
          <stop stopColor="#ffe9a7"/><stop offset=".42" stopColor="#ffc855"/><stop offset="1" stopColor="#e28b26"/>
        </linearGradient>
        <linearGradient id={`${id}-gold-top`} x1="34" y1="32" x2="55" y2="43" gradientUnits="userSpaceOnUse">
          <stop stopColor="#fff9dd"/><stop offset="1" stopColor="#ffd578"/>
        </linearGradient>
        <linearGradient id={`${id}-violet`} x1="6" y1="14" x2="32" y2="47" gradientUnits="userSpaceOnUse">
          <stop stopColor="#f1daff"/><stop offset=".42" stopColor="#c191fc"/><stop offset="1" stopColor="#8b5adf"/>
        </linearGradient>
        <linearGradient id={`${id}-violet-side`} x1="17" y1="18" x2="33" y2="45" gradientUnits="userSpaceOnUse">
          <stop stopColor="#a978e7"/><stop offset="1" stopColor="#5836a3"/>
        </linearGradient>
        <linearGradient id={`${id}-coin`} x1="27" y1="15" x2="53" y2="56" gradientUnits="userSpaceOnUse">
          <stop stopColor="#fff"/><stop offset=".46" stopColor="#e3fff7"/><stop offset="1" stopColor="#8cded9"/>
        </linearGradient>
        <linearGradient id={`${id}-rim`} x1="34" y1="14" x2="57" y2="56" gradientUnits="userSpaceOnUse">
          <stop stopColor="#acf5e5"/><stop offset=".45" stopColor="#37bab7"/><stop offset="1" stopColor="#3670b8"/>
        </linearGradient>
        <radialGradient id={`${id}-shadow`}>
          <stop stopColor="#294876" stopOpacity=".29"/><stop offset="1" stopColor="#294876" stopOpacity="0"/>
        </radialGradient>
      </defs>
      <ellipse cx="32" cy="58" rx="30" ry="5" fill={paint('shadow')}/>
      {kind==='invest'?<>
        <path d="m6 40 8 4v13l-8-4Zm12-9 8 4v22l-8-4Zm12-10 8 4v32l-8-4Z" fill={paint('mint')}/>
        <path d="m14 44 6-4v13l-6 4Zm12-9 6-4v22l-6 4Zm12-10 6-4v32l-6 4Z" fill={paint('mint-side')}/>
        <path d="m6 40 6-4 8 4-6 4Zm12-9 6-4 8 4-6 4Zm12-10 6-4 8 4-6 4Z" fill="#d0fff0"/>
        <path d="m8 28 13-13 9 3L47 5m-12 0h12v12" stroke="#0d7477" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round" transform="translate(0 2)"/>
        <path d="m8 28 13-13 9 3L47 5m-12 0h12v12" stroke="#58e6c0" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round"/>
        <path d="m8 26.8 13-13 9 3L46 4" stroke="#e1fff2" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"/>
        <path d="M32 46v7c0 4 6 7 13 7s13-3 13-7v-7Z" fill={paint('gold')}/>
        <ellipse cx="45" cy="46" rx="13" ry="6" fill={paint('gold-top')} stroke="#fff1ba" strokeWidth="1"/>
        <path d="M33 39v7c0 4 5.5 7 12 7s12-3 12-7v-7Z" fill={paint('gold')}/>
        <ellipse cx="45" cy="39" rx="12" ry="6" fill={paint('gold-top')} stroke="#fff4ca" strokeWidth="1.2"/>
        <ellipse cx="45" cy="39" rx="7.4" ry="3.4" stroke="#e4a636" strokeWidth="1.3"/>
        <path d="M35 46v3m4-1v3m-3 3v2m5-1v3" stroke="#fff0b6" strokeWidth="1.5" strokeLinecap="round" opacity=".85"/>
      </>:<>
        <path d="m5 14 11 6v13L5 27Z" fill={paint('violet')}/>
        <path d="m16 20 11-6v13l-11 6Z" fill={paint('violet-side')}/>
        <path d="m5 14 11-6 11 6-11 6Z" fill="#f1dbff"/>
        <path d="m5 14 11 6 11-6M16 20v13" stroke="#ffeaff" strokeWidth="1" strokeOpacity=".8" strokeLinejoin="round"/>
        <path d="m4 39 10 5v12L4 51Z" fill={paint('violet')}/>
        <path d="m14 44 10-6v12l-10 6Z" fill={paint('violet-side')}/>
        <path d="m4 39 10-6 10 5-10 6Z" fill="#ead4ff"/>
        <path d="m4 39 10 5 10-6" stroke="#fff0ff" strokeWidth="1" strokeLinejoin="round"/>
        <path d="m24 9 7 3-1 7-7-3Z" fill="#b995f6"/>
        <path d="m24 9 4-3 7 3-4 3Z" fill="#f7e9ff"/>
        <path d="m31 12 4-3-1 7-4 3Z" fill="#7650bd"/>
        <ellipse cx="45" cy="35" rx="17" ry="23" fill={paint('rim')}/>
        <path d="M40 12h5c8 0 13 6 16 14l-6 2-9-11Z" fill="#d5fff2"/>
        <ellipse cx="41" cy="35" rx="17" ry="23" fill={paint('coin')} stroke="#f3fffb" strokeWidth="1.4"/>
        <ellipse cx="41" cy="35" rx="13" ry="18.5" stroke="#50bdb9" strokeWidth="1.3" opacity=".7"/>
        <g transform="translate(31 22) scale(.15)">
          <path d="M98.8 132.35H39.31V93.04h54.66V39.31H39.31v53.5H0V34.48C0 15.47 15.46 0 34.47 0H98.8c19.01 0 34.47 15.47 34.47 34.48v63.4c0 19.01-15.46 34.47-34.47 34.47" fill="#12ccba"/>
          <path d="M29.21 171.66h6.01c2.3 0 4.16-1.86 4.16-4.16v-35.15H4.24c-2.3 0-4.16 1.86-4.16 4.16v6.01c0 16.09 13.04 29.13 29.13 29.13" fill="#3361f4"/>
        </g>
        <path d="m55 3 1.7 4.3L61 9l-4.3 1.7L55 15l-1.7-4.3L49 9l4.3-1.7Z" fill="#65e9ce"/>
      </>}
    </svg>
  </span>;
}