/* Coin — circular badge holding an inline-line icon, with subtle glow + float anim.
 * Used as the floating pillar markers in the hero and as section anchors.
 */

const COIN_ICONS = {
  home: (
    <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 30L32 14L52 30V50C52 51.1 51.1 52 50 52H38V40H26V52H14C12.9 52 12 51.1 12 50V30Z"/>
      <path d="M8 32L32 12L56 32"/>
    </svg>
  ),
  solar: (
    <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="32" cy="32" r="9"/>
      <path d="M32 8V16M32 48V56M8 32H16M48 32H56M14.5 14.5L20 20M44 44L49.5 49.5M14.5 49.5L20 44M44 20L49.5 14.5"/>
    </svg>
  ),
  building: (
    <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
      <rect x="16" y="10" width="32" height="44" rx="1"/>
      <path d="M22 18H28M36 18H42M22 26H28M36 26H42M22 34H28M36 34H42M28 54V44H36V54"/>
    </svg>
  ),
  chart: (
    <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 50H52"/>
      <path d="M18 42V32M28 42V22M38 42V28M48 42V18"/>
      <path d="M14 22L24 14L34 20L48 8"/>
      <path d="M42 8H48V14"/>
    </svg>
  ),
  lock: (
    <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
      <rect x="14" y="28" width="36" height="26" rx="3"/>
      <path d="M22 28V20C22 14.5 26.5 10 32 10C37.5 10 42 14.5 42 20V28"/>
      <circle cx="32" cy="40" r="3"/>
      <path d="M32 43V48"/>
    </svg>
  ),
  leaf: (
    <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
      <path d="M14 50C14 28 28 14 50 14C50 36 36 50 14 50Z"/>
      <path d="M14 50L34 30"/>
    </svg>
  ),
  bars: (
    <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
      <rect x="12" y="34" width="10" height="18" rx="1"/>
      <rect x="27" y="22" width="10" height="30" rx="1"/>
      <rect x="42" y="12" width="10" height="40" rx="1"/>
    </svg>
  ),
  car: (
    <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
      <path d="M10 40V32L16 22H48L54 32V40H46"/>
      <path d="M18 40H46"/>
      <circle cx="20" cy="44" r="4"/>
      <circle cx="44" cy="44" r="4"/>
    </svg>
  ),
};

const Coin = ({ icon = "home", size = 96, delay = 0, drift = 1, glow = 1, className = "", style = {} }) => {
  const id = React.useId();
  return (
    <div
      className={`coin ${className}`}
      style={{
        "--coin-size": `${size}px`,
        "--coin-delay": `${delay}s`,
        "--coin-drift": drift,
        "--coin-glow": glow,
        ...style,
      }}
    >
      <div className="coin__halo"/>
      <div className="coin__disc">
        <svg className="coin__rim" viewBox="0 0 100 100" aria-hidden="true">
          <defs>
            <linearGradient id={`rim-${id}`} x1="0" y1="0" x2="1" y2="1">
              <stop offset="0%" stopColor="var(--amber-300)"/>
              <stop offset="50%" stopColor="var(--amber-500)"/>
              <stop offset="100%" stopColor="var(--amber-700)"/>
            </linearGradient>
            <linearGradient id={`face-${id}`} x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="rgba(255,248,235,0.95)"/>
              <stop offset="100%" stopColor="rgba(255,206,107,0.55)"/>
            </linearGradient>
          </defs>
          <circle cx="50" cy="50" r="48" fill={`url(#face-${id})`} stroke={`url(#rim-${id})`} strokeWidth="2.5"/>
          <circle cx="50" cy="50" r="44" fill="none" stroke="rgba(255,255,255,0.6)" strokeWidth="0.6" strokeDasharray="1 3"/>
        </svg>
        <div className="coin__icon" style={{ color: "var(--amber-700)" }}>
          {COIN_ICONS[icon]}
        </div>
      </div>
      <div className="coin__shadow"/>
    </div>
  );
};

window.Coin = Coin;
window.COIN_ICONS = COIN_ICONS;