// Geometric line icons - no emoji per brand. 24x24 viewbox.

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

// Ball - a tennis/padel ball with seam
const IconBall = (p) => (
  <Icon {...p}>
    <circle cx="12" cy="12" r="8.5" />
    <path d="M4.5 9.5c2 1 6 1.5 7.5 1.5s5.5-.5 7.5-1.5" />
    <path d="M4.5 14.5c2-1 6-1.5 7.5-1.5s5.5.5 7.5 1.5" />
  </Icon>
);

// Tournament bracket
const IconBracket = (p) => (
  <Icon {...p}>
    <path d="M3 6h4l3 3v6l-3 3H3" />
    <path d="M21 6h-4l-3 3v6l3 3h4" />
    <path d="M10 12h4" />
  </Icon>
);

// Chart / ELO
const IconChart = (p) => (
  <Icon {...p}>
    <path d="M4 20V8" />
    <path d="M10 20V4" />
    <path d="M16 20v-8" />
    <path d="M22 20H2" />
  </Icon>
);

// Map pin
const IconMap = (p) => (
  <Icon {...p}>
    <path d="M12 21s7-6.5 7-12a7 7 0 1 0-14 0c0 5.5 7 12 7 12z" />
    <circle cx="12" cy="9" r="2.5" />
  </Icon>
);

// Coach / whistle
const IconCoach = (p) => (
  <Icon {...p}>
    <circle cx="9" cy="13" r="4.5" />
    <path d="M13.5 12L20 9.5" />
    <path d="M14 14l3 1.5" />
    <circle cx="9" cy="13" r="1" fill="currentColor" />
  </Icon>
);

// Chat
const IconChat = (p) => (
  <Icon {...p}>
    <path d="M21 12a8 8 0 1 1-3.5-6.6L21 4l-1 3.5A7.9 7.9 0 0 1 21 12z" />
    <circle cx="9" cy="12" r=".8" fill="currentColor" stroke="none" />
    <circle cx="12.5" cy="12" r=".8" fill="currentColor" stroke="none" />
    <circle cx="16" cy="12" r=".8" fill="currentColor" stroke="none" />
  </Icon>
);

// Bell
const IconBell = (p) => (
  <Icon {...p}>
    <path d="M6 16V11a6 6 0 1 1 12 0v5l1.5 2H4.5L6 16z" />
    <path d="M10 20a2 2 0 0 0 4 0" />
  </Icon>
);

// Calendar
const IconCal = (p) => (
  <Icon {...p}>
    <rect x="3.5" y="5" width="17" height="15" rx="2" />
    <path d="M3.5 10h17" />
    <path d="M8 3v4M16 3v4" />
  </Icon>
);

// Check
const IconCheck = (p) => (
  <Icon {...p} stroke={1.8}>
    <path d="M4 12.5l5 4 11-10" />
  </Icon>
);

// Plus
const IconPlus = (p) => (
  <Icon {...p}>
    <path d="M12 5v14M5 12h14" />
  </Icon>
);

// Arrow right
const IconArrow = (p) => (
  <Icon {...p}>
    <path d="M5 12h14M13 6l6 6-6 6" />
  </Icon>
);

// App store glyphs
const IconApple = (p) => (
  <Icon {...p} stroke={1.4}>
    <path d="M16.5 12.6c0-2.3 1.9-3.4 2-3.5-1.1-1.6-2.8-1.8-3.4-1.8-1.4-.1-2.8.8-3.5.8s-1.8-.8-3-.8c-1.6 0-3 .9-3.8 2.3-1.6 2.9-.4 7.1 1.2 9.4.8 1.1 1.7 2.4 2.9 2.4 1.2 0 1.6-.8 3-.8s1.8.8 3 .8c1.2 0 2-1.1 2.8-2.3.9-1.3 1.2-2.5 1.2-2.6-.1 0-2.4-.9-2.4-3.7z" fill="currentColor" stroke="none" />
    <path d="M14 5.5c.6-.7 1-1.7.9-2.7-.9 0-2 .6-2.6 1.3-.5.6-1 1.6-.9 2.6 1 .1 2-.5 2.6-1.2z" fill="currentColor" stroke="none" />
  </Icon>
);

const IconAndroid = (p) => (
  <Icon {...p} stroke={1.4}>
    <path d="M4 16v-3a8 8 0 0 1 16 0v3" />
    <path d="M2.5 16h19" />
    <path d="M7 5l1.5 2.5" />
    <path d="M17 5l-1.5 2.5" />
    <circle cx="9" cy="12" r=".9" fill="currentColor" stroke="none" />
    <circle cx="15" cy="12" r=".9" fill="currentColor" stroke="none" />
  </Icon>
);

const IconUser = (p) => (
  <Icon {...p}>
    <circle cx="12" cy="8" r="3.5" />
    <path d="M5 20c1-3.5 4-5.5 7-5.5s6 2 7 5.5" />
  </Icon>
);

const IconClub = (p) => (
  <Icon {...p}>
    <path d="M3 20V8l9-5 9 5v12" />
    <path d="M9 20v-6h6v6" />
    <path d="M3 20h18" />
  </Icon>
);

const IconWhistle = (p) => (
  <Icon {...p}>
    <path d="M3 11a6 6 0 1 1 12 0 6 6 0 0 1-12 0z" />
    <path d="M14 9l7-3v6l-7-1" />
    <circle cx="9" cy="11" r="1.4" fill="currentColor" stroke="none" />
  </Icon>
);

const IconHome = (p) => (
  <Icon {...p}>
    <path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-7h-6v7H4a1 1 0 0 1-1-1v-9z" />
  </Icon>
);

const IconSearch = (p) => (
  <Icon {...p}>
    <circle cx="11" cy="11" r="6.5" />
    <path d="M16 16l4 4" />
  </Icon>
);

const IconHeart = (p) => (
  <Icon {...p}>
    <path d="M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.7A4 4 0 0 1 19 10c0 5.5-7 10-7 10z" />
  </Icon>
);

const IconStar = (p) => (
  <Icon {...p}>
    <path d="M12 3l2.6 5.5 6 .7-4.4 4.2 1.1 6-5.3-3-5.3 3 1.1-6L3.4 9.2l6-.7L12 3z" />
  </Icon>
);

const IconClock = (p) => (
  <Icon {...p}>
    <circle cx="12" cy="12" r="8.5" />
    <path d="M12 7v5l3 2" />
  </Icon>
);

Object.assign(window, {
  Icon, IconBall, IconBracket, IconChart, IconMap, IconCoach, IconChat, IconBell,
  IconCal, IconCheck, IconPlus, IconArrow, IconApple, IconAndroid, IconUser,
  IconClub, IconWhistle, IconHome, IconSearch, IconHeart, IconStar, IconClock
});