// ABLY — Icons (line, marine-blue style)
const Icon = ({ name, size = 20, stroke = 1.5, ...props }) => {
  const common = {
    width: size,
    height: size,
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    strokeWidth: stroke,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    ...props,
  };
  const paths = {
    check: <polyline points="4 12 10 18 20 6" />,
    arrowRight: <><line x1="5" y1="12" x2="19" y2="12" /><polyline points="13 6 19 12 13 18" /></>,
    arrowLeft: <><line x1="19" y1="12" x2="5" y2="12" /><polyline points="11 6 5 12 11 18" /></>,
    plus: <><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></>,
    close: <><line x1="6" y1="6" x2="18" y2="18" /><line x1="18" y1="6" x2="6" y2="18" /></>,
    star: <polygon points="12 2 15 9 22 9.5 17 14.5 18.5 22 12 18 5.5 22 7 14.5 2 9.5 9 9 12 2" />,
    // Trust icons
    concierge: <><path d="M4 21v-2a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v2" /><circle cx="12" cy="8" r="4" /></>,
    layers: <><polygon points="12 3 22 8.5 12 14 2 8.5 12 3" /><polyline points="2 15 12 20.5 22 15" /></>,
    sparkle: <><path d="M12 3l2 6 6 2-6 2-2 6-2-6-6-2 6-2 2-6z" /></>,
    chat: <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />,
    // Add-on icons
    chef: <><path d="M6 16h12v4H6z" /><path d="M6 16a4 4 0 0 1-2-7.5 4 4 0 0 1 6-3 4 4 0 0 1 8 3 4 4 0 0 1-2 7.5" /></>,
    clock: <><circle cx="12" cy="12" r="9" /><polyline points="12 7 12 12 15 14" /></>,
    sparkles: <><path d="M12 3v18M3 12h18" strokeOpacity="0.4" /><path d="M5 5l2 2M17 17l2 2M5 19l2-2M17 7l2-2" /></>,
    glass: <><path d="M8 3h8l-1 8a3 3 0 0 1-6 0z" /><line x1="12" y1="13" x2="12" y2="21" /><line x1="8" y1="21" x2="16" y2="21" /></>,
    music: <><circle cx="6" cy="18" r="3" /><circle cx="18" cy="16" r="3" /><line x1="9" y1="18" x2="9" y2="6" /><line x1="21" y1="16" x2="21" y2="4" /><path d="M9 6l12-2" /></>,
    camera: <><path d="M3 8h3l2-3h8l2 3h3v11H3z" /><circle cx="12" cy="13" r="4" /></>,
    car: <><path d="M3 13l2-6h14l2 6v5H3z" /><circle cx="7" cy="18" r="1.5" /><circle cx="17" cy="18" r="1.5" /></>,
    sun: <><circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" /></>,
    wave: <path d="M3 12c2 0 2-2 4-2s2 2 4 2 2-2 4-2 2 2 4 2 2-2 4-2M3 18c2 0 2-2 4-2s2 2 4 2 2-2 4-2 2 2 4 2 2-2 4-2" />,
    cake: <><path d="M3 11v9h18v-9" /><path d="M5 11V7h14v4" /><path d="M12 7V4M12 4l-1 1M12 4l1 1" /></>,
    crown: <><path d="M3 19h18M5 19l-2-8 5 3 4-7 4 7 5-3-2 8" /></>,
    // Inclusion icons
    bar: <><rect x="5" y="3" width="14" height="4" rx="1" /><path d="M6 7l3 6v8h6v-8l3-6" /></>,
    snack: <><circle cx="12" cy="12" r="9" /><circle cx="9" cy="10" r="0.5" fill="currentColor"/><circle cx="14" cy="13" r="0.5" fill="currentColor"/><circle cx="11" cy="15" r="0.5" fill="currentColor"/></>,
    toy: <><circle cx="12" cy="12" r="4" /><circle cx="12" cy="12" r="9" /></>,
    paddle: <><path d="M9 3h6l-1 10h-4z" /><line x1="12" y1="13" x2="12" y2="21" /></>,
    snorkel: <><circle cx="11" cy="14" r="4" /><path d="M14 11V5h3" /></>,
    mat: <><rect x="3" y="9" width="18" height="6" rx="3" /><path d="M3 12h18" strokeOpacity="0.4"/></>,
    speaker: <><rect x="6" y="3" width="12" height="18" rx="2" /><circle cx="12" cy="14" r="3" /><circle cx="12" cy="7" r="1" /></>,
    shade: <><path d="M3 12c0-5 4-9 9-9s9 4 9 9" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="12" y1="12" x2="12" y2="21" /></>,
    sunbathe: <><circle cx="12" cy="6" r="2" /><path d="M5 16h14M5 20h14M8 12l4-4 4 4" /></>,
    bath: <><path d="M3 12h18v5a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3z" /><path d="M6 12V6a2 2 0 0 1 4 0" /></>,
    snow: <><line x1="12" y1="3" x2="12" y2="21" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="5" y1="5" x2="19" y2="19" /><line x1="19" y1="5" x2="5" y2="19" /></>,
    deco: <><path d="M12 3l2 5 5 1-4 4 1 6-4-3-4 3 1-6-4-4 5-1z" /></>,
    // Step icons
    compass: <><circle cx="12" cy="12" r="9" /><polygon points="14 10 12 15 10 14 12 9" /></>,
    sliders: <><line x1="4" y1="6" x2="20" y2="6" /><line x1="4" y1="12" x2="20" y2="12" /><line x1="4" y1="18" x2="20" y2="18" /><circle cx="8" cy="6" r="2" fill="var(--offwhite)" /><circle cx="16" cy="12" r="2" fill="var(--offwhite)" /><circle cx="11" cy="18" r="2" fill="var(--offwhite)" /></>,
    quote: <><rect x="4" y="6" width="16" height="14" rx="2" /><line x1="8" y1="11" x2="16" y2="11" /><line x1="8" y1="15" x2="13" y2="15" /></>,
    anchor: <><circle cx="12" cy="6" r="2" /><line x1="12" y1="8" x2="12" y2="21" /><line x1="8" y1="12" x2="16" y2="12" /><path d="M3 17a9 9 0 0 0 18 0" /></>,
    yacht: <><path d="M2 18l2-2h16l2 2-3 3H5z" /><path d="M5 16V8l7-4 7 4v8" /></>,
    wa: <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.297-.347.446-.52.149-.174.198-.298.297-.497.1-.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-.347m-5.421 7.403h-.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.884m8.413-18.297A11.815 11.815 0 0 0 12.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.413Z" />,
    play: <polygon points="6 4 20 12 6 20 6 4" />,
    x: <><line x1="5" y1="5" x2="19" y2="19" /><line x1="19" y1="5" x2="5" y2="19" /></>,
    chevronLeft: <polyline points="15 5 8 12 15 19" />,
    chevronRight: <polyline points="9 5 16 12 9 19" />,
    expand: <><polyline points="9 3 3 3 3 9" /><polyline points="15 21 21 21 21 15" /><line x1="3" y1="3" x2="10" y2="10" /><line x1="21" y1="21" x2="14" y2="14" /></>,
    pause: <><rect x="6" y="4" width="4" height="16" rx="1" /><rect x="14" y="4" width="4" height="16" rx="1" /></>,
    shield: <><path d="M12 3l8 3v6c0 5-3.5 8.5-8 9-4.5-0.5-8-4-8-9V6z" /><polyline points="9 12 11.5 14.5 16 10" /></>,
    bolt: <polygon points="13 2 4 14 11 14 10 22 20 10 13 10 14 2" />,
    calendar: <><rect x="3" y="5" width="18" height="16" rx="2" /><line x1="3" y1="10" x2="21" y2="10" /><line x1="8" y1="3" x2="8" y2="7" /><line x1="16" y1="3" x2="16" y2="7" /></>,
    calendarApprox: <><rect x="3" y="5" width="18" height="16" rx="2" /><line x1="3" y1="10" x2="21" y2="10" /><line x1="8" y1="3" x2="8" y2="7" /><line x1="16" y1="3" x2="16" y2="7" /><text x="12" y="18" textAnchor="middle" fontSize="8" stroke="none" fill="currentColor" fontFamily="sans-serif" fontWeight="700">?</text></>,
  };
  return <svg {...common}>{paths[name] || null}</svg>;
};

window.Icon = Icon;