// icons.jsx, lucide icon factory + custom brand icons + ImageWithFallback
const { useState } = React;

// Convert a lucide IconNode list into an SVG React element.
function hyphenToCamel(key) {
  return key.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
}

function convAttrs(attrs) {
  const conv = {};
  for (const k in attrs) conv[hyphenToCamel(k)] = attrs[k];
  return conv;
}

function makeLucideIcon(name) {
  function LucideIcon({ className, style, strokeWidth, ...rest }) {
    const lib = (window.lucide && window.lucide.icons) || {};
    const node = lib[name];
    // node shape: ["svg", svgAttrs, [[childTag, childAttrs], ...]]
    const svgAttrs = node ? convAttrs(node[1] || {}) : {
      xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24",
      fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round",
    };
    const childList = node ? (node[2] || []) : [];
    const children = childList.map((child, i) =>
      React.createElement(child[0], { key: i, ...convAttrs(child[1] || {}) })
    );
    const props = {
      ...svgAttrs,
      ...(strokeWidth != null ? { strokeWidth } : {}),
      className,
      style,
      "aria-hidden": true,
      ...rest,
    };
    return React.createElement("svg", props, children);
  }
  LucideIcon.displayName = name;
  return LucideIcon;
}

const LUCIDE_NAMES = [
  "ArrowRight", "ArrowLeft", "ArrowUpRight", "ShieldCheck", "Flame", "PlayCircle",
  "Globe2", "Layers", "BadgeCheck", "Headphones", "Award", "HardHat", "Footprints",
  "Shirt", "Mountain", "Scissors", "Cpu", "CheckCircle2", "Menu", "Search",
  "ChevronDown", "ChevronRight", "X", "ClipboardCheck", "Wrench", "GraduationCap",
  "LifeBuoy", "Truck", "KeyRound", "MessageSquare", "FileCheck", "Gauge",
  "ScrollText", "Building2", "Compass", "HeartHandshake", "Target", "Sparkles",
  "Users", "Calendar", "Tag", "PenTool", "MapPinned", "Download", "FileText",
  "SlidersHorizontal",
];

const LucideIcons = {};
LUCIDE_NAMES.forEach((n) => { LucideIcons[n] = makeLucideIcon(n); });

// ---- Custom brand / contact icons (filled, from source icons.tsx) ----
const baseProps = (size) => ({
  width: size || "1em",
  height: size || "1em",
  fill: "currentColor",
  xmlns: "http://www.w3.org/2000/svg",
  "aria-hidden": true,
});

function LineIcon({ size, ...rest }) {
  return (
    <svg {...baseProps(size)} viewBox="-5.5 0 32 32" {...rest}>
      <path d="M10.656 5.938c5.938 0 10.719 3.875 10.719 8.688 0 2.344-1.156 4.406-2.969 6.031-2.938 2.906-8 5.844-8.531 5.625-0.875-0.344 0.656-2.219 0.031-3.031-0.094-0.125-0.438-0.094-1.063-0.188-5.156-0.688-8.844-4.094-8.844-8.469 0-4.813 4.75-8.656 10.656-8.656zM4.563 17.5h1.813c0.313 0 0.5-0.25 0.5-0.563 0-0.219-0.156-0.5-0.563-0.5h-1.469c-0.125 0-0.125-0.125-0.125-0.563v-3.156c0-0.281-0.188-0.563-0.531-0.563-0.313 0-0.531 0.25-0.531 0.563v3.813c0 0.844 0.406 0.969 0.906 0.969zM8.656 17.063v-4.344c0-0.281-0.219-0.563-0.563-0.563-0.281 0-0.531 0.25-0.531 0.563v4.344c0 0.281 0.219 0.5 0.563 0.5 0.281 0 0.531-0.219 0.531-0.5zM13.781 16.469v-3.813c0-0.281-0.219-0.5-0.563-0.5-0.25 0-0.531 0.156-0.531 0.5v2.75l-1.813-2.531c-0.25-0.438-0.563-0.719-0.938-0.719-0.469 0-0.5 0.375-0.5 0.906v4c0 0.281 0.219 0.5 0.531 0.5 0.281 0 0.531-0.188 0.531-0.5v-2.844l1.813 2.531c0.406 0.531 0.5 0.813 1 0.813 0.344 0 0.469-0.313 0.469-1.094zM17.281 14.313h-1.594v-0.906c0-0.094 0.031-0.219 0.188-0.219h1.406c0.344 0 0.563-0.188 0.563-0.531 0-0.406-0.313-0.531-0.594-0.531h-1.813c-0.563 0-0.844 0.375-0.844 0.875v3.531c0 0.625 0.25 0.969 0.844 0.969h1.844c0.406 0 0.563-0.25 0.563-0.563 0-0.406-0.313-0.531-0.563-0.531h-1.375c-0.125 0-0.219-0.094-0.219-0.188v-0.875h1.656c0.406 0 0.469-0.313 0.469-0.531 0-0.313-0.25-0.5-0.531-0.5z" />
    </svg>
  );
}

function LinkedInIcon({ size, ...rest }) {
  return (
    <svg {...baseProps(size)} viewBox="0 0 448 512" {...rest}>
      <path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z" />
    </svg>
  );
}

function PhoneIcon({ size, ...rest }) {
  return (
    <svg {...baseProps(size)} viewBox="0 0 24 24" {...rest}>
      <path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57a1 1 0 0 0-1.02.24l-2.2 2.2a15.05 15.05 0 0 1-6.59-6.59l2.2-2.2a1 1 0 0 0 .25-1.02A11.36 11.36 0 0 1 8.5 4a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1c0 9.39 7.61 17 17 17a1 1 0 0 0 1-1v-3.5a1 1 0 0 0-1-1z" />
    </svg>
  );
}

function MailIcon({ size, ...rest }) {
  return (
    <svg {...baseProps(size)} viewBox="0 0 24 24" {...rest}>
      <path d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4.24-8 5-8-5V6l8 5 8-5v2.24z" />
    </svg>
  );
}

function MapPinIcon({ size, ...rest }) {
  return (
    <svg {...baseProps(size)} viewBox="0 0 24 24" {...rest}>
      <path d="M12 2a8 8 0 0 0-8 8c0 5.4 7.05 11.5 7.35 11.76a1 1 0 0 0 1.3 0C12.95 21.5 20 15.4 20 10a8 8 0 0 0-8-8zm0 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" />
    </svg>
  );
}

function ClockIcon({ size, ...rest }) {
  return (
    <svg {...baseProps(size)} viewBox="0 0 24 24" {...rest}>
      <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm4.24 13.66-5.24-3.2V6h1.5v5.62l4.5 2.74-.76 1.3z" />
    </svg>
  );
}

// ---- ImageWithFallback ----
const ERROR_IMG_SRC =
  "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iODgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIuMyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIzLjciPjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjU2IiBoZWlnaHQ9IjU2IiByeD0iNiIvPjxwYXRoIGQ9Im0xNiA1OCAxNi0xOCAzMiAzMiIvPjxjaXJjbGUgY3g9IjUzIiBjeT0iMzUiIHI9IjciLz48L3N2Zz4KCg==";

function ImageWithFallback(props) {
  const [didError, setDidError] = useState(false);
  const { src, alt, style, className, ...rest } = props;
  const handleError = () => setDidError(true);
  return didError ? (
    <div className={`inline-block bg-gray-100 text-center align-middle ${className ?? ""}`} style={style}>
      <div className="flex items-center justify-center w-full h-full">
        <img src={ERROR_IMG_SRC} alt="Error loading image" {...rest} data-original-url={src} />
      </div>
    </div>
  ) : (
    <img src={src} alt={alt} className={className} style={style} {...rest} onError={handleError} />
  );
}

// ---- Brand logo registry ----
const BRAND_LOGOS = {
  // Safety
  "Red Wing": "assets/brands/red-wing.png",
  "Dunlop": "assets/brands/dunlop.webp",
  "Edge": "assets/brands/edge.png",
  "SafetyLink": "assets/brands/safetylink.png",
  "Ringers Gloves": "assets/brands/ringers.png",
  "MSA": "assets/brands/msa.png",
  "Petzl": "assets/brands/petzl.png",
  "Honeywell": "assets/brands/honeywell.png",
  "Haws": "assets/brands/haws.png",
  // Welding
  "Kemppi": "assets/brands/kemppi.png",
  "Lincoln Electric": "assets/brands/lincoln-electric.png",
  "Auweld": "assets/brands/auweld.png",
  "Bortech": "assets/brands/bortech.webp",
  "Climax": "assets/brands/climax.png",
  "Flexovit": "assets/brands/flexovit.png",
  "Hobart": "assets/brands/hobart.png",
  "Protem": "assets/brands/protem.jpg",
  "Magnatech": "assets/brands/magnatech.png",
  "Procut": "assets/brands/procut.png",
  "Tempil": "assets/brands/tempil.png",
  "Victor": "assets/brands/victor.png",
  "Weiler": "assets/brands/weiler.png",
};
// Resolve a relative asset path through the standalone-bundle resource map
// when present; otherwise return the path as-is (dev mode).
function resAsset(path) {
  return (window.__resources && window.__resources[path]) || path;
}
function brandLogo(name) {
  const p = BRAND_LOGOS[name];
  return p ? resAsset(p) : null;
}

Object.assign(window, LucideIcons, {
  LineIcon, LinkedInIcon, PhoneIcon, MailIcon, MapPinIcon, ClockIcon,
  ImageWithFallback,
  BRAND_LOGOS, brandLogo, resAsset,
  LOGO_SRC: resAsset("assets/Leeden_logo.png"),
});