/* iGaming Interactive Demo — Icon Components
   Lucide-style line icons, all SVG inline so they're scriptable. */

const Ic = ({ size = 18, stroke = 1.75, children, ...rest }) => (
  <svg
    width={size}
    height={size}
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={stroke}
    strokeLinecap="round"
    strokeLinejoin="round"
    {...rest}
  >
    {children}
  </svg>
);

// Arrows / direction
const ArrowRight = (p) => (
  <Ic {...p}><path d="M5 12h14M13 5l7 7-7 7" /></Ic>
);
const ArrowLeft = (p) => (
  <Ic {...p}><path d="M19 12H5M11 19l-7-7 7-7" /></Ic>
);
const ArrowUp = (p) => (
  <Ic {...p}><path d="M12 19V5M5 12l7-7 7 7" /></Ic>
);
const ArrowDown = (p) => (
  <Ic {...p}><path d="M12 5v14M5 12l7 7 7-7" /></Ic>
);
const ArrowUpRight = (p) => (
  <Ic {...p}><path d="M7 17L17 7M7 7h10v10" /></Ic>
);
const ChevronRight = (p) => (
  <Ic {...p}><path d="M9 6l6 6-6 6" /></Ic>
);
const ChevronLeft = (p) => (
  <Ic {...p}><path d="M15 6l-6 6 6 6" /></Ic>
);
const ChevronUp = (p) => (
  <Ic {...p}><path d="M18 15l-6-6-6 6" /></Ic>
);

// Value-prop pillars
const ShieldCheck = (p) => (
  <Ic {...p}>
    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z" />
    <path d="M9 12l2 2 4-4" />
  </Ic>
);
const Landmark = (p) => (
  <Ic {...p}>
    <path d="M3 22h18" />
    <path d="M5 10h14" />
    <path d="M5 22V10M19 22V10M9 22v-7M15 22v-7" />
    <path d="M12 2L2 8h20L12 2Z" />
  </Ic>
);
const Lock = (p) => (
  <Ic {...p}>
    <rect x="4" y="11" width="16" height="10" rx="2" />
    <path d="M8 11V7a4 4 0 0 1 8 0v4" />
  </Ic>
);
const Scale = (p) => (
  <Ic {...p}>
    <path d="M12 3v18" />
    <path d="M5 21h14" />
    <path d="M5 7h14" />
    <path d="M5 7l-3 7a4 4 0 0 0 6 0L5 7Zm14 0l-3 7a4 4 0 0 0 6 0L19 7Z" />
  </Ic>
);
const Cpu = (p) => (
  <Ic {...p}>
    <rect x="4" y="4" width="16" height="16" rx="2" />
    <rect x="9" y="9" width="6" height="6" rx="1" />
    <path d="M9 1v3M15 1v3M9 20v3M15 20v3M1 9h3M1 15h3M20 9h3M20 15h3" />
  </Ic>
);

// Architecture diagram glyphs
const Building = (p) => (
  <Ic {...p}>
    <rect x="4" y="3" width="16" height="18" rx="1.5" />
    <path d="M8 7h2M14 7h2M8 11h2M14 11h2M8 15h2M14 15h2M10 21v-3h4v3" />
  </Ic>
);
const Plug = (p) => (
  <Ic {...p}>
    <path d="M9 2v6" />
    <path d="M15 2v6" />
    <path d="M6 8h12v3a6 6 0 0 1-12 0V8Z" />
    <path d="M12 17v5" />
  </Ic>
);
const SwapinGlyph = (p) => (
  // simplified Swapin-style swap glyph
  <Ic {...p}>
    <path d="M5 8h11l-3-3" />
    <path d="M19 16H8l3 3" />
  </Ic>
);

// Flow stage icons
const Coins = (p) => (
  <Ic {...p}>
    <circle cx="9" cy="9" r="6" />
    <path d="M14.7 8.3a6 6 0 1 1-5.3 10.4" />
  </Ic>
);
const Wallet = (p) => (
  <Ic {...p}>
    <path d="M3 7h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Z" />
    <path d="M3 7l3-3h12v3" />
    <circle cx="17" cy="14" r="1.5" />
  </Ic>
);
const Send = (p) => (
  <Ic {...p}>
    <path d="M22 2 11 13" />
    <path d="m22 2-7 20-4-9-9-4 20-7Z" />
  </Ic>
);
const Activity = (p) => (
  <Ic {...p}><path d="M22 12h-4l-3 9L9 3l-3 9H2" /></Ic>
);
const CheckCircle = (p) => (
  <Ic {...p}>
    <circle cx="12" cy="12" r="10" />
    <path d="m9 12 2 2 4-4" />
  </Ic>
);
const Bank = (p) => (
  <Ic {...p}>
    <path d="M3 22h18" />
    <path d="M5 21V10l7-5 7 5v11" />
    <path d="M9 21v-6h6v6" />
  </Ic>
);
const Receipt = (p) => (
  <Ic {...p}>
    <path d="M4 2v20l3-2 3 2 3-2 3 2 3-2V2H4Z" />
    <path d="M8 7h8M8 11h8M8 15h5" />
  </Ic>
);
const Users = (p) => (
  <Ic {...p}>
    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
    <circle cx="9" cy="7" r="4" />
    <path d="M22 21v-2a4 4 0 0 0-3-3.9" />
    <path d="M16 3.1A4 4 0 0 1 16 11" />
  </Ic>
);

// UI elements
const Plus = (p) => <Ic {...p}><path d="M12 5v14M5 12h14" /></Ic>;
const Copy = (p) => (
  <Ic {...p}>
    <rect x="9" y="9" width="13" height="13" rx="2" />
    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
  </Ic>
);
const Gift = (p) => (
  <Ic {...p}>
    <rect x="3" y="8" width="18" height="4" rx="1" />
    <path d="M12 8v13M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7" />
    <path d="M7.5 8a2.5 2.5 0 0 1 0-5C9 3 12 8 12 8s3-5 4.5-5a2.5 2.5 0 0 1 0 5" />
  </Ic>
);
const Scan = (p) => (
  <Ic {...p}>
    <path d="M3 7V5a2 2 0 0 1 2-2h2" />
    <path d="M17 3h2a2 2 0 0 1 2 2v2" />
    <path d="M21 17v2a2 2 0 0 1-2 2h-2" />
    <path d="M7 21H5a2 2 0 0 1-2-2v-2" />
  </Ic>
);
const X = (p) => <Ic {...p}><path d="M18 6L6 18M6 6l12 12" /></Ic>;
const Alert = (p) => (
  <Ic {...p}>
    <path d="M10.3 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z" />
    <path d="M12 9v4M12 17h.01" />
  </Ic>
);
const Star = (p) => (
  <Ic {...p}><path d="m12 2 3.09 6.26 6.91 1-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14l-5-4.88 6.91-1L12 2Z" fill="currentColor" /></Ic>
);
const Award = (p) => (
  <Ic {...p}>
    <circle cx="12" cy="8" r="6" />
    <path d="M15.5 12.5 17 22l-5-3-5 3 1.5-9.5" />
  </Ic>
);
const Shield = (p) => (
  <Ic {...p}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z" /></Ic>
);
const Globe = (p) => (
  <Ic {...p}>
    <circle cx="12" cy="12" r="10" />
    <path d="M2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20" />
  </Ic>
);

// Sample Casino brand icons (gold accent)
const ScissorMark = (p) => (
  // ornate fictional casino monogram — stylised swoosh
  <Ic {...p} stroke={1.6}>
    <path d="M5 7c4 0 8 4 8 8M5 17c4 0 8-4 8-8" />
    <path d="M13 15c2 0 4-1 4-3M17 12s2-2 2-4" />
  </Ic>
);

Object.assign(window, {
  Ic,
  ArrowRight, ArrowLeft, ArrowUp, ArrowDown, ArrowUpRight,
  ChevronRight, ChevronLeft, ChevronUp,
  ShieldCheck, Landmark, Lock, Scale, Cpu,
  Building, Plug, SwapinGlyph,
  Coins, Wallet, Send, Activity, CheckCircle, Bank, Receipt, Users,
  Plus, Copy, Gift, Scan, X, Alert, Star, Award, Shield, Globe,
  ScissorMark,
});