/* Shared icon + UI primitives (line icons, no emoji) */

const Icon = ({ name, size = 18, strokeWidth = 1.6, className = '' }) => {
  const s = size, sw = strokeWidth;
  const common = {
    width: s, height: s, viewBox: '0 0 24 24', fill: 'none',
    stroke: 'currentColor', strokeWidth: sw, strokeLinecap: 'round', strokeLinejoin: 'round',
    className
  };
  const paths = {
    // navigation
    search: <><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></>,
    cart: <><path d="M3 4h2l2.4 11.2a2 2 0 0 0 2 1.6h7.8a2 2 0 0 0 2-1.5L21 8H6"/><circle cx="10" cy="20" r="1.2"/><circle cx="18" cy="20" r="1.2"/></>,
    menu: <><path d="M4 6h16M4 12h16M4 18h16"/></>,
    close: <><path d="M6 6l12 12M6 18L18 6"/></>,
    chevronDown: <><path d="M6 9l6 6 6-6"/></>,
    chevronRight: <><path d="M9 6l6 6-6 6"/></>,
    chevronLeft: <><path d="M15 6l-6 6 6 6"/></>,
    arrowRight: <><path d="M4 12h16M14 6l6 6-6 6"/></>,
    arrowUpRight: <><path d="M7 17L17 7M9 7h8v8"/></>,
    arrowUp: <><path d="M12 19V6M6 12l6-6 6 6"/></>,
    plus: <><path d="M12 5v14M5 12h14"/></>,
    minus: <><path d="M5 12h14"/></>,
    check: <><path d="M5 12l4 4L19 7"/></>,
    // product categories (industrial, line-drawn)
    pressure: <><path d="M5 20h14M7 20V11l5-6 5 6v9M12 5v4"/><circle cx="12" cy="14" r="2"/></>,
    vacuum: <><path d="M6 20V9a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v11"/><path d="M4 20h16"/><path d="M10 6V3h4v3"/><circle cx="12" cy="13" r="2"/></>,
    sofa: <><path d="M4 11V9a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v2"/><path d="M2 14a2 2 0 0 1 2-2 2 2 0 0 1 2 2v3h12v-3a2 2 0 0 1 4 0v5H2z"/></>,
    steam: <><path d="M7 20h10M9 20v-4M15 20v-4M8 16h8l-1-4H9z"/><path d="M10 8c0-1 1-1 1-2s-1-1-1-2M14 8c0-1 1-1 1-2s-1-1-1-2"/></>,
    tool: <><path d="M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4L15 12l-3-3z"/></>,
    nozzle: <><path d="M3 12h5l2-2h6l3 3-3 3h-6l-2-2H3z"/><path d="M21 9v6"/></>,
    // trust / service
    shield: <><path d="M12 3l8 3v6c0 4-3.5 7.5-8 9-4.5-1.5-8-5-8-9V6z"/><path d="M9 12l2 2 4-4"/></>,
    truck: <><rect x="1" y="7" width="13" height="9" rx="1"/><path d="M14 10h4l3 3v3h-7"/><circle cx="6" cy="18" r="1.8"/><circle cx="18" cy="18" r="1.8"/></>,
    wrench: <><path d="M15 7a4 4 0 1 1-3.5 6l-6 6-2-2 6-6A4 4 0 0 1 15 7z"/></>,
    credit: <><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20M6 15h4"/></>,
    clock: <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>,
    phone: <><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.6a2 2 0 0 1-.5 2.1L8 9.6a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.5c.8.3 1.7.5 2.6.6A2 2 0 0 1 22 16.9z"/></>,
    pin: <><path d="M12 22s7-7 7-12a7 7 0 0 0-14 0c0 5 7 12 7 12z"/><circle cx="12" cy="10" r="2.5"/></>,
    mail: <><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></>,
    star: <><path d="M12 3l2.8 5.7 6.2.9-4.5 4.4 1 6.2L12 17.3 6.5 20.2l1-6.2L3 9.6l6.2-.9z"/></>,
    // UI
    filter: <><path d="M4 5h16M6 12h12M10 19h4"/></>,
    grid: <><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></>,
    list: <><path d="M3 6h18M3 12h18M3 18h18"/></>,
    heart: <><path d="M12 20s-7-4.4-9-9A5 5 0 0 1 12 6a5 5 0 0 1 9 5c-2 4.6-9 9-9 9z"/></>,
    user: <><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></>,
    whatsapp: <path fill="currentColor" stroke="none" d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347M12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413A11.815 11.815 0 0 0 12.05 0M12.05 21.785h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884"/>,
    ig: <><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.8" fill="currentColor" stroke="none"/></>,
    fb: <><path d="M15 3h-3a4 4 0 0 0-4 4v3H5v4h3v7h4v-7h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></>,
    settings: <><circle cx="12" cy="12" r="3"/><path d="M19 12a7 7 0 0 0-.1-1.2l2-1.5-2-3.4-2.3.9a7 7 0 0 0-2-1.2L14 3h-4l-.6 2.6a7 7 0 0 0-2 1.2l-2.3-.9-2 3.4 2 1.5A7 7 0 0 0 5 12c0 .4 0 .8.1 1.2l-2 1.5 2 3.4 2.3-.9c.6.5 1.3.9 2 1.2L10 21h4l.6-2.6c.7-.3 1.4-.7 2-1.2l2.3.9 2-3.4-2-1.5c.1-.4.1-.8.1-1.2z"/></>,
    zap: <><path d="M13 2L4 14h7l-1 8 9-12h-7z"/></>,
    drop: <><path d="M12 3s-7 7-7 12a7 7 0 0 0 14 0c0-5-7-12-7-12z"/></>,
    box: <><path d="M21 8l-9-5-9 5v8l9 5 9-5z"/><path d="M3 8l9 5 9-5M12 13v10"/></>,
    play: <><circle cx="12" cy="12" r="9"/><path d="M10 8l6 4-6 4z" fill="currentColor" stroke="none"/></>,
    fire: <><path d="M12 3c2 4-1 6 1 8 1 1 3 1 3 4a5 5 0 0 1-10 0c0-2 2-3 2-5 0-3 2-4 4-7z"/></>,
    rotate: <><path d="M3 12a9 9 0 0 1 15-6.7L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16"/><path d="M3 21v-5h5"/></>,
    award: <><circle cx="12" cy="9" r="6"/><path d="M8 13l-2 8 6-3 6 3-2-8"/></>,
    // checkout
    bank:    <><path d="M3 10l9-6 9 6"/><path d="M5 10v8M9 10v8M15 10v8M19 10v8"/><path d="M3 21h18"/></>,
    wallet:  <><path d="M3 7a2 2 0 0 1 2-2h13a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M16 13h3"/><path d="M3 9h18"/></>,
    store:   <><path d="M3 9l1.5-5h15L21 9"/><path d="M5 9v11h14V9"/><path d="M9 20v-6h6v6"/><path d="M3 9a3 3 0 0 0 6 0 3 3 0 0 0 6 0 3 3 0 0 0 6 0"/></>,
    tag:     <><path d="M3 12l9-9h9v9l-9 9z"/><circle cx="16" cy="8" r="1.5"/></>,
    package: <><path d="M21 8l-9-5-9 5v8l9 5 9-5z"/><path d="M3 8l9 5 9-5M12 13v10"/><path d="M7.5 5.5l9 5"/></>,
    edit:    <><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/></>,
  };
  return <svg {...common}>{paths[name] ?? null}</svg>;
};

// Stars for reviews
const Stars = ({ value = 5, size = 14 }) => (
  <span style={{ display: 'inline-flex', gap: 2, color: '#F2C94C' }}>
    {Array.from({ length: 5 }).map((_, i) => (
      <Icon key={i} name="star" size={size} strokeWidth={0} className="" />
    )).map((el, i) => (
      <svg key={i} width={size} height={size} viewBox="0 0 24 24"
           fill={i < Math.round(value) ? 'currentColor' : 'none'}
           stroke="currentColor" strokeWidth="1.4">
        <path d="M12 3l2.8 5.7 6.2.9-4.5 4.4 1 6.2L12 17.3 6.5 20.2l1-6.2L3 9.6l6.2-.9z"/>
      </svg>
    ))}
  </span>
);

// Logo — real PNG from brand assets; filter inverts for dark backgrounds
const Logo = ({ inverted = false, height = 28 }) => (
  <img
    src="public/logo.png"
    alt="RC Powerclean"
    style={{
      height, width: 'auto', display: 'block',
      filter: inverted ? 'brightness(0) invert(1)' : 'none',
    }}
  />
);

// Badge
const Badge = ({ children, variant = 'default' }) => {
  const styles = {
    default: { background: 'var(--bg-2)', color: 'var(--ink-2)' },
    red:     { background: 'var(--accent)', color: '#fff' },
    dark:    { background: 'var(--ink)', color: '#fff' },
    outline: { background: 'transparent', color: 'var(--ink-2)', border: '1px solid var(--line-2)' },
    green:   { background: '#FBE9E8', color: '#a00e0c' },
  };
  return (
    <span style={{
      ...styles[variant],
      display: 'inline-flex', alignItems: 'center', gap: 4,
      padding: '3px 8px', borderRadius: 4,
      fontSize: 11, fontWeight: 600, letterSpacing: '0.02em',
      textTransform: 'uppercase', fontFamily: 'var(--font-mono)'
    }}>{children}</span>
  );
};

Object.assign(window, { Icon, Stars, Logo, Badge });