// icons.jsx — Lucide-style SVG icons + custom card-game glyphs
// All icons share signature: <Icon size={n} stroke={c} fill={c} />

const Icon = ({ size = 24, stroke = "currentColor", fill = "none", strokeWidth = 1.75, children, style, className }) => (
  <svg
    width={size} height={size} viewBox="0 0 24 24"
    fill={fill} stroke={stroke} strokeWidth={strokeWidth}
    strokeLinecap="round" strokeLinejoin="round"
    style={style} className={className}
    aria-hidden="true">
    {children}
  </svg>
);

// ── Feature icons (Lucide-inspired, hand-tuned)
const IconTrophy = (p) => (
  <Icon {...p}>
    <path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/>
    <path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/>
    <path d="M4 22h16"/>
    <path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/>
    <path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/>
    <path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"/>
  </Icon>
);

const IconBracket = (p) => (
  <Icon {...p}>
    <rect x="2" y="4" width="6" height="4" rx="1"/>
    <rect x="2" y="16" width="6" height="4" rx="1"/>
    <rect x="9" y="10" width="6" height="4" rx="1"/>
    <rect x="16" y="10" width="6" height="4" rx="1"/>
    <path d="M8 6h1"/>
    <path d="M8 18h1"/>
    <path d="M15 12h1"/>
  </Icon>
);

const IconLive = (p) => (
  <Icon {...p}>
    <circle cx="12" cy="12" r="3"/>
    <path d="M19.07 4.93a10 10 0 0 1 0 14.14"/>
    <path d="M4.93 19.07a10 10 0 0 1 0-14.14"/>
    <path d="M16.24 7.76a6 6 0 0 1 0 8.48"/>
    <path d="M7.76 16.24a6 6 0 0 1 0-8.48"/>
  </Icon>
);

const IconCalculator = (p) => (
  <Icon {...p}>
    <rect x="4" y="2" width="16" height="20" rx="2"/>
    <line x1="8" y1="6" x2="16" y2="6"/>
    <line x1="16" y1="14" x2="16" y2="18"/>
    <path d="M16 10h.01"/>
    <path d="M12 10h.01"/>
    <path d="M8 10h.01"/>
    <path d="M12 14h.01"/>
    <path d="M8 14h.01"/>
    <path d="M12 18h.01"/>
    <path d="M8 18h.01"/>
  </Icon>
);

const IconUsers = (p) => (
  <Icon {...p}>
    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
    <circle cx="9" cy="7" r="4"/>
    <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
    <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
  </Icon>
);

const IconBell = (p) => (
  <Icon {...p}>
    <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/>
    <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/>
  </Icon>
);

const IconShield = (p) => (
  <Icon {...p}>
    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
    <path d="m9 12 2 2 4-4"/>
  </Icon>
);

const IconUserShield = (p) => (
  <Icon {...p}>
    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
    <circle cx="12" cy="10.5" r="2.2"/>
    <path d="M8.2 16.2c.7-1.6 2.1-2.5 3.8-2.5s3.1.9 3.8 2.5"/>
  </Icon>
);

const IconChart = (p) => (
  <Icon {...p}>
    <line x1="18" y1="20" x2="18" y2="10"/>
    <line x1="12" y1="20" x2="12" y2="4"/>
    <line x1="6" y1="20" x2="6" y2="14"/>
    <line x1="3" y1="20" x2="21" y2="20"/>
  </Icon>
);

const IconBroadcast = (p) => (
  <Icon {...p}>
    <circle cx="12" cy="12" r="2"/>
    <path d="M16.24 7.76a6 6 0 0 1 0 8.49"/>
    <path d="M7.76 16.24a6 6 0 0 1 0-8.49"/>
    <path d="M20.07 3.93a10 10 0 0 1 0 16.14"/>
    <path d="M3.93 20.07a10 10 0 0 1 0-16.14"/>
  </Icon>
);

const IconSearch = (p) => (
  <Icon {...p}>
    <circle cx="11" cy="11" r="7"/>
    <line x1="21" y1="21" x2="16.65" y2="16.65"/>
  </Icon>
);

const IconSettings = (p) => (
  <Icon {...p}>
    <circle cx="12" cy="12" r="3"/>
    <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
  </Icon>
);

const IconCrown = (p) => (
  <Icon {...p}>
    <path d="m2 7 4 5 6-8 6 8 4-5v13H2z"/>
    <path d="M2 17h20"/>
  </Icon>
);

const IconArrowLeft = (p) => (
  <Icon {...p}>
    <line x1="19" y1="12" x2="5" y2="12"/>
    <polyline points="12 19 5 12 12 5"/>
  </Icon>
);

const IconArrowDown = (p) => (
  <Icon {...p}>
    <line x1="12" y1="5" x2="12" y2="19"/>
    <polyline points="19 12 12 19 5 12"/>
  </Icon>
);

const IconCheck = (p) => (
  <Icon {...p}>
    <polyline points="20 6 9 17 4 12"/>
  </Icon>
);

const IconPlus = (p) => (
  <Icon {...p}>
    <line x1="12" y1="5" x2="12" y2="19"/>
    <line x1="5" y1="12" x2="19" y2="12"/>
  </Icon>
);

const IconMinus = (p) => (
  <Icon {...p}>
    <line x1="5" y1="12" x2="19" y2="12"/>
  </Icon>
);

const IconStar = (p) => (
  <Icon {...p}>
    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
  </Icon>
);

const IconSparkle = (p) => (
  <Icon {...p}>
    <path d="M12 3l1.9 5.6L20 10l-5.6 1.9L12 18l-2.4-6.1L4 10l5.6-1.4L12 3z"/>
  </Icon>
);

const IconApple = (p) => (
  <Icon {...p} fill="currentColor" stroke="none" strokeWidth={0}>
    <path d="M17.05 20.28c-.98.95-2.05.86-3.08.41-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.41C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/>
  </Icon>
);

const IconGoogle = (p) => (
  <Icon {...p} fill="currentColor" stroke="none" strokeWidth={0}>
    <path d="M3.609 1.814L13.792 12 3.61 22.186a1.5 1.5 0 0 1-.61-1.214V3.029c0-.481.233-.91.609-1.215z"/>
    <path d="M16.81 9.05 6.05 2.972l-.616-.347 9.617 9.617z" opacity="0.8"/>
    <path d="M16.81 14.95 6.05 21.028l9.001-9.001z" opacity="0.9"/>
    <path d="M20.16 10.815c.69.385.69 1.215 0 1.6l-3.351 1.886L14.207 12l2.602-2.302z"/>
  </Icon>
);

const IconX = (p) => (
  <Icon {...p}>
    <line x1="18" y1="6" x2="6" y2="18"/>
    <line x1="6" y1="6" x2="18" y2="18"/>
  </Icon>
);

const IconMenu = (p) => (
  <Icon {...p}>
    <line x1="3" y1="6" x2="21" y2="6"/>
    <line x1="3" y1="12" x2="21" y2="12"/>
    <line x1="3" y1="18" x2="21" y2="18"/>
  </Icon>
);

const IconTwitter = (p) => (
  <Icon {...p} fill="currentColor" stroke="none" strokeWidth={0}>
    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
  </Icon>
);

const IconInstagram = (p) => (
  <Icon {...p}>
    <rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
    <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
    <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/>
  </Icon>
);

const IconYoutube = (p) => (
  <Icon {...p}>
    <path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"/>
    <polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"/>
  </Icon>
);

const IconTikTok = (p) => (
  <Icon {...p} fill="currentColor" stroke="none" strokeWidth={0}>
    <path d="M19.6 6.32a4.85 4.85 0 0 1-3.77-4.32H12.7v13.4a2.55 2.55 0 1 1-2.55-2.55c.27 0 .53.04.77.12V9.8a5.7 5.7 0 1 0 4.91 5.64V8.45a8.05 8.05 0 0 0 4.7 1.5V6.86c-.32 0-.63-.18-.93-.54z"/>
  </Icon>
);

// ── Card suit glyphs (decorative)
const SuitSpade = ({ size = 24, fill = "currentColor", style }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} style={style} aria-hidden="true">
    <path d="M12 2c-3 3.5-7 6.5-7 10.5 0 2.5 1.8 4.5 4 4.5 1 0 1.8-.3 2.5-.8L11 22h2l-.5-5.8c.7.5 1.5.8 2.5.8 2.2 0 4-2 4-4.5 0-4-4-7-7-10.5z"/>
  </svg>
);
const SuitHeart = ({ size = 24, fill = "currentColor", style }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} style={style} aria-hidden="true">
    <path d="M12 21.5c-1.5-1.4-9-7.6-9-13.5C3 5 5.5 3 8.5 3c1.7 0 3.2.9 4 2.3.8-1.4 2.3-2.3 4-2.3C19.5 3 22 5 22 8c0 5.9-7.5 12.1-9 13.5z"/>
  </svg>
);
const SuitDiamond = ({ size = 24, fill = "currentColor", style }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} style={style} aria-hidden="true">
    <path d="M12 2 22 12 12 22 2 12z"/>
  </svg>
);
const SuitClub = ({ size = 24, fill = "currentColor", style }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} style={style} aria-hidden="true">
    <path d="M12 2a4 4 0 0 0-3.4 6.1A4 4 0 1 0 9 16c.4 0 .8-.1 1.2-.2L9 22h6l-1.2-6.2c.4.1.8.2 1.2.2a4 4 0 1 0 .4-7.9A4 4 0 0 0 12 2z"/>
  </svg>
);

// Export to window for cross-file usage
Object.assign(window, {
  Icon,
  IconTrophy, IconBracket, IconLive, IconCalculator, IconUsers,
  IconBell, IconShield, IconUserShield, IconChart, IconBroadcast, IconSearch,
  IconSettings, IconCrown, IconArrowLeft, IconArrowDown, IconCheck,
  IconPlus, IconMinus, IconStar, IconSparkle, IconApple, IconGoogle,
  IconX, IconMenu, IconTwitter, IconInstagram, IconYoutube, IconTikTok,
  SuitSpade, SuitHeart, SuitDiamond, SuitClub,
});
