// Custom icon set — hand-tuned, filled + line variants share same stroke width
// All icons take a `size` and `color` prop and render inline.

const Icon = ({ path, size = 20, color = 'currentColor', fill = 'none', stroke = 2, style }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke={color}
       strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" style={style}>
    {path}
  </svg>
);

// Cup with bubble tea pearls — flame/calorie icon replacement
const IconFlame = (p) => <Icon {...p} path={<>
  <path d="M12 3c1 2 3 3.5 3 6.5a3 3 0 0 1-6 0c0-1 .3-1.8.8-2.5C10.5 5.5 11 4 12 3z"/>
  <path d="M7.5 13a5.5 5.5 0 1 0 9 0c0 2.5-2 4-4.5 4s-4.5-1.5-4.5-4z" fill={p.color || 'currentColor'} stroke="none" opacity="0.9"/>
</>} />;

const IconSugar = (p) => <Icon {...p} path={<>
  <rect x="4" y="7" width="7" height="7" rx="1"/>
  <rect x="13" y="10" width="7" height="7" rx="1"/>
  <path d="M7 7v-.5M9 7v-.5M15 10v-.5M17 10v-.5"/>
</>} />;

const IconLeaf = (p) => <Icon {...p} path={<>
  <path d="M20 4c-8 0-14 4-14 12a6 6 0 0 0 6 6c8 0 14-4 14-14-2 0-4 0-6 0z" transform="translate(-2 -1)"/>
  <path d="M5 20c3-6 7-10 13-12" transform="translate(-1 0)"/>
</>} />;

const IconTag = (p) => <Icon {...p} path={<>
  <path d="M11 3H5a2 2 0 0 0-2 2v6l10 10 8-8L11 3z"/>
  <circle cx="7.5" cy="7.5" r="1.2" fill={p.color || 'currentColor'}/>
</>} />;

const IconStar = (p) => <Icon {...p} path={<>
  <polygon points="12,3 14.6,9.3 21.5,9.9 16.2,14.4 17.9,21 12,17.4 6.1,21 7.8,14.4 2.5,9.9 9.4,9.3"/>
</>} />;

const IconHome = (p) => <Icon {...p} path={<>
  <path d="M3 11l9-8 9 8"/>
  <path d="M5 10v10h14V10"/>
  <path d="M10 20v-6h4v6"/>
</>} />;

const IconCup = (p) => <Icon {...p} path={<>
  <path d="M6 8h12l-1 12a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2L6 8z"/>
  <path d="M5 8h14"/>
  <path d="M9 4s1 1 3 1 3-1 3-1"/>
</>} />;

const IconUser = (p) => <Icon {...p} path={<>
  <circle cx="12" cy="8" r="4"/>
  <path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8"/>
</>} />;

const IconSearch = (p) => <Icon {...p} path={<>
  <circle cx="11" cy="11" r="7"/>
  <path d="M21 21l-4.3-4.3"/>
</>} />;

const IconChevron = (p) => <Icon {...p} path={<polyline points="9,6 15,12 9,18"/>} />;
const IconChevronDown = (p) => <Icon {...p} path={<polyline points="6,9 12,15 18,9"/>} />;

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

const IconPlus = (p) => <Icon {...p} path={<><path d="M12 5v14M5 12h14"/></>} />;
const IconMinus = (p) => <Icon {...p} path={<path d="M5 12h14"/>} />;
const IconCheck = (p) => <Icon {...p} path={<polyline points="5,12 10,17 19,7"/>} />;
const IconX = (p) => <Icon {...p} path={<><path d="M6 6l12 12M18 6L6 18"/></>} />;

const IconBean = (p) => <Icon {...p} path={<>
  <path d="M8 4c-4 2-5 8-2 12s9 6 12 2 1-9-3-12-4-4-7-2z"/>
  <path d="M10 8c-1 2-1 5 1 7"/>
</>} />;

const IconScale = (p) => <Icon {...p} path={<>
  <path d="M12 3v18M5 8h14"/>
  <path d="M5 8l-2 7h4l-2-7zM19 8l-2 7h4l-2-7z"/>
</>} />;

const IconBolt = (p) => <Icon {...p} path={<polygon points="13,2 3,14 12,14 11,22 21,10 12,10"/>} />;

const IconHeart = (p) => <Icon {...p} path={<path d="M12 21s-8-5-8-11a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 6-10 11-10 11z"/>} />;

const IconBookmark = (p) => <Icon {...p} path={<path d="M6 3h12v19l-6-4-6 4V3z"/>} />;

const IconFilter = (p) => <Icon {...p} path={<polygon points="3,5 21,5 14,13 14,20 10,20 10,13"/>} />;

const IconInfo = (p) => <Icon {...p} path={<>
  <circle cx="12" cy="12" r="9"/>
  <path d="M12 8v1M12 11v5"/>
</>} />;

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

const IconSparkle = (p) => <Icon {...p} path={<>
  <path d="M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5z"/>
  <path d="M19 15l.8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8z"/>
</>} />;

// Shuffle — two crossing arrows (用于"换换口味")
const IconShuffle = (p) => <Icon {...p} path={<>
  <path d="M3 7h3l10 10h5"/>
  <polyline points="17,4 21,7 17,10"/>
  <path d="M3 17h3l3-3"/>
  <path d="M14 10l2-2h5"/>
  <polyline points="17,14 21,17 17,20"/>
</>} />;

// Shield with check — 避雷安全感
const IconShield = (p) => <Icon {...p} path={<>
  <path d="M12 3l8 3v6c0 4.5-3.2 8.5-8 10-4.8-1.5-8-5.5-8-10V6l8-3z"/>
  <polyline points="8.5,12 11,14.5 15.5,10"/>
</>} />;

// Clock — 用于"再看看 / 稍后再决定"
const IconClock = (p) => <Icon {...p} path={<>
  <circle cx="12" cy="12" r="9"/>
  <polyline points="12,7 12,12 15.5,14"/>
</>} />;

Object.assign(window, {
  IconFlame, IconSugar, IconLeaf, IconTag, IconStar, IconHome, IconCup, IconUser,
  IconSearch, IconChevron, IconChevronDown, IconLocation, IconPlus, IconMinus,
  IconCheck, IconX, IconBean, IconScale, IconBolt, IconHeart, IconBookmark,
  IconFilter, IconInfo, IconArrowRight, IconSparkle, IconShuffle, IconShield,
  IconClock,
});