// Icon library
const Icons = {
  Arrow: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
      <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  Check: ({ size = 12 }) => (
    <svg width={size} height={size} viewBox="0 0 12 12" fill="none">
      <path d="M2.5 6.2l2.4 2.4 4.6-4.8" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  Play: ({ size = 12 }) => (
    <svg width={size} height={size} viewBox="0 0 12 12" fill="currentColor">
      <path d="M3.5 2.5v7l6-3.5z"/>
    </svg>
  ),
  // Tile icons - outlined, mirroring screenshot style
  PlayTile: () => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
      <path d="M9 7.5v9l7.5-4.5z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"/>
    </svg>
  ),
  VaultTile: () => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
      <rect x="4" y="4" width="16" height="16" rx="2" stroke="currentColor" strokeWidth="1.7"/>
      <circle cx="12" cy="12" r="2.5" stroke="currentColor" strokeWidth="1.7"/>
      <path d="M12 14.5v2" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round"/>
    </svg>
  ),
  ShareTile: () => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
      <circle cx="6" cy="12" r="2.5" stroke="currentColor" strokeWidth="1.7"/>
      <circle cx="18" cy="6" r="2.5" stroke="currentColor" strokeWidth="1.7"/>
      <circle cx="18" cy="18" r="2.5" stroke="currentColor" strokeWidth="1.7"/>
      <path d="M8.2 10.8L15.8 7.2M8.2 13.2L15.8 16.8" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round"/>
    </svg>
  ),
  PhoneTile: () => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
      <path d="M5 4h3l2 5-2 1a11 11 0 0 0 6 6l1-2 5 2v3a2 2 0 0 1-2 2A17 17 0 0 1 3 6a2 2 0 0 1 2-2z" stroke="currentColor" strokeWidth="1.7" strokeLinejoin="round"/>
    </svg>
  ),
  LockTile: () => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
      <rect x="5" y="11" width="14" height="9" rx="2" stroke="currentColor" strokeWidth="1.7"/>
      <path d="M8 11V7.5a4 4 0 1 1 8 0V11" stroke="currentColor" strokeWidth="1.7"/>
    </svg>
  ),
  BrowserTile: () => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
      <rect x="3" y="5" width="18" height="14" rx="2" stroke="currentColor" strokeWidth="1.7"/>
      <path d="M3 9h18" stroke="currentColor" strokeWidth="1.7"/>
      <circle cx="6" cy="7" r="0.7" fill="currentColor"/>
      <circle cx="8.5" cy="7" r="0.7" fill="currentColor"/>
    </svg>
  ),
  // Bullets
  PhoneSmall: () => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
      <path d="M5 4h3l2 5-2 1a11 11 0 0 0 6 6l1-2 5 2v3a2 2 0 0 1-2 2A17 17 0 0 1 3 6a2 2 0 0 1 2-2z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"/>
    </svg>
  ),
  KeySmall: () => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
      <circle cx="9" cy="9" r="4.5" stroke="currentColor" strokeWidth="1.8"/>
      <path d="M12.2 12.2L21 21M17 17l2-2" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
    </svg>
  ),
  ShareSmall: () => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
      <circle cx="6" cy="12" r="2.5" stroke="currentColor" strokeWidth="1.8"/>
      <circle cx="18" cy="6" r="2.5" stroke="currentColor" strokeWidth="1.8"/>
      <circle cx="18" cy="18" r="2.5" stroke="currentColor" strokeWidth="1.8"/>
      <path d="M8.2 10.8L15.8 7.2M8.2 13.2L15.8 16.8" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
    </svg>
  ),
  // Privacy pillars
  LockOpen: () => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
      <rect x="5" y="11" width="14" height="9" rx="2" stroke="currentColor" strokeWidth="1.7"/>
      <path d="M8 11V7.5a4 4 0 0 1 7-2.5" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round"/>
    </svg>
  ),
  ShieldCheck: () => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
      <path d="M12 3l8 3v6c0 5-3.4 8.5-8 9.5-4.6-1-8-4.5-8-9.5V6l8-3z" stroke="currentColor" strokeWidth="1.7" strokeLinejoin="round"/>
      <path d="M9 12l2 2 4-4" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  People: () => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
      <circle cx="9" cy="9" r="3" stroke="currentColor" strokeWidth="1.7"/>
      <circle cx="17" cy="10" r="2.5" stroke="currentColor" strokeWidth="1.7"/>
      <path d="M3 19c.8-3 3.4-4.5 6-4.5s5.2 1.5 6 4.5" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round"/>
      <path d="M15 14.5c2 0 4 1 5 3.5" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round"/>
    </svg>
  ),
};

window.Icons = Icons;
