// Icon library — ornate vintage nautical / tarot-inspired line icons.
// Thin strokes, rich detail, evocative of pirate era engraving and occult maps.
const Icon = {
  // Elaborate compass rose with cardinal points
  Compass: (p) => (
    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="0.7" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <circle cx="16" cy="16" r="13"/>
      <circle cx="16" cy="16" r="10" opacity=".4"/>
      <circle cx="16" cy="16" r="5" opacity=".6"/>
      {/* cardinal arms */}
      <path d="M16 3 L18 16 L16 29 L14 16 Z" fill="currentColor" fillOpacity=".15"/>
      <path d="M3 16 L16 14 L29 16 L16 18 Z" fill="currentColor" fillOpacity=".08"/>
      {/* diagonal rays */}
      <path d="M6.8 6.8 L16 16 L25.2 6.8" opacity=".5"/>
      <path d="M6.8 25.2 L16 16 L25.2 25.2" opacity=".5"/>
      {/* tick marks */}
      {[...Array(16)].map((_, i) => {
        const a = (i / 16) * Math.PI * 2;
        const r1 = 11.5, r2 = 13;
        return <line key={i} x1={16 + Math.cos(a) * r1} y1={16 + Math.sin(a) * r1} x2={16 + Math.cos(a) * r2} y2={16 + Math.sin(a) * r2} />;
      })}
      <circle cx="16" cy="16" r="0.9" fill="currentColor" stroke="none"/>
      <text x="16" y="5.6" fontSize="2.2" textAnchor="middle" fill="currentColor" stroke="none" fontFamily="serif" fontStyle="italic">N</text>
    </svg>
  ),

  // Ornate anchor with rope loop
  Anchor: (p) => (
    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <circle cx="16" cy="6" r="2.4"/>
      <circle cx="16" cy="6" r="1.2" opacity=".5"/>
      <path d="M16 8.4 V24"/>
      <path d="M12 12 H20"/>
      <path d="M6 20 Q 6 26, 16 27 Q 26 26, 26 20"/>
      <path d="M6 20 L 4 18 M6 20 L 8 18.5"/>
      <path d="M26 20 L 28 18 M26 20 L 24 18.5"/>
      <path d="M16 27 V29"/>
      <path d="M13 5 Q 10 4, 11 6.5 Q 12.5 8, 15 7.5" opacity=".6"/>
    </svg>
  ),

  // Elegant skull crossbones (vintage engraving)
  Skull: (p) => (
    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="0.8" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M16 5 C 9 5, 5.5 10, 5.5 15.5 C 5.5 18.5, 7 21, 9 22.5 L 9 25 Q 9 26.5, 10.5 26.5 L 13 26.5 L 13 24 L 15 24 L 15 26.5 L 17 26.5 L 17 24 L 19 24 L 19 26.5 L 21.5 26.5 Q 23 26.5, 23 25 L 23 22.5 C 25 21, 26.5 18.5, 26.5 15.5 C 26.5 10, 23 5, 16 5 Z"/>
      <circle cx="11.5" cy="15" r="2" fill="currentColor" stroke="none" fillOpacity=".7"/>
      <circle cx="20.5" cy="15" r="2" fill="currentColor" stroke="none" fillOpacity=".7"/>
      <circle cx="11.5" cy="15" r="0.6" fill="#0B0B14" stroke="none"/>
      <circle cx="20.5" cy="15" r="0.6" fill="#0B0B14" stroke="none"/>
      <path d="M14.5 19 L 16 21 L 17.5 19" />
      <path d="M13 22.8 L 13 24 M 16 22.8 L 16 24 M 19 22.8 L 19 24" opacity=".6"/>
    </svg>
  ),

  // Triangular play — refined proportions
  Play: (p) => (
    <svg viewBox="0 0 32 32" fill="currentColor" {...p}>
      <path d="M10 6 L 26 16 L 10 26 Z"/>
    </svg>
  ),

  // Proper Patreon mark
  Patreon: (p) => (
    <svg viewBox="0 0 32 32" fill="currentColor" {...p}>
      <circle cx="20" cy="12" r="7"/>
      <rect x="5" y="5" width="4" height="22"/>
    </svg>
  ),

  // Ornate quill (for dating/journal)
  Quill: (p) => (
    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M26 5 Q 15 8, 10 16 Q 7 20, 7 25 L 13 25 Q 13 20, 17 16 Q 23 12, 26 5 Z"/>
      <path d="M10 16 Q 18 14, 24 8" opacity=".5"/>
      <path d="M13 25 L 5 27" />
      <path d="M7 25 Q 5 26, 5 28" opacity=".6"/>
    </svg>
  ),

  // Discord — subtle recognizable mark
  Discord: (p) => (
    <svg viewBox="0 0 32 32" fill="currentColor" {...p}>
      <path d="M26.5 7 A 22 22 0 0 0 21 5.5 L 20.6 6.2 A 16 16 0 0 0 11.4 6.2 L 11 5.5 A 22 22 0 0 0 5.5 7 C 2.2 11.5 1.3 16 1.7 20.3 C 4.1 22 6.4 23 8.7 23.7 L 9.9 22 C 8.7 21.6 7.7 21.1 6.7 20.4 C 6.9 20.3 7.2 20.1 7.4 20 C 13.2 22.7 19.4 22.7 25.1 20 C 25.4 20.1 25.6 20.3 25.9 20.4 C 24.9 21.1 23.9 21.6 22.7 22 L 23.9 23.7 C 26.2 23 28.5 22 30.9 20.3 C 31.4 15.3 29.9 10.9 26.5 7 Z M 11.6 17.6 C 10.2 17.6 9 16.4 9 14.9 C 9 13.5 10.1 12.2 11.6 12.2 C 13 12.2 14.2 13.5 14.2 14.9 C 14.2 16.4 13 17.6 11.6 17.6 Z M 20.8 17.6 C 19.4 17.6 18.2 16.4 18.2 14.9 C 18.2 13.5 19.3 12.2 20.8 12.2 C 22.2 12.2 23.4 13.5 23.4 14.9 C 23.4 16.4 22.2 17.6 20.8 17.6 Z"/>
    </svg>
  ),

  // Treasure chest (for Download)
  Chest: (p) => (
    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M5 14 Q 5 8, 16 8 Q 27 8, 27 14 L 27 25 Q 27 26, 26 26 L 6 26 Q 5 26, 5 25 Z"/>
      <path d="M5 16 L 27 16"/>
      <path d="M5 14 Q 16 11, 27 14" opacity=".5"/>
      <rect x="14" y="15" width="4" height="5" fill="currentColor" stroke="currentColor"/>
      <circle cx="16" cy="17.5" r="0.6" fill="#0B0B14" stroke="none"/>
      <path d="M9 20 L 9 23 M 12 20 L 12 23 M 20 20 L 20 23 M 23 20 L 23 23" opacity=".4"/>
    </svg>
  ),

  // Download arrow (simple)
  Download: (p) => (
    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M16 5 V20"/>
      <path d="M9 14 L 16 21 L 23 14"/>
      <path d="M6 26 L 26 26"/>
    </svg>
  ),

  // Wax-seal padlock
  Lock: (p) => (
    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M10 14 V 10 Q 10 5, 16 5 Q 22 5, 22 10 V 14" />
      <rect x="7" y="14" width="18" height="13" rx="1"/>
      <circle cx="16" cy="20" r="1.8" fill="currentColor" stroke="none" fillOpacity=".5"/>
      <path d="M16 21.5 V 24"/>
    </svg>
  ),

  // Broken padlock
  Unlock: (p) => (
    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M10 14 V 10 Q 10 5, 16 5 Q 22 5, 22 10"/>
      <rect x="7" y="14" width="18" height="13" rx="1"/>
      <circle cx="16" cy="20" r="1.8" fill="currentColor" stroke="none" fillOpacity=".5"/>
      <path d="M16 21.5 V 24"/>
    </svg>
  ),

  // Open grimoire / spellbook
  Book: (p) => (
    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M4 7 Q 4 6, 5 6 L 14 6 Q 16 6, 16 8 L 16 26 Q 16 25, 14 25 L 5 25 Q 4 25, 4 24 Z"/>
      <path d="M28 7 Q 28 6, 27 6 L 18 6 Q 16 6, 16 8 L 16 26 Q 16 25, 18 25 L 27 25 Q 28 25, 28 24 Z"/>
      <path d="M7 10 L 12 10 M 7 13 L 13 13 M 7 16 L 11 16" opacity=".5"/>
      <path d="M20 10 L 25 10 M 19 13 L 25 13 M 21 16 L 25 16" opacity=".5"/>
      <circle cx="16" cy="16" r="0.6" fill="currentColor" stroke="none"/>
    </svg>
  ),

  // Ornate heart (rose-cross style)
  Heart: (p) => (
    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M16 27 C 16 27, 4 19, 4 12 Q 4 6, 10 6 Q 14 6, 16 10 Q 18 6, 22 6 Q 28 6, 28 12 C 28 19, 16 27, 16 27 Z" fill="currentColor" fillOpacity=".15"/>
      <path d="M12 14 L 16 18 L 20 14" opacity=".6"/>
    </svg>
  ),

  // Rolling bone dice
  Dice: (p) => (
    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M8 10 L 16 6 L 24 10 L 24 22 L 16 26 L 8 22 Z"/>
      <path d="M8 10 L 16 14 L 24 10"/>
      <path d="M16 14 L 16 26"/>
      <circle cx="12" cy="16" r="0.8" fill="currentColor" stroke="none"/>
      <circle cx="12" cy="20" r="0.8" fill="currentColor" stroke="none"/>
      <circle cx="20" cy="16" r="0.8" fill="currentColor" stroke="none"/>
      <circle cx="20" cy="20" r="0.8" fill="currentColor" stroke="none"/>
      <circle cx="16" cy="10" r="0.8" fill="currentColor" stroke="none"/>
    </svg>
  ),

  // Globe with meridians
  Globe: (p) => (
    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="0.8" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <circle cx="16" cy="16" r="11"/>
      <ellipse cx="16" cy="16" rx="5" ry="11"/>
      <path d="M5 16 L 27 16"/>
      <path d="M6.5 10 L 25.5 10" opacity=".5"/>
      <path d="M6.5 22 L 25.5 22" opacity=".5"/>
      <path d="M16 5 L 16 27"/>
    </svg>
  ),

  // Four-point star (diamond burst)
  Sparkle: (p) => (
    <svg viewBox="0 0 32 32" fill="currentColor" {...p}>
      <path d="M16 3 L 18 14 L 29 16 L 18 18 L 16 29 L 14 18 L 3 16 L 14 14 Z"/>
      <path d="M16 7 L 17 15 L 25 16 L 17 17 L 16 25 L 15 17 L 7 16 L 15 15 Z" fill="#0B0B14" opacity=".3"/>
    </svg>
  ),

  // Checkmark
  Check: (p) => (
    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M6 16 L 13 23 L 26 9"/>
    </svg>
  ),

  // Arrow with ornamental tail
  Arrow: (p) => (
    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M5 16 H 25"/>
      <path d="M19 10 L 25 16 L 19 22"/>
    </svg>
  ),

  // Scroll (for devlog / messages)
  Scroll: (p) => (
    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M6 8 Q 6 5, 9 5 L 23 5 Q 26 5, 26 8 L 26 22 Q 26 25, 23 25 L 9 25 Q 6 25, 6 22 Z"/>
      <path d="M6 8 Q 3 8, 3 10 Q 3 12, 6 12" />
      <path d="M26 22 Q 29 22, 29 24 Q 29 27, 26 27 L 12 27" />
      <path d="M10 11 L 22 11 M 10 14 L 22 14 M 10 17 L 18 17" opacity=".5"/>
    </svg>
  ),

  // Unrolled treasure map
  Map: (p) => (
    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M4 9 L 12 6 L 20 9 L 28 6 L 28 24 L 20 27 L 12 24 L 4 27 Z"/>
      <path d="M12 6 L 12 24" opacity=".5"/>
      <path d="M20 9 L 20 27" opacity=".5"/>
      <path d="M7 16 L 10 14 L 9 18 Z" fill="currentColor" stroke="none" fillOpacity=".5"/>
      <path d="M22 18 L 26 20" strokeDasharray="1 2" opacity=".7"/>
      <path d="M24 18 L 25 19 M 23.5 19 L 24.5 20" opacity=".7"/>
      <circle cx="16" cy="20" r="0.8" fill="currentColor" stroke="none"/>
    </svg>
  ),

  X: (p) => (
    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" {...p}>
      <path d="M8 8 L 24 24 M 24 8 L 8 24"/>
    </svg>
  ),

  // Ship wheel (helm)
  Wheel: (p) => (
    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <circle cx="16" cy="16" r="6"/>
      <circle cx="16" cy="16" r="2"/>
      {[0, 1, 2, 3, 4, 5, 6, 7].map(i => {
        const a = (i / 8) * Math.PI * 2;
        const x1 = 16 + Math.cos(a) * 6;
        const y1 = 16 + Math.sin(a) * 6;
        const x2 = 16 + Math.cos(a) * 13;
        const y2 = 16 + Math.sin(a) * 13;
        const xh = 16 + Math.cos(a) * 14.5;
        const yh = 16 + Math.sin(a) * 14.5;
        return (
          <g key={i}>
            <line x1={x1} y1={y1} x2={x2} y2={y2}/>
            <circle cx={xh} cy={yh} r="1.6"/>
          </g>
        );
      })}
    </svg>
  ),
};

// Back-compat alias
Icon.Chat = Icon.Scroll;

window.Icon = Icon;
