// Mystical glyphs — SVG symbols for each card face.
// Designed minimal & gold-line, drawn within a 120×120 viewBox.

function GlyphRose() {
  // The Empress — petaled rosette
  return (
    <svg viewBox="0 0 120 120" width="100%" height="100%" fill="none" stroke="currentColor" strokeWidth="1.1" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="60" cy="60" r="38" opacity="0.4" />
      {[0,1,2,3,4,5].map(i => {
        const a = (i * 60 - 30) * Math.PI / 180;
        const x = 60 + Math.cos(a) * 22;
        const y = 60 + Math.sin(a) * 22;
        return <ellipse key={i} cx={x} cy={y} rx="10" ry="18" transform={`rotate(${i*60} ${x} ${y})`} opacity="0.85" />;
      })}
      <circle cx="60" cy="60" r="8" />
      <circle cx="60" cy="60" r="3" fill="currentColor" />
      <line x1="60" y1="98" x2="60" y2="112" />
      <path d="M52 105 Q56 100 60 105" />
      <path d="M68 108 Q64 103 60 108" />
    </svg>
  );
}

function GlyphLantern() {
  // The Hermit — lantern with a star inside
  return (
    <svg viewBox="0 0 120 120" width="100%" height="100%" fill="none" stroke="currentColor" strokeWidth="1.1" strokeLinecap="round" strokeLinejoin="round">
      <line x1="60" y1="14" x2="60" y2="26" />
      <path d="M50 26 Q60 22 70 26" />
      <rect x="44" y="30" width="32" height="8" rx="2" />
      <path d="M42 38 L42 84 Q42 88 46 88 L74 88 Q78 88 78 84 L78 38 Z" />
      <line x1="42" y1="46" x2="78" y2="46" opacity="0.5" />
      <line x1="42" y1="80" x2="78" y2="80" opacity="0.5" />
      {/* star inside */}
      <g transform="translate(60 63)">
        {[0,1,2,3,4,5,6,7].map(i => {
          const a = i * 45 * Math.PI / 180;
          const r = i % 2 === 0 ? 12 : 4.5;
          return <line key={i} x1="0" y1="0" x2={Math.cos(a)*r} y2={Math.sin(a)*r} opacity="0.9" />;
        })}
        <circle r="1.5" fill="currentColor" />
      </g>
      <path d="M50 88 L46 100 L74 100 L70 88" opacity="0.6" />
      <line x1="56" y1="100" x2="56" y2="106" opacity="0.6" />
      <line x1="64" y1="100" x2="64" y2="106" opacity="0.6" />
    </svg>
  );
}

function GlyphStar() {
  // The Star — eight-pointed star with halo
  return (
    <svg viewBox="0 0 120 120" width="100%" height="100%" fill="none" stroke="currentColor" strokeWidth="1.1" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="60" cy="60" r="44" opacity="0.25" />
      <circle cx="60" cy="60" r="32" opacity="0.4" />
      <g transform="translate(60 60)">
        {[0,1,2,3].map(i => {
          const a = i * 45 * Math.PI / 180;
          return <line key={i} x1={-Math.cos(a)*28} y1={-Math.sin(a)*28} x2={Math.cos(a)*28} y2={Math.sin(a)*28} />;
        })}
        {/* diamond highlights */}
        {[0,1,2,3].map(i => {
          const a = i * 90 * Math.PI / 180;
          return <path key={i} d={`M0 0 L${Math.cos(a)*8} ${Math.sin(a)*8} L${Math.cos(a)*28} ${Math.sin(a)*28} L${Math.cos(a + Math.PI/2)*8} ${Math.sin(a + Math.PI/2)*8} Z`} opacity="0.8" />;
        })}
        <circle r="3" fill="currentColor" />
      </g>
      {/* tiny falling stars */}
      <g fill="currentColor" opacity="0.7">
        <circle cx="20" cy="100" r="1.2" />
        <circle cx="98" cy="22" r="1" />
        <circle cx="100" cy="90" r="0.9" />
      </g>
    </svg>
  );
}

function GlyphWheel() {
  // Wheel of Fortune — circle with spokes & inner spiral
  return (
    <svg viewBox="0 0 120 120" width="100%" height="100%" fill="none" stroke="currentColor" strokeWidth="1.1" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="60" cy="60" r="44" opacity="0.95" />
      <circle cx="60" cy="60" r="32" opacity="0.5" />
      <circle cx="60" cy="60" r="16" opacity="0.75" />
      {/* spokes */}
      {[0,1,2,3,4,5,6,7].map(i => {
        const a = i * 45 * Math.PI / 180;
        return (
          <line key={i}
            x1={60 + Math.cos(a)*16} y1={60 + Math.sin(a)*16}
            x2={60 + Math.cos(a)*44} y2={60 + Math.sin(a)*44}
            opacity={i % 2 === 0 ? 0.9 : 0.5}
          />
        );
      })}
      {/* center dot */}
      <circle cx="60" cy="60" r="3" fill="currentColor" />
      {/* small marks on outer */}
      {[0,1,2,3].map(i => {
        const a = (i * 90 + 22.5) * Math.PI / 180;
        return <circle key={i} cx={60 + Math.cos(a)*44} cy={60 + Math.sin(a)*44} r="2" fill="currentColor" opacity="0.7" />;
      })}
    </svg>
  );
}

function GlyphMoon() {
  // The Moon — crescent moon with face profile + droplets
  return (
    <svg viewBox="0 0 120 120" width="100%" height="100%" fill="none" stroke="currentColor" strokeWidth="1.1" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="60" cy="60" r="44" opacity="0.18" />
      {/* crescent */}
      <path d="M82 30 A38 38 0 1 0 82 90 A28 28 0 1 1 82 30 Z" opacity="0.95" />
      {/* tiny face */}
      <circle cx="72" cy="56" r="1.6" fill="currentColor" />
      <path d="M68 64 Q72 67 76 64" opacity="0.85" />
      {/* drops below */}
      <path d="M40 102 Q42 96 44 102 Q42 106 40 102 Z" opacity="0.7" />
      <path d="M52 108 Q54 102 56 108 Q54 112 52 108 Z" opacity="0.6" />
      <path d="M64 102 Q66 96 68 102 Q66 106 64 102 Z" opacity="0.55" />
      {/* small stars */}
      <circle cx="22" cy="34" r="1.1" fill="currentColor" opacity="0.7" />
      <circle cx="30" cy="60" r="0.9" fill="currentColor" opacity="0.5" />
      <circle cx="20" cy="80" r="1" fill="currentColor" opacity="0.6" />
    </svg>
  );
}

// ─── Page-level small icons ───────────────────────────
function IconShield() {
  return (
    <svg viewBox="0 0 60 60" width="100%" height="100%" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M30 6 L48 14 L48 30 Q48 46 30 54 Q12 46 12 30 L12 14 Z" />
      <path d="M22 28 L28 34 L40 22" />
    </svg>
  );
}
function IconStack() {
  return (
    <svg viewBox="0 0 60 60" width="100%" height="100%" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M30 10 L52 20 L30 30 L8 20 Z" />
      <path d="M8 30 L30 40 L52 30" opacity="0.7" />
      <path d="M8 40 L30 50 L52 40" opacity="0.45" />
    </svg>
  );
}
function IconLoop() {
  return (
    <svg viewBox="0 0 60 60" width="100%" height="100%" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M48 28 A18 18 0 1 0 36 46" />
      <path d="M48 18 L48 28 L38 28" />
    </svg>
  );
}
function IconBalance() {
  return (
    <svg viewBox="0 0 60 60" width="100%" height="100%" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
      <line x1="30" y1="10" x2="30" y2="50" />
      <line x1="12" y1="50" x2="48" y2="50" />
      <line x1="14" y1="20" x2="46" y2="20" />
      <path d="M14 20 L8 32 Q14 38 20 32 Z" />
      <path d="M46 20 L40 32 Q46 38 52 32 Z" />
    </svg>
  );
}

// ─── Card-back ornament — hexagram + flourish ─────────
function CardBackSigil() {
  return (
    <svg viewBox="0 0 120 120" width="100%" height="100%" fill="none" stroke="currentColor" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="60" cy="60" r="46" opacity="0.45" />
      <circle cx="60" cy="60" r="38" opacity="0.6" />
      <polygon points="60,26 90,80 30,80" opacity="0.85" />
      <polygon points="60,94 30,40 90,40" opacity="0.85" />
      <circle cx="60" cy="60" r="10" opacity="0.95" />
      <circle cx="60" cy="60" r="2.2" fill="currentColor" />
    </svg>
  );
}

// resolver
function Glyph({ name }) {
  switch (name) {
    case "rose":     return <GlyphRose />;
    case "lantern":  return <GlyphLantern />;
    case "star":     return <GlyphStar />;
    case "wheel":    return <GlyphWheel />;
    case "moon":     return <GlyphMoon />;
    case "shield":   return <IconShield />;
    case "stack":    return <IconStack />;
    case "loop":     return <IconLoop />;
    case "balance":  return <IconBalance />;
    default:         return null;
  }
}

Object.assign(window, { Glyph, CardBackSigil });
